NLW-Next-Level-Week #2 - Mobile

GitHub Pages

1. Web
2. Mobile

Wikis

• Aula 1
• Aula 2
• Aula 3
• Aula 4
• Aula 5

📌 Index

• NLW-Next-Level-Week #2 - Mobile
  • 📌 Index
  • ❔ Sobre o projeto
  • 🧐 Motivo
  • THE EXTRAMILE - Proffy 2.0
  • 📸 Screenshots
    • Mobile Interface com React Native
    • Utilitários
    • 🛠 Days e Techs
    • Desenvolvimento NLW2_Mobile wiki!
  • ⚙ Instalação e Start
    • Comandos para instalar no MAC
    • Comandos para instalar no Windows PowerShell
    • Clonagem
    • Como executar o projeto
    • 📦 Executar Server API REST
    • 📱 Executar Projeto Mobile
  • 🐛 Issues
  • 🤝 Contribuições
  • Agradecimentos
  • Referências
  • 📜 License

❔ Sobre o projeto

Durante o evento Next Level Week #2, foi desenvolvido a projeto Proffy, que é uma plataforma de estudos online, conectando alunos com professores para aulas online, tendo um calendário para o professro com seus horários disponíveis para que os alunos possam entrar em contato, não engloba vídeo. Trazendo uma representação e homenagem para o dia nacional do profissional da educação, que é comemorado no dia 06 de agosto.

O projeto está sendo desenvolvido na Next Level Week 2. Uma plataforma de estudos online que visa conectar alunos e professores de forma rápida e fácil.

Este projeto é uma parte de uma trilogia:

• NLW2_Server
• NLW2_Web
• NLW2_Mobile

🧐 Motivo

Desenvolvimento apartir do projeto Next Level Week 2, visa atender os Desafios lançados no final na semana NLW#2, desenvolvido pela Rocketseat.

THE EXTRAMILE - Proffy 2.0

📥 Figma layout available for download at:

• Instruções

• Proffy-Web 2.0

• Proffy-Mobile 2.0

• Splash Screen

• OnBoarding Screen na primeira execução

• Infinite Scroll

• Autenticação

  • Login / Logout
  • Permanecer logado - Token
  • Recuperar senha
  • Telas da Web
  • Telas do Mobile

• Rating system

• Manutenção de cadastro de Professor

• Perfil do usuário

• Adicionar e remover os Horários no cadastro das Aulas

• Adicionando e removendo favoritos usando ContextApi

• Deploy

📸 Screenshots

Mobile Interface com React Native

Utilitários

• Protótipo: Figma → Protótipo (Proffy)
• Editor: Visual Studio Code → Extensions: SQLite
• Markdown: StackEdit, [Markdown Emoji][markdown_emoji]
• Commit Conventional: Commitlint
• Teste de API: Insomnia
• Ícones: Feather Icons, Font Awesome
• Fontes: Archivo, Poopins

🛠 Days e Techs

Dia	Descriçao	tecnologias
03/08	Acelerando sua evolução
04/08	Olhando as oportunidades
05/08	A escolha da stack
06/08	Até 2 anos em 2 meses
07/08	A milha extra

Desenvolvimento NLW2_Mobile wiki!

Resumo dos três primeiros dias da NLW da Rocketseat.

1. Aula 4
2. Aula 5

⚙ Instalação e Start

Comandos para instalar no MAC

Tecnologia	Versão	Comando para instalar
NodeJS	12.18.2	brew install node
Yarn	1.17.3	npm install -g yarn
Expo	3.23.1	yarn add global expo-cli

Comandos para instalar no Windows PowerShell

Tecnologia	Versão	Comando para instalar
Chocolatey	0.10.15	Set-ExecutionPolicy Bypass -Scope Process -Force; [System.Net.ServicePointManager]::SecurityProtocol = [System.Net.ServicePointManager]::SecurityProtocol -bor 3072; iex ((New-Object System.Net.WebClient).DownloadString('https://chocolatey.org/install.ps1'))
NodeJS	12.18.2	choco install nodejs
Yarn	1.17.3	npm install -g yarn
Expo	3.23.1	yarn add global expo-cli

Certifique-se de que tenha o Node.js e um gerenciador de dependências em seu ambiente antes de seguir os passos abaixo.

Para instalar e startar a plataforma Proffy, use npm ou yarn:

Clonagem

Primeiro, clone o repositório para seu ambiente:

> git clone https://github.com/shyoutarou/NLW2_Mobile.git 

Depois, entre no repositório clonado e no diretório correspondente ao que quer testar (web, server). Logo após, insira os seguintes comandos no seu terminal para cada diretório respectivamente:

Como executar o projeto

Podemos considerar este projeto como sendo divido em três partes:

Back End (pasta server) Front End (pasta web) Mobile (pasta mobile)

💡 Tanto o Front End quanto o Mobile precisam que o Back End esteja sendo executado para funcionar.

📦 Executar Server API REST

# Entra no diretório "server"
> cd ./server

# Instala todas as dependências
> yarn install or npm install

# Execute migrations
> yarn knex:migrate

# Start o servidor web para a plataforma Proffy
> yarn start  or npm run start

# Será startado em `http://localhost:3333`

📱 Executar Projeto Mobile

# Go into the repository
$ cd ./mobile

# Install dependencies
$ yarn install or npm install

# Run
$ yarn start or npm run start

# Expo will open, just scan the qrcode on terminal or expo page

# If some problem with fonts, execute:
$ expo install expo-font @expo-google-fonts/archivo @expo-google-fonts/poppins

🐛 Issues

Sinta-se à vontade para registrar um novo problema com o respectivo título e descrição no repositório Proffy. Se você já encontrou uma solução para seu problema, adoraria revisar sua solicitação de pull!

🤝 Contribuições

Siga os passos abaixo para contribuir:

1. Faça o fork do projeto (https://github.com/shyoutarou/NLW2_Mobile)

2. Clone o seu fork para sua maquína (git clone https://github.com/user_name/NLW2_Mobile.git)

3. Crie uma branch para realizar sua modificação (git checkout -b feature/name_new_feature)

4. Adicione suas modificações e faça o commit (git commit -m "Descreva sua modificação")

5. Push (git push origin feature/name_new_feature)

6. Crie um novo Pull Request

7. Pronto, agora só aguardar a análise 🚀

Agradecimentos

Rocketseat	diego3g

Referências

• Autenticação no React Native / ReactJS com Context API & Hooks
• https://blog.rocketseat.com.br/reactjs-autenticacao/
• Autenticação JWT no React Native com API REST em NodeJS
• Iniciando com React Native: Navegação e Autenticação com JWT
• Tipos de navegação no React Native
• How I set up React and Node with JSON Web Token for Authentication
• React (without Redux) - JWT Authentication Tutorial & Example
• Scroll infinito no React Native
• Deploy NLW

📜 License

O projeto publicado em 2020 sobre a licença MIT ❤️

Made with ❤️ by Shyoutarou

Gostou? Deixe uma estrelinha para ajudar o projeto ⭐