♻️ Casa Criativa
Desenvolver uma aplicação para cadastrar ideias.
- 1. Início
- 2. Nova Ideia
- 3. Ideias
- 0. Rodar a aplicação:
npm run dev - 1. Introdução à programação WEB
- 1. 1. O que é programação ?
- 1. 1. 1. Ensinar o computador
- 1. 1. 1. 1. Algoritmo
- 1. 1. 1. 1. 1. Passo a passo
- 1. 1. 1. 1. 2. Conjunto de regras
- 1. 1. 1. 2. Lógica de Programação
- 1. 1. 1. 2. 1. Maneira de pensar
- 1. 1. 1. 3. Sintaxe
- 1. 1. 1. 3. 1. Maneira correta de escrever
- 1. 2. Qual linguagem de programação ?
- 1. 2. 1. Javascript
- 2. Ambiente de Desenvolvimento
- 2. 1. Instalar o VSCode
- 2. 2. Instalar o Node.js - Versão LTS v12.18.0 - v13.2.0
- 2. 3. Instalar o Google Chrome
- 3. Front-End e Back-End
- 3. 1. Imagina que ...
- 3. 1. 1. Cliente chama, servidor escuta e responde
- 3. 2. Como é feita a comunicação ?
- 3. 2. 1. HTTP - HyperText Transfer Protocol
- 3. 2. 2. URL - Localização universal
- 3. 2. 3. Troca de dados - pedido e resposta
- 3. 3. Tecnologias
- 3. 3. 1. Html - Estrutura
- 3. 3. 2. CSS - Estilização
- 3. 3. 3. Javascript - Regras de Negócio
- 4. Apresentação do projeto: casa criativa
- 5. Estrutura do HTML: index.html
- 5. 1. Estruturar os Elementos básicos do HTML
- 5. 2. Emoji:
https://www.piliapp.com/facebook-symbols/ - 5. 3. CSS no HTML: Cascading StyleSheet
- 2. Estilização do formulário de nova ideia
- 2. 1. Box
- 2. 1. 1. Largura
- 2. 1. 2. Altura
- 2. 1. 3. Conteúdo de Caixa
- 2. 1. 4. Espaçamentos
- 2. 1. 5. Preenchimento
- 2. 1. 6. Bordas
- 2. 1. 7. Posicionamento
- 2. 2. Cores e Fontes
- 2. 3. Refatorando detalhes da estilização
- 3. Página Ideias
- 3.1. Estrutura HTML
- 3.2. Estilização CSS
- 3.2.1. mesmo arquivo style, com id page-ideas
- 3.2.2. css menu: #page-ideas header nav li a
- 3.2.3. css sessão de ideias: #page-ideas section #title p h1
- 3.2.4. refatorando css scroll
- 3.2.5. refatorando tamanho da página nova ideia
- 3.2.6. refatorando detalhes
- 4. Backend
- 4.1. Responsabilidades
- 4.1.1. receber pedidos do cliente
- 4.1.2. devolver respostas para o cliente
- 4.1.3. regras de negócio
- 4.1.4. dados
- 4.2. Tecnologias
- 4.2.1. Nodejs
- 4.2.2. BD
- 4.3. Servidor [Backend]
- 4.3.1. criar servidor: server.js
- 4.3.2. npm init -y
- 4.3.3. configurar o servidor
- 4.3.4.1. instalar o express - 4.17.1 - npm install express
- 4.3.4.2. nodemon - reiniciar servidor automaticamente -
npm install nodemon- v1.18.11 - 4.3.5. Rotas
- 4.3.6. Nunjucks: npm i nunjucks
- 4.3.6.1. configurar nunjucks
- 4.4. bug de estilização do formulário de nova ideia
- 4.4.1. em telas maiores, corta os botões
- 4.5. Usando Nunjuck,exibir os dados dinamicamente com estrutura de repetição
- 4.5.1. página home
- 4.5.1.2. exibindo a mais recente adicionada
- 4.5.2. página ideas
- 4.5.2.2. exibindo a mais recente adicionada
- 4.6. Refatorar código
- 4.6.1. reduzir a repetição de código com nunjucks
- 4.6.2.
modal.html - 4.6.3.
allIdeas.html - 4.6.4.
layout.html
- 5. Banco de dados
- 5.1. Porque criar um db para a aplicação ?
- 5.1.1. dados não podem ficar na aplicação
- 5.1.2. perder ou corromper
- 5.1.3. segurança
- 5.1.4. responsabilidades
- 5.2. SQL
- 5.2.1. structured query language
- 5.2.2. linguagem para consultar, criar, atualizar, listar, deletar, ...
- 5.2.3. tabelas/entidades/relações - colunas e linhas
- 5.3. Tecnologias
- 5.3.1. SQLite
- 5.3.1.1. open source
- 5.3.1.2. fácil configuração de ambiente
- 5.3.1.3. db relacional
- 5.3.1.4. ótima opção para iniciar as ações com sql
- 5.4. Instalar o SQLite3
- 5.4.1.
npm install sqlite3 - 5.4.2.
db.js: configurações do banco de dados - 5.4.3. CRUD
- 5.4.3.1.1. create
- 5.4.3.1.2. executar
node db.js - 5.4.3.1.3. criado
ws.db - 5.4.3.2. insert:
node db.js - 5.4.3.3. select:
node db.js - 5.4.3.4. delete:
node db.js - 5.5. Integrar o db com nossa aplicação
- 5.5.1. warning: imagens sumiram
- 5.5.1.1. solução: no arquivo allideas.html, os formatos dos arquivos devem bater com os tipos criados no banco de dados.
- 5.5.2. Exibir mensagem de erro
- 5.5.3. Nova Idea: cadastrar nova ideia no banco de dados
- 5.5.3.1. Pegar as informações inseridas no formulário de nova ideia
- 5.5.3.2. Salvando no db
- 5.5.4. Validação no front-end para db:
script.js - 5.5.4.1. não permitir criar nova idéia com o formulário incompleto
- 5.5.4.2. mensagem de alert do próprio navegador
- 5.6. Visualizar dados do db no Beekeeper
- 5.6.1. Realizado algumas modificações no db.
SELECT * FROM ideas;
DELETE FROM ideas WHERE title='Medium';
DELETE FROM ideas WHERE title='Hack de Programador';- Servidor Web do VSCode no plugin: Live Server. Botão direito no index.html
http://127.0.0.1:5500/index.html - Icons:
https://www.flaticon.com/packs/stay-at-home-13 - Fonts:
https://fonts.google.com/
- responsividade
- acessibilidade
- modo dark / light
- variação de cores
- crud de ideias
- hospedar
As seguintes ferramentas foram usadas na construção do projeto:
- Css: posicionamento, dimensionamento e muito mais
- Javascript
- HTML: estrutura e efeitos
- React: os fundamentos, como state, props, components, ciclo de vida.
- Git
- Github
- Yarn
- Node.js
- Zeit Now
Podemos considerar este projeto como sendo com uma parte:
- Front End
- Back End
- Banco de Dados
Antes de começar, você vai precisar ter instalado em sua máquina as seguintes ferramentas: Git, Node.js. Além disto é bom ter um editor para trabalhar com o código como VSCode
# Clone este repositório
$ git clone https://github.com/douglasabnovato/casa-criativa
# Acesse a pasta do projeto no seu terminal/cmd
$ cd casa-criativa
# Instale as dependências
$ npm install
# Execute a aplicação em modo de desenvolvimento
$ npm run dev
# A aplicação será aberta na porta:3000 - acesse http://localhost:3000
- Faça um fork do projeto.
- Crie uma nova branch com as suas alterações:
git checkout -b my-feature - Salve as alterações e crie uma mensagem de commit contando o que você fez:
git commit -m "feature: My new feature" - Envie as suas alterações:
git push origin my-feature
Caso tenha alguma dúvida confira este guia de como contribuir no GitHub
Este projeto esta sobe a licença MIT.
Feito com ❤️ por Douglas A B Novato 👋🏽 Entre em contato!
Fonte do projeto Rocketseat - Mayk Brito