Como criar um site da empresa simples com Cosmic JS e Angular

Diego Perez Blocked Unblock Seguir Seguindo 2 de janeiro

* Este artigo irá assumir alguns conhecimentos básicos de Angular para que ele possa se concentrar na tarefa específica de solicitar e mostrar dados do Cosmic JS

TL; DR

Dê uma olhada no repositório e instale o aplicativo

O que é esse app?

Um site típico da empresa é apenas um conjunto de páginas estruturadas em uma navegação mais ou menos simples. Queremos criar um site que permita ao usuário criar qualquer número de páginas e decidir a estrutura da navegação, sem a necessidade de esperar por uma liberação de código. Para isso, vamos contar com o Cosmic JS e criar a estrutura para realizar este projeto. Neste exemplo, nosso bucket terá os seguintes tipos de objeto:

  • Páginas. Este é um objeto simples, sem metacampos adicionais.
  • Navegação. Ele armazenará uma coleção de páginas.
  • Predefinições Este é um objeto de configuração com uma lista de atributos que nos ajudarão a iniciar nosso aplicativo. Ele manterá o valor da página inicial e da navegação principal que usaremos no menu do nosso site.

Usando a API

Agora que definimos a estrutura de nossos dados, precisamos criar nosso aplicativo Angular (recomendamos o uso da Angular CLI) e criar um serviço para fazer nossas chamadas para a API Cosmic JS. Veja como é simples solicitar um objeto de uma única página do Cosmic JS:

obtenha uma única página e salve-a no fluxo para mantê-la em cache para a sessão

Observe que, para objetos aninhados, o Cosmic JS não retornará a árvore completa; portanto, às vezes, será necessário concatenar chamadas para aproveitar ao máximo o nosso serviço, por exemplo: Ao buscar as predefinições principais, você provavelmente desejará incluir as páginas de navegação.

esta chamada combinará o resultado de getNavigation no resultado de getPreset

Nossas chamadas de api precisam ser autenticadas com uma chave de leitura, podemos incluir isso em cada método, mas o mais fácil pode ser criar um interceptador. Isso interceptará todas as solicitações http, portanto, verificaremos se é uma solicitação Cosmic JS e anexamos a chave de leitura onde necessário.

interceptar e anexar os parâmetros de leitura ou gravação

Encaminhamento para as páginas

Neste ponto, nosso site não faz nada, a primeira coisa que precisa fazer é saber como carregar sua primeira página. Precisamos criar um módulo roteado para as páginas e configurá-lo para carregar na raiz. Uma vez dentro do módulo, em seu próprio roteamento, vamos definir uma rota para o parâmetro: slug para carregar o componente Page. E o que acontece quando não há rota especificada? Este será o nosso cenário mais comum, para isso, definimos uma rota vazia com um Guard.

Um guarda estará em execução quando corresponder a uma rota e antes de carregar o componente, portanto, vamos usá-lo para buscar as predefinições principais do Cosmic JS e redirecionar o aplicativo para a página inicial que estabelecemos.

de Angular 7.1, o canActivate pode retornar um booleano ou um UrlTree

Componentes

Agora temos uma configuração de rota que carregará o componente Page, e esta é a maneira de carregar uma página usando o slug da lista de parâmetros:

agora podemos usar o objeto de página em nosso modelo

Com isso, temos uma maneira de navegar via url, mas também devemos carregar um menu para que o usuário possa ver as páginas disponíveis. Para isso, adicionaremos um componente de menu no módulo principal, pois ele será compartilhado em todo o aplicativo. Nosso menu será composto por uma lista de navegação, um logotipo e o nome da empresa; Tudo isso é definido nas predefinições, portanto, o menu terá uma chamada como esta:

observe que especificamente pedimos para incluir a navegação adicionando "true" como parâmetro ao método

Tudo isso permitiria que você criasse rapidamente um site usando Angular e Cosmic JS. Tudo o que resta a fazer é criar os modelos e estender a configuração para atender às suas necessidades.