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

Assuntos acima já estudados.

Assuntos abaixo ainda a apresentar:

Vídeos

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)

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.

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 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 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 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:

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

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.

    1. Baixe e execute a aplicação back-end exemplo-express.
    2. Baixe e estude a aplicação ReactCRUDExample . O estudo sobre a aplicação pode ser feito a partir do seguinte link.
    3. 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.