Iniciando o Desenvolvimento

Quando você recebe um projeto, certamente ele irá ter duas tarefas: Instalar WordPress e Configurar WordPress.

A não ser que a gente falando de um projeto que não leva WordPress em nenhum momento, essas serão numericamente as duas primeiras tarefas do projeto.

Ambas as tarefas possuem checklist a ser cumprido, então o objetivo é marcar tudo como concluído e entregar a tarefa. Mas antes de falarmos das tarefas em si, iremos falar dos passos que são anteriores à finalização dos objetivos dessas tarefas.

Preparando o ambiente de desenvolvimento local

O primeiro procedimento, na verdade, não é executar nada do que é pedido nas checklists das tarefas, e sim montar o seu ambiente local.

Para isso, já dê um play na tarefa Instalar WordPress e vamos para a montagem.

Bom, essa é a parte chata onde você tem que baixar a última versão do WordPress no wordpress.org, depois criar uma pasta para o projeto dentro do htdocs do XAMPP, aí jogar todo o WordPress dentro, depois criar um banco de dados no PHPMyAdmin. Bom, tudo chatíssimo e entediante.

Poderia ser melhor? Claro. Desenvolvemos um script que faz isso tudo automaticamnte!

Criando o repositório

Antes de irmos para o pulo do gato, essa é uma hora interessante para já deixar criado o repositório do projeto.

Se você tem o acesso ao Github da Alpina, você pode ir lá mesmo e criar esse repositório. Caso não tenha, peça para criem para você e te deem as permissões necessárias.

Embora quando você navegue pelo GitHub veja que os projetos antigos não sigam padrões de nomenclaturas, opte na criação do seu repositório pelo kebab-case, ou seja: letras minúsculas, sem acentos, com palavras sendo conectadas por hífens, como é tradicional em URL. Números também pode ser adicionados ao nome.

Para dar um start no repositório, suba o tema-base que você irá utilizar.

O básico sobre o script

Por que não instalamos o WordPress todo antes de pensar em já criar um repositório?

Bom, a resposta é que o script já consegue também baixar e instalar um tema de WordPress de acordo com uma URL de repositório do GitHub.

info

Obviamente você precisará configurar suas credenciais do Github antes de fazer esse acesso em sua máquina, senão não vai poder acessar os repositórios privados da Alpina.

Ao executar o script, ele fará algumas perguntas:

Qual o nome do projeto?

Aqui você deve colocar a URL em que ele ficará em localhost. Aqui você deve usar o kebab-case, pois é o padrão de URLs. Se você diz que o nome do seu projeto é lojas-fulano, ele aparecerá posteriormente em http://localhost/lojas-fulano.

Qual o nome do banco?

Essa pergunta é opcional, se não for respondidada ficará igual ao nome do tema. Mas aqui tenha cuidado que hífens vão dar problema. O ideal é que você escreva o nome em snake_case, substituindo quaisquer hífens que existam por underscores, já que nome de bancos de dados não são compatíveis com aquela nomenclatura. Se você está trabalhando com lojas-fulano como nome do projeto, utilize lojas_fulano para ser o nome do banco.

Deseja clonar um repositório Git na pasta themes?

Aqui você responde s/n para se desejar clonar um tema.

Se negativo, ele encerra com as perguntas. Se afirmativo, perguntará o endereço e você respondará com o https do repositório, algo como https://github.com/.../lojas-fulano.git.

Qual o nome do tema?

Se você clonou um Git, pedirá para dar um nome para esse tema (para o diretório, no caso).

Por padrão, passamos a adotar o prefixo alp- seguido do nome do cliente, ex: alp-fulaninho. Isso é importante para que a equipe de Suporte possa rodar suas automações, pois eles sempre irão procurar por pastas iniciadas por alp-.

Executando o script

O script foi desenvolvido em Python. Então caso você não tenha em sua máquina, deve instalar.

É também presumido que você está em ambiente Windows e utiliza o XAMPP, com a pasta htdocs no padrão C:\xampp\htdocs. Se o caminho não for esse, dá pra alterar ali no código, na linha 22.

wordpress.py

import os

import shutil
import subprocess
import mysql.connector
from sys import exit

#PERGUNTAS A SEREM FEITAS
nome_projeto = input("Digite o nome do projeto: ")
nome_banco = input("Digite o nome do banco (opcional): ")
nome_banco = nome_banco if nome_banco else nome_projeto
clonar_git = input("Deseja clonar um repositório Git na pasta themes? (s/n): ").lower()
if clonar_git == 's':
    url_repositorio = input("Digite o URL do repositório Git: ")
else:
    url_repositorio = False

if url_repositorio:
    nome_tema = input("Digite o nome do tema (opcional): ")

#Iniciar o processo
caminho_htdocs = 'C:/xampp/htdocs'
caminho_projeto = os.path.join(caminho_htdocs, nome_projeto)

os.makedirs(caminho_projeto, exist_ok=True)

conteudo_composer = """
{
    "require": {
    "johnpbloch/wordpress": "*"
    }
}
"""

with open(os.path.join(caminho_projeto, 'composer.json'), 'w') as file:
    file.write(conteudo_composer)

# Atualizar a configuração do Composer para permitir o plugin
subprocess.run("composer config allow-plugins.johnpbloch/wordpress-core-installer true", cwd=caminho_projeto, shell=True)

# Executar o Composer com a opção --no-interaction
subprocess.run("composer install -n", cwd=caminho_projeto, shell=True)

# Mover os arquivos da pasta 'wordpress' para a pasta raiz do projeto
caminho_wordpress = os.path.join(caminho_projeto, 'wordpress')
for item in os.listdir(caminho_wordpress):
    s = os.path.join(caminho_wordpress, item)
    d = os.path.join(caminho_projeto, item)
    if os.path.isdir(s):
        shutil.move(s, d)
    else:
        shutil.copy2(s, d)



# Caminho para a pasta 'themes'
caminho_themes = os.path.join(caminho_projeto, 'wp-content', 'themes')

# Verificar se a pasta 'themes' existe e removê-la
if os.path.exists(caminho_themes):
    for item in os.listdir(caminho_themes):
        item_path = os.path.join(caminho_themes, item)
        if os.path.isdir(item_path):
            shutil.rmtree(item_path)
        else:
            os.remove(item_path)

# Clonar repositório Git, se necessário
if url_repositorio:
    nome_tema = nome_tema if nome_tema else nome_projeto
    subprocess.run(["git", "clone", url_repositorio, nome_tema], cwd=caminho_themes)

# Limpar: Deletar pasta 'wordpress' e outros arquivos/diretórios desnecessários
shutil.rmtree(caminho_wordpress)
# Adicione aqui comandos para deletar outras pastas e arquivos, se necessário

# Caminho para wp-config-sample.php
wp_config_sample = os.path.join(caminho_projeto, 'wp-config-sample.php')
wp_config = os.path.join(caminho_projeto, 'wp-config.php')

# Ler o conteúdo de wp-config-sample.php e substituir as credenciais do banco de dados
with open(wp_config_sample, 'r') as file:
    content = file.read()
    content = content.replace('database_name_here', nome_banco)
    content = content.replace('username_here', 'root')
    content = content.replace('password_here', '')

# Escrever as alterações no novo arquivo wp-config.php
with open(wp_config, 'w') as file:
    file.write(content)

# Remover arquivos e pastas do Composer
os.remove(os.path.join(caminho_projeto, 'composer.json'))
os.remove(os.path.join(caminho_projeto, 'composer.lock'))
shutil.rmtree(os.path.join(caminho_projeto, 'vendor'))

# criar banco de dados
conexao = mysql.connector.connect(
    host='localhost',
    user='root',
    password=''
)
cursor = conexao.cursor()
cursor.execute(f"CREATE DATABASE IF NOT EXISTS`{nome_banco}`")
cursor.close()
conexao.close()

#Se não houver tema a ser criado, se saia
if not url_repositorio:
    exit()

#Gerando um config do SFTP
conteudo_sftp = """
{
"name": "AlpDev",
"host": "10.10.10.1",
"protocol": "ftp",
"port": 21,
"username": "__username__",
"password": "__password__",
"remotePath": "/public_html/wp-content/themes/__theme__",
"uploadOnSave": false,
"useTempFile": false,
"ignore": [
    ".vscode",
    ".git",
    ".DS_Store",
    ".gitignore",
    "node_modules",
    "README.md",
    "gulpfile.js",
    "package-lock.json",
    "package.json",
    "/src",
    "*.html"
],
"remoteExplorer": {
    "filesExclude": [
        ".vscode",
        ".git",
        ".DS_Store",
        ".gitignore",
        "node_modules",
        "README.md",
        "gulpfile.js",
        "package-lock.json",
        "package.json",
        "/src",
        "*.html"
    ]
},
"watcher": {
    "files": "assets/**",
    "autoUpload": false,
    "autoDelete": false
},
"openSsh": false,
"syncOption": {
    "delete": true,
    "update": true
}
}
"""

conteudo_sftp = conteudo_sftp.replace('__theme__', nome_tema)

pasta_vscode = os.path.join(caminho_themes, nome_tema, '.vscode')

os.makedirs(pasta_vscode, exist_ok=True)

with open(os.path.join(pasta_vscode, 'sftp.json'), 'w') as file:
    file.write(conteudo_sftp)

#npm install no tema
subprocess.run(["npm", "install"], cwd=os.path.join(caminho_themes, nome_tema), shell=True)

# Ler o conteúdo de wp-config-sample.php e substituir as credenciais do banco de dados
with open(os.path.join(caminho_themes, nome_tema, 'gulpfile.js'), 'r') as file:
    content = file.read()
    content = content.replace('/woo-cody/', '/' + nome_projeto + '/')

with open(os.path.join(caminho_themes, nome_tema, 'gulpfile.js'), 'w') as file:
    file.write(content)

#Abrir o VSCode na pasta do tema
subprocess.run(["code", "."], cwd=os.path.join(caminho_themes, nome_tema), shell=True)

Não é necessário ter conhecimento em Python para usar, basta dar o comando no arquivo e tudo será executado.

python wordpress.py

Fazendo o resto das configurações

Agora que o WordPress foi instalado, seja usando o script ou tendo que fazer tudo na manivela, é hora de configurar o resto.

Imaginando que você seguiu o script, insira a URL do ambiente criado no localhost em seu navegador, e o WordPress te levará para a tela de configuração do usuário. É interessante aqui utilizar o usuário e senha padrões da Alpina, para já manter a consistência quando você passar de um ambiente para outro. Até mesmo porque você poderá exportar/importar informações no futuro.

O próximo passo é também já começar a configurar o CodyHouse do seu tema. Temos uma seção inteira dedicada exclusivamente a isso, então não abordaremos mais nada sobre o Cody por aqui.

Enfim, saiba que o primeiro dia de projeto seu será basicamente dedicado a configurações.

Verificando o ambiente de desenvolvimento remoto

Quando é iniciado um novo projeto, existe uma requisição que é feita ao Suporte para criar um ambiente de desenvolvimento. De agora até o fim do projeto nós iremos conhecer esse ambiente com a alcunha de Ambiente DEV. O primeiro e único de seu nome.

Esse ambiente pode já estar disponível ou não ao desenvolvedor no início do projeto. Caso não esteja disponível, a execução dessas tarefas devem ser pausadas até que o ambiente esteja pronto, e o desenvolvedor passa para as próximas tarefas, que serão executadas em seu ambiente local.

Se tudo estiver OK, o desenvolvedor receberá a URL do ambiente, bem como todos os acessos de FTP ao ambiente através da VPN. É importante notar que não temos acessos do banco de dados desse ambiente, isso fica de acesso somente ao Suporte.

info

A URL desse ambiente é a mesma que o cliente recebe com o nome de link provisório. Então absolutamente tudo deve estar montado nesse ambiente que for para apresentar ao cliente.

Instalar WordPress

Agora que já temos nosso ambiente local e que verificamos que temos um ambiente dev, é hora de nos dedicarmos ao cumprimento da tarefa Instalar o WordPress em si, que traz um checklist de atividades a serem marcadas como executadas.

Observe aqui que nem todas as atividades serão necessariamente FEITAS. Mas o que isso quer dizer? Por que teria um checklist se vou deixar atividades sem serem feitas? Bom, não é nada disso.

Algumas atividades já estarão feitas. Isso significa que você não precisará fazer, mas terá que verificar e confirmar que estão feitas no checklist. Isso irá acontecer porque quando o ambiente base foi clonado para criar um novo ambiente, estas atividades já estavam feitas lá.

Então marque tudo o que for fazendo e tudo que você verificar que está feito.

Verificar o usuário alpina

Várias atividades desse checklist serão verificar sobre o usuário alpina do WordPress.

O login deve ser sempre alpina, o e-mail deve ser sempre suporte@alpina.digital e a senha deverá a que for passada para você utilizar. Às vezes a atividade pode ter senhas de temporadas passadas, então verifique qual a senha atual a ser utilizada.

O nome do usuário é Alpina e seu sobrenome é Digital. Feito isso, marque os checks.

Verificar a indexação do site

A atividade mais importante aqui é a de Marcar a opção “Evitar que mecanismos de busca indexem este site”. Embora os ambientes costumem trazer de fárica essa opção marcada, verifique e reverifique se isso realmente está acontecendo. Porque o B.O. aqui será muito grande se um site apenas em desenvolvimento sair nas primeiras páginas do Google.

Outras atividades

As demais atividades dessa tarefa consistem em mexer nas Configurações do WordPress via WP-ADMIN. Colocar o nome do cliente e slogan, verificar como os links permanentes estão formados, entre outras atividades deste tipo.

Configurar WordPress/WooCommerce

Essa é uma tarefa que na prática é bem parecida com a anterior, pois vai trazer mais outro checklist de tarefas iniciais no WordPress.

Se o site for institucional, existirá uma tarefa chamada Configurar WordPress, se for e-commerce terá uma irmã gêmea chamada Configurar WooCommerce.

Cumprindo o checklist

Essa é uma das tarefas que vai conter um checklist, que você irá ver abrir a tarefa.