Hello World no Magento 2: Como fazer

Começar a desenvolver para Magento 2 é um tanto desafiador. Neste rápido artigo vamos ver como criar um simples “Hello World” em uma nova URL. Este costuma ser o passo inicial para qualquer pessoa iniciando no desenvolvimento para Magento ou outro framework.

O que você vai precisar

Para seguir este passo a passo você deve ter o Magento instalado e permissão de escrita a seus diretórios e arquivos.

Você também precisará de acesso SSH ou de acesso ao terminal local para executar os comandos do executável bin/magento. Certifique-se também que ele tem permissão de execução (chmod +x bin/magento ).

Aviso para não programadores

Se você não é um(a) programador(a) e escolheu o Magento como plataforma, recomendo que busque ajuda profissional para suas necessidades técnicas.

Magento é uma excelente solução de e-commerce, e muito bem construído. Ele foi concebido de forma que outros desenvolvedores possam criar módulos e componentes sob ele. No entanto, sua arquitetura não foi construída para ser entendida por não-desenvolvedores.

Criando um módulo

Eu já escrevi aqui no Magenteiro sobre como criar um módulo base para Magento 2. Neste artigo vamos um pouco além e criaremos uma página com nosso “Hello World”. Esse assunto também é abordado no meu curso sobre criação de módulos e componentes para Magento 2 (e claro, com muito mais detalhes e de forma mais prática).

Todas as melhorias e customizações para Magento são feitas através de módulos. Portanto, a primeira coisa que você precisa fazer para criar um módulo é criar um arquivo XML em app/code/<Vendor>/<Module>/etc.

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
    <module name="Magenteiro_HelloWorld" setup_version="1.0.0"/>
</config>

O nome da pasta que vai em app/code geralmente é o nome do fornecedor ou empresa que fez o módulo. Também chamada de Vendor (fornecedor, em Inglês). No nosso exemplo, chamamos esta pasta de Magenteiro.

Abaixo dela, temos o nome do nosso módulo. No nosso exemplo, o chamamos de HelloWorld.

Desta forma, o nome do nosso módulo passa a ser Magenteiro_HelloWorld, localizado em app/code/Magenteiro/HelloWorld.

Uma pasta acima, criaremos um arquivo chamado registration.php.

<?php
declare(strict_types=1);

use Magento\Framework\Component\ComponentRegistrar;

ComponentRegistrar::register(
    ComponentRegistrar::MODULE,
    'Magenteiro_HelloWorld',
    __DIR__
);

Por fim, na mesma pasta criaremos um arquivo chamado composer.json.

{
  "name": "Magenteiro_HelloWorld",
  "description": "Um simples Hello World para os Magenteiros",
  "require": {
    "php": "*",
    "magento/framework": "ˆ2.0",
    "magento/module-integration": "ˆ2.0"
  },
  "type": "magento2-module",
  "version": "1.0",
  "autoload": {
    "files": [ "registration.php" ],
    "psr-4": {
      "Magenteiro\\HelloWorld\\": ""
    }
  }
}

Com os arquivos acima criados, já podemos ativar nosso módulo.

Para isso, basta ir ao terminal e digitar bin/magento setup:upgrade.

Criando um controller

Para criar um controller que responderá à alguma ação precisaremos inicialmente de dois arquivos:

• /etc/frontend/routes.xml
• /Controller/Index/Index.php

Nosso texto “Hello World” será exibido em /helloworld. Vamos ver como ficaria. Clique em cada um dos arquivos abaixo para ver seu conteúdo.

<?php
declare(strict_types=1);

namespace Magenteiro\HelloWorld\Controller\Index;
use Magento\Framework\App\Action\HttpGetActionInterface;
use Magento\Framework\Controller\ResultFactory;

class Index implements HttpGetActionInterface
{
    private ResultFactory $resultFactory;

    public function __construct(ResultFactory $resultFactory)
    {
        $this->resultFactory = $resultFactory;
    }

    public function execute()
    {
        $text = 'Hello World';
        $response = $this->resultFactory->create(ResultFactory::TYPE_RAW);
        $response->setContents($text);
        return $response;
        
    }
}

<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:App/etc/routes.xsd">
<router id="standard">
    <route id="minharota" frontName="helloworld">
        <module name="Magenteiro_HelloWorld"/>
    </route>
</router>
</config>

Note que o frontName corresponde à primeira parte do futuro URL da minha loja. No nosso caso, https://www.minhaloja.com.br/helloworld. Note também que o N é escrito em caixa alta.

Ao acessar a nossa URL teremos nosso primeiro Hello World.

Outros formatos

Também podemos devolver um JSON, ou mesmo outros tipos de resposta. Para isso, basicamente precisamos modificar o valor da constante do parâmetro passado para resultFactory::create.

Veja um exemplo de retorno em JSON:

    public function execute()
    {
        $text = 'Hello World';
        $response = $this->resultFactory->create(ResultFactory::TYPE_JSON);
        $response->setData(['hello'=>'magenteiro']);
        return $response;
    }

Desta forma teremos uma resposta como {"hello":"magenteiro"} e os cabeçalhos JSON passados de acordo.

Aplicando um Layout XML

O assunto layout XML é extenso e não caberia nesse artigo. Ele é abordado aqui no blog e também no Magento 2: O Curso em mais detalhes.

No entanto, apenas para fins de concluirmos este tutorial, vamos usar instruções de XML para carregar o layout de nossa loja junto com nosso “Hello World”.

A primeira coisa que faremos é modificar o nosso Controller, para que uma página/layout seja renderizado.

<?php
declare(strict_types=1);

namespace Magenteiro\HelloWorld\Controller\Index;
use Magento\Framework\App\Action\HttpGetActionInterface;
use Magento\Framework\View\Result\PageFactory;

class Index implements HttpGetActionInterface
{
    private PageFactory $pageFactory;

    public function __construct(PageFactory $pageFactory)
    {
        $this->pageFactory = $pageFactory;
    }

    public function execute()
    {
        $response = $this->pageFactory->create();
        return $response;
    }
}

E agora criaremos um novo arquivo XML.

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceContainer name="content">
            <block class="Magento\Framework\View\Element\Text" name="hello.world">
                <action method="setText">
                    <argument name="text" xsi:type="string">Hello World</argument>
                </action>
            </block>
        </referenceContainer>
    </body>
</page>

Confuso? Vou explicar os principais pontos.

O arquivo deve se chamar minharota_index_index.xml pois o id da rota que definimos no routes.xml era minharota.

Na linha 2 do arquivo defino que quero que o Magento carregue o layout de 1 coluna. Ou seja, não teremos barras ou menus laterais.

Para escrever “Hello World”, eu poderia criar uma classe de bloco PHP e associar um template phtml à ela. Depois inserir esse bloco no XML dentro de “content”.

Ao invés disso, como trata-se apenas de um texto, preferi usar o bloco de texto nativo do Magento. Ele é declarado em Magento\Framework\View\Element\Text e referenciei ele na linha 5. Em seguida, chamei o método setText deste bloco e passei “Hello World” como argumento.

Isso pode ser feito com qualquer classe de bloco do Magento. Através de injeção de dependências também podemos alterar e injetar parâmetros nos construtores destas classes a fim de modificar seus comportamentos. Tudo isso diretamente nos arquivos XML.

Bacana não é mesmo? O Magento é realmente muito flexível.

Veja o resultado na minha loja:

No meu exemplo, estou usando a FireStore, disponível no curso gratuito Instalando e Configurando uma loja Magento 2 para o Brasil.

Baixe o módulo

Se desejar baixar o módulo de exemplo que fizemos, informe seu nome e e-mail no form abaixo.

Relacionados a este artigo (você pode gostar)

• Série sobre Controllers no Magento 2
• Vários artigos sobre Layout XML (Magento 1.x e 2.x)
• Curso de criação de módulos e componentes para Magento 2 em Português
• Criando Layout XML, Block e Template no Magento 2

• Sobre
• Últimos Posts

Ricardo Martins

É desenvolvedor web há 16 anos e um dos primeiros certificados pela Magento no Brasil. Instrutor de mais de 11 cursos Magento (os principais no magenteiro.com/cursos) com mais de 14 mil alunos de 105 países, é também criador do módulo PagSeguro Transparente, usado em mais de 12 mil lojas.

Últimos posts por Ricardo Martins (exibir todos)

• PagSeguro (PagBank) para Magento 1 recebe a Nova Geração - 9 de abril de 2024
• Recorrência no WooCommerce Sem Plugins Pagos - 28 de janeiro de 2024
• Chargeback. O que é, e como se livrar deles. - 19 de dezembro de 2023