One place for hosting & domains

      desenvolver

      Como desenvolver um site Drupal 9 em sua máquina local usando Docker e DDEV


      O autor selecionou a Diversity in Tech Fund​​​​​ para receber uma doação como parte do programa Write for DOnations.

      Introdução

      O DDEV é uma ferramenta de código aberto que usa o Docker para criar ambientes de desenvolvimento locais para muitos frameworks PHP diferentes. Usando o poder da conteinerização, o DDEV pode simplificar muito como você trabalha em vários projetos que usam várias pilhas de tecnologia e servidores em nuvem. O DDEV inclui modelos para o WordPress, Laravel, Magento, TYPO3, Drupal e muito mais.

      O Drupal 9 foi lançado em 3 de junho de 2020 para o Drupal CMS. Conhecido pela facilidade de uso e por uma grande biblioteca de módulos e temas, o Drupal é um framework PHP popular para construir e manter vários sites e aplicações de todos os tamanhos.

      Neste tutorial, você começará a desenvolver um site Drupal 9 em sua máquina local usando o DDEV. Isso permitirá que você construa seu site primeiro e, depois, quando tudo estiver pronto, implantar o projeto em um servidor de produção.

      Pré-requisitos

      Para completar este tutorial, você precisará de:

      Nota: é possível desenvolver com o Drupal 9 usando o DDEV em um servidor remoto, mas você precisará de uma solução para acessar o localhost em um navegador Web. O comando DDEV ddev share funciona com ngrok, que cria um túnel seguro em seu servidor para que você e outras partes interessadas visualizem seu site de desenvolvimento. Para uso pessoal, você também pode instalar uma GUI no servidor remoto e acessar o site de desenvolvimento através de um navegador Web dentro dessa interface. Para fazer isso, você pode seguir nosso guia how to install and configure VNC on Ubuntu 20.04. Para uma solução GUI ainda mais rápida, você pode seguir nosso guia how to set up a remote desktop with X2Go on Ubuntu 20.04.

      Passo 1 — Instalando o DDEV

      Neste passo, você irá instalar o DDEV em sua máquina local. A Opção 1 inclui instruções para o macOS enquanto a Opção 2 fornece instruções para o Linux. Este tutorial foi testado no DDEV versão 1.15.0.

      Opção 1 — Instalando o DDEV no macOS

      O DDEV aconselha que os usuários do macOS instalem sua ferramenta usando o gerenciador de pacotes Homebrew. Use o comando brew a seguir para instalar a versão estável mais recente:

      • brew tap drud/ddev && brew install drud/ddev/ddev

      Se você preferir a versão mais recente absoluta, você pode usar o brew para instalar o ddev-edge:

      • brew tap drud/ddev-edge && brew install drud/ddev-edge/ddev

      Se você já tiver uma versão do DDEV instalada, ou se quiser atualizar sua versão, desligue o DDEV e use o brew para atualizar sua instalação:

      • ddev poweroff
      • brew upgrade ddev

      Depois de instalar ou atualizar o DDEV, execute ddev version para verificar o software:

      Você verá uma saída como esta:

      Output

      DDEV-Local version v1.15.0 commit v1.15.0 db drud/ddev-dbserver-mariadb-10.2:v1.15.0 dba phpmyadmin/phpmyadmin:5 ddev-ssh-agent drud/ddev-ssh-agent:v1.15.0 docker 19.03.8 docker-compose 1.25.5 os darwin router drud/ddev-router:v1.15.0 web drud/ddev-webserver:v1.15.0

      O DDEV inclui uma poderosa interface de linha de comando ou CLI. Execute ddev para aprender sobre alguns comandos comuns:

      Você verá o seguinte resultado:

      Output

      Create and maintain a local web development environment. Docs: https://ddev.readthedocs.io Support: https://ddev.readthedocs.io/en/stable/#support Usage: ddev [command] Available Commands: auth A collection of authentication commands composer Executes a composer command within the web container config Create or modify a ddev project configuration in the current directory debug A collection of debugging commands delete Remove all project information (including database) for an existing project describe Get a detailed description of a running ddev project. exec Execute a shell command in the container for a service. Uses the web service by default. export-db Dump a database to a file or to stdout help Help about any command hostname Manage your hostfile entries. import-db Import a sql file into the project. import-files Pull the uploaded files directory of an existing project to the default public upload directory of your project. list List projects logs Get the logs from your running services. pause uses 'docker stop' to pause/stop the containers belonging to a project. poweroff Completely stop all projects and containers pull Pull files and database using a configured provider plugin. restart Restart a project or several projects. restore-snapshot Restore a project's database to the provided snapshot version. sequelpro This command is not available since sequel pro.app is not installed share Share project on the internet via ngrok. snapshot Create a database snapshot for one or more projects. ssh Starts a shell session in the container for a service. Uses web service by default. start Start a ddev project. stop Stop and remove the containers of a project. Does not lose or harm anything unless you add --remove-data. version print ddev version and component versions Flags: -h, --help help for ddev -j, --json-output If true, user-oriented output will be in JSON format. -v, --version version for ddev Use "ddev [command] --help" for more information about a command.

      Para mais informações sobre o uso do DDEV CLI, visite a documentação oficial do DDEV.

      Com o DDEV instalado em sua máquina local, agora você poderá instalar o Drupal 9 e começar a desenvolver um site.

      Opção 2 — Instalando o DDEV no Linux

      Em um sistema operacional Linux, você pode instalar o DDEV usando o Homebrew para Linux ou usando o script de instalação oficial. No Ubuntu, comece atualizando sua lista de pacotes no gerenciador de pacotes apt (você pode usar apt no Debian, caso contrário, use o gerenciador de pacotes equivalente associado à sua distribuição Linux):

      Agora, instale alguns pacotes de pré-requisito do repositório oficial do Ubuntu:

      • sudo apt install build-essential apt-transport-https ca-certificates software-properties-common curl

      Esses pacotes lhe permitirão baixar o script de instalação do DDEV a partir do repositório oficial do GitHub.

      Agora, baixe o script:

      • curl -O https://raw.githubusercontent.com/drud/ddev/master/scripts/install_ddev.sh

      Antes de executar o script, abra-o no nano ou no seu editor de texto preferido e inspecione o conteúdo:

      nano install_ddev.sh
      

      Depois de revisar o conteúdo do script e você estiver satisfeito, salve e feche o arquivo. Agora você poderá executar o script de instalação.

      Use o comando chmod para tornar o script executável:

      Agora, execute o script.

      O processo de instalação pode lhe pedir para confirmar algumas configurações ou inserir sua senha sudo. Depois que a instalação terminar, você terá o DDEV disponível no sistema operacional Linux.

      Execute ddev version para verificar seu software:

      Você verá uma saída como esta:

      Output

      DDEV-Local version v1.15.0 commit v1.15.0 db drud/ddev-dbserver-mariadb-10.2:v1.15.0 dba phpmyadmin/phpmyadmin:5 ddev-ssh-agent drud/ddev-ssh-agent:v1.15.0 docker 19.03.8 docker-compose 1.25.5 os linux router drud/ddev-router:v1.15.0 web drud/ddev-webserver:v1.15.0

      O DDEV é uma poderosa CLI ou interface de linha de comando. Execute somente ddev para aprender sobre alguns comandos comuns:

      Você verá o seguinte resultado:

      Output

      Create and maintain a local web development environment. Docs: https://ddev.readthedocs.io Support: https://ddev.readthedocs.io/en/stable/#support Usage: ddev [command] Available Commands: auth A collection of authentication commands composer Executes a composer command within the web container config Create or modify a ddev project configuration in the current directory debug A collection of debugging commands delete Remove all project information (including database) for an existing project describe Get a detailed description of a running ddev project. exec Execute a shell command in the container for a service. Uses the web service by default. export-db Dump a database to a file or to stdout help Help about any command hostname Manage your hostfile entries. import-db Import a sql file into the project. import-files Pull the uploaded files directory of an existing project to the default public upload directory of your project. list List projects logs Get the logs from your running services. pause uses 'docker stop' to pause/stop the containers belonging to a project. poweroff Completely stop all projects and containers pull Pull files and database using a configured provider plugin. restart Restart a project or several projects. restore-snapshot Restore a project's database to the provided snapshot version. sequelpro This command is not available since sequel pro.app is not installed share Share project on the internet via ngrok. snapshot Create a database snapshot for one or more projects. ssh Starts a shell session in the container for a service. Uses web service by default. start Start a ddev project. stop Stop and remove the containers of a project. Does not lose or harm anything unless you add --remove-data. version print ddev version and component versions Flags: -h, --help help for ddev -j, --json-output If true, user-oriented output will be in JSON format. -v, --version version for ddev Use "ddev [command] --help" for more information about a command.

      Para mais informações sobre o uso do DDEV CLI, visite a documentação oficial do DDEV.

      Com o DDEV instalado em sua máquina local, é possível implantar o Drupal 9 e começar a desenvolver um site.

      Passo 2 — Implantando um novo site Drupal 9 usando o DDEV

      Com o DDEV em execução, agora você o usará para criar um sistema de arquivos específico do Drupal, instalar o Drupal 9 e depois iniciar um projeto de site padrão.

      Primeiro, você criará um diretório raiz do projeto e então mover-se para dentro dele. Você executará todos os comandos restantes a partir desta localização. Este tutorial usará d9test, mas você está livre para nomear o diretório como quiser. Observe, entretanto, que o DDEV não lida bem com nomes com hifenização. Considera-se uma boa prática evitar nomes de diretório como my-project ou drupal-site-1.

      Crie o diretório raiz do projeto e mova-se para ele:

      O DDEV se destaca na criação de árvores de diretório que correspondam a plataformas CMS específicas. Use o comando ddev config para criar uma estrutura de diretório específica para o Drupal 9:

      • ddev config --project-type=drupal9 --docroot=web --create-docroot

      Você verá uma saída como esta:

      Output

      Creating a new ddev project config in the current directory (/Users/sammy/d9test) Once completed, your configuration will be written to /Users/sammy/d9test/.ddev/config.yaml Created docroot at /Users/sammy/d9test/web You have specified a project type of drupal9 but no project of that type is found in /Users/sammy/d9test/web Ensuring write permissions for d9new No settings.php file exists, creating one Existing settings.php file includes settings.ddev.php Configuration complete. You may now run 'ddev start'.

      Como você passou --project-type=drupal9 para o comando ddev config , o DDEV criou vários subdiretórios e arquivos que representam a organização padrão para um site do Drupal. A árvore do diretório do projeto agora ficará assim:

      A Drupal 9 directory tree

      .
      ├── .ddev
      │   ├── .gitignore
      │   ├── config.yaml
      │   ├── db-build
      │   │   └── Dockerfile.example
      │   └── web-build
      │       └── Dockerfile.example
      └── web
          └── sites
              └── default
                  ├── .gitignore
                  ├── settings.ddev.php
                  └── settings.php
      
      6 directories, 7 files
      

      .ddev/ será a pasta principal para a configuração ddev. web/ será o docroot para o novo projeto; ele irá conter vários arquivos settings específicos. Agora, você tem o esqueleto inicial para o novo projeto Drupal.

      O próximo passo é inicializar a plataforma, que irá compilar os contêineres e configurações de rede necessárias. O DDEV vincula-se às portas 80 e 443, portanto, se estiver executando um servidor Web como o Apache em sua máquina, ou qualquer outra coisa que use essas portas, pare esses serviços antes de continuar.

      Use o comando ddev start para inicializar a plataforma:

      Isso irá compilar todos os contêineres baseados em Docker para o projeto, que incluem um contêiner Web, um contêiner de banco de dados e o phpmyadmin. Quando a inicialização terminar, você verá uma saída como esta (o número de porta pode diferir):

      Output

      ... Successfully started d9test Project can be reached at http://d9test.ddev.site http://127.0.0.1:32773

      Nota: lembre-se que o DDEV está iniciando contêineres do Docker nos bastidores aqui. Se você quiser ver esses contêineres ou verificar se eles estão em execução, você sempre pode usar o comando docker ps:

      Juntamente com quaisquer outros contêineres que você esteja executando atualmente, você encontrará quatro contêineres novos, cada um executando uma imagem diferente: php-myadmin, ddev-webserver, ddev-router e ddev-dbserver-mariadb.

      O ddev start compilou seus contêineres com sucesso e entregou duas URLs como saída. Embora esta saída diga que seu projeto “pode ser acessado em http://d9test.ddev.site e http://127.0.0.1:32773,” visitar essas URLs agora irá gerar um erro. A partir do Drupal 8, o Drupal core e os módulos contrib funcionam como dependências. Portanto, primeiro você precisará terminar de instalar o Drupal usando o Composer, o gerenciador de pacotes para projetos PHP, antes que tudo seja carregado em seu navegador Web

      Uma das características mais úteis e elegantes do DDEV é que você pode passar comandos do Composer através do DDEV CLI e dentro do seu ambiente conteinerizado. Isso significa que você pode separar a configuração específica da sua máquina do seu ambiente de desenvolvimento. Você não precisa mais gerenciar os vários problemas de caminho de arquivo, dependência e versão que geralmente acompanham o desenvolvimento local em PHP. Além disso, você pode alternar rapidamente o contexto entre vários projetos usando diferentes frameworks e pilhas de tecnologia sem esforço.

      Use o comando ddev composer para baixar drupal/recommended-project. Isso irá baixar o Drupal core, suas bibliotecas e outros recursos relacionados e então criar um projeto padrão:

      • ddev composer create "drupal/recommended-project"

      Agora, baixe um componente final chamado Drush, ou Drupal Shell. Este tutorial usará apenas um comando drush, e ele fornece uma alternativa, mas o drush é uma CLI poderosa para o desenvolvimento Drupal que pode melhorar sua eficiência.

      Use ddev composer para instalar o drush:

      • ddev composer require "drush/drush"

      Agora, você construiu um projeto padrão do Drupal 9 e instalou o drush. Agora, você verá seu projeto em um navegador e configurará as definições do site.

      Passo 3 — Configurando seu projeto Drupal 9

      Agora que você instalou o Drupal 9, visite o novo projeto em seu navegador. Para fazer isso, execute novamente ddev start e copie uma das duas URLs que ele gera, ou você pode usar o seguinte comando, que irá automaticamente abrir seu site em uma nova janela do navegador:

      Você encontrará o assistente de instalação padrão do Drupal.

      Drupal 9 installer from browser

      Aqui você tem duas opções. Você pode usar esta UI e seguir o assistente através da instalação, ou poderá retornar ao terminal e passar um comando drush através do ddev. A última opção irá automatizar o processo de instalação e definir admin como o nome de usuário e senha.

      Opção 1 — Usando o assistente

      Volte para o assistente em seu navegador. Sob Choose language selecione um idioma no menu suspenso e clique em Save and continue. Agora, selecione um perfil de instalação. Você pode escolher entre Standard, Minimal e Demo. Faça sua escolha e clique em Save and continue. O Drupal irá verificar automaticamente seus requisitos, configurar um banco de dados e instalar seu site. O último passo é personalizar algumas configurações. Adicione um nome e um endereço de e-mail para o site que termine com seu domínio. Em seguida, escolha um nome de usuário e senha. Escolha uma senha forte e mantenha suas credenciais em algum lugar seguro. Por fim, adicione um endereço de e-mail privado que você verifique regularmente, preencha as configurações regionais e pressione Save and continue.

      Drupal 9 welcome message with a warning about permissions

      Seu novo site irá carregar com uma mensagem de boas-vindas.

      Opção 2 — Usando a linha de comando

      A partir do diretório raiz do projeto, execute este comando ddev exec para instalar um site padrão do Drupal usando drush:

      • ddev exec drush site:install --account-name=admin --account-pass=admin

      Isso criará seu site da mesma forma que o assistente, mas com algumas configurações padrão. O nome de usuário e a senha serão admin.

      Agora, inicie o site para exibi-lo em seu navegador:

      Agora, você começará a construir o site, mas considera-se uma boa prática verificar se as permissões estão corretas para o diretório /sites/web/default. Enquanto você está trabalhando localmente, isso não é uma preocupação significativa, mas se você transferir essas permissões para um servidor de produção, elas representarão um risco de segurança.

      Passo 4 — Verificando as permissões

      Durante a instalação do assistente, ou quando sua página de boas-vindas carregar pela primeira vez, você verá um aviso sobre as configurações de permissões no diretório /sites/web/default e um arquivo dentro desse diretório: settings.php.

      Depois que o script de instalação for executado, o Drupal irá tentar definir as permissões do diretório web/sites/default para leitura e execução para todos os grupos: esta é uma configuração de permissões 555. Ele também tentará definir permissões do arquivo default/settings.php para somente leitura, ou 444. Se você encontrar este aviso, execute esses dois comandos chmod a partir do diretório raiz do projeto. Não fazer isso representa um risco de segurança:

      • chmod 555 web/sites/default
      • chmod 444 web/sites/default/settings.php

      Para verificar se você tem as permissões corretas, execute este comando ls com as chaves a, l, h, e d:

      • ls -alhd web/sites/default web/sites/default/settings.php

      Verifique se suas permissões correspondem à seguinte saída:

      Output

      dr-xr-xr-x 8 sammy staff 256 Jul 21 12:56 web/sites/default -r--r--r-- 1 sammy staff 249 Jul 21 12:12 web/sites/default/settings.php

      Agora, você está pronto para desenvolver um site Drupal 9 em sua máquina local.

      Passo 5 — Criando seu primeiro post no Drupal

      Para testar algumas das funcionalidades do Drupal, você criará agora um post usando a interface Web.

      A partir da página inicial do site, clique no botão Content na borda esquerda do menu superior. Agora, clique no botão azul add content. Uma nova página aparecerá. Clique em Article e outra página aparecerá.

      Drupal 9 Create Article Prompt

      Adicione qualquer título e conteúdo que você quiser. Adicione uma imagem, como um dos papéis de parede da DigitalOcean. Ao terminar, clique no botão azul. save.

      Seu primeiro post aparecerá em seu site.

      Drupal 9 Created Post

      Agora, você está desenvolvendo um site Drupal 9 em sua máquina local sem nunca interagir com um servidor, graças ao Docker e ao DDEV. No próximo passo, você gerenciará o contêiner DDEV para acomodar o fluxo de trabalho.

      Passo 6 — Gerenciando o contêiner DDEV

      Quando você terminar de desenvolver seu projeto, ou quando quiser fazer uma pausa, você pode parar seu contêiner DDEV sem se preocupar com a perda de dados. O DDEV pode gerenciar a troca rápida de contexto entre muitos projetos; este é um de seus recursos mais úteis. Seu código e dados são sempre preservados em seu diretório de projeto, mesmo depois de parar ou excluir o contêiner DDEV.

      Para liberar recursos, pare o DDEV a qualquer momento. A partir do diretório raiz do projeto, execute o seguinte comando:

      O DDEV está disponível globalmente, assim você pode executar comandos ddev a partir de qualquer lugar, desde que você especifique o projeto DDEV:

      Visualize também todos os projetos usando ddev list:

      O DDEV inclui muitos outros comandos úteis.

      Você pode reiniciar o DDEV e continuar desenvolvendo localmente a qualquer momento.

      Conclusão

      Neste tutorial, você usou o Docker e o poder da conteinerização para desenvolver um site Drupal localmente, com a ajuda do DDEV. O DDEV também se integra bem com vários IDEs, e ele fornece depuração de PHP embutida para o Atom, PHPStorm e Visual Studio Code (vscode). A partir daqui, você também pode aprender mais sobre a criação de ambientes de desenvolvimento para o Drupal com DDEV ou desenvolver outros frameworks PHP como o WordPress.



      Source link

      Como desenvolver um aplicativo de citações inspiradoras utilizando o AdonisJs e o MySQL


      O autor selecionou a Tech Education Fund para receber uma doação como parte do programa Write for DOnations.

      Introdução

      O AdonisJs é um framework Web Node.js, escrito em JavaScript simples, que é executado em todos os grandes sistemas operacionais. Ele utiliza o padrão de design popular MVC (Modelo – Visão – Controle) e oferece um ecossistema estável para a escrita de aplicativos Web do servidor. O framework possui autenticação contínua, SQL ORM (mapeamento objeto-relacional), migrations e a propagação de banco de dados. O AdonisJs tem uma arquitetura semelhante ao framework PHP de aplicativo Web, o Laravel, incluindo a mesma estrutura de pasta e vários conceitos de configuração compartilhados.

      Por padrão, o AdonisJs utiliza o mecanismo de modelo Edge, projetado para um uso intuitivo. Assim como o Laravel, o AdonisJs vem com um ORM chamado Lucid que funciona como uma interface para a comunicação entre os modelos de um aplicativo e o banco de dados. Com o AdonisJs, os desenvolvedores podem desenvolver um aplicativo de pilha completa, onde o servidor de back-end será o responsável pela aplicação da lógica de negócios, roteamento e renderização de todas as páginas do aplicativo. Também é possível criar um serviço Web API para retornar as respostas JSON de um controlador; esses serviços Web podem ser consumidos usando os frameworks de front-end, como o Vue.js, o React e o Angular.

      Neste tutorial, você desenvolverá um aplicativo com o AdonisJs usando sua CLI. Você criará rotas, controladores, modelos e visualizações dentro do seu aplicativo e executará as validações de formulário. O exemplo neste tutorial será um aplicativo de citações inspiradoras, no qual um usuário pode se inscrever e fazer o login para criar uma citação inspiradora. Este aplicativo de demonstração dará a você a oportunidade de realizar as operações CRUD (Criar, Ler, Atualizar e Excluir).

      Pré-requisitos

      Antes de iniciar este guia, você precisará do seguinte:

      Nota: este tutorial utiliza uma máquina macOS para desenvolvimento. Caso esteja usando outro sistema operacional, talvez seja necessário, nos primeiros passos, usar os comandos sudo para o npm.

      Passo 1 — Instalando o Adonis CLI

      Nesta seção, você instalará o Adonis CLI e todos os seus pacotes necessários em sua máquina local. O CLI permitirá que você faça a exibição de scaffold em um novo projeto do AdonisJs, bem como criar e gerar um boilerplate para controladores, middlewares e modelos em seu aplicativo. Você também criará seu banco de dados para o projeto.

      Execute o seguinte comando para instalar o AdonisJs CLI em sua máquina, de maneira global, via npm:

      Assim que o processo de instalação terminar, digite o seguinte comando no terminal para confirmar a instalação do AdonisJs e visualizar a versão atual:

      Você verá o resultado mostrando a versão atual do AdonisJs:

      Output

      4.1.0

      Com a instalação do AdonisJs CLI bem-sucedida, você tem acesso e pode usar o comando adonis para criar novas instalações de um projeto AdonisJs, gerenciar seu projeto e gerar arquivos relevantes, como os controladores, modelos, etc.

      Agora, você pode prosseguir para criar um novo projeto do AdonisJs usando o comando adonis como mostrado aqui:

      • adonis new adonis-quotes-app

      O comando anterior criará um aplicativo chamado adonis-quotes-app em um novo diretório com o mesmo nome em seu diretório local com a estrutura relevante do AdonisJs MVC.

      Vá para a pasta do novo aplicativo:

      Então, inicie seu aplicativo executando:

      Isso inicializará o servidor de desenvolvimento na porta padrão 3333, como especificado no arquivo root .env para seu aplicativo. Vá para http://localhost:3333 para visualizar a página de boas-vindas do AdonisJs.

      Página de boas-vindas do AdonisJs

      Agora, você completará a configuração do seu banco de dados. Aqui, você instalará o driver do mysql para se conectar ao seu servidor MySQL através do seu aplicativo Node.js via npm. Para começar, volte para seu terminal onde o aplicativo está funcionando, pare o processo com CTRL + C e execute o seguinte comando:

      Agora que você instalou o driver do MySQL Node.js com êxito para este aplicativo, será necessário criar o banco de dados do aplicativo e configurar a conexão apropriada para ele.

      A versão mais recente do MySQL que você instalou através do tutorial de pré-requisitos utiliza um plug-in de autenticação padrão chamado caching_sha2_password. Ele ainda não é compatível com drivers do Node.js para o MySQL. Para evitar qualquer problema de conexão de banco de dados do seu aplicativo, será necessário criar um novo usuário do MySQL e usar o plug-in de autenticação atualmente suportado, o —mysql_native_password.

      Para começar, acesse o cliente do MySQL usando a conta root:

      Será solicitado que você digite sua senha de conta root, definida durante a instalação do MySQL.

      Em seguida, crie o usuário e a senha usando o plug-in do mysql_native_password:

      • CREATE USER 'sammy'@'localhost' IDENTIFIED WITH mysql_native_password BY 'password';

      Você verá o seguinte resultado:

      Output

      Query OK, 0 rows affected (0.02 sec)

      Em seguida, crie um banco de dados para o aplicativo com:

      Você verá o seguinte resultado:

      Output

      Query OK, 1 row affected (0.03 sec)

      Você criou o banco de dados para este aplicativo com sucesso.

      Agora, habilite o acesso ao banco de dados criado para o novo usuário do MySQL. Execute o seguinte comando para conceder todos os privilégios ao usuário no banco de dados:

      • GRANT ALL PRIVILEGES ON adonis.* TO 'sammy'@'localhost';

      Recarregue as tabelas de concessão, executando o seguinte comando para aplicar as alterações que acabou de fazer:

      Você verá o seguinte resultado:

      Output

      Query OK, 0 rows affected (0.00 sec)

      Saia do cliente do MySQL com:

      Você instalou o AdonisJs CLI com sucesso, criou um novo projeto do AdonisJs e instalou o mysql via npm. Você também criou o banco de dados para este aplicativo e configurou um usuário do MySQL com os privilégios apropriados a ele. Esta é a configuração básica do seu aplicativo e, na seção seguinte, você começará a criar as visualizações necessárias para seu aplicativo.

      Passo 2 — Usando o mecanismo de modelagem Edge

      O AdonisJs vem com seu próprio mecanismo de modelo chamado Edge. Ele permite que você crie um modelo HTML reutilizável e habilita a introdução da lógica de front-end em seu aplicativo com o mínimo de código. O Edge fornece aos desenvolvedores de JavaScript as ferramentas ao desenvolver um aplicativo para compilar um layout baseado em componentes, escrever condicionais, usar iterações e criar camadas de visualização para reter a lógica. Todos os arquivos do modelo terminam com a extensão .edge, e são armazenados no diretório resources/views.

      A seguir, são exibidas as visualizações que seu aplicativo precisará para funcionar corretamente:

      • Master Layout: com o Edge, é possível criar uma página que terá CSS, arquivos comuns do JavaScript, jQuery e as partes comuns da interface do usuário que serão as mesmas ao longo do aplicativo — por exemplo, a barra de navegação, logotipo, cabeçalho, etc. Uma vez que tiver estabelecido a página de Layout Mestre, outras visualizações (páginas) em seu aplicativo a herdarão.
      • Index view: essa página utilizará o layout mestre para herdar arquivos comuns e também renderizará o conteúdo para a página inicial do aplicativo.
      • Login page: essa página também usará o layout mestre e renderizará o formulário com os campos de entrada para o nome de usuário e a senha para os usuários fazerem o login.
      • Register page: aqui, os usuários verão um formulário para registrar e ter seus detalhes permanentes no banco de dados.
      • Create quote page: os usuários utilizarão essa página para criar uma citação inspiradora.
      • Edit quote page: os usuários usarão esta página para editar uma citação.
      • View quote page: os usuários utilizarão está página para visualizar uma citação em particular.

      Para começar, use o comando adonis para criar a página de layout mestre executando o seguinte comando:

      • adonis make:view layouts/master

      Você verá um resultado similar ao seguinte:

      Output

      ✔ create resources/views/layouts/master.edge

      Esse comando criará automaticamente um arquivo master.edge em sua pasta resources/views/layouts. Abra o novo arquivo:

      • nano resources/views/layouts/master.edge

      Adicione o seguinte código nele:

      /resources/views/layouts/master.edge

      <!DOCTYPE html>
      <html lang="en">
      <head>
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <meta http-equiv="X-UA-Compatible" content="ie=edge">
          <title>adonis-quotes-app</title>
          {{ style('https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css') }}
          {{ style('style') }}
          {{ script('https://code.jquery.com/jquery-3.3.1.slim.min.js') }}
      </head>
      <body>
          <div class="container-fliud">
              @include('navbar')
              @!section('content')
          </div>
          {{ script('https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js') }}
      
      </body>
      </html>
      

      Neste arquivo, inclua os arquivos CDN para o Bootstrap CSS, o Bootstrap JavaScript e o jQuery. Adicione um nome de arquivo CSS global de nome style.css e dentro do div, inclua um arquivo partial chamado navbar. Para reutilizar os fragmentos do código HTML necessários em várias páginas em seu aplicativo, como nav ou footer, incorpore as parciais. Esses são arquivos menores que contêm o código repetido, tornando mais rápida a atualização do código desses elementos em um único local, em vez de toda instância que ele ocorre. O navbar contém marcações para botões de Login e de Register, um logotipo e um link de página inicial.

      Com isso funcionando, todas as páginas seguintes que serão criadas para este aplicativo podem estender o layout mestre e ter a navbar renderizada sem a necessidade de escrever o conteúdo novamente. Você criará este arquivo navbar mais tarde no tutorial.

      Por fim, defina uma tag de seção @! section() para incluir o conteúdo de outras páginas e tê-las renderizadas pelo layout mestre. Para que isso funcione como esperado, todas as novas páginas que estendem o layout mestre também devem definir uma tag de seção com o mesmo nome (ou seja, @section('content')​​​).

      Salve e saia do arquivo assim que terminar de editá-lo.

      Em seguida, você usará o comando adonis para criar a barra de navegação:

      Você verá um resultado parecido com este:

      Output

      ✔ create resources/views/navbar.edge

      Abra o arquivo recém-criado:

      • nano resources/views/navbar.edge

      Então, adicione o seguinte código a ele:

      /resources/views/navbar.edge

      <nav class="navbar navbar-expand-lg navbar-dark text-white">
          <a class="navbar-brand" >LOGO</a>
          <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
              <span class="navbar-toggler-icon"></span>
          </button>
      
          <div class="collapse navbar-collapse" id="navbarNav">
              <ul class="navbar-nav">
                  <li class="nav-item active ">
                      <a class="btn text-white" href="https://www.digitalocean.com/">Home</a>
                  </li>
              </ul>
          </div>
          <div class="navbar-right" id="navbarNav">
              @loggedIn
                  <ul class="navbar-nav">
                          <li>
                              <div class="text-right">
                                   <a href="{{route('create.quote')}}" class="btn btn-outline-primary">Create Quote</a>
                              </div>
                          </li>
      
                      <li class="nav-item dropdown">
                          <a class="nav-link dropdown-toggle" href="https://www.digitalocean.com/#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                             {{ auth.user.username}}
                          </a>
                          <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                              <form method="POST" action="{{route('logout')}}">
                                  {{ csrfField() }}
                                    <button  type="submit" class="dropdown-item" href="">logout</button>
                              </form>
                          </div>
                      </li>
                  </ul>
              @else
                  <ul class="navbar-nav">
                      <li class="nav-item active pr-2">
                          <a href="{{route('login.create')}}" class="btn btn-outline-danger">
                            login
                          </a>
                      </li>
                      <li class="nav-item active pr-2">
                          <a href="{{route('register.create')}}" class="btn btn-outline-primary">
                              Register
                          </a>
                      </li>
                  </ul>
              @endloggedIn
          </div>
      </nav>
      

      Além de definir os links para a página inicial e um botão para registrar e fazer login, adicione uma tag @loggedIn. Com isso funcionando, é possível escrever uma instrução condicional em torno do usuário autenticado e exibir o conteúdo adequado, sempre que necessário. Para um usuário autenticado, o aplicativo exibirá seu nome de usuário e um botão para criar uma nova citação. Caso um usuário não esteja logado, seu aplicativo exibirá um botão para fazer login ou registrar-se. Essa página será incluída como uma parcial em cada página, como estava antes no layout mestre para este aplicativo.

      Salve e saia do arquivo.

      Agora, você criará a página de índice que será usada para a página inicial do aplicativo. Ele renderizará e exibirá a lista de todas citações inspiradoras que os usuários escrevem:

      Você verá um resultado similar ao seguinte:

      Output

      ✔ create resources/views/index.edge

      O arquivo criado aqui estará localizado em resources/views/index.edge. Abra o arquivo:

      • nano resources/views/index.edge

      Então, adicione as linhas a seguir:

      /resources/views/index.edge

      @layout('layouts/master')
      @section('content')
      
      <div class="container">
          <div class="text-center">
              @if(flashMessage('successmessage'))
                  <span class="alert alert-success p-1">{{ flashMessage('successmessage') }}</span>
              @endif
          </div>
          <div class="row">
              @each(quote in quotes)
                  <div class="col-md-4 mb-4 quote-wrapper">
                      <a href="https://www.digitalocean.com/view-quote/{{quote.id}}" class="w-100">
                          <div class="card shadow-lg bg-dark text-white">
                              <div class="card-body">
                                  <blockquote class="blockquote mb-0">
                                      <p>{{quote.body}}</p>
                                      <footer class="blockquote-footer">
                                          <cite title="Source Title"> {{quote.username}}</cite>
                                      </footer>
                                  </blockquote>
                                  @if(auth.user.id == quote.user_id)
                                    <div>
                                      <a  href="http://www.digitalocean.com/edit-quote/{{quote.id}}" class="btn btn-primary">edit</a>
                                      <a href="http://www.digitalocean.com/delete-quote/{{quote.id}}" class="btn btn-danger">delete</a>
                                    </div>
                                  @endif
                              </div>
                          </div>
                      </a>
                  </div>
              @else
               <div class="col-md-12 empty-quote text-center">
                      <p>No inspirational quote has been created</p>
               </div>
              @endeach
          </div>
      </div>
      @endsection
      

      Aqui, indique que essa visualização utilizará o layout master, estendendo-a. Esta página pode ter acesso a todas as bibliotecas, folhas de estilos e a navbar incluída no layout master. Em seguida, itere sobre uma matriz de quotes utilizando a tag integrada @each. A matriz de quotes será enviada para essa visualização a partir do QuoteController, que você criará mais tarde neste tutorial. Caso não haja aspas, uma mensagem adequada será exibida.

      Salve e saia deste arquivo.

      Agora, para criar a página de login, execute o seguinte comando a partir do terminal:

      • adonis make:view auth/login

      Você verá um resultado semelhante a:

      Output

      ✔ create resources/views/auth/login.edge

      Isso criará automaticamente uma pasta auth dentro de resources/views e também criará um arquivo login.edge dentro dela. Abra o arquivo login.edge:

      • nano resources/views/auth/login.edge

      Adicione o conteúdo a seguir:

      /resources/views/auth/login.edge

      @layout('layouts/master')
      @section('content')
        <div class="container">
          <div class="row">
            <div class="col-md-4 shadow bg-white mt-5 rounded offset-md-4">
              <form method="POST" action="{{route('login.store')}}">
                {{ csrfField() }}
                  <div>
                    @if(flashMessage('successmessage'))
                      <span class="alert alert-success p-1">{{ flashMessage('successmessage') }}</span>
                    @endif
                  </div>
                  <div class="form-group">
                    <label for="email">Email address</label>
                    <input type="email" class="form-control" id="email" name="email" value="{{old('email','')}}"  placeholder="Enter email">
                    {{ elIf('<span class=text-danger>$self</span>', getErrorFor('email'), hasErrorFor('email')) }}
                  </div>
                  <div class="form-group">
                    <label for="pasword">Password</label>
                    <input type="password" class="form-control" id="password" name="password" value="{{old('password','')}}" placeholder="Password">
                    {{ elIf('<span class=text-danger>$self</span>', getErrorFor('password'), hasErrorFor('password')) }}
                  </div>
      
                  <div class="text-center">
                    <button type="submit" class="btn btn-primary">Submit</button>
                  </div>
              </form>
            </div>
          </div>
        </div>
      @endsection
      

      Esse arquivo possui um formulário que contém elementos de entrada que você utilizará para coletar o nome de usuário e a senha de um usuário registrado, antes de serem autenticados e começarem a criar citações com sucesso. Outro elemento importante para notar nesta página é o {{ csrfField() }}. É uma variável global que o AdonisJs utilizará para passar o token de acesso CSRF quando enviarem um pedido POST, PUT e DELETE de seu aplicativo.

      Isso foi colocado em funcionamento para proteger seu aplicativo de ataques de Falsificação de Solicitação Entre Sites (CSRF). Ele funciona criando um segredo de CSRF único para cada usuário que visita seu site e assim que eles enviarem um pedido HTTP a partir do front-end, um token correspondente é gerado para este segredo e transmitido com o pedido. Isso permitirá que o middleware, criado para essa solicitação dentro do AdonisJs, verifique se o segredo do token e do CSRF é válido e pertence ao usuário atualmente autenticado.

      Salve e saia do arquivo assim que terminar.

      Em seguida, você criará a página de registro com este comando:

      • adonis make:view auth/register

      Você verá um resultado parecido com este:

      Output

      ✔ create resources/views/auth/register.edge

      Localize e abra o arquivo recém-criado em resources/views/auth/register.edge:

      • nano resources/views/auth/register.edge

      Adicione as linhas a seguir:

      resources/views/auth/register.edge

      @layout('layouts/master')
      @section('content')
        <div class="container ">
          <div class="row">
              <div class="col-md-4  bg-white p-3 mt-5 shadow no-border rounded offset-md-4">
                <form method="POST" action="{{route('register.store')}}">
                  {{ csrfField() }}
                    <div class="form-group">
                      <label for="name">Fullname</label>
                      <input type="text" class="form-control" id="name" name="name"  value="{{old('name','')}}" placeholder="Enter Fullname">
                      {{ elIf('<span class=text-danger>$self</span>', getErrorFor('name'), hasErrorFor('name')) }}
                    </div>
                    <div class="form-group">
                      <label for="email">Email address</label>
                      <input type="email" class="form-control" id="email"  name="email" value="{{old('email','')}}" placeholder="Enter email">
                      {{ elIf('<span class=text-danger>$self</span>', getErrorFor('email'), hasErrorFor('email')) }}
                    </div>
                    <div class="form-group">
                      <label for="pasword">Password</label>
                      <input type="password" class="form-control" id="password" name="password" placeholder="Password">
                      {{ elIf('<span class=text-danger>$self</span>', getErrorFor('password'), hasErrorFor('password')) }}
                    </div>
                    <div class="text-center">
                        <button type="submit" class="btn btn-primary">Submit</button>
                    </div>
                </form>
              </div>
          </div>
        </div>
      @endsection
      

      De maneira similar a que você tem na página de login, este arquivo contém um formulário HTML com campos de entrada para coletar o name, email e o password de um usuário durante o processo de registro. O {{ csrfField() }} também está incluído, uma vez que ele é necessário para cada pedido de postagem em um aplicativo do AdonisJs.

      Salve e saia do arquivo.

      Agora, gere um novo arquivo para criar uma citação inspiradora, executando o seguinte comando a partir do terminal:

      • adonis make:view quotes/create-quote

      Você verá um resultado como:

      Output

      ✔ create resources/views/quotes/create-quote.edge

      Abra o resources/views/quotes/create-quote.edge:

      • nano resources/views/quotes/create-quote.edge

      E adicione o conteúdo a seguir a ele:

      /resources/views/quotes/create-quote.edge

      @layout('layouts/master')
      @section('content')
      <div class="container">
          <div class="row">
              <div class="col-md-3"></div>
              <div class="col-md-6 shadow bg-white mt-5 rounded p-3">
                  <div class="float-right">
                      <a href="https://www.digitalocean.com/" class="btn btn-outline-dark ">back</a>
                  </div>
                      <br>
      
                  <div class="clear-fix"></div>
                      <form method="POST" action="{{route('store.quote')}}">
                          {{ csrfField() }}
                          <div class="form-group">
                              <label for="quote">Create Quote</label>
                              <textarea type="text" rows="5"  name='body' id="body" class="form-control" id="quote" placeholder="Write an inspirational quote"></textarea>
                          </div>
      
                          <div class="text-center">
                              <button type="submit" class="btn btn-primary">Submit</button>
                          </div>
                      </form>
                  </div>
              </div>
              <div class="col-md-3"></div>
          </div>
      </div>
      @endsection
      

      Essa página estende o layout mestre e contém um formulário HTML com um elemento de área de texto. Este elemento permite que um usuário digite um texto em várias linhas antes de ser postado e tratado pela rota apropriada.

      Salve e saia do arquivo assim que terminar.

      Em seguida, crie uma página para edição de uma citação em particular. Execute o comando a seguir a partir do terminal:

      • adonis make:view quotes/edit-quote

      Você verá o seguinte resultado:

      Output

      ✔ create resources/views/quotes/edit-quote.edge

      Abra o arquivo com:

      • nano resources/views/quotes/edit-quote.edge

      Adicione o conteúdo a seguir ao resources/views/quotes/edit-quote:

      /resources/views/quotes/edit-quote.edge

      @layout('layouts/master')
      @section('content')
      <div class="container">
          <div class="row">
              <div class="col-md-6 shadow bg-white rounded p-3 offset-md-3">
                  <div class="float-right">
                      <a href="https://www.digitalocean.com/" class="btn btn-outline-dark ">back</a>
                  </div>
                  <br>
      
                  <div class="clear-fix"></div>
                  <form method="POST" action="/update-quote/{{quote.id}}">
                      {{ csrfField() }}
                      <div class="form-group">
                          <label for="pasword">Edit Quote</label>
                          <textarea type="text" rows="5"  name='body' id="body" class="form-control" id="quote" placeholder="write the inspirational quote">{{quote.body}}</textarea>
                      </div>
                      <div class="text-center">
                          <button type="submit" class="btn btn-primary">Update</button>
                      </div>
      
                  </form>
              </div>
          </div>
      </div>
      @endsection
      

      Essa página possui conteúdo semelhante ao do arquivo create-quote.edge—a diferença é que ela contém os detalhes de uma citação em particular que precisa ser editada, o <form method="POST" action="/update-quote/{{quote.id}}">.

      Salve e saia do arquivo.

      Por fim, gere uma página para visualizar uma única citação inspiradora:

      • adonis make:view quotes/quote

      Você verá um resultado parecido com este:

      Output

      ✔ create resources/views/quotes/quote.edge

      Abra o arquivo com:

      • nano resources/views/quotes/quote.edge

      Adicione as linhas a seguir:

      /resources/views/quotes/quote.edge

      @layout('layouts/master')
      @section('content')
      <div class="container">
          <div class="row">
              <div class="col-md-6 offset-md-3">
                  <div class="card shadow-lg bg-dark text-white">
                      <div class="card-body">
                          <div class="float-right">
                              <a href="https://www.digitalocean.com/" class="btn btn-outline-primary ">back</a>
                          </div>
                              <br>
                          <div class="clear-fix"></div>
                          <blockquote class="blockquote mb-0">
                              <p>{{quote.body}}</p>
                              <footer class="blockquote-footer">
                                  <cite title="Source Title">{{quote.username}}</cite>
                              </footer>
                          </blockquote>
                      </div>
                  </div>
              </div>
          </div>
      </div>
      @endsection
      

      Essa página renderiza os detalhes de uma citação em particular, que inclui o corpo da citação, quote.body e o autor que a criou, quote.username.

      Quando terminar o arquivo, salve e saia.

      Você criou todas as páginas necessárias para o seu aplicativo, utilizando o mecanismo de modelagem Edge. Em seguida, você configurará e criará uma conexão para o banco de dados do seu aplicativo.

      Passo 3 — Criando um esquema de banco de dados

      Se oferecer o seu aplicativo agora, ele emitirá um erro, pois você ainda deve conectar o aplicativo a um banco de dados. Nesta seção, você configurará uma conexão com o banco de dados e, depois, usará o comando adonis para gerar um arquivo de migração que será usado para criar as tabelas para ele.

      O AdonisJs vem com um ORM chamado Lucid ORM, que fornece a implantação de registro ativo para trabalhar com o seu banco de dados. Ele elimina o incômodo de escrever consultas SQL que recuperam os dados do banco de dados em tempo real. Isso é especialmente útil ao trabalhar em um aplicativo complexo que exige muitas consultas. Como exemplo, é possível recuperar todas as citações do seu aplicativo escrevendo isso:

      const quotes = await Quote.all()
      

      Para prosseguir com a configuração apropriada para o banco de dados do seu aplicativo, certifique-se de que você ainda esteja dentro do diretório raiz do seu aplicativo e crie um arquivo .env:

      Abra o arquivo recém-criado e adicione o seguinte conteúdo:

      .env

      HOST=127.0.0.1
      PORT=3333
      NODE_ENV=development
      APP_URL=http://${HOST}:${PORT}
      CACHE_VIEWS=false
      APP_KEY=bTVOEgUvmTCfkvgrK8gEBC3Qxt1xSYr0
      DB_CONNECTION=mysql
      DB_HOST=127.0.0.1
      DB_PORT=3306
      DB_USER=sammy
      DB_PASSWORD=password
      DB_DATABASE=adonis
      SESSION_DRIVER=cookie
      HASH_DRIVER=bcrypt
      

      Por padrão, a conexão de banco de dados para um aplicativo AdonisJs é a SQLite, que você atualizará para o MySQL aqui. Você também especificará o PORT para o aplicativo, o ambiente do aplicativo e as credenciais de seu banco de dados. Certifique-se de substituir o espaço reservado para o DB_USER, DB_PASSWORD e DB_DATABASE pelas suas credenciais.

      Em seguida, você criará o modelo e um arquivo de migração para o Quote usando o Adonis CLI. Para fazer isso, execute o seguinte comando:

      • adonis make:model Quote --migration

      Você verá um resultado parecido com o seguinte:

      Output

      ✔ create app/Models/Quote.js ✔ create database/migrations/1568209992854_quote_schema.js

      Esse comando criará um modelo para o Quote na pasta app/Models e um arquivo de esquema na pasta database/migrations. O arquivo de esquema recém-criado será prefixado com o carimbo de data/hora atual. Abra o arquivo de esquema com:

      • nano database/migrations/1568209992854_quote_schema.js

      Atualize seu conteúdo com o seguinte código:

      database/migrations/…quote_schema.js

      'use strict'
      /** @type {import('@adonisjs/lucid/src/Schema')} */
      const Schema = use('Schema')
      class QuoteSchema extends Schema {
        up () {
          this.create('quotes', (table) => {
            table.increments()
            table.integer('user_id').notNullable()
            table.string('username', 80).notNullable()
            table.string('body').notNullable()
            table.timestamps()
          })
        }
        down () {
          this.drop('quotes')
        }
      }
      module.exports = QuoteSchema
      

      Um arquivo de esquema no AdonisJs exige dois métodos diferentes, que são:

      • up: usado para criar uma nova tabela ou alterar uma tabela existente.
      • down: usado para reverter as alterações feitas no método up.

      Além dos campos timestamps() e increments(), atualize o conteúdo do arquivo de esquema com os atributos de campo user_id, username e o body de uma citação que será criada. O user_id e username fazem referência aos detalhes do usuário que criam uma citação em particular. Isso define uma relação de um para vários, e significa que um usuário pode ter um número infinito de citações, ao mesmo tempo que uma única citação pode pertencer a somente um usuário.

      Salve e saia do arquivo.

      O AdonisJs vem instalado com um modelo de User e seu arquivo de migração por padrão, que exige apenas uma pequena modificação para estabelecer a relação entre o modelo de User e o Quote.

      Abra o modelo de User no app/Models/User.js:

      Adicione este método imediatamente após o método tokens():

      app/Models/User.js

      ...
      class User extends Model {
        ...
        tokens () {
          return this.hasMany('App/Models/Token')
        }
      
        quote () {
          return this.hasMany('App/Models/Quote')
        }
      }
      
      module.exports = User
      

      Isso estabelecerá um relacionamento de um para vários com a tabela Quote utilizando o user_id como a chave estrangeira.

      Salve e saia do arquivo.

      Para terminar essa seção, utilize o comando a seguir para executar as migrações, que executará o método up() de todos os arquivos de migração:

      Você verá um resultado similar ao seguinte:

      Output

      migrate: 1503248427885_user.js migrate: 1503248427886_token.js migrate: 1568209992854_quote_schema.js Database migrated successfully in 3.42 s

      Você configurou e protegeu uma conexão com seu banco de dados. Você também criou um modelo de Quote e seu arquivo de esquema correspondente e criou um relacionamento de one to many entre o User e o Quote. Em seguida, você gerará rotas e criará controladores para lidar com as solicitações HTTP e a lógica de negócios para criar, editar e excluir uma citação inspiradora.

      Passo 4 — Criando controladores e configurando rotas

      Nesta seção, você começará a criar controladores para lidar com toda a lógica para o aplicativo e, depois, anexará esses controladores a uma rota específica para que ele seja acessado pelos usuários através de uma URL.

      Para começar, utilize o Adonis CLI para criar um novo controlador de solicitação HTTP para lidar com todos os processos de autenticação para seu aplicativo, executando o seguinte comando:

      • adonis make:controller Auth --type http

      Este comando criará um arquivo AuthController.js e o salvará dentro da pasta app/Controllers/Http. Use o sinalizador --type para indicar que quer que este controlador seja um controlador HTTP.

      Você verá um resultado similar ao seguinte:

      Output

      ✔ create app/Controllers/Http/AuthController.js

      Em seguida, abra o arquivo controlador recém-criado:

      • nano app/Controllers/Http/AuthController.js

      Atualize-o com o seguinte conteúdo:

      app/Controllers/Http/AuthController.js

      'use strict'
      const User = use('App/Models/User')
      class AuthController {
      
          loginView({ view }) {
              return view.render('auth.login')
          }
          registrationView({ view }) {
              return view.render('auth.register')
          }
      
          async postLogin({ request, auth, response}) {
              await auth.attempt(request.input('email'), request.input('password'))
              return response.route('index')
          }
      
          async postRegister({ request, session, response }) {
              const user = await User.create({
                  username: request.input('name'),
                  email: request.input('email'),
                  password: request.input('password')
              })
              session.flash({ successmessage: 'User have been created successfully'})
              return response.route('login.create');
          }
      
          async logout ({ auth, response }) {
              await auth.logout()
              return response.route("https://www.digitalocean.com/")
          }
      }
      module.exports = AuthController
      

      Neste arquivo, importe o modelo User e, depois, crie dois métodos chamados loginView() e registerView() para renderizar as páginas de login e de registro, respectivamente. Por fim, crie os seguintes métodos assíncronos:

      • postLogin(): este método obterá o valor do email e password postados com a ajuda do método request integrado no AdonisJs e validará esse usuário com os detalhes no banco de dados. Caso tal usuário exista no banco de dados e tenha digitado as credenciais corretas, ele será redirecionado para a homepage e autenticado antes de criar uma nova citação. Caso contrário, será exibida uma mensagem indicando as credenciais erradas.
      • postRegister(): receberá o valor do nome do username, email e password para um usuário criar uma conta para ele no banco de dados. Uma mensagem indicando que esse usuário foi criado com sucesso será enviada para a sessão e o usuário será redirecionado para a página de login para ser autenticado e começar a criar uma citação.
      • logout(): este método lidará com a funcionalidade de logout e redirecionará o usuário para a página inicial.

      Salve e saia do arquivo.

      Agora que configurou o controlador para registrar e autenticar usuários, prossiga criando um controlador de pedido HTTP para gerenciar todas as operações a respeito das citações.

      De volta ao terminal, execute o comando a seguir para criar o QuoteController:

      • adonis make:controller Quote --type http --resource

      O uso do sinalizador --resource criará um controlador com métodos de recursos pré-definidos para fazer as operações CRUD (criação, consulta, atualização e destruição de dados).

      Você verá:

      Output

      ✔ create app/Controllers/Http/QuoteController.js

      Localize este arquivo dentro de app/Controllers/Http/QuoteController.js:

      • nano app/Controllers/Http/QuoteController.js

      Atualize-o com o seguinte conteúdo:

      app/Controllers/Http/QuoteController.js

      'use strict'
      const Quote = use('App/Models/Quote')
      
      class QuoteController {
      
        async index ({ view }) {
          const quote = await Quote.all()
          return view.render('index', {
            quotes: quote.toJSON()
          })
        }
      
        async create ({ view }) {
          return view.render('quotes.create-quote')
        }
      
        async store ({ request,auth,session, response }) {
          const quote = await Quote.create({
            user_id: auth.user.id,
            username: auth.user.username,
            body: request.input('body')
          })
          session.flash({ 'successmessage': 'Quote has been created'})
          return response.redirect("https://www.digitalocean.com/")
        }
      
        async show ({ params, view }) {
          const quote = await Quote.find(params.id)
          return view.render('quotes.view-quote', {
            quote: quote.toJSON()
          })
        }
      
        async edit ({ params, view }) {
          const quote = await Quote.find(params.id)
          return view.render('quotes.edit-quote', {
            quote: quote.toJSON()
          })
        }
      
        async update ({ params, request, response, session }) {
          const quote = await Quote.find(params.id)
          quote.body = request.input('body')
          await quote.save()
          session.flash({'successmessage': 'Quote has been updated'})
          return response.redirect("https://www.digitalocean.com/")
        }
      
        async destroy ({ params, response, session }) {
          const quote = await Quote.find(params.id)
          await quote.delete()
          session.flash({'successmessage': 'Quote has been deleted'})
          return response.redirect("https://www.digitalocean.com/")
        }
      }
      module.exports = QuoteController
      

      Neste controlador, você importou o modelo Quote e atualizou os métodos a seguir, criados automaticamente usando o AdonisJs CLI:

      • index(): busca todas as citações do banco de dados e as renderiza na página inicial do aplicativo.
      • create(): renderiza uma página para a criação de citações.
      • store(): persiste uma citação recém-criada no banco de dados e retorna uma resposta adequada.
      • show(): obtém a id de uma citação em particular, recupera-a do banco de dados e a renderiza na página de edição de citação.
      • edit(): obtém os detalhes de uma citação em particular do banco de dados e a renderiza para a edição.
      • update(): processa qualquer atualização para uma citação e redireciona o usuário para a página inicial.
      • destroy(): exclui uma citação em particular e remove-a por completo do banco de dados.

      Salve e saia do arquivo.

      Após criar todos os controladores necessários para este aplicativo, é possível configurar as rotas para que os usuários possam interagir com seu aplicativo com facilidade. Para começar, vá para o arquivo start/routes.js

      Substitua seu conteúdo com o seguinte:

      start/routes.js

      'use strict'
      const Route = use('Route')
      
      Route.get("https://www.digitalocean.com/",'QuoteController.index').as('index')
      Route.get('/register','AuthController.registrationView').as('register.create')
      Route.post('/register-store','AuthController.postRegister').as('register.store').validator('Register')
      Route.get('/login','AuthController.loginView').as('login.create')
      Route.post('/login-store','AuthController.postLogin').as('login.store')
      Route.get('/view-quote/:id','QuoteController.show').as('view.quote')
      
      Route.group(() => {
          Route.get('/create-quote','QuoteController.create').as('create.quote')
          Route.post('/store-quote','QuoteController.store').as('store.quote')
          Route.get('/edit-quote/:id','QuoteController.edit').as('edit.quote')
          Route.post('/update-quote/:id','QuoteController.update').as('update.quote')
          Route.get('/delete-quote/:id','QuoteController.destroy').as('delete.quote')
          Route.post('/logout','AuthController.logout').as('logout')
      }).middleware(['auth'])
      

      Aqui, você define o caminho para cada rota em seu aplicativo, especifica os verbos HTTP para cada ação e associa a rota a um método em particular em cada controlador. Você também nomeia cada uma destas rotas, já que elas foram referenciadas dentro dos controladores e das visualizações.

      Para garantir que apenas os usuários autenticados possam acessar todas as rotas das citações, atribui-se um middleware de grupo nomeado para ela. Por fim, você anexa um método validador para a rota register.store para validar as entradas do usuário.

      Salve e saia do arquivo.

      Você criou seus controladores e configurou as rotas para seu aplicativo. Em seguida, você criará o método validador definido neste passo.

      Passo 5 — Validando a entrada do usuário

      O AdonisJs não possui validadores integrados por padrão. Como resultado, você instalará e registrará o validador para seu aplicativo manualmente.

      Execute o comando a seguir para instalá-lo:

      Abra o arquivo a seguir para registrar o provedor validador:

      Então, registre o provedor validador adicionando ele à lista de provedores como mostrado a seguir:

      start/app.js

      ...
      const providers = [
         ...
         '@adonisjs/cors/providers/CorsProvider',
         '@adonisjs/shield/providers/ShieldProvider',
         '@adonisjs/session/providers/SessionProvider',
         '@adonisjs/auth/providers/AuthProvider',
         '@adonisjs/validator/providers/ValidatorProvider'
      ]
      

      Agora que você instalou e registrou o provedor validador dentro do seu aplicativo, crie um validador personalizado para validar as entradas do usuário durante o registro com o seguinte comando:

      • adonis make:validator Register

      Isso criará um arquivo de Register.js no diretório App/validators. Abra o arquivo com:

      • nano app/Validators/Register.js

      Adicione o código a seguir ao arquivo:

      app/Validators/Register.js

      'use strict'
      class Register {
        get rules () {
          return {
            name:'required',
            email:'required|email|unique:users',
            password:'required|min:8'
          }
        }
      
        get messages(){
          return{
            'name.required':'Full name is required',
            'email.required':'email is required',
            'email.unique':'email already exists',
            'password.required':'password is required',
            'password.min':'password should be at least 8 characters'
          }
        }
      }
      module.exports = Register
      

      Defina as regras para campos específicos em seu aplicativo. Caso as validações falhem em algum momento, o validador definirá automaticamente o erro como uma mensagem de erro e o usuário será redirecionado para o formulário.

      Salve e saia do arquivo assim que terminar de editar.

      Por fim, adicione estilos para o seu aplicativo. Abra o seguinte arquivo:

      Substitua o conteúdo dele com o seguinte:

      /public/style.css

      @import url('https://fonts.googleapis.com/css?family=Montserrat:300');
      
      html, body {
        height: 100%;
        width: 100%;
      }
      
      body {
        font-family: 'Montserrat', sans-serif;
        font-weight: 300;
        background-image: url("/splash.png");
        background-color: #220052;
      }
      
      * {
        margin: 0;
        padding: 0;
      }
      
      a {
        color: inherit;
        text-decoration: underline;
      }
      
      p {
        margin: 0.83rem 0;
      }
      
      .quote-wrapper {
        margin-top: 20px;
      }
      
      .quote-wrapper a {
        text-decoration: none;
      }
      
      .quote-wrapper a:hover {
        color: #ffffff;
      }
      
      .empty-quote {
        color: #ffffff;
      }
      
      form {
        padding: 20px;
      }
      

      Neste arquivo, você atualiza o estilo CSS do seu aplicativo no arquivo style.css.

      Você instalou e registrou um provedor validador com o propósito de verificar a entrada de usuários durante o processo de registro. Você também atualizou o conteúdo da sua folha de estilos para adicionar mais estilos ao aplicativo. No passo final, você testará seu aplicativo.

      Passo 6 — Exibindo o aplicativo

      Neste passo, você exibirá seu aplicativo e criará um usuário e senha para testar a autenticação. Você também adicionará uma citação para seu aplicativo e visualizará isso na página inicial.

      Para testar seu aplicativo, inicie o servidor de desenvolvimento com o comando a seguir a partir do diretório raiz do seu aplicativo:

      Isso inicializará o aplicativo na porta definida dentro do arquivo raiz .env, que é a 3333. Vá para http://localhost:3333 em seu navegador.

      Página inicial do aplicativo de citações

      A página inicial está vazia no momento, já que você não criou nenhuma citação. Clique no botão Register.

      Página de registro

      Digite seus detalhes e clique no botão Submit para completar o processo de registro. Você será redirecionado para a página de login. Digite seu endereço de e-mail e senha para a autenticação.

      Página de login

      Assim que estiver autenticado, clique no botão Create Quote.

      Página de criar citação

      Digite uma citação e vá para a página View all para ver sua citação.

      Página de visualização de todas citações

      Você testou seu aplicativo criando e autenticando um usuário e, em seguida, escreveu uma citação.

      Conclusão

      Neste tutorial você criou um aplicativo Web com o AdonisJs. Você configurou o aplicativo utilizando o AdonisJs CLI e usou o CLI para a criação de outros arquivos relevantes, como controladores, modelos e visualizações.

      Você pode desenvolver aplicativos Web com este framework independente do tamanho e complexidade deles. Fique à vontade para baixar o código-fonte para este projeto aqui no GitHub. Para explorar recursos adicionais, visite a documentação oficial.

      Caso queira explorar alguns de nossos outros tutoriais de framework do JavaScrip,confira o seguinte:



      Source link