/proffy

Um projeto para cadastrar aulas que você quer dar com descrição de horário, conteúdo e permitir interação com possíveis alunos.

Primary LanguageCSS

Proffy

Proffy

Projeto

Um projeto de uma landing page para cadastrar aulas que você quer dar com descrição de horário, conteúdo e permitir interação com possíveis alunos.

Design

  • Proposta do design: Home
    Proffy

  • Proposta do design: Proffy
    Proffy

  • Proposta do design: Informações do Prof
    Proffy

  • Proposta do design: Professores Disponíveis
    Proffy

Metodologia

  • v1.0.0 - Acelerando sua Evolução
  • 0. Rocketseat
  • 0.1. Pilares do método do aprendizado
  • 0.1.1. Prática: o evento reune um conteúdo com clareza e atividades práticas, codando.
  • 0.1.2. Foco: Concentrar os esforços de estudos na mesma tecnologia, fazendo com que vamos ao próximo nível, ao invés de sair atirando para todos os lados, atrás da mais nova linguagem ou framework.
  • 0.1.3. Grupo: interação na comunidade com outros programadores mais experientes para receber ajuda. E também, com outros programadores que você pode ajudar. Para isso, a ferramenta Discord dentro da comunidade aberta da Rocketseat é uma ótima opção para colocar isso em prática. Completando o ciclo perfeito de aprendizado. Destaca o networking, e para isso, utilizar o Linkedin e o Github para aparecer para outros profissionais, recrutadores e empresas.

Front-End

  • 1. Front-End
  • 1.1. Programação Web
  • 1.1.1. O que é Programação
  • 1.1.1.1. Ensinar Computador
  • 1.1.1.1.1. Algoritmos
  • 1.1.1.1.2. Lógica de Programação
  • 1.1.1.1.3. Sintaxe
  • 1.1.2. Linguagem de Programação
  • 1.1.2.1. Javascript
  • 1.2. Configurar o ambiente de desenvolvimento
  • 1.2.1. Ferramentas
  • 1.2.1.1. Navegador Chrome
  • 1.2.1.2. Editor de código VSCode
  • 1.3. Front-end e Back-end
  • 1.3.1. Imagina que
  • 1.3.2. Como é feita essa comunicação ?
  • 1.3.2.1. HTTP
  • 1.3.2.2. URL
  • 1.3.2.3. Troca de dados
  • 1.3.3. Tecnologias do Front-End
  • 1.3.3.1. HTML
  • 1.3.3.2. CSS
  • 1.3.3.3. Javascript
  • 1.3.4. Tecnologias do Back-End
  • 2. Projeto
  • 2.1. Layout da aplicação, construído no Figma: aplicação Proffy
  • 2.2. Arquivos que compõem a aplicação
  • 3. Introdução às Tecnologias
  • 3.1. HTML
  • 3.1.1. TAGs
  • 3.1.1.1. head
  • 3.1.1.1.1. meta
  • 3.1.1.1.2. title
  • 3.1.1.1.3. link
  • 3.1.1.1.4. style
  • 3.1.1.2. body
  • 3.1.1.2.1. div
  • 3.1.1.2.2. h1
  • 3.1.1.2.3. p
  • 3.1.1.2.4. a
  • 3.1.1.2.5. img
  • 3.2. CSS
  • 3.2.1. Responsivo
  • 3.2.1.1. Mobile First
  • 3.2.1.2. Unidades de Medida: rem, em
  • 3.2.2. Box-Model
  • 3.2.2.1. Tamanho de Conteúdo: width, height
  • 3.2.2.2. Preenchimentos
  • 3.2.2.3. Bordas
  • 3.2.2.4. Espaçamentos
  • 3.2.2.5. Displays
  • 3.2.2.6. Cores: fundo, fontes, sombrar, opacidade
  • 3.2.3. Layout
  • 3.2.3.1. Posicionamentos
  • 3.2.3.1.1. Displays
  • 3.2.3.1.2. Position: relative, absolute
  • 3.2.3.2. Alinhamentos
  • 3.2.4. Texto
  • 3.2.4.1. Tamanho
  • 3.2.4.2. Tipo
  • 3.2.4.3. Espaçamentos
  • 3.2.4.4. Alinhamentos
  • 3.3. Javascript
  • 3.3.1. Variáveis
  • 3.3.2. Tipos de Dados
  • 3.3.3. Objetos
  • 3.3.4. Funções
  • 3.3.5. Condições
  • 3.3.6. Repetições

Back-End

  • v2.0.0 - Olhando as Oportunidades
  • 0. A Home da Landing Page - css e html
  • 0.1.1. A estilização da aplicação "Mobile First."
  • 0.1.2. A estilização da aplicação "Desktop".
  • 0.1.3. A estilização da aplicação "Tablet".
  • 0.2. A Proffy da Landing Page - css e html
  • 0.2.1 Entender os elementos que estão no design
  • 0.2.2. Colocar os elementos da página
  • 0.2.3. Estilizar os elementos da página
  • 0.2.4. Proposta do design: Proffy aplicando First Mobile
  • 0.2.5. Corrigir layout - page proffy - barra de pesquisa
  • 1. Responsabilidades
  • 1.1. Receber pedidos do cliente
  • 1.2. Preparar os pedidos ( Regras de Negócio )
  • 1.3. Enviar respostas
  • 1.4. Lidar com dados da aplicação
  • 2. Tecnologias
  • 2.1. Linguagem: Javascript
  • 2.2. Node.js (https://nodejs.org)
  • 2.3. Git Bash (https://gitforwindows.org)
  • 2.4. Banco de dados SQL
  • 2.5. SQLite
  • 3. Bora Codar!
  • 3.1. Estrutura de pastas do projeto
  • 3.2. Criação do servidor
  • 3.2.1. Instalação dos módulos
  • 3.2.2. Configuração do servidor
  • 3.2.2.1. Criar e iniciar
  • 3.2.2.2. Página inicial
  • 3.2.2.3. Arquivos estáticos
  • 3.2.3. Rotas da aplicação
  • 3.2.3.1. Requisição e Resposta
  • 3.2.3.2. O que são verbos HTTP
  • 3.2.3.3. GET e POST
  • 3.2.3.4. Tipos de envio de dados
  • 3.2.3.4.1. Query Strings / Body
  • 3.2.3.4.2. Habilitar o express para utilizar o req.body
  • 3.2.4. Template Engine
  • 3.2.4.1. Instalar e configurar nunjucks
  • 3.2.4.2. Renderizar
  • 3.2.4.3. Enviar dados para o html
  • 3.2.4.4. Usando Nunjucks
  • 3.2.4.4.1. include
  • 3.2.4.4.2. variables
  • 3.2.4.4.3. extends
  • 3.2.4.4.4. block
  • 3.2.4.4.5. if
  • 3.2.4.4.6. for
  • 3.2.4.5. Instalar extensão nunjucks-template nas extensões VSCode
  • 3.2.5. Dados
  • 3.2.5.1. Enviando dados
  • 3.2.5.2. Recebendo dados
  • 3.2.5.3. Persistindo ( guardando ) banco de dados

Front-End

  • v3.0.0 - A escolha da stack
  • 1. Inserir o ícone no topo da aba do navegador
  • 2. Refatorar o código da page-study e da page-header : criado o header.css
  • 3. Construir a page-give-classes (dar aulas)
  • 3.1. Estrutura html para construir o layout.
  • 3.2. HTML do formulário - Seus Dados
  • 3.3. CSS do formulário - Seus Dados
  • 3.3.1. Mobile First
  • 3.3.2. Desktop
  • 3.4. HTML do formulário - Sobre a Aula
  • 3.5. CSS do formulário - Sobre a Aula
  • 3.5.1. Mobile First
  • 3.5.2. Desktop
  • 3.6. HTML do formulário - Horários Disponíveis
  • 3.7. CSS do formulário - Horários Disponíveis
  • 3.7.1. Mobile First
  • 3.7.2. Desktop
  • 4. Construir o Javascript da Aplicação
  • 4.1. Procurar o botão
  • 4.2. Quando clicar no botão
  • 4.3. Executar uma ação
  • 4.3.1. Duplicar os campos
  • 4.3.2. Colocar na página

Backe-End

  • v4.0.0 - Até dois anos em dois meses
  • 1. Backe-End
  • 1.1. Criar o servidor
  • 1.1.1. Nodejs: v12.18.3 (LTS)
  • 1.1.2. Estrutura de pastas: public, src
  • 1.1.3. npm init -y: gerenciamento de pacotes (dependências), cria o arquivo package.json
  • 1.1.4. Express - Biblioteca: npm install express
  • 1.1.5. Servidor do projeto: server.js
  • 1.1.6. Comando node src/server.js roda nosso servidor na porta http://127.0.0.1:5500/
  • 1.1.7. Nodemon: a cada alteração, restart o servidor automaticamente npm install nodemon -D
  • 1.1.8. Configurar o Nodemon
  • 1.1.8.1. No package.json >> script >> trocar o item inteiro test por dev : nodemon src/server.js
  • 1.1.8.2. Rodar o servidor: npm run dev
  • 1.2. Criar as rotas da aplicação
  • 1.2.1. Botões com as rotas
  • 2.1. HTTP
  • 2.2. GET e Post
  • 2.3. Localhost
  • 2.4. Instalar Nunjucks: npm install nunjucks para renderização das rotas
  • 2.5. Configurar Nunjucks
  • 3. Exibir as informações vindo do back-end
  • 3.1. Estrutura de repetição para exibir dados dos professores
  • 3.2. Estrutura de repetição com os dados dinâmicos
  • 3.3. Botão que utiliza api do whatsapp para enviar mensagem de contato para agendar aula do respectivo professor
  • 3.4. Dados dinâmicos no formulário entre o back-end e o front-end
  • 4. Javascript
  • 4.1. Variáveis
  • 4.2. Tipos de Dados
  • 4.3. Objetos
  • 4.4. Funções
  • 4.5. Condições
  • 4.6. Repetições

Banco de Dados

  • v5.0.0 - A milha extra - 07/08 - 02:48:41
  • 0. Banco de Dados
  • 0.1. Instalar SQLite - npm install sqlite-async
  • 0.2. Estrutura de pastas - src/database/db.js e src/database/database.sqlite
  • 0.3. Construir o banco de dados
  • 0.3.1. Estrutura de pastas e arquivos
  • 0.3.2. Comandos SQL - criar tabelas - node src/database/db.js
  • 0.3.3. Plugin SQLite no VSCode - Open Database
  • 0.3.4. Teste - test.js : inserir dados manualmente
  • 0.3.5. Organizando os dados para inserção
  • 0.3.6. Em db, atenção aos momentos de espera: async await
  • 0.3.7. Instrução map
  • 0.3.8. Instrução promise
  • 0.4. Rodar o db - node src/database/test.js
  • 0.4.1. Construção das Query
  • 0.4.2. Database : dados, testes, utilidades
  • 0.5. Layout de Página Vazia no Study - no-results
  • 0.6. Criar escotilha para URL
  • 0.7.1. de GET para POST no formulário
  • 0.7.2. Tipos de envio de dados: query, strings, body
  • 0.8. Aplicação
  • 0.8.1. Corrigir detalhes de funcionamento
  • 1. Banco de Dados - SQLite
  • 1.1. Dados não devem ficar na aplicação
  • 1.1.1. Perder/Corromper
  • 1.1.2. Segurança
  • 1.1.3. Responsabilidades
  • 1.2. SQL
  • 1.2.1. Structured Query Language
  • 1.2.2. Linguagem para
  • 1.2.2.1. Criar
  • 1.2.2.2. Consultar
  • 1.2.2.3. Atualizar
  • 1.2.2.4. Deletar
  • 1.2.2.5. Mais...
  • 1.2.3. Tabelas - Entidades - Relações:
  • 1.2.3.1. Colunas e linhas
  • 1.3. Tecnologia Utilizada
  • 1.3.1. SQLite
  • 1.3.2. Open-source e fácil de configurar
  • 1.3.3. Banco de dados que reside na própria aplicação
  • 1.3.4. Excelente para quem está começando no mundo SQL
  • 2. Bora Codar!
  • 2.1. Instalar o sqlite-async
  • 2.2. Criar arquivo de configuração do banco de dados db.js
  • 2.3. Criar o objeto que irá fazer operações no banco de dados
  • 2.4. Operações
  • 2.4.1. Criar tabela no banco de dados
  • 2.4.2. Inserir um dado na tabela
  • 2.4.3. Consultar um dado na tabela
  • 2.4.4. Apagar um dado da tabela
  • 2.5. Exportar o objeto para ser usado em outro local
  • 2.6. Importar o banco de dados no server.js
  • 2.7. Utilizar o banco de dados nas rotas

Encerramento

  • 1. Método de Aprendizado: Prática, Foco, Grupo

🚀 Evoluir a aplicação - Próximo passo

  • v7.0.0 - Desafios
  • 1. Página de sucesso
  • 1.1. Mostrar página de sucesso após o cadastro do proffy
  • 1.2. aguardar 2 segundos na página e redirecionar para a listagem dos proffys, com filtro
  • 1.2.1. use setTimeout para aguardar os 2 segundos
  • 1.2.2. location.href = ""
  • 2. Correção de bugs
  • 2.1. Não permitir o usuário colocar um novo campo de dia e horário, se o dia e hora anterior estiver vazio
  • 2.2. Funcionalidade de deletar um campo de dia e hora
  • 3.1. responsividade
  • 3.2. acessibilidade
  • 3.3. modo dark / light
  • 3.4. variação de cores
  • 3.5. hospedar aplicação

Resultado

  • Construindo a aplicação em versões.

Dar aulas

.: Por Douglas A B Novato - @douglasabnovato :. De Diego Fernandes - Rocketseat - Next Level Week 2