Sobre • Proffy • Instalação • Tecnologias • Autor
Projeto desenvolvido durante a NLW 02, evento criado pela Rocketseat. Um evento 100% online e GRATUITO, com conteúdo exclusivo e INÉDITO.
Ocorreu do dia 03 de Agosto ao dia 09 de Agosto de 2020 e teve como intuito mostrar na prática o poder da stack NodeJS + ReactJS + React Native e como essas tecnologias podem te levar até os seus maiores objetivos como programador.
A aplicação Proffy tem como objetivo conectar estudantes e professores para que possam evoluir juntos nas mais variadas matérias. Sendo uma plataforma de educação intermediadora, a aplicação possui duas partes: aplicação web e mobile, cada qual com sua responsabilidade e funcionalidades especificas as quais serão descritas abaixo:
Através da aplicação web temos acesso a todas as funcionalidades que a plataforma Proffy possui, funcionalidades essas que serão descritas a seguir. O proposito da aplicação é conectar professores das mais variadas matérias com alunos que estão buscando aprofundar seus conhecimentos em determinados temas. Na web, os novos usuários começar com a inscrição na plataforma, criando uma conta de usuário que não irá distinguir se ele deseja dar ou assistir aulas, mas sim servir para realizar login na plataforma. A seguir temos as respectivas telas do fluxo de autenticação da plataforma:
Como vemos na tela acima, o acesso é feito através de email e senha e, caso o usuário não tenha uma conta, temos a opção de cadastro de usuário, conforme fluxo abaixo:
| Tela de cadastro | Cadastro concluído |
|---|---|
Com o cadastro concluído o usuário está apto a logar na plataforma e utilizar os recursos de ingressar em aula ou disponibilizar as aulas nas disciplinas que ele deseja lecionar. Ao logar na plataforma ele verá a tela abaixo que é a home da aplicação, onde ele encontrará as duas funcionalidades da Proffy:
Um detalhe nessa tela é que a direita dos botões temos as conexões que aquele usuário possui. Isso indica com quantos usuários ele já interagiu, seja seus alunos ou seus professores. Por exemplo, caso o usuário logado na tela anterior seja professor e um outro usuário busque pela disciplina a qual ele leciona e ao buscar pela matéria tenha interesse nas aulas do usuário professor, ele terá a opção de se conectar com o professor através do WhatsApp, com isso, cria-se uma conexão e na home, consequentemente, teremos essa nova conexão considerada ao exibir o total de conexões, conforme tela a seguir:
Agora vamos as funcionalidades da aplicação... 🚀
Para os usuário que desejam dar aula, ao clicar no botão Dar aulas, ele será direcionado para o formulário de registro da disciplina que deseja lecionar e outras informações como seus horários disponíveis, valor e informações de contato. Abaixo a tela de cadastro da disciplina e todas as informações que são requeridas para utilizar a funcionalidade:
Após o cadastro, conforme exemplificado acima, a aula já estará disponível para os usuários que buscarem por essa disciplina nos horários que ela estará disponível.
Vamos agora ver como é a busca de disciplinas na visão do aluno. A busca é bem simples, o estudantes apenas escolhe a disciplina que ele deseja estudar, qual dia da semana e em qual horário. Feito isso, serão exibidos para ele todos os professores que lecionam a materia no dia e horário que ele filtrou. Após a escolha do professor preferido pelo aluno, ele pode clicar no botão para entrar em contato e agendar suas aulas com o professor, conforme printScreen abaixo:
Na home do aplicativo da Proffy temos as mesmas informações da web: opções para dar aula ou buscar por disciplinas e o total de conexões do usuário do usuário logado, conforme imagem abaixo:
Ao clicar em dar aulas, a seguinte tela será exibida para o usuário:
Para quem deseja dar aulas, o cadastro deve ser realizado através da interface web e essa funcionalidade está indisponível no aplicativo.
Mas para os estudantes, a funcionalidade que temos na web é a mesma do app e ao entrar na tela de busca teremos o seguinte:
Aqui as regras são as mesmas da web: basta buscar a disciplina desejada e o dia e horário que deseja estudar. Com os filtros desejados adicionados, basta realizar a busca para que os resultados sejam exibidos em tela e, com o(s) professor(es) interessados definidos, basta clicar no botão para entrar em contato com eles. O que difere o app da web aqui é a opção de favoritar os professores para serem exibidos em uma lista a parte da busca, para que os estudantes possa ter contato com seus professores preferidos mais facilmente. Abaixo a exemplificação de ambas as telas citadas acima:
| Tela de busca | Professores favoritados |
|---|---|
Antes de começar, você vai precisar ter instalado em sua máquina as seguintes ferramentas: Git e Node.js. Além disto é bom ter um editor para trabalhar com o código como VSCode.
# Clone este repositório
$ git clone [email protected]:MrRioja/Proffy.git
# Acesse a pasta do projeto no terminal/cmd
$ cd Proffy
# Vá para a pasta server
$ cd server
# Instale as dependências
$ npm install
# Caso prefira usar o Yarn execute o comando abaixo
$ yarn
# Execute a aplicação em modo de desenvolvimento
$ npm run start
# Caso prefira usar o Yarn execute o comando abaixo
$ yarn start
# O servidor inciará na porta 3333 - acesse <http://localhost:3333># Clone este repositório
$ git clone [email protected]:MrRioja/Proffy.git
# Acesse a pasta do projeto no terminal/cmd
$ cd Proffy
# Vá para a pasta web
$ cd web
# Instale as dependências
$ npm install
# Caso prefira usar o Yarn execute o comando abaixo
$ yarn
# Execute a aplicação em modo de desenvolvimento
$ npm run start
# Caso prefira usar o Yarn execute o comando abaixo
$ yarn start
# O servidor inciará na porta 3000 - acesse <http://localhost:3000># Clone este repositório
$ git clone [email protected]:MrRioja/Proffy.git
# Acesse a pasta do projeto no terminal/cmd
$ cd Proffy
# Vá para a pasta mobile
$ cd mobile
# Instale as dependências
$ npm install
# Caso prefira usar o Yarn execute o comando abaixo
$ yarn
# Execute a aplicação
$ expo start
# Será aberto no terminal o menu do Expo onde poderá escanear o QR Code para executar o app diretamente no seu celular ou as opções de executar no emulador android ou iOS