Desenvolvimento de Software para Web - 2019.2
Dados gerais sobre a disciplina
Dados gerais sobre a disciplina
Código: QXD0020
Curso: Redes de Computadores
Turma: 6º Período
Turno: Noite
Carga Horária: 64h
Local: Laboratório 3 - Bloco 1
Horários: Segunda e Terça das 20h às 22h
Site
Site
Downloads
Downloads
- Plano de Ensino
- Slides
- 0 - Apresentação da Disciplina
- 1 - HTML (WD-43 - Cap2, FJ11 - Cap3)
- 2 - CSS (WD-43 - Cap4, WD-43 - Cap5, WD-43 - Cap6)
- 3 - Bootstrap (WD-43 - Cap10)
- 4 - JavaScript (WD-43 - Cap11)
- 5 - TypeScript - Não apresentado na disciplina, mas falamos sobre ele.
- 6 - jQuery (WD-43 - Cap12) - Não apresentado na disciplina, mas falamos sobre ele.
- 7 - ReactJS
- Aplicação React simples desenvolvida nas aulas sobre React
- Ótima documentação oficial em português
- Learn Basics of React.js in 11 Minutes
- 11 React UI Component Libraries you Should Know in 2019
- Bibliotecas mais usadas e recomendadas:
- The React Lifecycle, step by step
- How To Write Better Code in React: 9 Useful Tips for writing better code in React: Learn about Linting, propTypes, PureComponent and more.
- Use as extensões React Developer Tools e Redux DevTools.
- Guias de Estilo React
- I created the exact same app in React and Vue. Here are the differences.
Assuntos acima já estudados.
Assuntos abaixo ainda a apresentar:
- 8 - Node.js
- 9 - Express
- 10 - MongoDB (os slides falam sobre o MongoDB, mas não sobre sua integração com o JavaScript)
- 11 - Promises
- 12 - Cookies
- 13 - Sessões
- 14 - Autenticação usando Passport e JWT (Slides)
- API para Autenticar usuários com JWT e Passport
- Implementing JSON Web Tokens & Passport.js in a JavaScript Application with React - usa Sequelize + MySQL
- Sessionless Authentication using JWTs (with Node + Express + Passport JS + Mongoose)
- NodeJS Authentication with Password and JWT in Express + Mongoose
- Build a React Application with User Authentication in 15 Minutes
- Ver implementação em: Simple React Project Using Okta SignIn Widget
Vídeos
Vídeos
Bibliografia
Bibliografia
- Básica
- Caelum WD-43 – Desenvolvimento Web com HTML, CSS e JavaScript (HTML - PDF).
- MAZZA, Lucas. HTML5 e CSS3: Domine a web do futuro. São Paulo, SP: Casa do Código, [2012].
- ALMEIDA, Flávio. Mean: Full stack JavaScript para aplicações web com MongoDB, Express, Angular e Node. São Paulo, SP: Casa do Código, [2015]. xxiii, 361 p. (Caelum). ISBN 9788555190469 (broch.).
- INCAU, Caio. Vue.js: Construa aplicações incríveis. São Paulo, SP: Casa do Código, [2017].
- FREEMAN, Eric; ROBSON, Elisabeth. Use a cabeça! HTML e CSS . Rio de Janeiro: Alta Books, 2015. xxxvi, 723 p. (Use a cabeça!). ISBN 9788576088622 (broch.).
- Complementar
- SILVEIRA, Paulo; ALMEIDA, Adriano. Lógica de programação: crie seus primeiros programas usando JavaScript e HTML. São Paulo, SP: Casa do Código, [2012]. vii , 163 p. (Caelum). ISBN 9788566250220 (broch.).
- POWERS, Shelley. Aprendendo JavaScript. São Paulo, SP: Novatec, 2010. 407 p. ISBN 9788575222119 (broch.).
- FLANAGAN, David. JavaScript:: o guia definitivo. 6. ed. Porto Alegre: Bookman, 2013. 1062 p. ISBN 9788565837194 (broch.).
- SMITH, Ben. JSON básico: conheça o formato de dados preferido da web. São Paulo: Novatec, 2015. 400 p. ISBN 9788575224366 (broch.).
- ZAKAS, Nicholas C. Princípios de orientação a objetos em JavaScript. São Paulo: Novatec, 2014. 126 p. ISBN 9788575223895 (broch.).
- RESIG, John; BIBEAULT, Bear. Segredos do ninja JavaScript. São Paulo: Novatec, 2013. 488 p. ISBN 9788575223284 (broch.).
- FREEMAN, Eric; ROBSON, Elisabeth. Use a cabeça! programação em HTML 5 : desenvolvendo aplicativos para web com JavaScript. Rio de Janeiro: Alta Books, 2014. xxxii, 573 p. (Use a cabeça!). ISBN 9788576088455 (broch.).
- ANDREW, Rachel. The CSS anthology: 101 essential tips, tricks & hacks. 2nd ed. Australia: Sitepoint, xxi, 392 p. ISBN 9780975841983 (broch.).
- SILVA, Maurício Samy. Criando sites com HTML: sites de alta qualidade com HTML e CSS . São Paulo: Novatec, 2008. 431 p. ISBN 9788575221662 (broch.).
- SILVA, Maurício Samy. Construindo sites com CSS e (X)HTML: sites controlados por folhas de estilo em cascata . São Paulo, SP: Novatec, 2008. 446p. ISBN 9788575221396 (broch.).
Listas de Exercícios (a entrega deverá ser realizada pelo SIPPA)
Listas de Exercícios (a entrega deverá ser realizada pelo SIPPA)
Lista de Exercícios 01 (prazo final para entrega: 12/08) - Enviar, através do SIPPA, prints das telas comprovando progresso em cada um dos itens a seguir. Armazenar e enviar todos em um único arquivo compactado.
Lista de Exercícios 01 (prazo final para entrega: 12/08) - Enviar, através do SIPPA, prints das telas comprovando progresso em cada um dos itens a seguir. Armazenar e enviar todos em um único arquivo compactado.
- Codecademy
- Curso: Introduction to HTML - https://www.codecademy.com/learn/learn-html
- Learn HTML: Elements and Structure
- Introduction to HTML
- HTML Document Standards
- Learn HTML: Tables
- Tables
- Learn HTML: Forms
- Learn HTML: Forms
- Learn HTML: Form Validation
- Learn HTML: Elements and Structure
- Curso: Learn CSS - https://www.codecademy.com/learn/learn-css
- Learn CSS: Selectors and Visual Rules
- CSS Setup and Selectors
- CSS Visual Rules
- Learn CSS: The Box Model
- The Box Model
- Changing the Box Model
- Display and Positioning
- CSS Display and Positioning
- Learn CSS: Colors
- CSS Color
- Learn CSS: Typography
- CSS Typography
- Learn CSS: Grid
- CSS Grid Essentials
- Advanced CSS Grid
- Learn CSS: Selectors and Visual Rules
- Curso: Introduction to HTML - https://www.codecademy.com/learn/learn-html
Lista de Exercícios 02 (prazo final para entrega: 19/08) - Enviar, através do SIPPA, prints das telas comprovando progresso em cada um dos itens a seguir. Enviar o progresso de cada atividade e o progresso geral do curso. Veja os exemplos nos links a seguir: (a) progresso atividades; (b) progresso geral. Armazenar e enviar todos em um único arquivo compactado.
Lista de Exercícios 02 (prazo final para entrega: 19/08) - Enviar, através do SIPPA, prints das telas comprovando progresso em cada um dos itens a seguir. Enviar o progresso de cada atividade e o progresso geral do curso. Veja os exemplos nos links a seguir: (a) progresso atividades; (b) progresso geral. Armazenar e enviar todos em um único arquivo compactado.
- Codecademy
- Make a Website - https://www.codecademy.com/learn/make-a-website
- Site Structure
- A Closer Look at CSS
- Boudaries and Space
- Building with Bootstrap
- Make a Website - https://www.codecademy.com/learn/make-a-website
- freeCodeCamp
- Responsive Web Design Principles - Introduction to the Responsive Web Design Challenges
- CSS Flexbox - Introduction to the CSS Flexbox Challenges
- CSS Grid - Introduction to the CSS Grid Challenges
- Bootstrap - Introduction to the Bootstrap Challenges
Lista de Exercícios 03 (prazo final para entrega: 26/08-Segunda) - Enviar, através do SIPPA, prints das telas comprovando progresso em cada um dos itens a seguir. Armazenar e enviar todos em um único arquivo compactado.
Lista de Exercícios 03 (prazo final para entrega: 26/08-Segunda) - Enviar, através do SIPPA, prints das telas comprovando progresso em cada um dos itens a seguir. Armazenar e enviar todos em um único arquivo compactado.
- freeCodeCamp
- Codecademy (achei a estrutura do curso de JavaScript do Codecademy mais didática e bem organizada que o curso de JavaScript do freeCodeCamp, portanto optei pelo seu uso).
Lista de Exercícios 04 (prazo final para entrega: 02/09-Segunda) - Enviar, através do SIPPA, prints das telas comprovando progresso em cada um dos itens a seguir. Armazenar e enviar todos em um único arquivo compactado.
Lista de Exercícios 04 (prazo final para entrega: 02/09-Segunda) - Enviar, através do SIPPA, prints das telas comprovando progresso em cada um dos itens a seguir. Armazenar e enviar todos em um único arquivo compactado.
- Codecademy
- Introduction To JavaScript
- 10. Learn JavaScript: Browser Compatibility and Transpilation
- 11. Learn JavaScript: Modules
- 12. JavaScript Promises
- 13. JavaScript Async-Await
- 14. Learn JavaScript: Requests
- freecodecamp
- React
- Introduction to the React Challenges
- Fazer todos os itens.
- Introduction to the React Challenges
- React
- Introduction To JavaScript
Lista de Exercícios 05 (prazo final para entrega: 09/09-Segunda) - Enviar, através do SIPPA, prints das telas comprovando progresso em cada um dos itens a seguir. Armazenar e enviar todos em um único arquivo compactado.
Lista de Exercícios 05 (prazo final para entrega: 09/09-Segunda) - Enviar, através do SIPPA, prints das telas comprovando progresso em cada um dos itens a seguir. Armazenar e enviar todos em um único arquivo compactado.
Lista de Exercícios 06 (prazo final para entrega: 16/09-Segunda) - Enviar, através do SIPPA, prints das telas comprovando progresso em cada um dos itens a seguir. Armazenar e enviar todos em um único arquivo compactado.
Lista de Exercícios 06 (prazo final para entrega: 16/09-Segunda) - Enviar, através do SIPPA, prints das telas comprovando progresso em cada um dos itens a seguir. Armazenar e enviar todos em um único arquivo compactado.
- freeCodeCamp
- Redux
- Introduction to the Redux Challenges (fazer todos os itens)
- React and Redux
- Introduction to the React and Redux Challenges (fazer todos os itens)
- Redux
Lista de Exercícios 07 (prazo final para entrega: 23/09-Segunda) - Enviar, através do SIPPA. Armazenar e enviar todos em um único arquivo compactado.
Lista de Exercícios 07 (prazo final para entrega: 23/09-Segunda) - Enviar, através do SIPPA. Armazenar e enviar todos em um único arquivo compactado.
IMPORTANTE: JAMAIS enviar as pastas: node_modules e build, pois são muito grandes e desnecessárias para quem vai baixar e usar o projeto, já que podem ser recriadas por quem baixa.
IMPORTANTE: JAMAIS enviar as pastas: node_modules e build, pois são muito grandes e desnecessárias para quem vai baixar e usar o projeto, já que podem ser recriadas por quem baixa.
- Projeto 1 - Crie uma aplicação React para:
- Crie um menu ou tabs (abas) para alternar entre as 3 funcionalidades a seguir.
- Obter preço e quantidade em um formulário. Exibir o valor total (preço x quantidade) dinamicamente quando preço ou quantidade forem alterados.
- Ao digitar um texto em um input, o mesmo texto deve dinamicamente ser exibido em outro elemento da página.
- Dado um input de texto e um botão, adicionar o texto do input a uma lista, sempre que o botão for presssionado.
- Crie um menu ou tabs (abas) para alternar entre as 3 funcionalidades a seguir.
- Projeto 2 - Baixe e use a seguinte aplicação React:
Lista de Exercícios 08 (prazo final para entrega: 21/10-Segunda) - Enviar, através do SIPPA, prints das telas comprovando progresso em cada um dos itens a seguir. Armazenar e enviar todos em um único arquivo compactado.
Lista de Exercícios 08 (prazo final para entrega: 21/10-Segunda) - Enviar, através do SIPPA, prints das telas comprovando progresso em cada um dos itens a seguir. Armazenar e enviar todos em um único arquivo compactado.
- Crie uma aplicação express para:
- A rota raiz ("/") deve retornar um JSON com status de OK: { "status": "OK" }.
- A rota "/media" deve retornar a média aritmética dos valores numéricos enviados em uma lista no formato JSON.
- Crie um teste automatizado para testar sua aplicação usando a ferramenta Postman (https://www.getpostman.com/downloads/).
- freeCodeCamp
- Basic Node and Express (fazer todos os itens)
Lista de Exercícios 09 (prazo final para entrega: 04/11-Segunda) - Enviar, através do SIPPA. Armazenar e enviar somente a resolução da Questão 3 a seguir.
Lista de Exercícios 09 (prazo final para entrega: 04/11-Segunda) - Enviar, através do SIPPA. Armazenar e enviar somente a resolução da Questão 3 a seguir.
IMPORTANTE: JAMAIS enviar as pastas: node_modules e build, pois são muito grandes e desnecessárias para quem vai baixar e usar o projeto, já que podem ser recriadas por quem baixa.
IMPORTANTE: JAMAIS enviar as pastas: node_modules e build, pois são muito grandes e desnecessárias para quem vai baixar e usar o projeto, já que podem ser recriadas por quem baixa.
- Baixe e execute a aplicação back-end exemplo-express.
- Baixe e estude a aplicação ReactCRUDExample . O estudo sobre a aplicação pode ser feito a partir do seguinte link.
- Altere a app exemplo-express de modo que ao final, ele tenha 2 aplicações: back-end (REST) e front-end (React), interagindo entre si. Basei-se em ReactCRUDExample para realizar estas alterações. Não precisa usar nada relacionado ao MongoDB. Toda a persistência pode ser somente em memória.
Lista de Exercícios 10 (prazo final para entrega: 11/11-Segunda) - Enviar, através do SIPPA.
Lista de Exercícios 10 (prazo final para entrega: 11/11-Segunda) - Enviar, através do SIPPA.
IMPORTANTE: JAMAIS enviar as pastas: node_modules e build, pois são muito grandes e desnecessárias para quem vai baixar e usar o projeto, já que podem ser recriadas por quem baixa.
IMPORTANTE: JAMAIS enviar as pastas: node_modules e build, pois são muito grandes e desnecessárias para quem vai baixar e usar o projeto, já que podem ser recriadas por quem baixa.
- Baseie-se na aplicação exemplo-react-express para criar um cadastro de produtos (CRUD), de acordo com as seguintes especificações:
- Produto deve ter um código alfanumérico, nome e valor.
- Os produtos devem ser armazenados em uma lista em memória.
- A remoção de produto deve ser precedida da confirmação do usuário.
Lista de Exercícios 11 (prazo final para entrega: 18/11-Segunda) - Enviar, através do SIPPA.
Lista de Exercícios 11 (prazo final para entrega: 18/11-Segunda) - Enviar, através do SIPPA.
IMPORTANTE: JAMAIS enviar as pastas: node_modules e build, pois são muito grandes e desnecessárias para quem vai baixar e usar o projeto, já que podem ser recriadas por quem baixa.
IMPORTANTE: JAMAIS enviar as pastas: node_modules e build, pois são muito grandes e desnecessárias para quem vai baixar e usar o projeto, já que podem ser recriadas por quem baixa.
- Baseie-se na aplicação exemplo-react-express para criar dois cadastros (CRUDs) com persistência no MongoDB através do módulo Mongoose. Os CRUDs são os seguintes: (1) contatos (semelhante ao Item 3 da Lista 09) e (2) produtos (semelhante ao da Lista 10).
- Pede-se ainda que se use na aplicação, o módulo consign para automatizar o carregamento de múltiplos módulos em uma dada sequência, conforme a aplicação express05, disponível no seguinte link. O módulo consign é carregado e configurado no arquivo config/express.js:
var consign = require('consign');
(...)
consign({cwd: 'app'})
.include('models')
.then('controllers')
.then('routes')
.into(app);
(...)
- A aplicação express05 também possui exemplo de como usar o Mongoose. Veja os arquivos config/database.js e app/models/contato.js.
- Use o MongoDB local em seu computador.
Lista de Exercícios 12 (prazo final para entrega: 25/11-Segunda) - Enviar, através do SIPPA.
Lista de Exercícios 12 (prazo final para entrega: 25/11-Segunda) - Enviar, através do SIPPA.
IMPORTANTE: JAMAIS enviar as pastas: node_modules e build, pois são muito grandes e desnecessárias para quem vai baixar e usar o projeto, já que podem ser recriadas por quem baixa.
IMPORTANTE: JAMAIS enviar as pastas: node_modules e build, pois são muito grandes e desnecessárias para quem vai baixar e usar o projeto, já que podem ser recriadas por quem baixa.
- Crie ou use uma aplicação CRUD sua usando Mongoose e acrescente Login a ela usando JWT com passport-jwt. Dica: Veja o material disponibilizado no item 14 dos Downloads no topo desta página.
Trabalho Prático da Disciplina
Trabalho Prático da Disciplina
- Parte 1 - Proposta de Aplicação Web / Definição de requisitos - Prazo: 25/09/2019 (Quarta)
- Defina a partir do seguinte formulário, um domínio a ser modelado e implementado em um sistema, explicando resumidamente os requisitos do sistema com suas entidades principais. Essa definição deve ser enviada e aprovada pelo professor. Os trabalhos devem necessariamente ter domínios distintos. A ordem de envio para o professor determina quem tem prioridade por determinado domínio. Caso o domínio já tenha sido escolhido por outro aluno, deve-se propor um novo domínio.
Cronograma Final da Disciplina
Cronograma Final da Disciplina
- Nossa Segunda AP (AP2) será dia 26/11 (Terça) a partir de 18:00 nos Labs 2 e 3.
- A apresentação final do trabalho prático será dia 02/12 (Segunda) a partir de 18:00 no Lab 3.
- As provas de segunda chamada da AP1 ou AP2 serão no dia 03/12 (Terça) a partir de 18:00 no Lab 3.
- A versão final do Trabalho Prático (TP) deve ser enviada pelo SIPPA sem a pasta node_modules até 04/12 (Quarta).
- A AF será dia 10/12 (Terça) a partir de 18:00 no Lab 3.