16/07/2022 - Aula 4 de Node.js (Presencial)
Ultima aula de Node.js, começamos as 08:30h, baixando o projeto de Angular feito aqui na pós, app-unipar4, para podermos integrar com o backend em Node.js.
Alguns ajustes tem que ser feitos para o projeto para com que ele funcione, como ajustes das rotas e formas de autenticação.
Depois o professor passou o trabalho e ficou disponível para tirar algumas dúvidas.
As informações do trabalho estão na pagina da disciplina. Link
02/07/2022 - Aula 3 de Node.js (Presencial)
Chegamos na Unipar e a sala estava trancada, após uns 10 minutos, conseguimos entrar na sala. O Professor Marlon passou uma atividade para criamos uma rota para a criação de um novo usuário, com as rotas GET, POST, PUT e DELETE.
Para o usuário, vamos utilizar criptografia, e precisamos dos pacotes abaixo:
npm install --save bcrypt
npm install --save jsonwebtoken
npm install --save passport
npm install --save passport-local
Implementamos a criptografia e o login com o passport, utilizando JWT para controlar o acesso a rotas.
Vamos trabalhar com documentação do projeto, para isso vamos utilizar o pacote swagger.
npm install --save swagger-ui-express
npm install --save swagger-jsdoc
Criamos a documentação do projeto para alguns dos endpoints e testamos como utilizar o swagger.
Com isso finalizamos a aula de hoje.
25/06/2022 - Aula 2 de Node.js (Presencial)
O Professor Marlon, chegou atrasado 10 minutos. Começou a aula as 08:40h, após o professor enviar o projeto para o github, o link é aula-node-posunipar.
Começamos a aula instalando um novo pacote para o mongo
npm install --save mongoose
Seguimos a aula fazendo com que os metodos GET, PATCH e DELETE funcionem com o banco de dados MongoDB
Teve o intervalo as 12h até as 13:30h.
Continuamos mudando as rotas para a parte das ordens
Adicionamos um novo pacote
npm install --savel multer
Utilizamos o multer para fazer o upload de arquivos
Com isso finalizamos a aula de hoje.
11/06/2022 - Aula 1 de Node.js (Presencial)
O Professor Marlon, começou a aula as 08:30h, por ser a primeira aula, teve alguns problemas técnicos em relação a projeto e internet na Unipar, ficamos aguardando sem fazer nada até as 08:45h, pois professor estava aguardando outros alunos chegarem.
Começamos vendo sobre a origem da linguagem utilizada, o JavaScript, que rodava em navegadores, e a ideia do Node.js é que seja possível rodar JavaScript fora do navegador, ou seja, em um servidor ou em um computador desktop, mas seu maior foco é o desenvolvimento de aplicações backend.
Para isso acontecer, o Node se utiliza o Chrome V8 Engine, que é um motor de JavaScript. Vamos utilizar esses recursos para poder criar uma API RESTful.
Para seguir a aula, você deve instalar o Node.js no seu computador, baixando a ultima versão do Node.js no site nodejs.org. Como editor de texto, você deve utilizar o Visual Studio Code. Com isso, rodamos o comando para iniciar o projeto.
npm init
Depois de criar o projeto, vamos instalar o módulo express, que é um módulo que permite que você crie aplicações web.
npm install --save express
Criamos dois arquivos, um server.js e app.js.
const http = require('http')
const app = require('./app')
const port = process.env.PORT || 4000
const server = http.createServer(app)
server.listen(port)
const express = require('express')
const app = express()
app.use('/api', (req, res, next) => {
res.status(200).json({
message: 'Hello word!'
})
})
module.exports = app
... e após rodar o comando node server.js e acessar o endereço http://localhost:4000/api, você verá o retorno da mensagem Hello word!.
A aula para por um momento, 30 minutos de intervalo até as 10:30h.
Voltamos fazer uma nova rota para produtos, que será a rota /products.
const express = require('express')
const router = express.Router()
router.get('/', (req, res, next) => {
res.status(200).json({
message: 'Handling GET requests to /products'
})
})
router.post('/', (req, res, next) => {
res.status(201).json({
message: 'Handling POST requests to /products'
})
})
router.get('/:productId', (req, res, next) => {
const id = req.params.productId
if (id > 0) {
res.status(200).json({
message: 'Handling GET requests to /products/' + id,
id: id
})
} else {
res.status(404).json({
message: 'Product not found'
})
}
})
module.exports = router
A aula para para o almoço, as 12h, e voltamos as 13:30h.
Fizemos mais uma classe igual a do produto, chamada ordens.
Depois disso instalamos o nodemon, que é um serviço que monitora o nosso projeto e reinicia o servidor quando houver alguma alteração.
npm install --save nodemon
Criamos também no arquivo package.json o comando para rodar o servidor.
...
"version": "1.0.0",
"description": "Exemplo de aula para o curso de NodeJS",
"main": "index.js",
"scripts": {
"start": "nodemon server.js"
}
...
"keywords": [
"node",
...
Baixamos também o morgan, que é um módulo que permite que você veja o que está acontecendo no servidor.
npm install --save morgan
E vamos baixar o body-parser, que é um módulo que permite que você trabalhe com o corpo da requisição.
npm install --save body-parser
Depois de instalar esses pacotes, fizemos alguns ajustes para entender como que a requisição vem até a aplicação. Além disso, configuramos uma regra sobre cors.
Instalamos o MongoDB, e a aula acabou as 17h.
24/04/2021 - Aula 3 de HTML5, CSS3 e ES6 (Remoto)
Professor Jemerson ministrou a terceira aula da matéria de HTML5, CSS3 e Javascript, começou fazendo uma revisão sobre a aula anterior e mostrando o que vai ser visto pra aula de hoje. Comentou que hoje vai ter trabalho a ser feito, visto que é a ultima aula dessa matéria.
As informações do trabalho estão na pagina da disciplina.
Link
Continuando a aula anterior, a partir da página 47, professor se aprofundou em Jquery, utilizou o material em .PDF, professor comenta que vamos fazer um exemplo utilizando o formulário feito na aula atividade 2 do qual os itens vão ser salvos numa tabela que vai manipulada pelo DOM, utilizando Jquery.
Foi apresentado métodos de manipulação do DOM, como adicionar ações a elementos, manipular dados do elemento, adicionar novos atributos ou retornar o valor que ele tem e até mesmo manipular informações visuais, como adicionar CSS ou remover CSS.
A aula seguiu assim até umas 10:10, que foi quando foi feito um intervalo.
Voltando do intervalo as 10:30, deu continuidade na aula com uma atividade, para treinar o que foi visto até então. Após um tempo, o professor fez a atividade na aula com todos para explicar uma das possíveis soluções.
Tudo isso foi visto antes do almoço, até as 12:00. A aula voltou as 13:20
A aula continuou falando sobre o ES6 (ECMAScript), falando sobre o escopo que as variáveis tem nessa versão, o let e o var. É recomendado utilizar sempre let, visto que ele só funciona dentro do escopo em que ele esta declarado.
{
var x = 2;
}
// x pode ser utilizado aqui
{
let y = 2;
}
// y não pode ser utilizado aqui
var x = 10
// x = 10
{
var x = 2;
// x = 2
}
// x = 2
let y = 10
// y = 10
{
let y = 2;
// y = 2;
}
// y = 10
Nessa versão também tem o suporte a Arrow Functions, uma forma mais simples de declarar uma função.
// ES5
var x = function(x, y) {
return x * y;
}
// ES6
const x = (x,y) => x * y;
Podemos trabalhar com listas de forma melhor, utilizando o for/of, ele vai passando elemento por elemento, e salvando em uma variável para utilizar dentro do seu código.
var cars = ["BMW", "Volvo", "Mini"];
var x;
for (x of cars) {
document.write(x + "<br >");
}
Foi adicionado também o suporte a classes, para trabalhar com orientação a objetos. Promises também foram adicionadas para poder se trabalhar de forma assíncrona. Muitas outras novidades foram adicionadas, a lista completa pode ser vista em https://www.w3schools.com/js/js_es6.asp.
Após falar dos novos recursos, o professor fez um exemplo utilizando map, reduce e filter para mostrar para a turma como que funciona e possíveis utilizações.
Com isso terminamos o material da aula 02 e vamos dar inicio a aula 03.
O material dessa aula está no .PDF, e começamos vendo recursos da API HTML 5, recursos que são chamados, que os navegadores fornecem recursos para nossa aplicação, como a utilização da localização, microfone ou câmera do dispositivo. Uma lista completa pode ser vista aqui.
O Drag/Drop é um desses recursos que a API do HTML 5 fornece, para poder arrastar arquivos para dentro da aplicação. Professor fez um exemplo utilizando a atividade 1, adicionando a opção de mover as noticias para outro local.
O professor comentou que podemos salvar dados no navegador, dentro de um limite que varia de acordo com cada navegador, mas podemos utilizar o Web Storage, tanto para salvar dados, como informações de sessão, a diferença é que os dados de sessão são perdidos quando o navegador é fechado.
O professor também fez um exemplo de armazenamento utilizando local storage e a atividade feita anterior.
AS 16h o professor fez um intervalo de 15 minutos, e após voltar, continuou com a solução do exemplo de local storage.
Após o exemplo, foi falado de acessibilidade, responsividade e de performance dos site, alguns exemplos são:
Além de ferramentas, foi apresentado sites de templates, que ajudam a dar o ponta pé inicial, dentre eles temos:
Com isso foi finalizado a aula.
As informações do trabalho estão na pagina da disciplina.
Link
Antes de terminar, professor comenta do trabalho, que tem data de entrega dia 08/05/2021. O trabalho tem que atender ao seguintes requisitos:
10/04/2021 - Aula 2 de HTML5, CSS3 e ES6 (Remoto)
Professor Jemerson ministrou a segunda aula da matéria de HTML5, CSS3 e Javascript, começou fazendo uma revisão sobre a aula anterior e mostrando o que vai ser visto pra aula de hoje.
Continuou utilizando o material em .PDF, a partir da página 49. Este material pode ter algumas diferenças em relação ao material da aula anterior pois o professor fez alguns ajustes e correções.
A aula continuou o material da primeira aula, na parte de CSS e seus tipos de seletores, classes, elementos, inline, etc.
Professor mandou um link para um repositório no GitHub e utilizando este projeto, o professor foi fazendo durante a aula a estilização do conteúdo com CSS e explicando o que cada alteração iria impactar.
Foi feito uma copia(fork) do projeto que o professor apresentou, está disponível no Github no seguinte link:
https://github.com/pos-unipar/.
Um .zip foi gerado, do projeto no commit 92aaa8d, que é o commit em que estava o projeto na aula de hoje.
Foi comentado sobre o normalize.css, um projeto que contem formatações CSS para sobrescrever configurações de navegadores, o que pode garantir uma maior compatibilidade com diversos navegadores.
Entrando na parte de fontes, foi apresentado como importamos fontes, que da para trabalhar elas de forma externa ou interna, de que o sistema operacional precisa ter a fonte, caso contrario, uma fonte padrão vai ser utilizada.
Foi falado de outros componentes como Media Queries, Box model, Motores de renderização, tudo isso antes da hora do almoço.
Após o almoço, professor pediu para fazer a atividade da página 84 do .PDF, fazer essa atividade utilizando o projeto que o professor passou, já com as alterações que ele fez durante a aula de hoje, utilizando os arquivos da pasta exemplo.
Depois de um tempo para o pessoal tentar fazer, professor começou a fazer a atividade e explicar cada alteração.
Terminando essa parte da atividade, o professor começa a falar de frameworks front-ent:
Além de ver alguns dos principais front-ends, utilizamos o Bootstrap para modificar a pasta atividade, aplicando a versão 4.6 do framework. Após esse processo, professor fez o envio dessa alteração para o Github.
Com tudo isso, terminamos o material que era da aula 01 do dia 27/03/2021.
Agora vamos começar o conteúdo da aula de hoje utilizando o .PDF, começando vendo sobre SASS.
No conteúdo de SASS, o professor mostra o que é, como fazer a instalação e como trabalhar com ele. Começa apresentando as formas de se criar um arquivo .sass, que podemos trabalhar com variáveis, com alinhamento das propriedades, @Mixin, @extend, @import e Compass.
Em sequencia, é solicitado para instalarmos a extensão Live Sass Compiler no Visual Studio Code. Depois de instalado, foi solicitado para adicionar a seguinte configuração no Visual Studio Code. Vale notar que a extensão comentada tem dois plugins, instale a do link.
"liveSassCompile.settings.formats": [
{
"format": "expanded",
"extensionName": ".css",
"savePath": "~/../css"
}
],
Após essas configurações, migramos o .css da pasta exemplo do projeto do professor para ser um .scss e ver como ele se comporta. O plugin vai gerando o arquivo .css conforme vai sendo alterado o .scss.
Terminando esse assunto, entramos em JavaScript, vendo o que é, como utilizar ele na aplicação, como chamar, sua sequencia de chamada, o que pode ser feito, quais elementos consegue manipular, etc.
Além de JavaScript, foi visto JQuery, que é uma biblioteca em javascript para facilitar ações que queira fazer com javascript, como a seleção de elementos, que em javascript seria muito trabalhoso.
Com isso terminamos a segunda aula, conseguindo terminar tudo qeu tinha que ser visto para hoje.
27/03/2021 - Aula 1 de HTML5, CSS3 e ES6 (Remoto)
Professor Jemerson ministrou a primeira matéria do curso, a de HTML5, CSS3 e Javascript. Durante a primeira aula, foi realizado apresentações, tanto do professor como dos alunos. Em seguida o conteúdo começou a ser apresentado utilizando utilizando o material em .PDF.
Após o almoço, iniciou a aula na pratica, professor tinha solicitado para instalar o Visual Studio Code anteriormente e pediu para instalar a seguinte extensão:
Começamos dai a ver na pratica as tags HTML e suas funções e em seguida o professor Jemerson passa uma atividade para ser feito.
Após 20 minutos, ele volta e começa a explicar para fazer o upload da atividade para o Github, ele explica como criar um projeto, e os passos iniciais para poder enviar o projeto da nossa maquina para o servidor do github.
Após essa atividade, professor mostrou algumas ferramentas para criar sites, um template que ajuda com recursos e ferramentas:
Foi apresentado também algumas ferramentas para verificar compatibilidade com html5:
Seguindo o conteúdo, começamos a ver os tipos de inputs existentes no HTML5
Professor iniciou também a parte de CSS, comentando o que é, mas não se aprofundou nos seus recursos.
Para o primeiro dia de aula, não se foi concluído o objetivo, o material em PDF tem 81 paginas e chegamos somente até a página 47.