Criando uma Aplicação Web com fins didáticos usando PHP 8.2 + CSV + Tailwind + Docker

Introdução

O objetivo deste post é construir uma aplicação web com fins didáticos usando PHP puro e Tailwind CSS como framework para melhorar a aparência. A aplicação utilizará como fonte de dados arquivos CSV e, para evitar possíveis conflitos de versões dos softwares instalados, utilizaremos containers Docker.

Neste exemplo, não teremos explicações detalhadas, a ideia é apenas fazer funcionar a aplicação. Tais explicações ficarão para outros artigos.

Alguns dos comandos serão executados no terminal, então você deve ter uma familiaridade mínima com esta interface. Também é recomendável já ter usado o VSCode, que facilitará na hora de criar os códigos.

Também é importante lembrar que em termos de estrutura de arquivos . se refere ao diretório atual, e no contexto deste artigo estará se referindo ao diretório raiz do projeto. Também utilizaremos / como separador de diretórios, seguindo o padrão Unix. Note também que os arquivos estão hospedados no GitHub, através de Gists, e que o nome de cada arquivo que deve ser criado corresponde ao nome do arquivo dentro do referido Gist, portanto fique atento.

Passo 1 - Montando a infraestrutura

Para começar, você precisa assegurar que o gerenciador Docker está instalado no seu computador; caso não esteja, você deve baixar em docker.com.

Com o docker instalado e funcionando no terminal (ou WSL se você estiver usando o Windows), vamos precisar baixar a imagem do PHP 8.2 (versão que utilizaremos neste tutorial) executando o comando a seguir no terminal:

docker pull php:8.2

Passo 2 - Configurando o ambiente de desenvolvimento

Para construir nossa aplicação, vamos começar criando um diretório chamado myapp (ou qualquer outro diretório que você deseje). Agora, navegue através do terminal até este diretório (usando o comando cd). Se você tiver o VSCode instalado, pode executar o seguinte comando:

code .

Isto deverá abrir o VSCode dentro deste terminal. Caso você tenha o VSCode e esse comando não funcione, você pode abrir o diretório manualmente, escolhendo a opção open folder dentro do menu file do editor. Para habilitar a integração com o shell (que permite executar o comando acima diretamente no terminal), aperte ctrl+shift+p (ou command+shift+p no Mac), digite shell e escolha a opção de instalar no shell, conforme a imagem a seguir:

Agora, ainda dentro do diretório crie um arquivo chamado docker-compose.yml e escreva o seguinte nele:

`./docker-compose.yml`

Passo 3 - Construindo a aplicação

Agora, vamos construir a nossa aplicação. Para isso, vamos precisar construir uma série de arquivos e diretórios, então mãos a obra.

Primeiro, crie os seguintes diretórios:

assets
components
data
includes
tasks
users

Se você quiser, pode executar o comando a seguir no terminal (dentro do diretório raiz) para criar todos os diretórios de uma única vez:

mkdir -p assets components data includes tasks users

Primeiramente, vamos criar, também na raiz, um arquivo de configuração, que chamaremos de conf.php:

`./conf.php`

Agora vamos criar os includes, que serão os arquivos básicos a serem incluídos em vários outros arquivos. A seguir, os arquivos que estarão dentro do diretório ./includes:

`./includes/`

O arquivo init.php é o arquivo básico que será incluído em diversos outros arquivos.

setup.php faz uma verificação inicial dos diretórios essenciais para o funcionamento dos includes, assim como baixa a versão de desenvolvimento da CDN do tailwind para o diretório local assets a fim de otimizar o desenvolvimento.

functions.php contém algumas funções para manipular os arquivos que utilizaremos como fonte de dados.

Agora vamos criar os componentes que serão incluídos nas páginas, dentro do diretório ./components

`./components/`

Agora, enfim, vamos criar as páginas relacionadas a usuários e autenticação, dentro do diretório ./users:

`./users/`

A seguir, vamos criar as páginas e ações relacionadas às tarefas em si, dentro do diretório ./tasks

`./tasks/`

E, por fim, a página index, que também estará na raiz do projeto:

`./index.php`

Passo 4 - Ligando o container e testando a aplicação

Agora, basta ir no terminal, dentro do diretório raiz do projeto, onde está o arquivo docker-compose.yml e executar o seguinte comando:

docker-compose up

Agora, basta acessar a aplicação, que estará escutando na porta 8080 local. Para isso, vá até o browser e digite o seguinte endereço: http://localhost:8080. Com isso, você pode acessar a aplicação.

Conclusão

Naturalmente, esta é uma aplicação com fins didáticos, que servirá como base para parte de uma disciplina de Desenvolvimento Web. Por conta disso, é natural que nem tudo está seguindo o mesmo padrão e que, possivelmente, nem todas as boas práticas estão sendo seguidas. Isto é proposital, visto que explicações sobre coisas que acontecem no código serão explicadas em outros tutoriais, na série de Desenvolvimento Web 1, uma das disciplinas que ministro .