Forem: Allisson Rafael de Brito Araujo

Criando um ToDo List com Folio e Volt

Allisson Rafael de Brito Araujo — Wed, 02 Aug 2023 21:19:25 +0000

Será lançado em breve o Laravel 11 e com ele muitos outros lançamentos como por exemplo: Folio e Volt.]

O Folio permite que sejam criadas rotas baseando-se em arquivos e o *Volt * é uma api que permite que seja utilizado código PHP, Models e Diretivas do Blade em um mesmo arquivo.

Sabendo do que se trata, vamos direto ao ponto, iremos utilizar o tutorial do Nuno Maduro que pode ser acessado em ToDo Application With Laravel, Folio and Volt

Iniciando um novo projeto Laravel e criando nosso ToDo APP

Para começar o desenvolvimento, precisamos ter o Laravel 10+ no nosso projeto e para isso iremos baixar usando:

composer req laravel/laravel todo-app

Dentro do nosso projeto agora vamos criar nosso model:

php artisan make:model Todo -m

Com o comando acima criamos o nosso model já com a migration e em seguida vamos abrir a mesma no nosso editor/ide preferido. Podemos localizá-la em database/migrations 2023_xx_xx_xxxxxx_create_todos_table.php

E vamos adicionar uma nova coluna chamada description:

A linha a seguir pode ser inserida abaixo da linha 15 da migration

$table->string('description');

Nosso próximo passo é habilitar a nossa coluna description para receber dados e para isso vamos até nossa *model * Todo.php e nela vamos adicionar o seguinte código:

protected $fillable = [
   'description',
];

Agora dentro do .env configure as informações de acordo com o seu servidor e banco de dados.

Precisamos agora executar a migration para criar o banco de dados e tabelas e para isso usamos o comando:

php artisan migrate

Neste momento se não tiver nenhum banco de dados criado o artisan perguntará se deseja criar o banco, se esse for o caso, diga que sim (yes).

Show de Bola! Temos boa parte do nosso projeto criada, agora vamos instalar os packages Folio e Livewire.

Para instalar os packages temos que está dentro do nosso projeto via Terminal e rodar o seguinte comando via composer:

Folio

composer req laravel/folio:dev-master
php artisan folio:install

Livewire

composer require livewire/livewire:v3.0.0-beta.6

Volt

composer req livewire/volt:dev-main
php artisan volt:install

Se você acessou a página referência do Nuno pode estranhar os comandos diferentes, porém com o exemplo que está lá, tive problemas e consegui instalar apenas dessa forma que escrevi.

Com tudo pronto agora vamos gerar nossa primeira view com o folio com o comando:

php artisan make:folio todos

A seguinte mensagem deve ser exibida no seu terminal:

INFO Page [dados do sistema e diretórios]*todo-app\resources\views\pages/todos.blade.php] created successfully.*

Agora temos nossa view criada com sucesso com o Folio e o mais interessante é que usando o Folio não precisamos criar rota para a mesma pois o mesmo se baseia em arquivos para o roteamento, bastando acessar a nossa view pela url url/todos e Voalá!

E para finalizar mostrando o quão prático é e como podemos misturar lógica, blade e livewire em um mesmo local acesse a view criada em:
\resources\views\pages/todos.blade.php

E dentro dela cole o seguinte código:

<?php

use function Livewire\Volt\state;
use App\Models\Todo;

state(description: '', todos: fn () => Todo::all());

$addTodo = function () {
    Todo::create(['description' => $this->description]);

    $this->description = '';
    $this->todos = Todo::all();
}; ?>

<html>
    <head>
        <title>Todos</title>
    </head>
    <body>
    @volt
        <div>
            <h1>Add Todo </h1>
            <form wire:submit="addTodo">
                <input type="text" wire:model="description">
                <button type="submit">Add</button>
            </form>

            <h1>Todos</h1>
            <ul>
                @foreach ($todos as $todo)
                    <li>{{ $todo->description }}</li>
                @endforeach
            </ul>
        </div>
    @endvolt
    </body>
</html>

E execute atualize o seu projeto! A tela que deve ser exibida é a seguinte:

Testes em PHP com o framework PEST

Allisson Rafael de Brito Araujo — Sat, 01 Oct 2022 13:11:47 +0000

Introdução

Olá, me chamo Allisson Rafael e este artigo faz parte do meu trabalho de Ferramentas de Testes.

Nele irei falar de forma geral sobre o framework PEST que é uma opção ao PHPUnit para a realização de testes em PHP.

Abaixo explico como instalar a mesma para que você possa escrever e executar seus testes de forma simples e intuitiva, que é o que a suíte propõe quando diz se um framework simples e elegante para a escrita de testes.

Instalando a Suíte

Para instalar, devemos ter o composer instalado, então entendo que você já tem o mesmo instalado.

composer require pestphp/pest --dev --with-all-dependencie

Após instalada a suíte vamos entender como podemos escrever nossos testes.

Executando o primeiro test

Vamos criar/rodar o nosso primeiro teste de acordo com o tutorial básico do framework.

Dentro do diretório do nosso projeto usaremos o comando:

./vendor/bin/pest --init

Ao rodar o mesmo criará toda a estrutura necessária para rodar os testes escritos e o teste de exemplo que é criado após a inicialização da suíte.

E para rodar o teste de exemplo, usamos o seguinte comando:

./vendor/bin/pest

E a saída deverá ser a seguinte:

Ficou curioso e quer saber como você pode escrever seus próprios testes utilizando a suíte? Eu vou deixar um vídeo tutorial onde mostro de forma rápida alguns testes que escrevi e como funciona cada um deles.

Assista ao vídeo clicando aqui!

Todos os códigos utilizados no vídeo podem ser baixados aqui:
Baixar códigos

Mudei para o Linux. E agora? (Parte 2)

Allisson Rafael de Brito Araujo — Wed, 22 Jun 2022 19:14:08 +0000

No post anterior a este começamos o nosso processo de configuração de ambiente, e nesse vamos dar continuidade.

Lembrando que esta vai ser a última parte do processo.

O que vamos configurar neste momento? PHP , Maria DB e o Dbeaver para gerenciar nossos bancos de dados.

Vamos lá!

Primeiro ponto é abrir o terminal e vou ensinar um pulo do gato! Use o atalho Ctrl + Alt + T e a mágica está no ar!

Com o terminal aberto agora vamos instalar o nosso PHP de todo dia:

Instalar o PHP

sudo apt install software-properties-common

sudo add-apt-repository ppa:ondrej/php

sudo apt update

sudo apt install php8.0

sudo apt install php8.0-mbstring php8.0-xmlrpc php8.0-soap php8.0-gd php8.0-xml php8.0-cli php8.0-zip php8.0-bcmath php8.0-tokenizer

sudo apt install php8.0-sqlite3

O processo acima instala o PHP e todas as dependências necessárias, é bem fácil de entender.

Instalar o MariaDB

sudo apt install mariadb-server
sudo systemctl status mariadb
//Executando o código acima a saída é a seguinte:
● mariadb.service - MariaDB 10.3.22 database server
     Loaded: loaded (/lib/systemd/system/mariadb.service; enabled; vendor preset: enabled)
     Active: active (running) since Tue 2020-05-12 13:38:18 UTC; 3min 55s ago
       Docs: man:mysqld(8)
             https://mariadb.com/kb/en/library/systemd/
   Main PID: 25914 (mysqld)
     Status: "Taking your SQL requests now..."
      Tasks: 31 (limit: 2345)
     Memory: 65.6M
     CGroup: /system.slice/mariadb.service
             └─25914 /usr/sbin/mysqld
. . .

Vamos continuar com o nosso processo, de configuração do MariaDB:

sudo mysql_secure_installation

Nos dois primeiros prompts digite digite N pois ainda não temos uma senha definida para o nosso usuário root.

Nos prompts seguintes digite Y para todos.

Agora vamos criar um usuário administrativo e a opção de autenticação por senha

sudo mariadb

GRANT ALL ON *.* TO 'admin'@'localhost' IDENTIFIED BY 'password' WITH GRANT OPTION;

Em admin coloque o nome de usuário que você deseja e em password coloque a senha do seu usuário. Importante manter entre as ' '.

FLUSH PRIVILEGES;

exit

Agora vamos testar se nosso usuário foi criado com sucesso e tentar entrar no nosso terminal do banco de dados:

mysqladmin -u admin -p version

Onde admin é o nome do usuário criado e -p vai pedir a sua senha logo em seguida.

A saída deverá ser:

mysqladmin  Ver 9.1 Distrib 10.3.22-MariaDB, for debian-linux-gnu on x86_64
Copyright (c) 2000, 2018, Oracle, MariaDB Corporation Ab and others.

Server version      10.3.22-MariaDB-1ubuntu1
Protocol version    10
Connection      Localhost via UNIX socket
UNIX socket     /var/run/mysqld/mysqld.sock
Uptime:         4 min 49 sec

Threads: 7  Questions: 467  Slow queries: 0  Opens: 177  Flush tables: 1  Open tables: 31  Queries per second avg: 1.615

Instalando o DBeaver

echo "deb https://dbeaver.io/debs/dbeaver-ce /" | sudo tee /etc/apt/sources.list.d/dbeaver.list

wget -O - https://dbeaver.io/debs/dbeaver.gpg.key | sudo apt-key add -

sudo apt-get update

sudo apt-get install dbeaver-ce

Pronto, agora temos nosso gerenciador de banco de dados instalado, basta abrir e configurar a conexão.

Espero que você tenha gostado da nossa série, que ajuda você a criar o seu ambiente de desenvolvimento no Linux.

A partir de agora eu tentarei colocar mais conteúdos relacionado a programação tendo em vita que já sabemos montar nosso ambiente!

Obrigado!

Mudei para o Linux. E agora? (Parte 1)

Allisson Rafael de Brito Araujo — Tue, 21 Jun 2022 10:38:30 +0000

Introdução

Bom, eis aqui o meu, o seu , o nosso lema que estamos migrando do nosso querido Windows para o Linux: Será que esse O.S é para mim?

Com sinceridade eu já digo de cara, que existem formas de você rodas aplicativos do windows no Linux, porém não tem a mesma performance, e se você usar pacote adobe, corel etc. Continua no Windows!

Agora se você vai trabalhar diretamente com desenvolvimento e quer ter um contato maior com o terminal e outras tecnologias que vão melhorar suas skills, instala o sistema, certeza de diversão garantida e muitas pesquisas no google rsrs...

Mas como eu sou bonzinho vou passar algumas coisas que vai poder te ajudar no primeiro contato.

Estou partindo do pré suposto que você é um front ou um back-end (usarei o PHP) ok? LET's GO!

Qual distribuição eu uso e quais são as mais usadas?

Até o momento deste artigo eu estou usando de forma satisfatória o Linux Mint Site oficial da distribuição mas existe o Ubuntu e outras, sendo essas as que são bem usadas.

A instalação do Mint é bem simples, chegando até ser mais fácil que a do Windows, e os drivers são todos instalados sem dores de cabeça!

Após a instalação recomenda-se realizar a atualização do sistema e vamos lá para o terminal. No terminal vamos digitar o seguinte comando:

sudo apt-get update

Logo em seguida:

sudo apt-get upgrade

Nosso sistema estará atualizado neste momento e podemos seguir para as etapas seguintes.

Instalação do GIT

Para trabalhar com o versionamento de arquivos, usaremos a ferramenta git com o comando:

sudo apt install git

Até este ponto já temos o nosso sistema atualizado e o git instalado.

Nodejs

Prosseguindo, vamos instalar o nodejs:

sudo apt install nodejs

Aguarde... Pronto! Para testar vamos rodar o comando no terminal:

node --version

E o resultado deverá ser a versão do nosso Nodejs.

IDE

Eu utilizo o PHPStorm como IDE mas vamos instalar o VSCODE e para isso, vamos continuar no terminal, quero deixar você ao máximo em contato com o terminal!

Vamos rodar o comando?
Calma! Mas antes vamos usar um repositório e para isso vamos instalar o recurso com os seguintes passos:

Vamos verificar se o nosso sistema é 64bits

uname -m

O retorno deve ser: x86_64. Sendo vamos seguir com os seguintes comandos:

sudo sh -c 'echo "deb [arch=amd64] https://packages.microsoft.com/repos/vscode stable main" > /etc/apt/sources.list.d/vscode.list'

curl https://packages.microsoft.com/keys/microsoft.asc | gpg --dearmor > microsoft.gpg

sudo mv microsoft.gpg /etc/apt/trusted.gpg.d/microsoft.gpg

sudo apt-get update

sudo apt-get install code

Bom e por aqui chegamos ao fim da nossa primeira parte de configuração do nosso ambiente de desenvolvimento no nosso novo amigo Linux!

Na parte 2 vamos instalar o PHP, MariaDB e o Dbeaver e com isso temos nosso ambiente já prontinho para começar os trabalhos!

Iniciando na programação? Então não deixe de ler esse artigo!

Allisson Rafael de Brito Araujo — Thu, 16 Jun 2022 06:40:18 +0000

Parece muito complicado, mas te digo: Não é! Mas tudo vai depender do seu empenho! ( ͡° ͜ʖ ͡°)

Hoje o mercado está muito amplo para os DEV's, mas se eu te disser que sempre teve amplo e nunca vai deixar de está? Você concordaria comigo?

Então, o que acontece? Nos últimos anos a tecnologia vem evoluindo absurdamente, o que víamos em filmes futuristas e imaginávamos que seria uma realidade muito distante, não passou de mero pensamento, pois na mesma velocidade em que pensamos sobre a tecnologia avançou!

E como avançou!

Mas vamos falar de programação e como podemos iniciar da melhor forma possível!

Independente da linguagem que você queira aprender, deve ser trilhado um caminho sólido para o aprendizado efetivo da linguagem de programação, e digo por experiência própria que não adianta querer pular estas etapas por mais chatas e entediosas que pareçam!

Minha ideia aqui não é criar nada motivacional, até porque não sou a pessoa ideal para isso, mas sim mostrar um pequeno Road Map para deixar mais claro o que você deve fazer e ter sucesso na jornada de estudos!

Vamos lá!

Road Map para estudar e ter uma boa base para iniciar no universo da programação

Mas Allisson eu nem sei o que é um Road Map... tem como me explicar? Poutz! Claro que ensino, mas de forma bem breve ok?

Um Road Map, como o próprio nome já diz é um mapa para trilhar o seu caminho de aprendizado e este termo é utilizado em qualquer área, ok? Pronto! Vamos lá ao nosso objetivo que é falar de programação!

Existe um site chamado roadmap.sh e tenho certeza que ele vai te ajudar a desenhar o seu caminho de acordo com a sua necessidade.

Acesse: Roadmap.sh

Através desta ferramenta começamos a dar os nossos primeiros passos nessa longa jornada de aprendizados!

Vamos supor que queremos aprender hoje Java e não sabemos por onde começar a estudar, e vamos ver o que a ferramenta nos propõe:

Temos tudo que devemos fazer, de forma detalhada como: Por onde começar e onde finalizar.

Vale destacar que os itens em amarelo destacado são os passos que devem ser seguidos, em algum momento você irá encontrar algum lado a lado, e o que isso significa? Significa que você tem a opção de escolha para qual caminho vai seguir como mostra no exemplo abaixo:

Neste momento você escolhe qual caminho seguir: Build Tools ou Web Frameworks? Se joga!

Espero poder ter ajudado você a esclarecer e sanar a grande dúvida que sempre temos quando vamos iniciar nossa carreira nos estudos!