HAPPY

A Aplicação Happy foi desenvolvida pela Rocketseat no 3° Workshop da NLW (Next Level Week)

Happy é uma aplicação que cadastra e lista orfanatos para receber visitas para as crianças.

Principais ferramentas:

A aplicação é desenvolvida usando a stack NodeJS com TypeScript
ReactJS para a aplicação Web, React Native e Expo para aplicação Mobile.
e o Yarn como gerenciador de pacotes do NodeJS e para o banco de dados iremos utilizar SQLite.

PROGRESSO DO EVENTO

✅ 1° DIA - Vimos a apresentação do projeto, o layout e os principais conceitos sobre back-end, front-end e API, a criação da nossa landing page em ReactJS, criação das rotas para navegar entre os arquivos, a criação da página com o mapa.
✅ 2° DIA - Criamos um projeto com NodeJS, criamos o back-end da aplicação e nosso banco de dados com SQLite.
✅ 3° DIA - Finalizamos nossa página de mapa, criamos navegação entre telas, conectamos front-end com back-end e Finalizamos todo o nosso front-end web.
✅ 4° DIA - Aprendemos sobre os principais conceitos do React Native e do Expo, criação da onboarding, criação de rotas e criação da tela de mapas.
✅ 5° DIA - Finalizamos o App Mobile com a listagem e cadastro de orfanatos.

BACKEND

A nossa API Rest será construida no padrão MVC:

MODEL: respresentação de uma tabela no banco, representatividade de uma entidade na nossa aplicação.

VIEW: é como as coisas são vistas pelo nosso frontend.

CONTROLLER: é a lógica das rotas na nossa aplicação.

Para iniciarmos a desenvolver o desenvolvimento da aplicação backend precisamos iniciarmos o yarn:

yarn init -y

Lista das Principais Ferramentas utilizadas

TypeScript para adicionar tipagem e algumas outras funções ao nosso código.

yarn add typescript -D
Express para criarmos nosso servidor em NodeJS.

yarn add express

yarn add @types/express
TS-Node-Dev para monitorarmos nosso servidor.

yarn add ts-node-dev
multer utilizado principalmente para carregamento de arquivos.

yarn add multer

yarn add @types/multer
typeorm utilizamos como orm (mapeador objeto relacional) nesse projeto.

yarn add typeorm
SQLite como sistema de banco de dados.

yarn add sqlite3
Yup para validação de formularios.

yarn add yup

yarn add @types/yup

Utilizamos o Insomnia para fazer testes no nosso backend

FRONTEND WEB

O nosso frontend web foi desenvolvido em ReactJS que utiliza o Single Page Application ou SPA, que em português significa Aplicações de página única,foram vistos os conceitos principais sobre como React, componentização e propriedades de elementos, para iniciarmos nosso projeto com yarn em typescript precisamos instalar o react:

yarn create react-app web --template typescript

Lista das principais ferramentas utilizadas na construção do sistema web:

React Dom é usado para manipular elementos HTML.
React Router Dom é utilizado para criar um sistema de routeamento no ReactJS:

yarn add react-router-dom

yarn add @types/react-router-dom
Leaflet para lidar com mapas no ReactJS.

yarn add leaflet, react-leaflet

yarn add @types/leaflet
React Icons para adicionar icones.

yarn add react-icons
Axios como cliente HTTP.

yarn add axios

Aplicação Web com todas as funcionalidades dessa versão:

FRONTEND MOBILE

O Frontend Mobile foi desevolvido desenvolvido usando React Native com Expo, o React Native é uma biblioteca Javascript criada pelo Facebook. É usada para desenvolver aplicativos para os sistemas Android e IOS de forma nativa.

Instalação do Expo:

yarn global add expo-cli

Para executar a aplicação:

yarn start

Expo-google-fonts/nunito para utilizarmos uma fonte de texto personalizada, no caso vamos utilizar a fonte Nunito.

yarn add @expo-google-fonts/nunito
React-native-maps para lidarmos com mapas dentro do nosso aplicativo.

expo install react-native-maps
React Navigation para trabalhar com navegação entre telas.

yarn add @react-navigation/native
Instalando dependências de um projeto gerenciado comm Expo

expo install react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context @react-native-community/masked-view
Instalando dependências em um projeto nativo de reação nu

yarn add react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view
expo-image-picker para ter acesso a interface do sistema para trabalhar com imagens dentro do React Native.

expo install expo-image-picker
axios para conectar o mobile com o nosso servidor.

yarn add axios

silvaarmando/Happy-OmnistackTrail