OmniStack11: Node, ReacJS e React Native [Dia 01]

A proposta é desenvolver a aplicação Be the Hero que visa conectar pessoas com capital investidor a ONGs nessa semana Omnistack e vamos fazer com Node, ReactJS e React Native.

Notas de aula da semana OmniStack 11 da Rocketseat.

Abaixo os links para todos os dias da Semana Omnistack 11

• DIA 01 – Conceitos e ambiente de desenvolvimento
• DIA 02 – Backend – Criando a base da aplicação
• DIA 03 – Frontend – Construindo a interface web
• DIA 04 – Mobile – Desenvolvimento o app mobile
• DIA 05 – Funcionalidades Avançadas

Dia 01 – Conhecendo a OmniStack

Aplicação a ser desenvolvida

A aplicação Be the Hero que visa conectar pessoas com capital investidor a ONGs. É uma aplicação bem legal que pode realmente impactar de forma bastante positiva a sociedade.

Configuração do ambiente de desenvolvimento

O ambiente de desenvolvimento é composto por basicamente pelo Node, Yarn ou NPM e o Visual Code Studio.

O Node utiliza JavaScript como linguagem para programar as regras de negócio do seu projeto.

Já o Yarn e o NPM são utilizados para instalar as dependências do seu projeto. Prefiro o Yarn por ser mais rápido.

O VS Code é a IDE que você deve utilizar para codar. Desenvolver com VS Code traz diversos benefícios por ele conta com diversas extensões; integrações, temas, fontes e outras inúmeras funcionalidades que te ajudarão a desenvolver mais facilmente.

Algumas extensões que utilizo é tema Drácula e Material Icon Theme.

Aqui você pode realizar a configuração básica do ambiente de desenvolvimento.

Conceitos sobre frontend e backend

O Backend ou API é onde ficam as regras de negócios, conexões com os bancos. O backend é responsável por disparar emails, se comunicar com outros sistemas via webservices, autenticação de usuários, criptografia, segurança e outras funcionalidades mais que não tem interferência na parte visual da aplicação. O backend vai se comunicar com o interface (frontend) via JSON.

O frontend é toda aquela camada que vai consumir os podem ser WebApps, uma aplicação React Native, Vue, Angular, iOS ou um Webservice.

Criar projeto no NodeJS

Além disso no primeiro dia da semana Omnistack 11 foram criados os projetos do Backend em NodeJs e o frontend web com ReactJs

Primeiro é melhor organizar as pastas, sendo assim abra o terminal escolha um diretório para iniciar o seu projeto e crie a estrutura de pastas abaixo:

/omnistack
 ./backend

Ainda no terminal entre na pasta de backend e digite yarn init -y, esse -y aceita todas as perguntas que realizadas ao iniciar um projeto Node.

Agora vamos instalar o framework ExpressJS, com ele vamos realizar as requisições HTTP, ou seja, vamos receber e responder as solicitações, nesse caso, via JSON.

Para adicionar o express use yarn add express. Com esses dois comandos são criados na pasta o arquivo package.json, que guarda as informações do projeto, e a pasta node_modules, onde estão o código das dependências do projeto.

Agora crie o arquivo index.js dentro da pasta /backend. Nesse arquivo vai conter o código de um “Hello World” e deve estar na de acordo com o código abaixo:

const express = require('express');

const app = express();

app.get('/', (req,res) => {
  return res.json({
    evento: 'Semana Omnistack 11',
    aluno: 'Abner Oliveira'
  });
});

app.listen(3333);

O código acima importa o express, depois coloca dentro da variável app o a código app.get ... cria a rota '/' que retorna o JSON. A porta é definida em app.listen(3333);

Para acessar primeiramente vá ao terminal e inicialize o servidor node no terminal com node index.js depois acesse localhost:3333/. Deve retornar o conteúdo a seguir

{
  "evento": "Semana Omnistack 11",
  "aluno": "Abner Oliveira"
}

Criar o projeto ReactJS

Antes de criar o projeto ReactJS o Diego comentou sobre que é SPA. Na abordagem SPA – Single Page Application trazem apenas os dados como resposta e o frontend preenche a tela com essas informações.

A página nunca é recarregada, otimizando bastante a performance. Como a comunicação é feita somente por JSON é possível ter diversos frontends para cada backend.

Conceitos básicos OK, então vamos criar o projeto em ReactJS.

Acesse a pasta ominstack11 e vamos usar o npx para criar o projeto react. O npx vai executar um pacote create-react-app para gerar o projeto react.

No terminal digite npx create-react-app frontend. O processo deve demorar um pouco, mas vai criar a pasta frontend contendo o projeto, acesse-a e para rodar digite yarn start.

Deve abrir uma aba no navegador como a da imagem abaixo

No meu caso estou usando o Windows 10 e tive alguns problemas em utlizar npx create-react-app frontend. Quando rodava o comando no terminal obtia como resposta isso:

C:\Users\ABNER ATI\Documents\GitHub\omnistack11> npx create-react-app frontend
O sistema não pode encontrar o caminho especificado.

Não pesquisei a fundo mas eu acredito que o erro acontece por causa do espaço no pasta C:\Users\ABNER ATI\ em algum momento da instalação o npx se perde por não reconhecer a pasta onde é para ser instalado o projeto. Como e eu resolvi?

Fiz a instalação do modo antigo como indica a documentação do Create React App.

Instalei o create-react-app globalmente na minha máquina. Pode ser feito com npm ou yarn, tanto faz.

npm install -g create-react-app

yarn add --global create-react-app

Depois dei um create-react-app frontend para gerar o projeto.

Ok projeto rodando para finalizar só mais alguns conceitos

Conceitos de React Native

Nessa parte o Diego explica a diferença entre as abordagens tradicional e a do React Native. A principal diferença é que na abordagem tradicional é preciso dois projetos para criar os aplicativos em Android e iOS.

Já na Abordagem React Native o código todo é escrito em javascript, o dispositivo, tanto Android quanto iOS, passa a entender a o código Javascript e a interface gerada é totalmente nativa. Sendo assim é preciso apenas um projeto para gerar aplicativos para ambas plataformas móveis.

Outra ferramenta apresentada é o Expo, que agiliza o desenvolvimento pois traz um ambiente pré-configurado para produzir os .IPAs e os .APKs. Sem o Expo precisamos configurar o Android Studio, os SDKs para fazer o build para Android, bem como o Xcode para iOS.

Com o Expo, podemos instalar um aplicativo no próprio celular também chamado de Expo, que traz tudo que se precisa pra rodar seu projeto e pode-se rodar sem gerar nenhum instalável, diretamente da rede.

Então esse foi o primeiro dia!!! Até logo

Tags: android | ios | node | omnistack | reacjs | react native | web