meu-workshop-criando-apps-multidispositivos-e-servindo-o-conteudo-com-wordpress-no-wordcamp-bh-wordcampbh

Neste dia 13 de Junho foi realizado o WordCamp Belo Horizonte 2015, no teatro Ney Soares - da UniBH.

Neste post quero fazer um resumo do WorkShop que tive a alegria de ministrar no evento, chamado: “Criando Apps Multidispositivos e Servindo o conteúdo com Wordpress”.

Aliás, tiro um minuto pra agradecer à organização do WordCamp BH e à Digital Ocean, que presenteou todos os participantes com U$$40 de bônus na DO!! Tendo em vista que vai uns U$5 por Mês, temos aí praticamente 8 meses de servidor VPS grátis - Valeu, galere!

WordPress como API REST?

Para meus queridos leitores e Javascripters, a idéia de usar WordPress para servir a API pode soar um tanto estranha. “Por que não Node?”, diriam alguns.

A questão é que em grande parte das vezes, WordPress já é o sistema de gerenciamento de conteúdo do site do seu cliente.

Além de que, como dizem os colegas do #WordpressBrasil no Slack, “WordPress Instala até em geladeira”… Qualquer host compartilhado (inclusive muitos gratuitos) suporta o nosso amigo WP. Não precisamos de acesso root ou ssh para instalar pacotes e dependências especificas. O bom e velho LAMP ou WAMP resolve qualquer parada. (E sim, WordPress roda lindamente com nGinx!)

Agora, sem querer definir como a solução ideal para 100% dos casos, é seguro dizer que a agilidade alcançada no método de criação de APIs com WordPress é muito útil para MVPs e outras situações em que não se tem à disposição muito tempo ou recursos.

Sem mais delongas, vamos ver como funciona essa belezinha.

1, 2, 3 e pronto!

No WorkShop, quis apresentar meu método “1, 2, 3” de criação de Apps Multi-Dispositivos, sendo que os passos são:

  1. Backend/Arquitetura da Informação e API REST
  2. FrontEnd/Consumo dos dados
  3. Empacotar e lançar!

Essa abstração demonstra como é simples o caminho de lançamento de um aplicativo que pode ser usado em diversos dispositivos.

Passo 1: Criando a API.

No método que usa WordPress, fazemos a API com a ajuda do CMS e um plugin especial, chamado WP-API, mas atenção: no repositório oficial chama-se WP REST API.

A estruturação do Conteúdo pode ser feita através dos nativos Custom Post Types e Custom Fields, com, ou sem, ajuda de plugins.

No WorkShop recomendei o Types, por uma questão de agilidade. Com ele, em alguns clicks, criamos os Post Types e Custom Fields, mas poderia ser tudo feito ‘na unha’, ou com outro plugin.

Ao terminar essa fase, temos disponível o caminho urldosite.com.br/wp-json, que expõe os endpoints disponíveis, como o que usaremos no teste: /posts.

Pra quem nunca trabalhou com JSON, recomendei MANTER A CALMA e a cabeça aberta. hehe. Ah, e também usar este Json Parser, que ajuda MUITO a entender a estrutura e conteúdo do JSON que nossa API nos retorna.

Passo 2: Consumindo os Dados da API

Apesar de ser possível utilizar qualquer método para consumir os dados, gosto de apresentar o Ionic Framework para quem ainda não conhece.

Ele traz o melhor do Cordova/Phonegap e AngularJS com vários tweaks para mobile development. Além de um cli fora do normal de bem feito, que nos permite desenvolver em Live Reload e servidor com entrada externa.

Com o $http do AngularJS, consumimos a api, deixando os dados retornados no endpoint /posts na variável $scope.data.

Dessa forma, com o ng-repeat, fazemos um loop nela, que nos permite listar o título de cada um dos posts. Veja só como fazemos em nosso controller:

[nomeDoApp/www/js/controllers.js]
1
2
3
4
5
6
7
8
9
angular.module('starter.controllers', [])
//vamos editar apenas este controller:
.controller('DashCtrl', function($scope, $http) {
    $http.get('http://localhost/MeuWordPress/wp-json/posts')
      .success(function(data){
        $scope.posts = data; 
      })
})
//...

Agora, basta executar o Loop com Ng-repeat no HTML:

[nomeDoApp/www/templates/tabs-dash.html]
1
2
3
4
<!-- (após o <ion-content class="padding">) -->
    <div ng-repeat="post in posts">
      {{post.title}}
    </div>

Com apenas isso, temos o exemplo mais simplista possível de consumo da API REST.

3. Empacotar e Publicar

No WorkShop, indiquei algumas formas de Empacotar nossa aplicação, como:

  • Phonegap Build, ou o próprio Ionic para empacotar para Android, iOS e Windows Phone.
  • nw.js e sua versão GUI para Desktop (Linux, Windows ou Mac)
  • Os SDKs específicos dos fabricantes de SmartTvs, que nos permitem empacotar aplicações para televisão

Resultado:

Apesar do tempo reduzido ter nos levado à um exemplo bem simplista, temos tudo necessário para criar aplicações incríveis de forma facílima e prática.

Vimos como criar a API sem nenhuma linha de código (lol :P), e como consumir de forma fácil.

À partir daí, temos um imenso leque de possibilidades, onde o limite vai ser a criatividade de cada um.

A Colinha: CheatSheet do Wokshop Criando Apps Multi Dispositivos e servindo o conteúdo com WordPress:

E no final….

O evento foi muito maneiro e a organização excelente, mas isso, claro, não impediu alguns probleminhas.

Eu fui sortudo e me deparei com o Wifi estragado na sala de Workshops, o que acabou gerando transferência para um andar inferior, e tomou bastante tempo, diminuindo um pouco o tempo hábil que havia planejado para este WorkShop.

Como reparação para nossos queridos WordCampers, ofereci à quem me mandou e-mail um convite/link para o Hangout Especial, que farei como Bônus para quem participou.
Nele, veremos na prática bastante além do básicos dos passos 1, 2 e 3, e faremos uma App com guia de receitas, distribuida para Mobile e Desktop. (Com instalador!)

Então quem esteve no WorkShop e mandou e-mail vai poder não só revisar o conteúdo, como tirar eventuais dúvidas que surgiram ao longo da semana, e aprender algumas outras técnicas interessantes para o nosso processo de criação de Apps Multi dispositivos, com conteúdo servido via WordPress.

(aguardem o link, hoje dia 17/06 ainda não enviei)

:)

Agradecimentos:

Quero agradecer à organização do WordCamp BH - em especial ao Valério Souza - pelo convite, e à todos que foram prestigiar o evento e também meu WorkShop.

Agradecimento super especial
Para o grande mestre Daciuk que me ajudou demás com o meu netbook após o problema da internet, e ao excelentíssimo sr. @nicholas_io, que me permitiu utilizar o seu lindo Mac Book para apresentação (Nunca mais lavo minha mão :O)

Também à todos que mandaram feedback para mim ou para organização, e à todos que puderem aproveitar o que eu passei, de forma prática em suas vidas.