| ... | @@ -3,57 +3,121 @@ |
... | @@ -3,57 +3,121 @@ |
|
|
|
|
|
|
|
# Configurações do Projeto
|
|
# Configurações do Projeto
|
|
|
|
|
|
|
|
Esta seção apresentará todas as configurações para executar o projeto. Aqui serão encontradas as instruções de configuração de ambos ambientes para desenvolver no projeto Educa Mais
|
|
Esta seção apresentará todas as configurações para executar o projeto. Aqui serão encontradas as instruções de configuração de ambos ambientes para desenvolver no projeto Diário das Emoções
|
|
|
|
|
|
|
|
## Sumário
|
|
## Sumário
|
|
|
|
|
|
|
|
- [Passo a Passo para configurar o projeto](#Passo a Passo para configurar o projeto)
|
|
- [Backend](#Backend)
|
|
|
- [Backend](#Backend)
|
|
|
|
|
- [Frontend](#Frontend)
|
|
|
|
|
- [Banco de dados](#Banco de dados)
|
|
- [Banco de dados](#Banco de dados)
|
|
|
|
|
- [Firestore](#firestore)
|
|
|
|
- [Frontend](#Frontend)
|
|
|
|
- [Requisitos](#requisitos)
|
|
|
|
- [Ferramentas necessárias](#ferramentas-necessárias)
|
|
|
|
- [Instalação do XCode](#instalação do-xcode)
|
|
|
|
- [Instalação do Android Studio](#instalação-do-android-studio)
|
|
|
|
- [Instalação do SDK do Flutter](#instalação_do_sdk_do_flutter)
|
|
|
|
|
|
|
|
|
|
|
|
|
### Passo a Passo para configurar o projeto
|
|
# Backend
|
|
|
|
Nesse tópico contém um tutorial de como acessar o [Firebase](https://console.firebase.google.com/u/2/project/diario-das-emocoes-81ff9/overview).
|
|
|
|
|
|
|
|
1. Você deve garantir que tem [NodeJS](https://nodejs.org/en/) instalado na máquina. Para verificar a versão atual do seu `NodeJs` instalado digite no terminal o comando: `node --version` ou `node -v`. Caso não tenha instalado siga o passo a passo deste [`link`](https://nodejs.org/en/download/).
|
|
**Para configura-lo bastou criar uma conta google e iniciar o projeto com o nome **diario-das-emocoes** no firebase.**__
|
|
|
1. Após instalar o node o `NPM` será instalado na sequência. Para verificar a versão atual do NPM digite no terminal o comando: `npm --version` ou `npm -v`. Para mais informações de NPM acesse: https://www.npmjs.com/get-npm.
|
|
|
|
|
1. Com Node JS e NPM instalados, você vai acessar a pasta raiz do projeto [Backend](#backend) / [Frontend](#frontend) e digitar o comando `npm install` para instalar as dependências do projeto. Para mais informações referentes a download e instalação de Node e NPM acesse: https://docs.npmjs.com/downloading-and-installing-node-js-and-npm.
|
|
|
|
|
1. Para rodar o projeto digite no terminal o comando `npm start`(front) `npm run dev` (back). Automaticamente vai abrir uma aba do seu navegador com o projeto rodando.
|
|
|
|
|
|
|
|
|
|
* Frontend: http://localhost:3000
|
|
1º Para acessar a aplicação basta ir até o [Firebase](https://console.firebase.google.com/u/2/project/diario-das-emocoes-81ff9/overview) com o login e senha.
|
|
|
* Backend: http://localhost:5000
|
|
|
|
|
|
|
|
|
|
### Backend
|
|
2º Acessar o console do [Firebase](https://console.firebase.google.com/u/2/project/diario-das-emocoes-81ff9/overview)
|
|
|
|
|
|
|
|
|
|
|
|
O código-fonte do backend da aplicação está disponível [neste repositório](https://tools.ages.pucrs.br/educa-mais/educa-mais-backend)
|
|
3º Entrar no projeto.
|
|
|
|
|
|
|
|
|
|
|
|
Você deve clonar o projeto pelo terminal/Git Bash pelo comando `git clone http://tools.ages.pucrs.br/educa-mais/educa-mais-backend.git`
|
|
Para executa-lo **basta acessar o front-end e iniciar a aplicação**
|
|
|
|
|
|
|
|
[Tutorial em video](https://www.loom.com/share/aaa10b1286a14780be97c6c2def91b57)
|
|
# Banco de dados
|
|
|
|
Nesse tópico contém um tutorial de como acessar o banco de dados Firestore do [Firebase](https://console.firebase.google.com/u/2/project/diario-das-emocoes-81ff9/overview).
|
|
|
|
|
|
|
|
### Frontend
|
|
## Firestore
|
|
|
|
|
|
|
|
O Frontend da aplicação foi desenvolvido em React e seu código-fonte está disponível [neste repositório](https://tools.ages.pucrs.br/educa-mais/educa-mais-frontend)
|
|
O Cloud Firestore é um banco noSQL embutido no Firebase com objetivo de atender aplicações mobile.
|
|
|
|
|
|
|
|
Você deve clonar o projeto pelo terminal/Git Bash pelo comando `git clone http://tools.ages.pucrs.br/educa-mais/educa-mais-frontend.git`
|
|
1º Para acessar a aplicação basta ir até o [Firebase](https://console.firebase.google.com/u/2/project/diario-das-emocoes-81ff9/overview) com o login e senha.
|
|
|
|
|
|
|
|
## Banco de dados
|
|
2º Acessar o item Firestore Database no menu na lateral esquerda [Firebase](https://console.firebase.google.com/u/2/project/diario-das-emocoes-81ff9/overview) como mostra a figura abaixo:
|
|
|
|
|
|
|
|
|
|
|
|
### MySQL
|
|
3º Acessar as coleções e todos os documentos criados no front-end.
|
|
|
|
|
|
|
|
|
|
|
|
Você deve fazer download do [MySQL](https://www.mysql.com/downloads/) para o gerenciamento de bancos de dados.
|
|
# Frontend
|
|
|
|
Nesse tópico contém um tutorial para instalar o Flutter e configura-lo corretamente em MacBook, visto que toda a aplicação é para IPad e deve ser compilada em ambientes iOS.
|
|
|
|
_Utilizamos o **MacBook** mas pode o mesmo passo pode ser aplicado para os diferentes dispositivos iOS._
|
|
|
|
|
|
|
|
* [Tutorial de download e configuração](https://tools.ages.pucrs.br/educa-mais/educa-mais-wiki/blob/master/Config/instala%C3%A7%C3%A3oMySQL.mp4)
|
|
## Requisitos
|
|
|
* [Tutorial para configuração parte 2](https://tools.ages.pucrs.br/educa-mais/educa-mais-wiki/blob/master/Config/SQL.pdf)
|
|
Para utilizar o Flutter você precisará de uma versão do MacOs de 64bits e de 700MB de espaço em disco.
|
|
|
|
_Este espaço não leva em consideração Virtual Machines do Android ou Simuladores do iOS, nem outras SDKs necessárias. _
|
|
|
|
|
|
|
|
Configurar conforme as seguintes especificações:
|
|
## Ferramentas necessárias
|
|
|
|
* XCode
|
|
|
|
* Android Studio
|
|
|
|
* Visual Studio Code.
|
|
|
|
* Itens necessários
|
|
|
|
- bash
|
|
|
|
- curl
|
|
|
|
- git 2.x
|
|
|
|
- mkdir
|
|
|
|
- rm
|
|
|
|
- unzip
|
|
|
|
- which
|
|
|
|
|
|
|
|
* Nome do Schema: educa-mais
|
|
|
|
|
* Usuário: pacheco
|
|
|
|
|
* Senha: educamais123
|
|
|
|
|
* Porta: 3306
|
|
|
|
|
|
|
|
|
|
### Postman
|
|
## Instalação do XCode
|
|
|
|
1º Para instalar o XCode basta acessar a [Apple Store ](https://www.apple.com/br/?afid=p238%7CsC7KKNBEqdc_mtid_1870765e38482_pcrid_602145002637_pgrid_17049243658_pntwk_g_pchan__pexid__&cid=aos-br-kwgo-brand--slid---product-) do seu MacBook e seguir os passos, sem segredo nenhum.
|
|
|
|
|
|
|
|
Para testes e validações da API [Download](https://www.postman.com/). [Dúvidas de instalação](https://www.youtube.com/watch?v=MCPdfuzmyxY) |
|
2º Após concluir execute o seguinte comando no seu terminal:
|
|
\ No newline at end of file |
|
|
|
|
|
`sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer xcodebuild -license`
|
|
|
|
|
|
|
|
|
|
|
|
## Instalação do Android Studio
|
|
|
|
1º Acesse o site oficial do [Android Studio](https://developer.android.com/studio).
|
|
|
|
|
|
|
|
2º Clique para fazer download para o MacBook
|
|
|
|
|
|
|
|
|
|
|
|
3º Siga os passos da instalação
|
|
|
|
|
|
|
|
|
|
|
|
## Instalação do SDK do Flutter
|
|
|
|
1º Vá até o a [documentação do Flutter](https://docs.flutter.dev/development/tools/sdk/releases) contendo as releases do do Flutter e faça o download da versão 2.10.5 utilizada no desenvolvimento do projeto:
|
|
|
|
|
|
|
|
|
|
|
|
2º Vá até sua home do MacBook e criar uma pasta onde será armazenado o sdk do Flutter. Neste exemplo criamos com o nome **development**.
|
|
|
|
|
|
|
|
|
|
|
|
3º Adicione o arquivo extraído do **Flutter** para dentro da pasta criada
|
|
|
|
|
|
|
|
|
|
|
|
4º Também no seu diretório home crie um arquivo `.bash_profile` caso não exista
|
|
|
|
|
|
|
|
|
|
|
|
5º Adicione o comando abaixo no arquivo `.bash_profile` trocando o <Seu User> pelo seu usuário:
|
|
|
|
|
|
|
|
`export PATH='$PATH:Users/<Seu User>/development/flutter/bin'`
|
|
|
|
|
|
|
|
|
|
|
|
## Rodando a Aplicação
|
|
|
|
1º Acesse o repositório do [Diário das Emoções](https://tools.ages.pucrs.br/diario-das-emocoes/development)
|
|
|
|
|
|
|
|
2º Faça clone via HTTP do projeto [Diário das Emoções](https://tools.ages.pucrs.br/diario-das-emocoes/development) para seu MacBook onde preferir
|
|
|
|
|
|
|
|
|
|
|
|
3º Inicie a IDE de sua preferência e abra o projeto
|
|
|
|
|
|
|
|
4º Execute o Simulator do MacBook
|
|
|
|
|
|
|
|
|
|
|
|
5º Clique em Devices e selecione o IPad Pro
|
|
|
|
|
|
|
|
|
|
|
|
6º Execute a main na sua IDE.
|
|
|
|
 |
