Bem-vindo à disciplina de Desenvolvimento de Sistemas Web! Aqui você aprenderá a construir aplicações web modernas com HTML5, CSS3, JavaScript e Vue.js (sem componentes), preparando-se para criar interfaces que consomem APIs REST de forma eficiente e organizada.
📦 O objetivo do projeto é criar um sistema frontend que permita:
- Listar encomendas com filtros
- Cadastrar novas entregas com rotas (origem → centros de distribuição opcionais → destino)
- Visualizar os detalhes de uma entrega
- Conectar-se a uma API REST externa (já fornecida)
👉 Veja os detalhes completos aqui: 📋 Requisitos do Projeto
Durante o curso, utilizaremos dois miniapps principais para praticar os conceitos:
Miniapp desenvolvido nas primeiras semanas com foco em:
- Criação, listagem, filtragem e exclusão de tarefas
- Manipulação direta do DOM
- Validações e interações básicas com formulários
Miniapp utilizado nas aulas de VueJS (sem componentes):
- Lista de livros com nome, autor e ano
- Filtro por texto (nome ou autor)
- Marcar e desmarcar livros como favoritos
- Contador de favoritos
Esses miniapps servem como base prática e incremental para o aprendizado dos frameworks e ferramentas do frontend.
-
1️⃣ Introdução ao JavaScript Tipos de variáveis, operadores, estruturas de repetição e decisão, funções.
-
2️⃣ Programação Funcional em JS Funções puras,
map,filter,reduce, callbacks. -
3️⃣ Manipulação do DOM Seleção de elementos, eventos, criação dinâmica de listas e formulários.
Miniapp: Lista de Tarefas (TODOs)
-
4️⃣ CRUD Local com DOM Armazenamento e manipulação de dados em memória com feedback visual.
Miniapp: Lista de Tarefas com persistência simples
-
5️⃣ Consumo de API com Fetch Métodos HTTP (GET, POST, DELETE), renderização de dados dinâmicos.
Miniapp: Catálogo de livros com API simulada
-
6️⃣ Introdução ao VueJS CDN,
data, diretivas (v-model,v-for,v-if), eventos.Miniapp: Catálogo de Livros com Favoritos
-
7️⃣ VueJS: Reatividade e Propriedades Computadas no Vue Funções vs Propriedades computadas.
Miniapp: Calculadora de IMC
-
8️⃣ VueJS com API REST Integração de Vue com API (GET/POST), estado de carregamento, tratamento de erros.
-
9️⃣ Criando uma Aplicação com Múltiplas Páginas e Compartilhando Dados Construção de apps com multi páginas.
| 📅 Data | 📘 Conteúdo |
|---|---|
| 27/05 | JS: Manipulação do DOM – miniapp Lista de Tarefas (TODOs) |
| 02/06 | JS: CRUD local com lista de tarefas |
| 03/06 | JS: Introdução ao consumo de API REST (GET) com fetch() |
| 09/06 | Feriado municipal |
| 10/06 | Acompanhamento de Projetos (Sprint 1) e Tira-dúvidas |
| 16/06 | VueJS: Introdução – diretivas, eventos, reatividade |
| 17/06 | VueJS: Catálogo de Livros com Favoritos – estrutura base e v-for |
| 23/06 | Não Haverá Aula |
| 24/06 | Não Haverá Aula |
| 30/06 | VueJS: Reatividade e Propriedades Computadas no Vue |
| 01/07 | VueJS: Consumo de API REST com Vue |
| 07/07 | VueJS: Revisão geral e preparação para projeto final |
| 08/07 | Projeto: Tira-dúvidas e desenvolvimento (Sprint 2) |
| 09/07 | Projeto: Tira-dúvidas e desenvolvimento (Sprint 2) |
| ❌ 14/07 a 20/07 | ❌ Sem aula (recesso) |
| 21/07 | Projeto: Finalização, testes e ajustes |
| 🏁 Sprint | Descrição | Data de Entrega |
|---|---|---|
| Sprint 1 | Listagem e filtros das entregas | 16/06 |
| Sprint 2 | Cadastro de entrega e rota | 09/07 |
| Sprint 3 | Projeto completo com visualização de detalhes | 23/07 |
Os miniapps estão organizados na pasta miniapps/, com subpastas por tema e data.
Exemplos: miniapps/todos, miniapps/livros_js, miniapps/livros_vue.
Os miniapps práticos foram pensados para consolidar os conteúdos vistos em aula. Use-os como base e inspiração para o Projeto Final e desenvolva com segurança!
Bons estudos e bom desenvolvimento! 🚀