2020.3 (antigo) vídeo de apresentação
-
As interações (síncronas e assíncronas) serão feitas via Slack
-
A avaliação será feita a partir de um projeto individual (ver Avaliação abaixo)
-
A cada semana o aluno deve, até o domingo,...
- Revisar o material indicado (vídeos e material auxiliar)
- Cumprir a entrega da semana
- Revisar a entrega da semana passada de 2 colegas indicados
- Você pode cadastrar mais colegas além desses
- Pelo menos UMA issue deve ser cadastrada durante esse processo
- Não precisa cadastrar uma issue por revisão, mas, pelo menos 1 issue
- A issue não precisa ser uma correção, mas pode ser uma sugestão de algo novo ou fazer algo de forma diferente
- (OPCIONAL) Tirar dúvidas e interagir com os colegas sobre o conteúdo do material
- (OPCIONAL) Participar de lives sobre codificação/conteúdo (quarta às 10:00)
- Formulário de cadastro na disciplina
- Planilha de revisão da entrega passada
- Formulário de revisão
- Notas
| Início | Conteúdo | Conceitos | Vídeo | Material Auxiliar | Entrega | |
|---|---|---|---|---|---|---|
| 1 | 22/11 | Básico | HTML, HTTP e JS. Introdução e base. | - vídeo 1 - vídeo 2 - 2020 (antigo) vídeo 1 - 2020 (antigo) vídeo 2 |
Conceitos Iniciais | - Criar repositório - Definir o projeto (no README) - Criar HTML (sem JS) da funcionalidade mais importante do seu projeto |
| 2 | 29/11 | Node/Express | JS, Node, Express, Rotas, REST | - vídeo 1 - vídeo 2 - vídeo 3 - 2020 (antigo) vídeo 1 - 2020 (antigo) vídeo 2 |
NodeJS | Formulário de projeto |
| 3 | 06/12 | Node/Express | Um pouco mais de javascript | - vídeo 1 - 2020 (antigo) vídeo modelagem e implementação REST |
Node/Express com... - Uma rota POST - Uma rota GET (afetada pelo POST) |
|
| 4 | 13/12 | React Components | Primeira estrutura REACT | - vídeo 1 - vídeo 2 - 2020 (antigo) vídeo 1 |
slides | Um componente com... - Estado interno sendo alterado - Props que afetam o componente |
| 5 | 20/12 | React Components | Primeiros subcomponentes, Props, State | - vídeo 1 - vídeo 2 - 2020 (antigo) vídeo 1 |
slides | Um subcomponente com... - Props sendo afetado pelo estado do componente pai |
| 6 | 07/02 | React useEffect | Interação com backend (GET/POST/PUT) | - vídeo 1 - 2020 (antigo) vídeo 1 |
Um componente com... - Estado sendo definido por um GET |
|
| 7 | 14/02 | Jest | Testes de componentes | - vídeo 1 - 2020 (antigo) vídeo 1 |
Testar um componente que tenha... - Props e alteração de estado |
|
| 8 | 21/02 | React Context | Propagação de estado em árvore | - vídeo 1 - 2020 (antigo) vídeo 1 |
Uso de um contexto para... - Propagação de estado para baixo e para cima |
|
| 9 | 28/02 | React Router | Novas telas para a aplicação | - vídeo 1 - 2020 (antigo) vídeo 1 |
||
| 10 | 07/03 | Web APIs / Storage / Service Worker | - vídeo 1 - 2020 (antigo) vídeo 1 |
- | ||
| 11 | 14/03 | CSS/UI/UX | -vídeo 1 - 2020 (antigo) vídeo 1 |
1ª Entrega | ||
| 12 | 21/03 | Projeto | ||||
| 13 | 28/03 | Projeto | Entrega final | |||
| 14 | 04/04 | Final |
- Introdução à Internet e à Web
- Protocolos de comunicação e transferência de dados
- Linguagens de script
- Desenvolvimento para a Web (lado cliente)
- Tópicos avançados
Criar um sistema web (de internet) com um servidor simples de dados e uma interface (frontend) complexa utilizando um arcabouço moderno de componentes e seguindo as melhores práticas de desenvolvimento.
Cada aluno deve, individualmente, criar um sistema web focando principalmente no frontend e tendo um backend simples em REST.
O projeto deve ter como características:
- Ser algo que você queira fazer!
- Ser código aberto
- Estar publicado em um repositório git com…
- 1 arquivo README.md descrevendo o projeto
- 1 diretório (backend) para o servidor
- 1 diretório (frontend) para o cliente
- Usar como base o express-generator e o create-react-app
- Ter, no mínimo, 3 telas, sendo…
- 1 tela com exibição de itens de uma lista / coleção e um filtro
- 1 tela com edição / inserção de itens
- 1 tela a mais a sua escolha
- Ter componentes bastante interativos
- Ter 1 barra de navegação com campos adicionais, incluindo componente de busca
O projeto terá um conjunto de 8 entregas bem definidas (50% da disciplina). Ao final dessas 8 entregas, os alunos trabalham na melhoria do projeto para uma entrega final (50% da disciplina).
Cada entrega intermediária será avaliada da seguinte forma:
- 5 pontos por uma entrega com a funcionalidade com pequenos problemas, não importa a qualidade do código
- 10 pontos pela entrega com a funcionalidade esperada completa
- -5 pontos caso não realize a revisão entre-pares daquela entrega.
O projeto final será avaliado pela funcionalidade (10 pontos) e corretude, e qualidade de código (40 pontos). Todas as issues no final do projeto devem estar resolvidas.
As entregas são sinalizadas por preenchimento de formulário online com a versão referente a entrega até o domingo (23:59 AOE).
- Front-end Developer Handbook, 2019
- Eloquent JavaScript, 3ª Ed., 2019 PT-BR
- Blank,A.G. TCP/IP JumpStart: Internet Protocol Basics. Sybex. 2002.
- Morrison,M. Head First JavaScript. O'Reilly Media. 2008.
- Shelly G.B., Woods, D.M. HTML, XHTML, and CSS: Introductory. Course Technology. 2010.