Este documento descreve o ciclo básico de treinamentos nas tecnologias hoje empregadas nas soluções desenvolvidas e mantidas pela TECHPAR
O propóstito dos treinamentos é tornar natural os jargões e procedimentos puramente técnicos, de modo que estes não afetem a compreensão e solução dos problemas diários de trabalho.
Espera-se que estes treinamentos tornem aptos para o trabalho os novos membros do time de desenvolvimento da TECHPAR.
O meio de entrega de cada exercício é um reposítório público no github na conta pessoal do colaborador.
Cada exercício lista requisitos e estes devem ser realizados fielmente. Importante: evitar subprodução e superprodução também. Em todos os exercícios este critério de atender exatamente o que foi pedido é ponto importante. Adicionalmente, perceber inconsistências no que é pedido é parte do treinamento também.
As datas de entrega, uma vez estabelecidas, também são ponto de avaliação da atividade.
O material de apoio ao desenvolvimento dos exercícios é o que foi produzido para o treinamento hello-js:
Abaixo as atividades a serem entregues
- criar aplicativo nodejs que sirva uma rota GET atendendo em /hello
- o projeto deve se chamar techpar-atividade-01
- esta rota deve responder via browser a string "hello world!"
- a rota deve ser implementada com o expressjs
- a porta onde o express atende deve ser a 3000
- o projeto nodejs deve ser gerenciado com o npm
- usar npm para inicializar o projeto
- usar o npm para gerenciar as dependências do projeto (instalar o express com npm install express --save)
- instalar usando o npm a ferramenta de desenvolvimento nodemon (npm install nodemon --save-dev)
- criar na seção scripts do package.json um script chamado "dev"
- o script deve disparar o nodemon
- na linha de comando, deve ser possível digitar npm run dev e o aplicativo rodar em http://127.0.0.1:300/hello
- a atividade quando implementada deve ser publicada no github com o nome de projeto "techpar-atividade-01"
- prazo de 2h para entrega
- criar aplicativo similar ao da atividade 01 (chamar de "techpar-atividade-02" no github)
- as rotas devem ser /list e /save, ambas atendendo no verbo GET do HTTP
- a rota /list deverá responder com a saída da consulta ao banco de dados
- a rota /save deverá receber os dados via parâmetros de consulta (ex. /save?nomepessoa=joao&telefonepessoa=123456789) e salvar um registro no banco de dados
- a resposta da rota /save deve ser o id do registro recém salvo
- para interagir com banco de dados deve ser usado o knex.
- a instalação e gerência do mesmo deve seguir os moldes do que foi usado na atividade 01, package.json, npm, etc
- o knex deve também ser instalado de modo global também (sudo npm -g install knex)
- inicializar no projeto "techpar-atividade-02" o knex com knex init
- o knex deve recuperar o perfil "development" do knexfile.js criado
- instalar com npm as dependências de banco de dados necessárias
- usar os migrates do knex para criar o esquema inicial de banco e a carga inicial também
- (knex migrate:make esquema_inicial)
- (knex migrate:make carga_inicial)
- o primeiro migrate deve criar a tabela pessoa(idpessoa,nomepessoa,telefonepessoa)
- o segundo migrate deve inserir algumas pessoas na tabela
- como criar migrates de definição e manipulação de dados deve ser pprocurado na internet (docs oficiais, blogs, etc) e na
- os migrates devem ser executados com knex migrate:latest
- prazo de 4h para entrega
- similar à atividade 02, batizar reppositório git de "techpar-atividade-03"
- adicionar um documento html que o express deverá servir
- o documento deverá estar dentro da pasta public, que deverá ser a pasta de conteúdo estático do express
- procurar na documentação oficial do express como servir arquivos estáticos
- compreender a interação no cliente e no servidor dos arquivos dentro e fora da pasta estática
- alterar o verbo HTTP do /save de GET para POST
- o documento html deverá ter um formulário html cujos campos tem mesmo nome das colunas da tabela pessoa
- o action do form deve ser o /save e method deve ser POST
- adicionar ao express o middleware body-parser que permite acessar o req.body das requisições
- os campos do formulário devem constar dentro do req.body (ex. req.body.nomepessoa)
- o retorno da rota /save deve ser o json recebido do formulário adicionado do idpessoa (ex. {"idpessoa":"1","nomepessoa":"Joao", "telefonepessoa":"12345678"})
- assim como a atividade 3, migrates de criação de esquema de dados devem ser criados
- o app deve verificar a variável de ambiente NODE_ENV para escolher o perfil do knex no knexfile.js
- os perfils, development e staging, devem ser preparados para uso
- preferencialmente, development com sqlite3 e staging com postgresql
- a instalação e configuração do postgresql não é parte da atividade. caso não tenha um disponível pode usar sqlite novamente, com outro nome para a base.
- além do script "dev" no package.json, colocar também o script "staging" - "npm run staging" deve fazer o mesmo que "npm run dev", adicionando apenas a variável de ambiente NODE_ENV=staging
- prazo de 8h para entrega
- deve fazer tudo o que a atividade 03 fez, com algumas alterações
- o repositório git deve se chamar "techpar-atividade-04"
- em vez de action direto no form, o documento html deverá conter um módulo angularjs 1.x
- o módulo deve conter um controller pra gerenciar o ng-submit do form
- o controller deve usar o serviço $http para submeter via POST os dados do formulário
- não devemos mais usar o modo form/urlencoded no middleware do express. em vez disso devemos usar o modo json e mandar json para o express tratar
- o serviço $http deve ainda listar todas as pessoas salvas no documento html.
- usar o ng-repeat para gerar uma tabela com as pessoas salvas abaixo do formulário de salvamento
- ao entrar na tela o angular já deve buscar possíveis pessoas salvas para listar
- toda vez que salvar uma pessoa a lista deve ser recuperada novamente
- prazo de 8h para entrega
- o mesmo que a atividade 05, com algumas alterações
- o repositório deve se chamar "techpar-atividade-05"
- em vez de um único documento html, devemos ter no index.html um ponto de montagem ng-view
- estudar e montar uma Single Page Application com angular 1.x
- usar angular 1.x de algum CDN
- devemos ter um controller para o salvamento e um controller para a listagem
- no documento raíz devemos ter links navegando para cada uma das rotas
- o uso do serviço $http deve ser encapsulado num service ou numa factory dedicada
- esse service deve ser injetado em cada um dos controllers criados
- cada rota deve conter referência para o seu controller e para o template de cada situação, listar / salvar
- a rota default é a de listagem
- prazo de 8h para entrega
- o mesmo que a atividade 05, com algumas alterações
- o repositório deve se chamar "techpar-atividade-06"
- o repositório não mais deve ser a raíz do projeto, mas conter dois projetos
- separar o projeto em app-servico e app-cliente
- app-servico deve conter a parte que envolve express e knex
- o package.json original pode ser adaptado para rodar neste projeto
- adicionar ao express suporte a CORS, ou seja, permitir acesso XHR oriundo de outro domínio
- app-cliente deve conter toda a parte envolvendo html e angular
- um novo package.json deve ser criado para o app-cliente. baixar o angular pelo npm desta vez
- neste projeto, o npm run dev deve disparar o http-server
- instalar o http-server como dependenciia de desenvolvimento como é o nodemon no outro projeto
- o repositório não mais deve ser a raíz do projeto, mas conter dois projetos
- prazo de 8h para entrega
- pegar o projeto app-cliente, criado na atividade 05, e adicionar suporte a budo e browserify
- o budo deve substituir o http-server no script dev
- um novo script deve ser criado, o build
- "npm run build" deve disparar a contrução do projeto com browserify
- os controllers e os services angular criados agora deve fazer uso de exports/require para montar suas dependências
- estudar uma boa abordagem de modularização e aplicar
- estudar o browserify handbook que o substack, criador do browserify, escreveu
- o nome do bundle deve ser build.js
- prazo de 8h para entrega
- reescrever o app-cliente em vuejs
- transformar os controllers em components
- transformar o módulo angular uma instância do vue view-model
- transformar a configuração do angular router em vue-router
- fazer uso dos componentes .vue em vez de um html e um js separados
- usar o axios em vez do $http do angular
- todo o resto deve ser similar à atividade 07
- prazo de 24h para entrega
- criar um serviço em node/express para gerir um catálogo de produtos
- listar produtos
- ver detalhes de produto
- nome
- preço
- descrição
- o knex migrations deve ser utilizado para
- criar o banco de dados de produtos (esquema)
- alimentar a base com produtos (carga)
- criar um aplicativo android para consumir este serviço
- uma tela para listar os produtos
- uma tela para ver os detalhes do produto
- prazo de 24h para a entrega