Comece a trabalhar com o Craft CMS

O Craft CMS é trazido a você pelo pessoal talentoso da Pixel & Tonic. Ele é mantido ativamente e alinhado com as mudanças no mundo moderno do desenvolvimento web e está crescendo em popularidade entre os CMSs - com uma lista de clientes impressionante, como a Netflix. Ele também possui um servidor Discord muito ativo, crescendo para mais de 5.000 membros em apenas um ano de lançamento.

Por que usar o Craft CMS?

O Craft CMS tem sido nosso CMS preferido há cerca de quatro anos; construímos sites de clientes e até nosso próprio negócio no Craft. Como empresa, estamos constantemente verificando o mercado de CMS e sempre voltamos à Craft. Então, vamos aos motivos pelos quais escolhemos o Craft CMS em detrimento dos outros no mercado:

• Familiaridade com a interface, tornando bastante fácil para qualquer pessoa que vem do WordPress.
• Comunidade de desenvolvimento ativa.
• Campos flexíveis, dando a você controle sobre como seu conteúdo é estruturado.
• Sem bloqueios ou taxas mensais. Apenas uma taxa única se você for Pro/eCommerce.
• Extensibilidade com a crescente loja de plugins do Craft.

Então, com a introdução fora do caminho, vou mostrar a você como começar a usar um ambiente local Craft CMS totalmente configurado em cerca de quinze minutos. Depois de concluir as etapas a seguir, você deve ter uma ótima base para iniciar seu próximo projeto da Web e, esperançosamente, estar pronto para se afastar do WordPress para sempre.

Instalando nosso ambiente de desenvolvimento

O Craft CMS vem com uma ferramenta muito útil para configurar seu ambiente local. Essa ferramenta é chamada Craft Nitro e simplifica a configuração de um ambiente Craft CMS. É novo na cena Craft, mas ajuda muito.

Configurando o Multipass

O Craft Nitro requer algo chamado Multipass, que cria uma máquina virtual Ubuntu em seu sistema. (Não se preocupe, você não precisará configurar ou abrir o Ubuntu.)

• Baixe o instalador mais recente do Multipass para o seu sistema operacional no site oficial.
• Uma vez baixado, execute o instalador. Quando isso estiver concluído, você deve estar pronto para passar para a próxima etapa.
  

Configurando o Craft Nitro

A configuração do Craft Nitro é direta e envolve um script de linha de comando para instalá-lo no macOS e no Linux, mas para o Windows é um pouco diferente. Eu estarei passando por como configurá-lo para ambos os tipos de sistema operacional abaixo. A boa notícia é que, uma vez configurado, está pronto, e você poderá criar facilmente novas instalações do Craft sem passar por isso novamente.

Instalando no macOS e Linux

Abra seu Terminal e cole a seguinte linha de script. Depois de colado, siga os prompts de opção na linha de comando para criar sua máquina virtual com as predefinições que o Craft Nitro possui. Isso deve estar perfeitamente bem, mas se você gosta de ajuste fino, vá em frente. Apenas tenha em mente que o Craft tem requisitos mínimos para funcionar sem problemas.

Execute a seguinte linha no Terminal:

 bash <(curl -sLS https://installer.getnitro.sh)

Instalando no Windows 10 Pro

A instalação no Windows é bastante complexa, mas não deve demorar muito para começar a funcionar. Apenas certifique-se de ter o Hyper-V ativado. Infelizmente, o Hyper-V não pode ser instalado na versão Home Edition do Windows.

1. Certifique-se de que o Hyper-V esteja habilitado (mais detalhes aqui);
2. Baixe nitro_windows_x86_64.zip da versão mais recente;
3. Crie uma pasta Nitro em home pasta pessoal se ela ainda não existir (ou seja, C:\Users\<username>\Nitro );
4. Extraia o arquivo zip e copie nitro.exe para a pasta Nitro que você acabou de criar em sua pasta pessoal;
5. Se esta for sua primeira instalação, execute-a na linha de comando para adicionar o Nitro ao seu caminho global:
   

    setx path "%PATH%;%USERPROFILE%\Nitro"

6. Inicie o terminal do Windows ( cmd.exe ) com permissões de administrador e execute o Nitro nele.

Depois de concluir o acima, siga as instruções do terminal para criar sua primeira máquina. As predefinições padrão definidas pelo Craft Nitro devem ser perfeitamente adequadas para o seu ambiente.

Instalando o Craft CMS

Até agora, instalamos o Craft Nitro e criamos nossa máquina virtual, e agora estamos prontos para instalar o Craft CMS. Nas instruções a seguir, vamos baixar o Craft e “montar” nossos arquivos, permitindo desenvolver em nosso sistema atual e ver as mudanças refletidas em nossa máquina virtual Ubuntu. Também vamos configurar nosso banco de dados inicial e obter um domínio local que possamos usar, por exemplo, myfancyproject.test. Vamos indo:

Criando um novo projeto

1. Crie uma nova pasta onde você gostaria de desenvolver/instalar o Craft;
2. Baixe o Craft CMS da última versão (via Composer ou Zip);
3. Descompacte/mova o conteúdo para a pasta que acabamos de criar;
4. Terminal aberto/linha de comando;
5. Vá para a nossa pasta criada. $ cd /path/to/project ;
6. Execute nitro add ;
7. Siga os prompts de linha de comando na tela. (As predefinições geralmente são boas, mas modifique como desejar.)

Dica : Se você estiver vendo problemas "Não legíveis" no macOS, o Multipass precisa ter acesso total ao disco. Para fazer isso, verifique se o multipassd está marcado em Preferências do sistema → Segurança e privacidade → Privacidade → Acesso total ao disco.

Conectando ao nosso banco de dados

Devemos agora ter um domínio de teste e nossos arquivos de projeto montados - eu sei, muito fácil até agora, e essa é a parte difícil. Conectar-se ao nosso banco de dados exige que adicionemos os detalhes do banco de dados para nosso site recém-criado no arquivo .env do nosso projeto.

1. Abra o arquivo .env do nosso projeto (localizado na pasta raiz);
2. Altere os detalhes do banco de dados para o seguinte:
   

    DB_USER="nitro" DB_PASSWORD="nitro" # 'nitro' is the default database DB_DATABASE="nitro"

Dica : Se você quiser abrir o banco de dados no programa SQL de sua escolha, tudo o que você precisa fazer é executar nitro info na linha de comando e verá o endereço IP do banco de dados em “IPV4”. Use o nome de usuário e a senha acima (junto com a porta que você selecionou durante a configuração) para se conectar.

Instale o Craft CMS

Configuramos nossa máquina virtual, definimos nosso domínio de teste e preparamos nosso banco de dados. Agora é hora de realmente instalar o Craft CMS e entrar na seção de administração - tudo deve ser tranquilo a partir daqui. Então vamos fazer isso.

1. Vá para o domínio de teste que você definiu durante a configuração seguido por /admin (por exemplo testdomainyouset.test/admin );
2. Você deverá ver a tela de instalação do Craft CMS ( Hooray! );
3. Siga as instruções do instalador na tela;
4. Uma vez terminado, você deve ser redirecionado para o seu novo painel de administração.

Dica : Se você não instalou o Craft via Composer, pode ser solicitada uma chave de segurança. Para gerar uma chave criptograficamente segura, use um gerenciador de senhas como 1Password / LastPass. (Não há limite de comprimento, então pode ser tão complexo quanto você quiser). Abra nosso arquivo .env mais uma vez, encontre a seguinte linha SECURITY_KEY="" , cole sua chave gerada dentro das aspas e salve.

Agora você deve ter um ambiente de desenvolvimento local totalmente configurado para o Craft CMS, que fornecerá um ótimo ponto de partida para qualquer coisa que você esteja tentando desenvolver, seja mover seu blog de gato do WordPress ou criar uma loja de comércio eletrônico. Apenas lembre-se de desligar seu servidor quando terminar de usar nitro stop em sua linha de comando.

Aqui estão alguns comandos úteis para o Nitro do Craft que o ajudarão durante o desenvolvimento:

• nitro start (inicia o servidor de desenvolvimento)
• nitro stop (para o servidor de desenvolvimento)
• nitro context (mostra informações sobre os ambientes instalados)
• nitro info (informações sobre o ambiente atual, versão do PHP, etc.)

Configurando nosso blog de gatos

Agora que temos o Craft em funcionamento, podemos começar nosso blog de gatos e começar a aproveitar o poder que o Craft nos oferece. Nesta seção, vamos configurar nosso modelo de conteúdo, criar nosso modelo de tema base e construir nossa página inicial e páginas de postagem interna.

Modelos de conteúdo parecem assustadores, mas no Craft é o oposto; há um sistema GUI fácil de usar - não há necessidade de código complexo por aqui! Para o nosso blog de gatos, precisamos configurar uma seção chamada “Gatos” que precisa do nome do gato, foto e uma pequena descrição, e depois uma única página “Página inicial”.

Como criar seções e páginas Como criar um post de gato

Como criar seções e páginas

Vamos criar nossa seção “Cats” e nossa homepage que será classificada como “single” na linguagem do Craft. As seções são exatamente o que parecem - seções do seu site - e as páginas também são auto-explicativas, páginas únicas do seu site, como legais e nossa página inicial.

Criando nossa seção de gatos

1. Vá para Configurações no menu à esquerda;
2. Clique em “Seções”;
3. Clique em “Nova Seção”;
4. Em “Nome” coloque Cats ;
5. Channel do tipo de seção
   ( Os canais são usados ​​para transmissões de conteúdo semelhante, assim como nossos gatos. )
6. Dentro de “Entry URI Format” vamos ter certeza que é /cats/{slug} ;
7. Dentro de “Template” vamos colocar cat ;
8. Salvar.

O que fizemos acima foi dizer ao Craft que gostaríamos que qualquer postagem na seção Cats tivesse um formato de URL como: ourtestdomain.test/cats/fluffy , e o modelo que gostaríamos de usar é cats.twig .

Criando nossa página inicial

1. Dentro de “Seções”, clique em “Nova Seção”;
2. Em “Nome”, coloque Homepage ;
3. Tipo de seção Single ;
4. Marque a caixa de seleção “Página inicial”;
5. Dentro de “Template” vamos colocar index ;
6. Salvar.

Criando campos

O Craft vem sem preconceitos sobre o que você quer construir; dá-lhe uma lousa completamente em branco. Criamos exatamente o que queremos que seja a estrutura do nosso post gerando nossos próprios “Campos”. Vamos criar os “Campos” do nosso gato para o seguinte nome, descrição e foto.

1. Vá para a seção de administração do seu site visitando yourchosendomain.test/admin ;
2. Navegue até Configurações no menu à esquerda;
3. Clique em “Campos”;
4. No canto superior direito, clique em “Novo campo”.

Configurando o nome do gato

Vamos precisar de um nome para nossos gatos, então vamos criar um campo de name .

• No Nome coloque “Nome do Gato”;
• Escolha “Texto Simples” no Tipo de Campo;
• Agora Salve.
  

Configurando a descrição do gato

Nossos gatos também precisam de uma descrição, mas vamos limitar o número de caracteres que nossos autores podem inserir sobre cada gato.

• Clique em “Novo Campo” novamente;
• No Nome coloque “Descrição do Gato”;
• Escolha novamente o tipo de campo “Texto Simples”;
• Crie um limite adicionando “2000” na caixa Field Limit;
• Clique em Salvar.

Configurando a foto do gato

Vamos querer adicionar fotos a cada uma de nossas postagens de gato, e pode haver várias fotos por gato - não é um problema. Mas antes de criar um campo, precisamos informar ao Craft onde queremos que as fotos sejam armazenadas em nosso servidor. (O Craft também tem a opção de fazer upload para soluções de armazenamento em nuvem.)

• Vá para “Configurações” no menu à esquerda;
• Clique em “Ativos”;
• Clique em “Novo Volume”;
• No Nome coloque “Foto do Gato”;
• Habilite “Os ativos neste volume têm URLs públicos”;
• Em “URL Base” coloque @web/uploads/ ;
• Em “File System Path” coloque @webroot/uploads/ ;
• Salvar.

As propriedades acima estão dizendo ao Craft onde gostaríamos que nossos arquivos enviados fossem armazenados. Você pode alterá-los para o que quiser. Você também pode ler mais sobre a configuração de variáveis ​​de ambiente para elas na documentação.

Correspondência de campo para seções

Agora que temos nossos campos e seções configurados e funcionando, precisaremos combinar os dois atribuindo quais campos gostaríamos que nossas seções tivessem. Isso é tão fácil quanto arrastar e soltar no Craft.

• Vá para Configurações;
• Clique em “Seções”;
• Agora clique em “Editar Tipo de Seção”;
• Agora clique em nossa seção “Gatos”;
• Selecione a aba “Campos” no menu à direita;
• Arraste sobre os campos “Gatos” que criamos anteriormente para o painel de conteúdo;
• Uma vez arrastado, salve a seção dos gatos.

Dica : Você pode remover o campo “Título” de nossas postagens desativando a opção “Mostrar o campo de título”. Você pode querer o nome do gato como título, por exemplo.

Como criar um post de gato

Agora é hora de realmente criarmos um post fofo de gato. Vá até as “Entradas” no menu de administração à esquerda.

• Clique em “Nova Entrada”;
• No menu suspenso, selecione “Gatos”;
• Crie sua postagem! ( Quanto mais fofinho, melhor. )

Listando nossos artigos sobre gatos

Agora que temos nosso modelo de conteúdo pronto, podemos começar a construir a interface básica para nosso blog de gatos. Craft é escrito na linguagem Twig/Liquid. Se você já se interessou pelo desenvolvimento do Shopify, isso deve ser familiar para você; se não, é bastante fácil de pegar. Mas primeiro, precisamos abrir nossa pasta de instalação do Craft em nosso editor de código favorito (onde você descompactou a instalação do Craft).

1. Abra o Craft Install em seu editor de código;
2. Crie um novo arquivo em Modelos chamado index.twig
   ( O Craft pode ter instalado um índice padrão. Abra-o e limpe-o. )
3. Adicione o seguinte código:

 <!DOCTYPE html> <html xmlns="https://www.w3.org/1999/xhtml" lang="en-US"> <head> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous"> </head> <body> {# Create an entry query with the 'section' and 'limit' parameters #} {% set myEntryQuery = craft.entries() .section('cats') .limit(10) %} {# Fetch the entries #} {% set entries = myEntryQuery.all() %} {# Display the entries #} <div class="container"> <div class="row"> {% for entry in entries %} <div class="col"> <article class="card"> {% set catImage = entry.catsPhoto.one() %} {% if catImage %} <img src="{{ rel.url }}" class="card-img-top" alt="..."> {% endif %} <div class="card-body"> <h1><a href="{{ entry.url }}">{{ entry.title }}</a></h1> <h2>{{ entry.catsName }}</h2> <p>{{ entry.catsDescription }}</p> <a class="btn btn-primary" href="{{ entry.url }}">View {{ entry.catsName }}</a> </div> </article> </div> {% endfor %} </div> </div> </body> </html>

No código acima, informamos ao Craft sobre nossa seção “Cats” e colocamos um limite nas postagens para 10. Em seguida, buscamos as entradas dessa seção e continuamos a percorrer cada um dos gatos dentro das entradas de busca no código a seguir . As imagens são um pouco diferentes no Craft: elas são armazenadas como um array, então fazemos outro loop dentro do nosso código para obter as imagens dos gatos.

Vamos testar

Abra sua URL de desenvolvimento de teste que criamos durante a configuração. (Certifique-se de que seu servidor nitro esteja rodando usando nitro start ). Agora devemos ver as postagens que criamos exibidas em nossa página de índice. Clicar para ver mais informações nos dá um erro 404, então vamos corrigir isso a seguir!

Dica : Incluímos o Bootstrap para torná-lo um pouco mais sofisticado, mas sinta-se à vontade para incluir qualquer framework que desejar.

Página de postagem do gato

Faremos o mesmo que fizemos com a página de índice. Vamos criar o template cat criando um novo arquivo dentro da pasta Templates chamado cat.twig . Como já estamos no contexto Entry , não precisamos consultá-lo novamente.

 <html> <body> {% block content %} {% set catImage = entry.catsPhoto.one() %} {% if catImage %} <img src="{{ rel.url }}" class="card-img-top" alt="..."> {% endif %} {{ entry.title }} {{ entry.catsName }} {{ entry.catsDescription }} {% endblock %} </body> </html>

Salve isso e atualize nosso site de desenvolvimento de teste. Agora devemos ser capazes de navegar para nossa página de entrada de gatos! Voilá!

Ficar sem cabeça

Se você gosta de ser mais técnico com o Craft e usá-lo como seu sistema de gerenciamento de conteúdo para alimentar seu aplicativo da web, pode fazer isso usando o pacote Pro do Craft CMS, que adiciona contas de usuário e GraphQL à sua configuração. A versão Pro do Craft é gratuita para teste e teste, o que significa que você pode fazer um teste completo antes de se comprometer. Agora veremos como configurar uma API GraphQL básica usando o editor GraphQL integrado do Craft.

Iniciar avaliação profissional

Depois de instalar o Craft CMS, vá até a “Plugin Store” e procure por “Upgrade” nas opções do menu à esquerda. Clique em “Trial” na seção “Pro” e execute o processo de atualização.

A configuração básica

Depois de iniciar sua avaliação do Pro Craft CMS, você deve notar uma nova opção de menu no painel lateral do administrador: GraphQL. Antes de irmos direto, precisamos de alguns modelos de conteúdo que podem formar a saída. Quando você cria seus modelos de conteúdo, o Craft CMS cria automaticamente uma API GraphQL pronta para uso. Também não há necessidade de definir os esquemas!

Crie seu endpoint da API Cat

Temos nosso conteúdo classificado; agora queremos criar o endpoint para que possamos buscar todo o nosso conteúdo de gato fofo. Vamos fazer isso agora:

1. Abra o seu projeto Craft CMS routes.php em seu IDE.
2. Adicionar a regra a seguir disponibilizará seu endpoint de API em https://yourprojecturl.test/api :
   

    return [ 'api' => 'graphql/api', // ... ];

3. Salvar e fechar.
4. Teste fazendo ping no endpoint:
   

    curl -H "Content-Type: application/graphql" -d '{ping}' https://yourprojecturl.test/api

5. Você deve receber “pong” em resposta.

Ative seu conteúdo

Configuramos nosso endpoint para receber solicitações. Agora é hora de habilitar/desabilitar certas partes de nosso site que gostaríamos que estivessem disponíveis por meio de nossa API. Por exemplo, você pode desativar determinadas entradas que contêm informações confidenciais. O Craft torna este processo extremamente fácil; é um caso de tique-taque/desmarcar. (Você também pode ficar mais complexo escrevendo seus próprios esquemas.) Por enquanto, criaremos um esquema público disponível publicamente. Você pode criar esquemas privados que exigem uma chave secreta, mas isso está fora do escopo deste guia.

1. Vá para a seção GraphQL através da barra lateral do painel de administração;
2. Clique em “Esquema Público”;
3. Ative a seção "Gatos".
   ( Isso disponibilizará nosso conteúdo por meio do seu endpoint. )
4. Salvar.
   

Testando nosso endpoint

Agora que escolhemos os dados que gostaríamos de disponibilizar por meio de nosso endpoint, agora é hora de testá-los. No menu suspenso GraphQL no painel de administração à esquerda, você notará um item chamado “GraphiQL”. O GraphiQL nos permite explorar nossa API e consultá-la em nosso painel.

1. Abra GraphiQL;
2. Altere "Esquema Completo" para "Esquema Público";
3. Escreva a seguinte consulta GraphQL no painel esquerdo:
   

    query ($section: [String], $orderBy: String) { entries(section: $section, orderBy: $orderBy) { title slug id } }

4. Clique no botão "Jogar".

Dica : Se você não estiver 100% nas consultas do GraphQL, isso não é um problema; O Craft vem com um guia prático para ajudá-lo.

Empacotando

Agora fizemos um mergulho bastante leve no mundo do Craft CMS. Vamos resumir o que realizamos no guia a seguir:

• Configure um ambiente de desenvolvimento local com o Multipass;
• Criou e configurou uma nova instalação do Craft;
• Adicionado um domínio de teste no qual podemos acessar nossa instalação;
• Criei um blog de gatos fofos;
• Sem cabeça;
• Criou um endpoint de API para acessar nossos gatos.
  

Se você estiver interessado em se envolver mais com o Craft CMS e fazer parte da comunidade, você deve se juntar ao servidor Craft Discord muito ativo e ler mais através da documentação oficial.