Na aplicação vamos utilizar o SQLite3 para nosso banco de dados, pois além de ser MySQL ele não precisa de nenhum ambiente de configuração na máquina para rodar.
- sqlite3
- knex
- Primeiro precisamos instalar o pacote do SQLite3 na nossa aplicação:
$ npm install sqlite3- O Knex é um query builder que nos permite escrever comandos SQL com a sintaxe do JavaScript. Iremos utiliza-lo para manusear o banco de dados da aplicação.
- Primeiro, vamos instalar o knex:
$ npm install knex- Em seguida, podemos configurar um script para executar as migrations de forma mais fácil. Para isso, dentro do arquivo
package.jsonadicione este comando:
"scripts": {
"knex:migrate": "knex --knexfile knexfile.ts migrate:latest",
},- Para executar as migrations utilize o comando:
npm run knex:migrate
- Por fim, vamos configurar um script para excutar as seeds do banco de dados logo abaixo do
knex:migratedentro dopackage.json:
"scripts": {
"knex:migrate": "knex --knexfile knexfile.ts migrate:latest",
"knex:seed": "knex --knexfile knexfile.ts seed:run"
},- Para executar as seeds basta executar este comando:
npm run knex:seed
Para iniciarmos com o desenvolvimento do Back-end da nossa aplicação, vamos precisar configurar e instalar alguns pacotes para o Node.js rodar junto ao TypeScript.
- typescript
- express | @types/express
- ts-node
- ts-node-dev
- cors | @types/cors
- multer | @types/multer
- celebrate | @types/hapi__joi
- Para iniciar qualquer projeto com Node.js você precisar criar o arquivo de configuração inicial
package.json. Para isso, basta executar:
$ npm init -y- Para utilizar TypeScript em qualquer projeto precisamos instalar a sua própria dependência.
$ npm install typescript- Após a intalação do pacote podemos criar as configurações padrões para a utilização do typescript com o comando:
$ npx typescript --init- O express será o responsável pelo roteamento do nosso servidor. Precisamos instalr o pacote padrão do express e também o @types, para utilizarmos com o TypeScript.
# Instalação do express
$ npm install express
# instalação do express com tipagem para TypeScript
$ npm install @types/express -D
- O ts-node serve para compilarmos através do Node arquivos TypeScript, pois o por padrão o Node executa somente JavaScript. Para isso, vamos instalar da seguinte forma:
$ npm install ts-node -D- O pacote ts-node-dev faz o monitoramento da pasta configurada, assim não precisamos executar
npx ts-node-dev src/server.tstodas as vezes que fizermos alguma alteração no código.
$ npm install ts-node-dev -D- Após instalar a dependência, vamos configurar o script para executar o arquivo do nosso servidor. Dentro de
package.jsonvamos adicionar a seguinte linha de comando:
"scripts": {
"dev": "ts-node-dev src/server.ts"
},- Por fim, podemos executar o servidor dessa maneira:
npm run dev. Dessa forma, sempre que houver alguma alteração do código, o ts-node-dev irá fazer a reinicialização automática.
- O express será o responsável por permitir que outras urls acessem nossa API. Precisamos instalr o pacote padrão do cors e também o @types, para utilizarmos com o TypeScript.
# Instalação do express
$ npm install cors
# instalação do express com tipagem para TypeScript
$ npm install @types/cors -D
- Vamos utilizar o Multer para realizar o upload de imagens. Com isso, nossa rota
PointsController.createnão terá mais o body em formatojsone simmultipart/form-data, pois comjsonnão é possível selecionar arquivos como imagens ou documentos.
# Instalação do multer
$ npm install multer
# instalação do multer com tipagem para TypeScript
$ npm install @types/multer -D
- O Celebrate irá fazer a validação dos dados de entrada pelo back-end. Dessa forma conseguimos validar campos obrigatórios, campos que serão somente números, etc...
# Instalação do celebrate
$ npm install celebrate
# instalação do @hapi/joi com tipagem para TypeScript
$ npm install @types/hapi__joi -D
- react-icons
- react-router-dom | @types/react-router-dom
- leaflet | react-leaflet | @types/leaflet
- axios
- react-dropzone
- Para iniciarmos a parte front-end vamos criar nosso ambiente com react utilizando typescript. Para isso, vamos executar o seguinte comando:
$ npx create-react-app nomedapasta --template=typescript- O React Icons irá nos ajudar na utilização de ícones na aplicação web. Esse pacote é bem completo e conta com várias coleções de ícones fomosas como Font Awesome, Feather Icons, Meterial Icons, entre outros....
- Primeiro vamos instalar a dependência:
$ npm install react-icons- Para usar é bem simples, vamos importar esse pacote no arquivo onde queremos adicionar os ícones. Note que após 'react-icons' é passado uma '/' e após essa barra você irá informar qual coleção de ícones irá utilizar. Por fim, pasta criar o component com o nome do ícone que você importou.
// Importação
import { FiArrowLeft } from 'react-icons/fi'
// Component
<FiArrowLeft size={32} color="#fff" />- O React Router DOM será responsável pelo roteamento da nossa aplicação web. para isso vamos fazer sua instalação e em seguida instalar sua tipagem.
# Instalação do react-router-dom
$ npm install react-router-dom
# instalação do react-router-dom com tipagem para TypeScript
$ npm install @types/react-router-dom -D- Para manusearmos um mapa nós vamos utilizar o Leaflet. O Leaflet é uma alternativa open source para utilização de mapas com javascript. Para utilizarmos vamos precisar instalar o seu próprio pacote, o pacote para ReactJS e também o pacote de tipagems
# Instalação do leaflet e react-leaflet
$ npm install leaflet react-leaflet
# instalação do react-leaflet com tipagem para TypeScript
$ npm install @types/react-leaflet -D- Também, vamos utilizar o Axios para realizar todas as requisições HTTP da nossa aplicação. É importante descatar que o axios também pode ser utilizar no React Native.
$ npm install axios- Por fim, vamos utilizar o React Dropzone para conseguirmos lidar com seleção de arquivos ou drop de arquivo.
$ npm install react-dropzone- expo-font
- react-navigation
- react-native-maps
- react-native-svg
- axios
- expo-location
- expo-mail-composer
- Primeiro, precisamos instalar o expo de forma global em nossa máquina.
$ npm install -g expo-cli- Em seguida, vamos iniciar nosso projeto expo.
$ expo init nomedoseuprojeto- Recentemente o expo lançou uma forma de utilizarmos fonts de um modo muito simples com o React Native. Primeiro, vamos instalar as fonts que iremos utilizar no nosso aplicativo.
$ expo install expo-font @expo-google-fonts/ubuntu @expo-google-fonts/roboto- Em seguida, vamos fazer o import dessas fonts no
App.tsx.
import { Roboto_400Regular, Roboto_500Medium } from '@expo-google-fonts/roboto';
import { Ubuntu_700Bold, useFonts } from '@expo-google-fonts/ubuntu';- Por fim, vamos criar uma constante e fazer uma validação. Se a constante criada não existir, vamos adicionar um Loading na tela, pois não queremos que o App seja utilizado sem as fonts personalizadas.
// Primeiro vamos importar nosso loading
import { AppLoading } from 'expo';
// Em seguida, vamos criar nossa constante
const [fontsLoaded] = useFonts({
Roboto_400Regular,
Roboto_500Medium,
Ubuntu_700Bold,
});
// Por fim, vamos fazer a validação
if (!fontsLoaded) {
return <AppLoading />;
}- Para criarmos o roteamento do nosso aplicativo, vamos utilizar o React Navigation.
# Primeiros vamos instalar o pacote de navegação
$ npm install @react-navigation/native
# Em seguida, vamos instalar alguns components obrigatórios que estão na documentação
$ npm install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view
# Por fim, vamos instalar o tipo de navegação que iremos utilizar
$ npm install @react-navigation/stack- Vamos utilizar o react-native-maps para trabalharmos com mapas no React Native.
$ npm install react-native-maps- Por padrão o React Native não suporte o formato
svg. Então, vamos instalar um pacote para utilizarmos imagenssvg
$ expo install react-native-svg- Após isso, vamos precisar importar o
SvgUrie criar um component com esse mesmo nome, passando a propriedadeuricom o local da imagemsvg;
// Importação do component
import { SvgUri } from 'react-native-svg';
// Utilização do component
<SvgUri width={42} height={42} uri={item.image_url} />- O axios será utilizado para realizarmos nossas requisições HTTP no aplicativo, assim como já fizemos no front-end web.
$ npm install axios- Com o expo-location nós conseguimos pegar a geolocalização do usuário. Dessa forma, podemos colocar no nosso mapa para iniciarmos o mapa na localização atual do usuário.
$ expo install expo-location- Para utilizarmos o expo-location precisamos pedir permissão para o usuário do app para compartilhar sua localização. Depois disso, vamos pegar a Posição do usuário e jogar em um estado do React para utilizarmos no mapa.
import * as Location from 'expo-location';
useEffect(() => {
async function loadPosition() {
const { status } = await Location.requestPermissionsAsync();
if (status !== 'granted') {
Alert.alert(
'Oops!',
'Precisamos da sua permissão para obter a localização'
);
return;
}
const location = await Location.getCurrentPositionAsync();
const { latitude, longitude } = location.coords;
setInitialPosition([latitude, longitude]);
}
loadPosition();
}, []);- Por fim, vamos utilizar o expo-mail-composer para enviarmos um e-mail com o app nativo de e-mail do celular do usuário.
$ expo install expo-mail-composer- Depois de instalar o pacote, vamos criar uma função para o envio de e-mail
function handleComposeMail() {
MailComposer.composeAsync({
subject: 'Interesse na coleta de resíduos',
recipients: [data.point.email],
});
}