/atividade-previa-REA211

Atividade prévia da disciplina Desenvolvimento Reativo do IGTI (2021).

Primary LanguageTypeScript

Desenho de uma maçã

Jogo da Maçã

SobreFuncionalidadesRodando os ProjetosTecnologiasAutora


💻 Sobre

O "Jogo da Maçã" é um projeto feito como exercício para a disciplina de Desenvolvimento Reativo do IGTI em Maio de 2021. A ideia era aprender a configurar o ambiente básico dos 3 frameworks/libs de Desenvolvimento Front-end mais utilizados do mercado: Angular, React e Vue. Para isso, criei uma espécie de jogo onde a ilustração de uma maçã é renderizada de forma randômica na tela e, cada vez que o usuário clica nela, um contador de cliques é incrementado. Também implementei um botão de "Resetar" que zera o contador.


⚙️ Funcionalidades

  • Posicionar a imagem da maçã aleatoriamente na tela e permitir o incremento de um contador toda vez que a maçã recebe um evento de clique.

🚀 Rodando os Projetos

Este repositório conta com 3 pastas principais que indicam a tecnologia utilizada:

  • angular_app
  • react_app
  • vue_app

Cada uma delas possui instruções diferentes para rodar o projeto.


🔧 Pré-requisitos

Antes de começar, você precisa ter as seguintes ferramentas instaladas no seu computador:

Além disso, também é interessante ter um editor de texto instalado para trabalhar com o código. Recomendo a utilização do VSCode.


🔴 Rodando em Angular

Na raiz da pasta do projeto em Angular (angular_app), rode os seguintes comandos:

$ npm install  # Instalando as dependências

$ ng serve --open  # Rodando a aplicação no modo de desenvolvimento

# O servidor será iniciado na porta 4200. No seu browser, acesse <http://localhost:4200>

🔵 Rodando em React

Na raiz da pasta do projeto em React (react_app), rode os seguintes comandos:

$ npm install  # Instalando as dependências

$ npm start  # Rodando a aplicação no modo de desenvolvimento

# O servidor será iniciado na porta 3000. No seu browser, acesse <http://localhost:3000>

🟢 Rodando em Vue

Na raiz da pasta do projeto em Vue (vue_app), rode os seguintes comandos:

$ npm install  # Instalando as dependências

$ npm run serve  # Rodando a aplicação no modo de desenvolvimento

# O servidor será iniciado na porta 8080. No seu browser, acesse <http://localhost:8080>

🛠 Tecnologias

As seguintes tecnologias foram utilizadas na construção desse projeto:


👩‍💻 Autora


Gabriela Gonçalves

🔗 Portfólio