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:
Com esse comando é possivel ter acesso ao link para ver o resultado do desenvolvimento do projeto pelo navegador.
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.
-
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).
-
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.
-
Usaremos if e else if para indicar o grau de peso da pessoa e retornar na mensagem.
-
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.
-
Agora, vamos estilizar nosso site. Em styles vamos editar o index.css.
-
E nossa calculadora de IMC está pronta.
Integrantes do grupo: Luis Gustavo, Rafael Henrique e Yan Silveira.