Lista de tarefas
- Lista de tarefas
- Uma aplicação frontend com HTML, CSS e JS puro para gerir tarefas
- No backend vamos ter uma API NodeJS + Express +MySQL para servir o frontend
- Browser (Google Chrome)
- Visual Studio Code
- Laragon
- HeidiSQL
Base de dados
-
Base de dados
- id
- username
- password
- created_at
- updated_at
tasks
- id
- id_user
- task_text
- task_status (new | in progress | canceled | done)
- created_at
- updated_at
Tarefas a desenvolver no projeto
- Criar a estrutura inicial
- Base do frontend (html css js | bootstrap)
- Base do backend (node + express + mysql) com uma resposta padrão
Frontend
-
No frontend
- Páginas necessárias para a navegação na nossa app
- Pequenos testes de comunicação entre frontend e backend - utilização de Ajax (XMLhttprequest | fetchAPI)
-
Exemplo
- fullstack_01
-
Ver tarefas
- Titulo
- Filtro para escolher que tarefas queremos ver (select)
- Botão para adicionar tarefas
- Mensagem sobre o fato de não existirem tarefas
- Caixa para tarefas
- Possibilidade de alterar o status, editar tarefa e eliminar tarefa
- Parágrafo com o total de tarefas disponíveis (de acordo com o filtro)
-
Adicionar tarefa
- Input:text com o texto da tarefa
- Botão para cancelar
- Botão para submeter tarefa
-
Editar tarefa
- Input:text para editar o texto da tarefa
- Botão para cancelar
- Botão para submeter tarefa
-
Eliminar tarefa
- Eliminar será feita com uma modal
-
Estrutura base de cada página
- Bootstrap (slate) bootswatch
- Fontawesome
Font Awesome
- FontAwesome
- Site: https://fontawesome.com/
Bootstrap
-
Slate Bootstrap
-
Exemplo
- fullstack_02
Font Awesome
- FontAwesome
- Site: https://fontawesome.com/
Favicon
-
Free Favicon
-
Icon Icons
Emmet abbreviation
-
Teclas de atalho VSCode
-
Exemplo 1
<!-- comando/atalho
.container.mt-5>.row>(.col)*2
-->
<!-- Resultado -->
<div class="container mt-5">
<div class="row">
<div class="col"></div>
<div class="col"></div>
</div>
</div>
- Exemplo 2
<!-- comando/atalho
.row>.col.text-center
-->
<!-- Resultado -->
<div class="row">
<div class="col text-center"></div>
</div>
Bootstrap
-
Bootstrap
-
Exemplo
- fullstack_03
Emmet abbreviation
-
Teclas de atalho VSCode
-
Exemplo 3
<!-- comando/atalho
div.row>div.col-12
-->
<!-- Resultado -->
<div class="row">
<div class="col-12"></div>
</div>
- Exemplo 4
<!-- comando/atalho
div.row>(div.col)*4
-->
<!-- Resultado -->
<div class="row">
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
</div>
Bootstrap
- Bootstrap
Font Awesome
-
FontAwesome
-
Exemplo
- fullstack_04
Font Awesome
- FontAwesome
Emmet abbreviation
-
Teclas de atalho VSCode
-
Exemplo 5
<!-- comando/atalho
div.row>div.col>h4>span.text-info
-->
<!-- Resultado -->
<div class="row">
<div class="col">
<h4><span class="text-info"></span></h4>
</div>
</div>
- Exemplo 6
<!-- comando/atalho
div.row>div.col.text-center
-->
<!-- Resultado -->
<div class="row">
<div class="col text-center">
</div>
</div>
- Exemplo
- fullstack_05
-
Criação da base de dados
fullstack_stck_db
-
Tabela
users
/*Tabela users (usuários)*/
CREATE TABLE `users` (
`id` INT(10) UNSIGNED NOT NULL AUTO_INCREMENT,
`username` VARCHAR(50) NULL DEFAULT NULL COLLATE 'utf8_unicode_ci',
`password` VARCHAR(100) NULL DEFAULT NULL COLLATE 'utf8_unicode_ci',
`created_at` DATETIME NULL DEFAULT NULL,
`updated_at` DATETIME NULL DEFAULT NULL,
PRIMARY KEY (`id`) USING BTREE
)
COLLATE='utf8_unicode_ci'
ENGINE=InnoDB
;
- Tabela
tasks
/*Tabela tasks*/
CREATE TABLE `tasks` (
`id` INT(10) UNSIGNED NOT NULL AUTO_INCREMENT,
`id_user` INT(11) NULL DEFAULT NULL,
`task_text` VARCHAR(100) NULL DEFAULT NULL COLLATE 'utf8_unicode_ci',
`task_status` VARCHAR(50) NULL DEFAULT NULL COLLATE 'utf8_unicode_ci',
`created_at` DATETIME NULL DEFAULT NULL,
`updated_at` DATETIME NULL DEFAULT NULL,
PRIMARY KEY (`id`) USING BTREE
)
COLLATE='utf8_unicode_ci'
ENGINE=InnoDB
;
- Exemplo
- fullstack_06
Emmet abbreviation
-
Teclas de atalho VSCode
-
Exemplo 3
<!-- comando/atalho
div.row>div.col
-->
<!-- Resultado -->
<div class="row">
<div class="col">
</div>
</div>
- Exemplo
- fullstack_07
Backend
- Backend
- Criar um servidor NodeJS + Express + MySQL
- Criar um endpoint inicial - teste de comunicações
Express
- Instalar o Express
npm install express
MySQL
- Instalar o MySQL
npm install mysql
Executar o backend
- Roda o projeto backend
node --watch server.js
- Server.js
/*Server.js*/
const express = require('express');
const mysql = require('mysql');
// Opções de conexão com o MySQL
const connection = mysql.createConnection({
host: 'localhost',
user: 'root',
password: '',
database: 'fullstack_stack_db'
});
const app = new express();
app.listen(3000, () => {
console.log("Servidor iniciado na porta: http://localhost:3000");
});
// Rotas
app.get("/", (req, res) => {
connection.query("SELECT COUNT(*) users FROM users", (err, results) => {
if(err){
res.send(err.message);
}
res.send(results);
});
});
- Exemplo
- fullstack_08
Backend
- Roda o projeto backend
node --watch server.js
-
URLs
-
Resolver erro
-
Access-Control-Allow-Origin, header
Access to fetch at 'http://localhost:3000/user/1' from origin 'null' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled
O acesso para buscar em 'http://localhost:3000/user/1' da origem 'nulo' foi bloqueado pela política do CORS: Nenhum cabeçalho 'Access-Control-Allow-Origin' está presente no recurso solicitado. Se uma resposta opaca atender às suas necessidades, defina o modo da solicitação como 'no-cors' para buscar o recurso com o CORS desativado
- Exemplo
- fullstack_09
Backend
- Roda o projeto backend
node --watch server.js
Cross-origin resource sharing
- Wikipedia
Cors
-
NPM Cors Site: https://www.npmjs.com/package/cors
-
Instalação do Cors via terminal do
backend
npm install cors
- Exemplo
- fullstack_10
Font-Awesome
- Font-Awesome
Backend
- Roda o projeto backend
node --watch server.js
-
Plugin VSCode
Separators
-
Exemplo
- fullstack_11
- Roda o projeto backend
node --watch server.js
- Exemplo
- fullstack_12
- Roda o projeto backend
node --watch server.js
- Exemplo
- fullstack_13
- Roda o projeto backend
node --watch server.js
HTML Data Attributes
-
Using data attributes
-
Exemplo
- fullstack_14
- Roda o projeto backend
node --watch server.js
- Exemplo
- fullstack_15
- Roda o projeto backend
node --watch server.js
- Exemplo
- fullstack_16
- Roda o projeto backend
node --watch server.js
-
id_user
-
id_task
-
status
-
Exemplo
- fullstack_17
- Roda o projeto backend
node --watch server.js
- Exemplo
- fullstack_18
- Roda o projeto backend
node --watch server.js
- Exemplo
- fullstack_19