- Projeto HAPPY desenvolvido durante a Next Level Week da Rocketseat NLW#3! 🚀
A aplicação Happy vem para facilitar a visita em abrigos e lares que sejam próximos da sua casa, assim você pode levar muito amor e alegria às crianças! Adaptei para a minha cidade: Sapucaia do Sul/RS. Aqui você consegue visualizar informações sobre os abrigos, entrar em contato e também cadastrar novos lares.
As tecnologias utilizadas no front-end foram HTML, CSS e JavaScript. No back-end foram JavaScript, Node.js, Express, Handlebars, SQLite e Git.
Dia 1 - Explicação dos conceitos de Programação WEB / Lógica de Programação / Front-end e Back-end / HTTP ( HyperText Transfer Protocol ) / URL ( Universal Resource Location ) / HTML / CSS / Javascript. Após foi feito a configuração do ambiente de desenvolvimento (Chrome - Navegador e VSCode - Para escrever códigos). Após foi aplicação dos conceitos na prática - Mão na Massa: Criação da index.html(landing page) com as principais tags utilizadas, e também conectando o css ao html. Criação de documentos .css para organização e estilização do projeto, foi explicado o conceito de Cascading Style Sheets e Cascata e Especificidade. Foi explicado e demonstrado como deixar tudo responsivo e Mobile First. Explicação e prática de displays, flexbox, position: relative / absolute, alinhamentos e espaçamentos. Além de criar animações e transições.
Dia 2 - Foi explicado os conceitos de responsividade em CSS (rem, em, vh, %, vw, clamp(), etc.) e foi aplicado na finalização da Landing Page. Criação das páginas orphanages.html, que contém o mapa de localização dos orfanatos, criado também o arquivo de css dela, sendo aplicado os mesmos conceitos de responsividade, além de animações e transições. Criamos também a página orphanage.html que contém os detalhes do orfanato cadastrado, criação dos arquivos css dela também. Explicação e aplicação de JavaScript (Variáveis, tipos de dados, objetos, funções, condições e repetições). Utilizamos a biblioteca leafletjs para criar o mapa interativo. Criamos os arquivos de js das páginas orphanage e orphanages que contém as funções necessárias para utilização dos mapas, botões e galeria de imagens das páginas.
Dia 3 - Hoje iremos criar os formulários para cadastro dos orfanatos. Criação da página create-orphanage.html e também os arquivos de css necessários. Criação de algumas imagens svg necessárias para a estilização das páginas. Criação do arquivo JS page-create-orphanage.js com as funções relacionadas ao mapa para adicionar a localização no formulário de cadastro dos orfanatos, função de criação de ícone e marcadores, funções para adicionar e remover fotos e função para validação dos botões sim e não da página create-orphanage.html.
Dia 4 - Hoje iremos começar o Back-end da aplicação. Explicação do que é e como funciona o Back-end. Preparação do ambiente backend com instalação do node.js. Organização das pastas e arquivos anteriores. Instalação das dependências para funcionar o server. Criação do arquivo server.js onde iremos fazer as funções para nosso backend. Explicação sobre template engine que vamos usar para facilitar a visualização dos dados na aplicação, será usado Handlebars. Criação do arquivo pages.js que será responsável pelas rotas. Convertemos e acoplamos todo o front-end ao back-end. Vamos transformar a página orphanage em uma estrutura de dados, criamos o arquivo fakedata.js para criar os cadastros de 2 orfanatos. Alteramos arquivos de front-end para funcionar dinamicamente com o banco de dados.
Dia 5 - Explicação rápida sobre Banco de Dados e SQLite. Instalação do SQLite. Criação do arquivo db.js e test.js para seguir com as explicações. Criação do arquivo saveOrphanage.js que será usado para o bd da aplicação. Fizemos mudanças nos arquivos pages.js, orphanage.hbs, page-orphanages para linkar com o banco de dados. Mexemos em alguns arquivos de css também. Fizemos o envio dos dados do front-end para o back-end. Últimos ajustes e finalização da aplicação.
NLW#3! 🚀 agenda completa:
Dia 00 – Domingo (11/10) 20h00 – Live: Acelerando sua evolução
Dia 01 – Segunda-feira (12/10) 08h00 – Primeiro workshop liberado 20h00 – Live: Olhando as oportunidades
Dia 02 – Terça-feira (13/10) 08h00 – Segundo workshop liberado 20h00 – Live: A Escolha da Stack
Dia 03 – Quarta-feira (14/10) 08h00 – Terceiro workshop liberado 20h00 – Live: Até dois anos em dois meses
Dia 04 – Quinta-feira (15/10) 08h00 – Quarto workshop liberado 20h00 – Live: A milha extra
Dia 05 – Sexta-feira (16/10) 08h00 – Quinto workshop liberado 16h00 – Tudo sobre o GoStack
Encerramento – Domingo (18/10) 20h00 – Live de encerramento
Done. Next – Segunda-feira (19/10) 08h00 – Matrículas para a nova turma do bootcamp GoStack
Uma semana intensa, não é?