rhams1997/calculadoraimc

Trabalho de Web, Next.js

Criando uma calculadora IMC com Next.JS

Desenvolvimento WEB com o framework Next.JS - Criação de uma calculadora.

Para usar o framework Next.js é necessario instalar algumas ferramentas. São elas: node.js o Yarn e o chocolatey.

Para instalar o Node é preciso acessar o site: https://nodejs.org/en/download/

Clique do usuário com o botão esquerdo do mouse em "LTS Recomendado para a maioria dos usuários

Selecionado a opção LTS, agora clique no sistema operacional desejado.

Apos o clique o Download será realizado

Clique encima para executar o instalador do Node.js

O usuário deverá clicar Next em todas as caixas de opção até concluir a instalação do Node.js

Para verificar se a instalação foi bem sucedida execute os dois comandos a seguir em uma janela do Terminal ou Prompt de Comando. Pesquise por CMD na caixa de pesquisa: Execute como Administrador: Digite os comandos acima dentro do CMD. Caso esteja tudo certo, serão apresentadas as versões conforme abaixo:

O Node.js é uma plataforma de execução JavaScript desenvolvida com o intuito de criar sistemas de rede escaláveis. Já o Yarn é um gerenciador de pacotes e dependências que funciona sobre o Node.js.

Para instalar o YARN abra o terminal e digite o seguinte comando:

Dessa forma as instalações do Node e Yarn estão finalizadas e testadas.

Próximo passo: Sera usados dois programas, o Visual Studio Code e o GitHub Desktop

O que é Visual Studio Code?

O Visual Studio Code ou Vscode é um editor de código-fonte que é gratuito e está disponível no Windows, Linux e macOS.

É desenvolvido e mantido pela Microsoft, inclui suporte para depuração, controle versão Git incorporado, realce de sintaxe, complementação inteligente de código, snippets e refatoração de código.

Instalação do VS code no Windowns:

O processo de instalação do VSCode no Windows é bem simples, basta baixar o instalador do site. Link para download: https://code.visualstudio.com/

Em seguida, execute o instalador baixado e siga as instruções na tela, não esqueça de marcar a opção “Add to Path” para adicionar o Visual Studio Code nas variáveis de ambiente.

Agora vamos baixar o GitHub Desktop: Link: https://desktop.github.com/

O processo de instalação do GitHub no Windows é bem simples, basta baixar o instalador do site.

Em seguida, execute o instalador baixado e siga as instruções na tela.

Com o Visual Studio Code e o GitHub instalados, vamos clonar o repositório do GitHub no GitHub Desktop.

Clique em Code:

Posteriormente clique em copiar link.

Pesquise pelo GitHub Desktop e execute.

Agora clique em ADD para clonar o repositório.

Cole o link dentro da caixa e clique em clonar.

Agora com o projeto selecionado no GitHub Desktop, clique em abrir projeto com o Visual Studio Code:

Após isso ira abrir o VS code.

Abra o terminal do VS code e digite o seguinte comando: yarn create next-app ./

para criar o projeto:

Para rodar o projeto, é usado o yarn dev

Com esse comando é possivel ter acesso ao link para ver o resultado do desenvolvimento do projeto pelo navegador.

Copiando e colando a url no navegador.

Desenvolvendo nosso código

Primeiramente, vamos excluir algumas coisas que não iremos utilizar no nosso projeto. Na pasta styles, apagamos o Home.module.css; A pasta public, deixamos ela vazia; E na pages, apagamos a pasta api.

Em pages, vamos abrir o index.js e limpar tudo. Aqui vai ser criada nossa página com as funções da calculadora.

1. Importamos o useState (permite adicionar o state do React a um componente de função). Importamos o Head (é basicamente um componente interno que o Next.JS fornece para anexar elementos, como title e meta tags, ao elemento no documento).

2. Criamos as váriaveins para peso, altura e mensagem. 2.1 Criaremos a função para calcular o IMC, a primeira vai ser para receber o valor da altura e fazer a formatação do valor. E a segunda função será o calculo do imc, o peso dividido pela altura ao quadrado.

3. Usaremos if e else if para indicar o grau de peso da pessoa e retornar na mensagem.

4. Neste passo vamos criar nosso site. Mas antes vamos adicionar duas imagens na pasta public para usar no site. 4.1 Criamos a Head com o titulo fazendo tambem o link com o favicon.png da pasta public. 4.2 Abre a tag img e usamos a imagem da pasta public para embelezar o site.

4.3 Vamos abrir uma div "areaInput" para o usuário informar o peso e altura, e retornar para o calculo do IMC.

4.4 Criamos um botão para fazer a chamada da função de calcular o IMC.

4.5 Usamos uma section para exibir a mensagem do passo 3, onde o if e else if irá passar para o usuário o grau de peso e seu IMC.

4.6 Criaremos mais um botão, redirecionando para um PDF com mais informações sobre o IMC.

5. Agora, vamos estilizar nosso site. Em styles vamos editar o index.css.

6. E nossa calculadora de IMC está pronta.

Integrantes do grupo: Luis Gustavo, Rafael Henrique e Yan Silveira.