Desenvolvimento de Interfaces Web

Sejam bem-vindos ao repositório de orientação para a disciplina de Desenvolvimento de Intefaces Web (DIW) dos cursos de TI da PUC Minas.

A estrutura desse ambiente é apresentada pela Figura a seguir, em que podemos visualizar que o servidor mantido pelo Replit é dividido em duas partes: arquivos estáticos (front end) e JSONServer (back end)

Abraços, Prof. Rommel Carneiro

Material Complementar

Este material acompanha a disciplina de DIW e fornecem orientações para a construção de aplicações simplificadas com uso do JSONServer como backend.

Disponibilizamos alguns vídeos sobre a programação de funcionalidades com JavaScript, JSON e JSONServer que vai mostrar informações relevantes para vocês nessa etapa. Os vídeos são listados a seguir:

• Sequência 1 - Projeto de aplicação com JavaScript, JSON e Local Storage
  • Banco de Dados com JSON e Local Storage
• Sequência 2 - Projeto completo com JavaScript, JSON e AJAX
  Iniciando um projeto com HTML e CSS (1/3)

  Manipulando dados com JavaScript e JSON (2/3)

  Obtendo dados em JSON via AJAX (3/3)

Os exemplos de código são apresentados a seguir e podem ser utilizados pelos alunos para estudo e como base para as implementações a serem feitas na disciplina. Replique esse respositório e faça as alterações necessárias para o projeto de sua equipe.

Exemplos de Códigos

Cadastro de Contatos - CRUD

Funcionalidade de cadastro (CRUD) de contatos com possibilidade de inserção, exclusão, edição e visualização dos registros obtidos via JSONServer (contatos).

Cadastro de Contatos - Filtro/Pesquisa

Funcionalidade de filtro dos registros de contatos obtidos via JSONServer (contatos), utilizando as informações de cidade e categoria do contato.

Login do sistema

Funcionalidade de login e registro de usuários no sistema a partir de registros obtidos via JSONServer (usuarios). Permite o cadastro de novos usuários e as informações do usuário logado ficam registradas no sessionStorage até que o usuário efetue logoff.

Mapas com API Mapbox

Funcionalidade de exibição de locais a partir de registros obtidos via JSONServer (locais). Utiliza a API Mapbox. Você deve criar uma conta com o e-mail 999999@sga.pucminas.br para obter o acesso gratuito aos recursos da API.

Gráficos com o Chart.js

Funcionalidade de exibição de dados em gráficos a partir de registros obtidos via JSONServer (locais) e utilizando a biblioteca Chart.js.

Passagem de parâmetros entre páginas

Funcionalidade para carga de dados via JSONServer (cidades) e passagem de parâmetros entre páginas da aplicação.

Referências Bibliográficas

• FLANAGAN, David. JavaScript : o guia definitivo. 6. ed. Porto Alegre, RS: Bookman, 2014. E-book (1062 p.) ISBN 9788565837484.
• MILETTO, Evandro Manara. Desenvolvimento de software ii introdução ao desenvolvimento web com html, css, javascript e php. Porto Alegre Bookman 2014 1 recurso online ISBN 9788582601969.
• SILVA, Maurício Samy. CSS3: desenvolva aplicações web profissionais com uso dos poderosos recursos de estilização das CSS3. São Paulo (SP): Novatec, c2012. 494 p. ISBN 9788575222898., Nº de Exemplares: 2.