allisonjulioo / wordpressposts

Web application SPA using Angular CLI version 9.0.1.

Aplicativo de posts Wordpress

Este projeto faz a integração do Angular v6 com o Wordpress.

Este app consegue fazer:

• Listagem de posts
• Editar um post
• Criar um post
• Excluir um post

Demo

Antes de ver o demo, é necessário uma configuração no site que utilizará como backend, caso não tenha um site para teste em wordpress utilize as seguintes crendenciais:

Acesse aqui o projeto

Url do seu site: http://pro.alinkdigital.com.br
Login: User
Senha: 1234

Iniciando as configurações para acesso a Api

Iniciando o Wordpress

• Este App foi testado com uma versão local instalada do Wordpress, que pode ser baixada aqui.´

• Extraia o arquivo zipado para a raiz do seu servidor local apache, seja, XAMPP ou WAMPP

• Crie um banco para seu blog e faça as configurações usuais para que eles esteja em funcionamento em (http://localhost/), documentação explicando como fazer esse processo.

Após instalado, precisamos instalar dois plugins no Wordpress.

• WP REST API (Que irá dar acesso a Api do Wordpress, que nos retornará os post em formato .JSON)
• JWT Authentication (Vamos usá-la para autenticar nosso usuário e dar permissão para acessar os endpoints da Api.

Agora precisamos fazer algumas configurações nos arquivos do seu blog para continuar, primeiro habilite os permantelinks no painel de administração do seu Wordpress, após isso terá na raiz do seu blog um arquivo .htaccess, que deverá ter abaixo, não se esqueça de alterar para o domínio do seu site.

  # BEGIN WordPress
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /substitua-pelo-seu-dominio-local/
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /substitua-pelo-seu-dominio-local/index.php [L]
RewriteCond %{HTTP:Authorization} ^(.*)
RewriteRule ^(.*) - [E=HTTP_AUTHORIZATION:%1]
SetEnvIf Authorization "(.*)" HTTP_AUTHORIZATION=$1
</IfModule>

# END WordPress

Após essa etapa, precisamos alaterar o arquivo wp-config.php você verá algo assim:

define('DB_NAME', 'sua-base-de-dados');

define('DB_USER', 'root'); <-- Usuário do mySql

define('DB_PASSWORD', '');  <--- Sua senha

define('DB_HOST', 'localhost');

Logo abaixo você deverá adicionar essas linhas no neste mesmo arquivo

define('JWT_AUTH_SECRET_KEY', 'senha-secreta-gerada-pelo-jwt-para-cada-site');
define('JWT_AUTH_CORS_ENABLE', true);

Para gerar o key de acesso, vá nesse link , e copie a string da segunda linha você verá algo assim:

define('AUTH_KEY', 't;TbCr+<0m5}x&<$]5<Ce/RCG3mg5{f.GvS @XV|nWCq=f?Bm@G6r4-N_JPCOz(x'); define('SECURE_AUTH_KEY', 'gG2t{>j+bA|1+kn|>-`4h&f-I=,WuHaPs)](f@l?4`9kv+DP6q-{G.3dJ[A6*a]l');

copie somente o conteúdo destacado como no EXEMPLO acima. Na raiz deste repositório existe uma pasta Arquivos-wp que contém um modelo desses dois arquivos. Pronto, com estes passos você já pode acessar a Api e receber um token de autenticação.

Iniciando as configurações para rodar o App

Iniciando com o Angular CLI

É indispensável ter instalado o NodeJs em sua máquina para rodar o App. com este instalado rode o comando:

npm install -g @angular/cli

Após instalado execute o App

• Faça um clone deste repositório em uma pasta de sua preferência
• Entre na pasta do App e rode o comando npm install para instalar todas as dependências que o app precisa
• Rode o comando ng serve --open
• O App abrirá em localhost na porta :4200 Os estilos o app estão .sass, por este motivo pode ocorrer que o app de errô ao iniciar caso esteja usando um SO Linux, para resolver isso, execute o comando:

npm rebuild node-sass --force

Ele vai forçar a construção do estilo do app.

Lembrando que o Wordpress tem que estar executando para que o App pegue as credenciais e os arquivos

Fim