Desenvolvimento de Software para Web - 2019.2

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

http://bit.ly/ufcregis

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)
  - Airbnb CSS / Sass Styleguide
- 3 - Bootstrap (WD-43 - Cap10)
  - Bootstrap 4 - Everything You Need to Know
- 4 - JavaScript (WD-43 - Cap11)
  - A re-introduction to JavaScript (JS tutorial)
  - Airbnb JavaScript Style Guide
- 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:

Vídeos

Curso completo e gratuito de HTML5

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.).
  - Código fonte do livro disponível no GitHub.
- 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)

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
  1. Learn HTML: Elements and Structure
    - Introduction to HTML
    - HTML Document Standards
  2. Learn HTML: Tables
    - Tables
  3. Learn HTML: Forms
    - Learn HTML: Forms
    - Learn HTML: Form Validation
- Curso: Learn CSS - https://www.codecademy.com/learn/learn-css
  1. Learn CSS: Selectors and Visual Rules
    - CSS Setup and Selectors
    - CSS Visual Rules
  2. Learn CSS: The Box Model
    - The Box Model
    - Changing the Box Model
  3. Display and Positioning
    - CSS Display and Positioning
  4. Learn CSS: Colors
    - CSS Color
  5. Learn CSS: Typography
    - CSS Typography
  6. Learn CSS: Grid
    - CSS Grid Essentials
    - Advanced CSS Grid

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
  1. Site Structure
  2. A Closer Look at CSS
  3. Boudaries and Space
  4. Building with Bootstrap
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.

freeCodeCamp
- Sass - Introduction to the Sass Challenges
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).
- Introduction To JavaScript

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
- freecodecamp
  - React
    - Introduction to the React Challenges
      - Fazer todos os itens.

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.

Codecademy
- Learn ReactJS: Part I
- Learn ReactJS: Part II

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)

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.

Projeto 1 - Crie uma aplicação React para:
- Crie um menu ou tabs (abas) para alternar entre as 3 funcionalidades a seguir.
  1. 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.
  2. Ao digitar um texto em um input, o mesmo texto deve dinamicamente ser exibido em outro elemento da página.
  3. Dado um input de texto e um botão, adicionar o texto do input a uma lista, sempre que o botão for presssionado.
Projeto 2 - Baixe e use a seguinte aplicação React:
- React Dashboard made with Material UI's components

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.

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.

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.

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.

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

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

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.