Nesse trabalho, vamos dar vida ao layout desenvolvido no trabalho anterior, apresentando informações reais sobre os álbuns, obtidas dinamicamente a partir de um servidor JSON Server que oferece uma API e servirá como back end da aplicação.
Neste trabalho, pode-se evoluir o layout do Trabalho Prático 1 ou começar um projeto de layout do zero. Essa decisão fica a cargo de cada um. Você deverá montar um layout sobre os álbuns e apresentar funcionalidades que apresentamos neste enunciado.
Para montar sua aplicação utilizaremos o JSONServer como repositório para os dados e a API do Mapbox para exibição de mapas com os álbuns geolocalizados. Na sequência, explicamos como o uso destas ferramentas deve ser feito.
IMPORTANTE: O trabalho deve ter foco exclusivamente na construção de um álbum de fotos com informações geolocalizadas e os dados devem ser persistidos em um servidor JSONServer. NÃO SERÃO aceitos trabalhos com outra temática e com outras api.
JSONServer
O JSONServerLinks to an external site. Oferece uma API baseada no padrão RESTful para acesso e manipulação de dados dispostos em um arquivo JSON no servidor. Um exemplo funcional do JSONServerLinks to an external site. Está acessível no ambiente do Replit e você pode utilizar como base para o seu trabalho. Para isso, basta clonar (procedimento de FORK no Replit) e alterar o arquivo
db.json, colocando os seus dados.
INFO
Exemplo de uso:
https://replit.com/@rommelpuc/JSONServerLinks to an external site. (REPLIT)
Referrência da api do json server:
https://github.com/typicode/json-serverLinks to an external site.
Mapas com Mapbox
A API do MapboxLinks to an external site. Permite a criação de mapas em sites web, bem como a utilização de uma série de outras funcionalidades associadas como navegação e pesquisa de endereços, para citar algumas. Será necessário criar um conta no ambiente do Mapbox e criar uma access token a ser incluída na sua aplicação.
INFO
Exemplo de uso:
https://replit.com/@rommelpuc/MapboxLinks to an external site. (REPLIT)
Referência da API:
https://docs.mapbox.com/mapbox-gl-js/api/Links to an external site.
Estruturas de Dados
Você deve estruturar os dados para a montagem da sua aplicação. Utilize o projeto de exemplo do JSONServer, faça uma cópia para o seu trabalho. No arquivo
db.json, você deve criar as suas estruturas de dados.
Para a montagem do seu trabalho, deve haver, pelo menos, três estruturas distintas: (1) álbuns, (2) fotos e (3) destaques. As informações básicas e obrigatórias de cada uma das estruturas mencionadas são apresentadas a seguir
estrutura álbuns
identificador do álbum
título do álbum
descrição do álbum
localização geográfica do álbum (longitude e latitude)
data do álbum
url da imagem de capa do álbum
estrutura fotos
identificador da foto
url da imagem
descrição da imagem
identificador do álbum ao qual a foto faz parte
estrutura destaques
identificador do destaque
identificado do álbum em destaque
texto para destaque (pode ser a própria descrição do álbum ou um texto alternativo)
detalhamento do escopo
o trabalho deve contemplar as seguintes telas e suas funcionalidades descritas em seguida.
Tela principal
O cabeçalho traz o nome, o logotipo do site e um menu de opções
A página deve apresentar um carrossel com fotos registradas na estrutura destaques e que fazem parte dos diversos álbuns registrados na aplicação
orientação: use componente do bootstrap
a página deve apresentar uma grade com todos os álbuns registrados na estrutura álbuns. Deve ser apresentada as seguinte informações associada a cada um dos álbuns exibidos na página: uma imagem, o título do álbum, um breve descritivo (20 caracteres) e um link para mais detalhes desse álbum.
A página deve apresentar um mapa com marcadores sinalizando a localização geográfica de cada um dos álbuns registrados na esturtura ÁLBUNS.
ORIENTAÇÃO: utilize o exemplo do MapboxLinks to an external site. Para montar o seu mapa
Rodapé com informações sobre responsável pelo site (aluno/aluna)
Tela de detalhes do ÁLBUM
Informações gerais do ÁLBUM que apresente: foto de capa do album, título, descritivo, geolocalização (endereço ou latitude/longitude) e data de registro
Deve ser possível marcar o álbum como um destaque para ser exibido na home-page registrando essa informação na estrutura destaques (via requisição de post na api jsonserver)
grade com fotos incluídas no álbum e apresentadas de forma reduzida (thumbnail) com descrição. Os dados devem ser obtidos da estrutura FOTOS.
Tela/popup/modal de zoom da FOTO
A funcionalidade (página independente, popup ou modal) deve apresentar as fotos do álbum na forma de um carrossel, oferecendo botão para exibir a foto anterior e a próxima foto
A página de detalhes pode ser apresentada de forma independente da tela do álbum ou como um popup (no caso de popup, colocar botão para fechar ou fechar com tecla ESC)
A página deve apresentar a descrição da foto de forma visível
O fluxo de telas que deve ser implementado na aplicação entregue e os wireframes com os detalhes do escopo são apresentados na imagem a seguir.
Prazo de Entrega: 03 de Dezembro de 2023