III Escola Regional de Informática do Piauí. Livro Anais - Artigos e Minicursos, v. 1, n. 1, p. 236-241, jun, 2017.

www.eripi.com.br/2017 - ISBN: 978-85-7669-395-6

MIPSapp: Software educativo para o aprendizado do MIPS

monociclo
Jonathas Evangelista da Silveira1 , Ivan Saraiva Silva2
1
Universidade Federal do Piauı́ (UFPI)
joninhaevang@gmail.com

ivan@ufpi.edu.br

Abstract. Computer architecture is an area of computing that deals specifically

with hardware and its implications. Your teaching becomes relevant to anyone
who wants to join the computer science. Learning how it works from low to high
level makes the student better able to develop solutions. This article proposes
to present a software, the MIPSapp, that helps to understand of a much studied
architecture in the universities, called MIPS Monociclo. This paper also details
the operation and importance of the program. The web application was deve-
loped with the languages: HTML, CSS, Javascript. This software is a tool that
aims to help teachers and students. asdfadsfasdf

Resumo. Arquitetura de computadores é uma área da computação que trata

especificamente do hardware e suas implicações. O seu ensino se torna rele-
vante para quem quer ingressar na computação. Aprender como funciona do
baixo nı́vel até o alto nı́vel torna o aluno mais capacitado para desenvolver
soluções. Este artigo se propõe a apresentar um software, o MIPSapp, que
ajuda no entendimento de uma arquitetura muito estudada nas universidades,
a saber, MIPS Monociclo. O escrito também detalha o funcionamento e a im-
portância do programa. A aplicação web foi desenvolvida com as linguagens:
HTML, CSS, Javascript. Esse software é uma ferramenta que tem o objetivo de
ajudar professores e alunos.

1. Introdução
A análise e aprofundamento da arquitetura de computadores traz a compreensão de como
os programas são traduzidos, do funcionamento da interface entre o software e hardware,
do desempenho de um programa, dentre outros assuntos.
O conhecimento acerca da arquitetura do sistema para o qual se está desenvol-
vendo algo, confere ao programador maior controle e precisão, tanto durante a fase de
implementação quanto na fase de correção de erros. Estes se preocupam com o desem-
penho de seus programas, pois gerar resultados rápidos para o usuário é essencial para
um bom software. Nas décadas de 1960 e 1970, uma grande limitação no desempenho
dos computadores era o tamanho da memória do computador. Assim, os programadores
frequentemente seguiam um princı́pio simples: minimizar o espaço ocupado na memória
para tornar os programas mais rápidos [Hennessy and Patterson 2011].
Entendendo a importância de uma boa educação em hardware, neste artigo, o foco
é um software que ajude professores e alunos no processo de aprendizado. Diferente de
uma apresentação de slides, a solução apresenta de forma interativa, uma arquitetura es-
pecı́fica, o MIPS Monociclo. Em 2002 quase 100 milhões desses microprocessadores
foram fabricados. Eles podem ser encontrados em produtos da ATI technologies, Braod-
com, Cisco, NEC, Nintendo, Silicon Graphics, Sony,Texas Instruments e Toshiba, entre
outros [Hennessy and Patterson 2011].
O artigo está divido em 4 seções. A priori, na seção 2, trataremos detalhadamente
do MIPS monociclo. Sua história e seus conceitos principais serão expostos. Na seção
3 mostra a visão geral da solução. E por fim, na seção 4 aborda a fundo o projeto do
software web mostrando como funciona a sua interface.

2. MIPS Monociclo
Em 1981, John L. Hennessy iniciou o projeto MIPS em Stanford com estudan-
tes de pós-graduação. Depois de completar o projeto em 1984, ele tomou uma
licença da universidade para co-fundar MIPS Computer Systems (agora MIPS Tech-
nologies), que desenvolveu um dos primeiros Microprocessadores comerciais RISC
[Hennessy and Patterson 2011].
Os computadores modernos recorrem a muitos truques para maximizar seu de-
sempenho, entre os quais o principal é tentar iniciar o máximo possı́vel de instruções por
segundo. MIPS quer dizer milhões de instruções por segundo; o processador recebeu esse
nome como trocadilho desse acrônico [Tanenbaum 2007]. Há várias versões dessa arqui-
tetura. Elas podem ser: Monociclo, Multiciclo, Pipeline, Super Escalar, entre outros tipos.
A diferença de cada um está, principalmente, na quantidade de ciclos de cada instrução e
no paralelismo.

Figura 1. MIPS Simplificado [Hennessy and Patterson 2011]

A versão monociclo é chamada assim porque executa todas as suas instruções

em 1 ciclo de clock de uma duração fixa. Um ciclo é o tempo necessário para uma
informação ser lida ou gravada. Como as instruções possuem tempos diferentes para se-
rem executas, define-se como ”tempo de clock(relógio)”, o tempo da instrução que passa
por um caminho mais longo, e que consequentemente é a mais lenta. Dessa forma, para
definição do tempo de clock do MIPS monociclo é escolhida a instrução load, que usa
cinco unidades funcionais, sendo estas: a memória de instruções, o banco de registra-
dores, a ALU(Unidade Lógica Aritimética), a memória de dados e novamente o banco
de registradores [Hennessy and Patterson 2011]. A figura 1 mostra a arquitetura simplifi-
cada.

3. Visão Geral do MIPSapp

O MIPSapp é uma site construı́do em HTML, Javascript e CSS. Os Frameworks gráficos
usados foram: JointJS e Angular Material. Em função do uso de HTML e CSS, o modelo
de programação mais apropriado é o modelo DOM(Modelo de objeto de Documento)
porque facilita na manipulação dos dados. A solução constrói o esquema que representa o
MIPS monociclo e dá suporte a interação sobre ele. No software contém o comportamento
das instruções e informações sobre as componentes da arquitetura. A seção 4 descreve
minuciosamente o MIPSapp.

4. Projeto da interface
4.1. Representação Esquemática
A representação esquemática foi gerada com ajuda do JointJS, uma framework de Javas-
cript. Esta ferramenta nos fornece objetos que criam figuras geométricas no HTML com
SVG(Gráficos Vetoriais Escaláveis) em um espaço determinado pelo desenvolvedor. O
JointJS não se limita apenas em desenhar, mas também fornece a manipulação do gráfico,
incluindo a ligação das figuras.

Figura 2. Esquema
 Na criação do esquema, primeiro se definiu um espaço. Depois, para a construção
dos componentes foi utilizado um tipo de objeto que desenha figuras com portas de en-
trada e saı́da. Os componentes tem tamanho e posição delimitados no espaço. Para ligar
cada figura, criou-se um link fornecido pela framework. Nele o programador estabelece
sua fonte e seu destino. Foram usados 3 tipos de links e componentes. A figura 2 exibe o
esquema.

4.2. Instruções

Para controlar o hardware de um computador, é preciso falar sua linguagem. As pala-

vras da linguagem de um computador são chamadas de instruções, e seu vocabulário é
denominado conjunto de instruções [Hennessy and Patterson 2011].
No MIPSapp as instruções do monociclo, com a intenção de simplificar, foram
resumidas. A tabela 1 mostra como ficou dividido.

Tabela 1. Caminho de dados simplificado

Finalidades: Instruções:
Acesso à memória lw, sw
Aritimética e lógicas add, sub, and, or, slt
controle de fluxo beq, j

No software, todas as instruções ficam na ala esquerda, em um menu lateral, sepa-

rada pelas suas finalidades. Cada instrução ou grupo de instruções é um botão que dispara
uma função na qual modifica o esquema. Em detalhe, a função altera o CSS(Linguagem
de Estilo do HTML) dos conectores, destacando as conexões do respectivo caminho de
dados. A cor ciano corresponde a via entre as componentes e a verde destaca a ação de
habilitação dos sinais de controle sobre os elementos da arquitetura, como mostra a figura
3.
 Figura 3. Instrução

4.3. Eventos
A interatividade não está somente no destaque das instruções. Cada componente da ar-
quitetura possui uma ação ao clicar sobre o mesmo. Fazendo essa operação, o software
exibe uma caixa personalizada(chamada toast), no canto direito superior, com o nome do
elemento e um botão que chama uma janela(ou dialog) contendo detalhes sobre a compo-
nente selecionada. A figura 4 expõe o que foi dito.

Figura 4. eventos

A interação com as componentes é uma mistura dos recursos do JointJS, já citado
na seção 4.1, e do Angular Material que é uma framework de Javascript que consiste
na junção do AngularJS(Programação) com o Materialize(Estilização). Com o JointJS,
criamos o evento assı́ncrono sobre a componente, no caso, o click. Em seguida, o Angular
Material participam com o toast e o dialog. O conteúdo do dialog, que podem ser textos
e/ou imagens, fica contido em um arquivo HTML. E esse arquivo é chamado pelo botão
colocado no toast.
5. Conclusão
Este trabalho tem como objetivo expor o MIPSapp, um aplicativo (ou software web) que
contribui para o ensino do MIPS monociclo. O modo atrativo de mostrar o conteúdo
facilita o estudo de arqutietura de computadores. Com isso, inferimos a importância desse
software nos ambientes acadêmicos.
Como projeto futuro, fica o compromisso de implementar a versão MIPS Multi-
ciclo e a Pipeline com o mesmo formato do MIPSapp. Assim, abrangendo mais assuntos
essenciais para a computação.

Referências
Hennessy, J. L. and Patterson, D. A. (2011). Computer Architecture, Fifth Edition: A
Quantitative Approach. Morgan Kaufmann Publishers Inc., San Francisco, CA, USA,
5th edition.
Tanenbaum, A. (2007). Organização estruturada de computadores. PRENTICE HALL
BRASIL.