Pular para o conteúdo principal

Configurando o conteúdo

Já leu a introdução?

A introdução dessa seção explica em 2 minutos qual o nosso objetivo com esse guia de início rápido. Se você caiu de paraquedas nessa página, recomendamos lê-la primeiro. Você pode acessar a introdução clicando aqui.

Nessa página, vamos criar a estrutura do conteúdo da nossa aplicação, que será o site de uma livraria fictícia chamada Livraria do Condado. Esse é o primeiro passo para criar qualquer aplicação usando o Starlight.

O conteúdo da nossa aplicação será a lista de livros que está disponível na loja física da nossa livraria. Assim, os usuários do nosso site poderão conhecer os livros disponíveis antes de visitarem a loja.

Nosso site terá duas rotas: uma para a listagem de todos os livros disponíveis, e outra para mostrar os detalhes de um livro em específico.

Criando uma conta​

Se você ainda não tem uma conta no Starlight, temos boas notícias: criar sua conta é grátis e leva 30 segundos. Para isso, siga esses passos:

  1. Acesse a página de registro do Starlight: https://app.starlight.sh/auth/register.
  2. Insira seu nome e endereço de e-mail, e clique em Criar minha conta.
  3. Abra o e-mail de confirmação que enviamos para você e clique em Verificar minha conta.

E é isso. Você já pode utilizar sua conta para começar a criar aplicações com o Starlight.

Organização e área de trabalho​

Depois de criar sua conta do Starlight, a primeira coisa que precisamos fazer é criar uma organização e uma área de trabalho para nossa aplicação.

Áreas de trabalho representam aplicações dentro do Starlight. Por exemplo, para nossa aplicação, podemos criar uma área de trabalho chamada Site da Livraria.

Organizações servem para agrupar áreas de trabalho que pertencem a uma mesma entidade (como uma pessoa, um grupo ou uma empresa) em um mesmo lugar. Seguindo o exemplo, podemos criar uma organização para nossa empresa chamada Livraria do Condado.

Use os nomes que preferir

Os nomes que utilizamos nesse guia são apenas exemplos. Você pode chamar sua organização e área de trabalho do que quiser.

Ao entrar na sua conta do Starlight, você verá a lista de organizações das quais você faz parte. Se você acabou de criar sua conta, essa lista estará vazia. Vamos começar criando uma organização para nossa empresa:

  1. Clique no botão Criar organização 1.
  2. Preencha o campo de nome da organização 2. O campo de slug 3 será preenchido automaticamente.
  3. Salve a organização clicando em Criar organização 4.

Com a organização criada, você verá sua lista de áreas de trabalho, que estará vazia. Agora, só precisamos criar uma área de trabalho:

  1. Clique no botão Criar área de trabalho 1.
  2. Preencha o campo de nome da área de trabalho 2. O campo de slug 3 também será preenchido automaticamente.
  3. Salve a organização clicando em Criar área de trabalho 4.

Depois disso, o Starlight vai te direcionar para a página inicial da área de trabalho criada, e o próximo passo é configurar a estrutura do nosso conteúdo.

O que são slugs?

Slugs são strings utilizados pelo Starlight para identificar entidades em URLs, como uma organização ou uma área de trabalho. Note como é possível ver o slug da organização Livraria do Condado no topo das duas imagens acima. Você pode saber mais na página sobre slugs e URLS desse guia.

Criando um modelo​

Depois de criar nossa área de trabalho, é necessário criar um modelo para os nossos livros.

Um modelo é um "molde" para um tipo de conteúdo que pode ser repetido em vários lugares, como postagens de um blog, artigos de um jornal eletrônico, ou livros de uma livraria. A função do modelo é indicar a estrutura de como esse conteúdo funciona. Por exemplo, livros podem ter um título, um resumo, um número ISBN, e por aí vai.

Modelos indicam a estrutura do seu conteúdo utilizando campos. Seguindo o exemplo anterior, um modelo chamado Livros pode conter um campo de texto chamado Título, um campo de imagem chamado Capa, e um campo de editor visual chamado Resumo. Todo campo tem uma chave associada, que é o nome que o campo terá quando retornado pelas APIs do Starlight.

Editor Visual?

No Starlight, campos de Editor Visual são campos que mostram um editor de texto flexível com suporte a formatação de texto avançada, imagens, vídeos, código HTML, e vários outros tipos de conteúdo. Em outras palavras, é um editor de texto WYSIWYG.

Na nossa área de trabalho, vamos criar um modelo chamado Livros com os seguintes campos:

  • Foto da capa, um campo de arquivo de mídia com a chave cover_picture.
  • ISBN, um campo de texto simples com a chave isbn.
  • Resumo, um campo de Editor Visual com a chave excerpt.
  • Disponível, um campo booleano com a chave is_available.

Você pode inserir outros campos se quiser, customizando a estrutura do modelo como preferir. Além disso, todos os modelos no Starlight contam com um campo de Título e um de Slug que são adicionados automaticamente para você. Esses campos não podem ser removidos, mas você pode alterar suas chaves se achar necessário.

Chaves em inglês

Observe que nos nossos exemplos nós escrevemos as chaves em inglês. Isso não é obrigatório, mas escrevemos assim já que elas serão utilizadas no código-fonte da nossa aplicação, que geralmente é escrito em inglês.

Com os campos em mente, nós só precisamos criar nosso modelo. Para isso, entre na área de trabalho que criamos no passo anterior e siga esses passos:

  1. Clique em Modelos 1 no menu à esquerda e depois no botão Novo modelo 2.
  2. Preencha o campo de nome do modelo 3. O campo de slug 4 será preenchido automaticamente, mas sinta-se à vontade para alterá-lo.
    Slug do modelo

    Nesse guia, vamos chamar nosso modelo de Livros e lhe dar o slug books. Esse slug será importante para a próxima etapa, onde criaremos nossa aplicação, então mantenha-o em mente caso prefira usar um slug diferente.

  3. Defina a estrutura do conteúdo do modelo arrastando os seguintes campos no editor de campos 5:
    • Campo de Arquivo de Mídia, com o título Foto da capa e a chave cover_picture.
    • Campo de Texto simples com o título ISBN e a chave isbn.
    • Campo de Editor visual com o título Resumo e a chave excerpt.
    • Campo Booleano com o título Disponível e a chave is_available.
      Chaves dos campos

      Assim como o slug do modelo, se você escolher usar chaves diferentes para esses campos, mantenha essas chaves em mente para a próxima etapa desse guia.

  4. Clique em Salvar 6.

Pronto! Você definiu a estrutura do conteúdo e já pode começar a criar entradas.

Criando entradas​

Depois de criar seu modelo, você será direcionado para sua lista de entradas, que estará vazia. Entradas são o conteúdo de um modelo. Por exemplo, cada livro que cadastrarmos será uma entrada do modelo Livros.

Sendo assim, só nos resta criar algumas entradas:

  1. Na página de entradas do modelo Livros, clique no botão Nova entrada.
  2. Preencha os campos da entrada como preferir. Algumas informações sobre os campos:
    1. O campo de Título é obrigatório. Esse é o título da entrada que será exibido em listagens.
    2. O campo Slug também é obrigatório, mas é preenchido automaticamente ao digitar um título. O slug da entrada será utilizado para identificá-la nas URLs da nossa aplicação.
    3. O campo Foto da capa aceita imagens que você pode enviar para o Starlight clicando em Selecione um arquivo.
    4. O campo ISBN pode ser preenchido com qualquer texto, mas recomendamos digitar alguns números aleatoriamente para imitar um código ISBN de verdade.
    5. O campo Resumo é um editor visual e permite a inserção de vários tipos de conteúdo, como texto, imagens, e vídeos. Preencha-o com o conteúdo que preferir.
    6. O campo Disponível é uma caixa de seleção simples. Na nossa aplicação, uma caixa marcada significa que o livro está disponível em loja. Marque-o como preferir.
  3. Salve a entrada clicando em Publicar.

Parabéns! Você terminou o processo de estruturação do conteúdo no Starlight e criou uma entrada que será exibida na nossa aplicação.

Antes de ir à próxima etapa, recomendamos que você adicione no mínimo mais 2 livros. Assim, será mais fácil de entender como a API do Starlight lista conteúdo. Modelos não tem limite de entradas, então fique à vontade para adicionar quanto conteúdo achar necessário.