WordPress JSON-based REST API & Cordova

REST es un concepto de diseño. De hecho, la misma World Wide Web representa la mayor implementación de un sistema conforme al estilo arquitectónico REST.

REST no es tan rígido como SOAP. Los “RESTful web-services” utilizan URIs y métodos estándar para hacer llamadas a un “Webservice”. Por lo tanto, cuando se solicita un URI, se recibe una respuesta con la representación de un objeto, sobre el cual se puede realizar operaciones, por ejemplo: GET, PUT, POST y DELETE. Por dicha no estamos limitados a usar XML para representar datos, la opción recomendada es escoger las basadas en JSON, son muy útiles para representar datos.

JSON y XML, son “funcionalmente equivalentes”. Pero XML es considerado como demasiado detallado, y muchas veces muy difícil de analizar, por otro lado, parece más decente representar los datos usando JSON.

Crear Document Root del Dominio

sudo mkdir -p /var/www/app.josoroma.lh/htdocs

sudo chown -R josoroma:josoroma /var/www/app.josoroma.com

Bajar y descomprimir WordPress

cd /var/www/app.josoroma.lh/htdocs

wget http://wordpress.org/latest.tar.gz

tar -xvzpf latest.tar.gz --strip-components=1

Sólo porque es un Ambiente de Desarrollo

chmod -R 777 /var/www/app.josoroma.lh

Crear usuario y Base de Datos

mysql -u root -p -h localhost
CREATE USER 'josoromapp'@'localhost' IDENTIFIED BY  '***';

GRANT SELECT, INSERT, UPDATE, DELETE, CREATE, DROP,
 FILE, INDEX, ALTER, CREATE TEMPORARY TABLES, CREATE VIEW, EVENT, TRIGGER, SHOW VIEW,
 CREATE ROUTINE, ALTER ROUTINE,
 EXECUTE ON * . * TO  'josoromapp'@'localhost' IDENTIFIED BY  '***' WITH 
  MAX_QUERIES_PER_HOUR 0 
  MAX_CONNECTIONS_PER_HOUR 0 
  MAX_UPDATES_PER_HOUR 0 
  MAX_USER_CONNECTIONS 0;

CREATE DATABASE IF NOT EXISTS  `dbjosoromapp`;

GRANT ALL PRIVILEGES ON  `dbjosoromapp` . * TO  'josoromapp'@'localhost';

Configuración básica con Apache

sudo su

vi /etc/apache2/sites-available/app.josoroma.lh.conf
<VirtualHost *:80>
        ServerName app.josoroma.lh

        ServerAdmin webmaster@localhost
        DocumentRoot /var/www/app.josoroma.lh/htdocs

        <Directory /var/www/app.josoroma.lh/htdocs/>
                Options FollowSymlinks
                AllowOverride All
                Order allow,deny
                allow from all
        </Directory>

        LogLevel warn

        ErrorLog ${APACHE_LOG_DIR}/error.log
        CustomLog ${APACHE_LOG_DIR}/access.log combined
</VirtualHost>

Mapear el Host a una IP

127.0.0.1       app.josoroma.lh

Habilitar el “VirtualHost”

a2ensite app.josoroma.lh.conf

Agregar Mod Rewrite y reiniciar Apache

sudo a2enmod rewrite

service apache2 reload

WordPress Coding Standards para Sublime/phpcs

mkdir ~/.gitvendor

# idiotic path
git clone git://github.com/WordPress-Coding-Standards/WordPress-Coding-Standards.git ~/.gitvendor/wordpress/coder_sniffer/WordPress

ls -la .gitvendor/wordpress/coder_sniffer/WordPress

cd ~/.composer/vendor/squizlabs/php_codesniffer/CodeSniffer/Standards

ln -s ~/.gitvendor/wordpress/coder_sniffer/WordPress WordPress
phpcs -i

The installed coding standards are WordPress, PEAR, PHPCS, PSR1, Drupal, Zend, Squiz, PSR2 and MySource

Para tener acceso a un API tan confortable como el de:

WordPress.com

existen varias opciones, las que parecen interesantes de escarbar son las siguientes:

Que una instalación de WordPress ofrezca un REST API basado en JSON es muy importante porque permite que otras aplicaciones conversen con este API para solicitar información, por ejemplo, mediante un Web Service desde la otra aplicación. Esta otra aplicación puede ser una App de teléfono Android o IOS, creada con una solución como PhoneGap-Corodova. Además se puede negociar con el API para crear, actualizar o borrar “cosas”.

En combinación con AngularJS-Ionic se puede jugar bastante con APIS externos. Las implicaciones son muy interesantes y parece que bastante capitalizables con soluciones desde juegos hasta buscadores mezclados con Mapas para nichos como Bienes Raíces, Turismo, Profesionales, Autos, por mencionar algunos.

Por favor consulte:

<VirtualHost *:80>
        ServerName app.josoroma.lh

        ServerAdmin webmaster@localhost
        DocumentRoot /var/www/app.josoroma.lh/htdocs

        <Directory /var/www/app.josoroma.lh/htdocs/>
                Header set Access-Control-Allow-Origin "*"
                Options FollowSymlinks
                AllowOverride All
                Order allow,deny
                allow from all
        </Directory>

        LogLevel warn

        ErrorLog ${APACHE_LOG_DIR}/error.log
        CustomLog ${APACHE_LOG_DIR}/access.log combined
</VirtualHost>

Ejemplo de una solicitud utilizando HTTP-GET:

/posts: {
    supports: [
        "HEAD",
        "GET",
        "POST"
    ],
    meta: {
        self: "http://app.josoroma.lh/api/posts"
    },
    accepts_json: true
},
/posts/: {
    supports: [
        "HEAD",
        "GET",
        "POST",
        "PUT",
        "PATCH",
        "DELETE"
    ],
    accepts_json: true
}

Ionic – HTML mejorado para Apps

A continuación una lista de los frameworks que parecen ser más efectivos para el desarrollo de proyectos para dispositivos móviles o que requieran “Responsive Web Design”. También es importante conocer si en el Proyecto se ocupan características como “semantic templates” o “data binding”:

Cabe mencionar que existen opciones interesantes como Mustache, Handlebars y Underscore/Lodash.

Ionic tiene integración con Cordova

Un aspecto interesante es la integración de Ionic con Cordova. De hecho, el CLI de Ionic está construido sobre el CLI de Cordova.

Instalar Ionic con npm

sudo npm install -g gulp ionic

Crear un proyecto base (seed project)

ionic start myApp

Agregar una plataforma

cd myApp

ionic platform android

Correr App en el Emulador

ionic build android

ionic emulate android

Correr App en el Dispositivo conectado por USB

ionic run android

ionic-emulate-android

Creación de Apps con Cordova (AKA PhoneGap)

PhoneGap es más que un framework de código abierto, también es una herramienta y una solución que permite crear un sólo código basado en HTML5, CS3 y JavaScript. Además permite que ese código pueda ser compilado en el respectivo formato nativo de más de un dispositivo requerido (Servicio PhoneGap Build).

API de JavaScript y Código Nativo

El Framework Apache Cordava mediante un API comunica el código HTML5, CS3 y JavaScript con el código nativo.

cordova-logo

Cordova ofrece a través de JavaScript la comunicación con las distintas posibilidades y características que ofrecen los diversos dispositivos móviles, mencionando algunos, por ejemplo acceder: al acelerómetro, al GPS, a la cámara de fotos o los contactos.

PhoneGap Build – Sistema de Compilación

Cuando se tiene el código listo se puede usar PhoneGap Build para crear los archivos de istalación para los dispositivos o aparatos requeridos.

Expansión de PhoneGap

PhoneGap permite trabajar con HTML5, por ejemplo, con CSS para controlar el tamaño de los dispositivos sobre los que se va a trabajar. También permite conectar con otros frameworks como Ionic, Angular, Lumx, Amber, entre otros. Esto para lograr aplicaciones más interactivas que además lucen y se sienten igual para cualquier dispositivo disponible.

También es posible usar Plugins propios o de terceros, esto sirve para empujar el framework de PhoneGap con soluciones y mejoras más específicas por proyecto.

Las distintas características soportadas:

Tabla de compatibilidad HTML5 para los diversos dispositivos:

Por razones obvias, las aplicaciones para IOS y Android son las más apatecidos.

Documentación

Para saber si estamos en la documentación adecuada:

debemos comparar el URL de la documentación con la versión que corresponde al comando:

phonegap -v

3.4.0-0.19.21

¿Cuál es la diferencia entre Apache Cordova y PhoneGap?

PhoneGap-Cordova and what’s in a name?

PhoneGap es una distribución de Apache Cordova. Usted puede pensar en Apache Cordova como el motor que impulsa a PhoneGap, similar a la forma en que WebKit/Blink impulsa a Chrome.

“Semblance of Parity”

PhoneGap es un proyecto muy ambicioso y se basa en una gran comunidad para empujar muchas implementaciones de sistema operativo en la “semblanza de la paridad”.

Instalar Cordova

sudo npm install -g cordova

Nota: La bandera -g le dice a npm de instalar cordova de manera global.

La interfaz de línea de comandos

Crear una App

cordova create psych com.psych.app Psych
Creating a new cordova project with name "Psych" and id "com.psych.app" at location "~/Workspace/phonegap/psych"

dentro del subdirectorio “www” vive la portada de la aplicación.

cordova-create

Agregar Platformas

Todos los siguientes comandos ser ejecutados dentro del directorio del proyecto, o cualquier subdirectorio dentro de su ámbito de aplicación:

cd psych

cordova platform add android

cordova-platform-add

posible mensaje que se despliega luego de agregar una plataforma:

Creating android project...

Creating Cordova project for the Android platform:
    Path: platforms/android
    Package: com.psych.app
    Name: Psych
    Android target: android-19
...

Verficar el conjunto de plataformas actuales

cordova platforms ls

Installed platforms: android 3.4.0
Available platforms: amazon-fireos, blackberry10, firefoxos, ubuntu

Borrar una plataforma

cordova platform rm android

Sólo se pueden editar los archivos dentro del subdirectorio “www”, pero no los archivos dentro dentro de los subdirectorios “www” de “platforms”:

  • platforms/ios/www
  • platforms/android/assets/www

Control de versiones, es un hecho que hay que agregar el subdirectorio “www”, junto con el directorio “merges”, al sistema de control de versiones.

Construir la App

Por defecto, el script cordova genera un esqueleto cuya página de inicio es el archivo “www/index.html” del proyecto.

El controlador de eventos “deviceready”

El archivo “www/index.html” se puede editar cuantas veces se requiera, pero cualquier inicialización debe especificarse como parte del controlador de eventos “deviceready”, referenciado por defecto desde:

  • www/js/index.js

Construir de manera iterativa el Proyecto

cordova build

Lo anterior genera código específico de plataforma dentro del subditectorio “platforms” del proyecto.

Construir una App limitando su alcance

Es posible generar sólo para plataformas específicas, porjemplo:

cordova build android

El comando cordova build es atajo de:

cordova prepare android
cordova compile android

En el caso anterior, una vez que que se corre “prepare”, se puede usar el Apple’s Xcode SDK como una alternativa para modificar y compilar el código específico de plataforma que Cordova genera dentro de “platforms/ios”. Este mismo método se puede utilizar con los SDK de otras plataformas.

Emuladores

cordova platforms ls
id: 2 or "android-19"
     Name: Android 4.4.2
     Type: Platform
     API level: 19
     Revision: 3
     Skins: WXGA800-7in, WSVGA, WQVGA432, WXGA800, WXGA720, QVGA, WVGA854, HVGA, WQVGA400, WVGA800 (default), AndroidWearSquare, AndroidWea

Crear un Dispositivo Android Virtual – Android Virtual Device (AVD)

android create avd --name Android-4-4-2_hvga --target 19 --skin HVGA

también parece fácil crear un AVD con el comando:

android avd

android-avd

Test de la App en un Dispositivo Android Virtual

El SDK para plataformas móviles a menudo viene equipado con emuladores que ejecutan una imagenes de dispositivos, de modo que es posible lanzar la aplicación en la pantalla principal para interactuar con muchas de las características de la plataforma.

cordova-emulate-android

Ejecutar el siguiente comando para reconstruir la aplicación y verla dentro de emulador de una plataforma específico:

cordova emulate android

Test de la App en un AVD específico

Primero debe ejecutar el comando:

android

para lanzar el SDK de Android, a continuación, empezar(Start) una imagen de dispositivo en particular, que iniciará en blanco de acuerdo a su comportamiento predeterminado.

por último debe ejecutar el comando:

cordova emulate android

para refrescar la imagen emulador que va a desplegar la aplicación en la pantalla principal.

Como alternativa, es posible conectar el teléfono a la computadora para probar directamente la aplicación:

cordova run android

Nota: Es posible que sea necesario habilitar la opción de “USB Debugging”:

Settings -> More -> Developer Options -> USB Debugging

Test de la App en un Servidor Web Local

cordova serve 8080

Ejecuta un Servidor Web Local para “www/assets”. El puerto por defecto es 8000.

El Proyecto se puede acceder por Web desde:

http://localhost:8080/android/www/

Drupal y PhoneGap – Mobile application development kit

Realmente no me gusta mucho Drupal, en lo personal me parece más simple e interesante WordPress. Pero me dió curiosidad experimentar, por ejemplo, con Drush:

DrupalGap es un kit de desarrollo de aplicaciones móviles de código abierto para Aplicaciones Web basadas en Drupal. Se utiliza para crear aplicaciones móviles para Estrategias Web con Drupal.

Este proyecto integra de manera efectiva: Drupal, PhoneGap, jQuery Mobile y jDrupal.

Página del proyecto: drupalgap.org

Para más información consulte:

Instalación de DrupalGap

drush dl services libraries views_datasource
drush dl drupalgap
drush en drupalgap

A continuación visite:

http://SITE/?q=admin/people/permissions#module-drupalgap

Seguidamente se deben habilitar los siguientes permisos:

  • DrupalGap
    Get vocabularies (anonymous user, authenticated user).
    Get terms (anonymous user, authenticated user).
  • Services
    Save file information (authenticated user).
    Get a system variable (anonymous user, authenticated user).
  • User
    View user profile (anonymous user, authenticated user).

Para verificar que la instalación se realizó de manera adecuada verifique la siguiente página:

http://SITE/?q=admin/config/drupalgap

Una manera fácil de comprender la idea

http://SITE/?q=drupalgap/node/NODE_ID.json

http://SITE/?q=drupalgap/node/1.json
http://SITE/?q=drupalgap/node/2.json
http://SITE/?q=drupalgap/node/3.json

Instalación de OpenJDK y Ant

Instalar OpenJDK y Ant, ambos son requeridos por Android-SDK:

sudo apt-get install openjdk-7-jdk ant -y

Instalación de Oracle JDK 7

sudo apt-get install python-software-properties
sudo add-apt-repository ppa:webupd8team/java
sudo apt-get update

sudo apt-get install oracle-java7-installer
sudo apt-get install oracle-java7-set-default

sudo update-alternatives --config java
sudo update-alternatives --config javac

cat /etc/environment
cat .bashrc | grep 'PATH'

export PATH="$PATH:/usr/lib/jvm/java-7-oracle"
source .bashrc

which java
/usr/bin/java

java -version
java version "1.7.0_55"
Java(TM) SE Runtime Environment (build 1.7.0_55-b13)
Java HotSpot(TM) Server VM (build 24.55-b03, mixed mode)

Instalación de Android-SDK

Primero bajar: Android SDK.

Seguidamente correr:

mkdir ~/android
mv ~/Downloads/adt-bundle-linux-x86-20140321.zip ~/android

cd ~/android
unzip adt-bundle-linux-x86-20140321.zip

ls -la adt-bundle-linux-*
adt-bundle-linux-x86-20140321

vim ~/.bashrc

export COMPOSER_HOME="/home/YOUR_USER/.composer/vendor/bin"
#
export JAVA_HOME="/usr/lib/jvm/java-7-oracle"
#
export ANDROID_HOME="/home/YOUR_USER/android/adt-bundle-linux-x86-20140321/sdk"
#
export PATH="$PATH:$COMPOSER_HOME:$JAVA_HOME:$ANDROID_HOME:$ANDROID_HOME/platform-tools:$ANDROID_HOME/tools"

source .bashrc

printev ANDROID_HOME

printenv PATH

Instalación de node.js

node.js es una plataforma construida sobre “Chrome’s JavaScript runtime ” y permite desarrollar aplicaciones de red de manera fácil, rápida y escalable.

node.js utiliza un modelo dirigido por eventos que no bloquea I/O, esto lo hace ligero y eficiente, ideal para aplicaciones en tiempo real con datos intensivos que corren a través de dispositivos distribuidos.

cd
git clone https://github.com/joyent/node.git
cd node

git checkout v0.10.28

./configure && make && sudo make install

Actualizar node y npm

Es el gestor de paquetes para node.js, instala, publica y gestiona programas de node.

sudo npm update npm -g
sudo npm install n -g
sudo n stable

which node
/usr/local/bin/node

node -v
v0.10.28

which npm
/usr/local/bin/npm

npm -v
1.4.10

Instalación de Cordova

Apache Cordova es una plataforma para construir aplicaciones móviles usando HTML, CSS
y JavaScript. Es un conjunto de APIs de aparatos que permiten a los desarrolladores acceder a funciones nativas, por ejemplo, la cámara o el acelerómetro desde JavaScript. En Combinación con un “framework” de interfaz de usuario como jQuery Mobile, Dojo Mobile o Sencha Touch, es posible desarrollar una aplicación de teléfono inteligente desarrollada con sólo HTML,CSS y JavaScript.

sudo npm install -g cordova

which cordova
/usr/local/bin/cordova

cordova -v
3.4.1-0.1.0

Instalación de PhoneGap

Para crear aplicaciones que utilizan las tecnologías web que uno conoce y ama: HTML, CSS y JavaScript. PhoneGap es un “framework” libre y de código abierto que permite crear aplicaciones móviles utilizando Web APIs estandarizados para las plataformas que más interesan, por ejemplo: Android & IOS.

sudo npm install -g phonegap

which phonegap

which phonegap
/usr/local/bin/phonegap

phonegap -v
3.4.0-0.19.21

Instalar un Android Target

android

API19

Momento del APK

Crear una aplicación vacía:

cd /var/www/SITE/htdocs

cordova create DrupalGapp com.drupalgap "DrupalGapp"

Le agregamos una plataforma y construimos/preparamos la app:

cd DrupalGapp

cordova platform add android
cordova build

Agregar el “Mobile Application Development Kit” a la app:

wget https://github.com/signalpoint/DrupalGap/archive/drupalgap_7.x-1.5-alpha.tar.gz

tar -xvpf drupalgap_7.x-1.5-alpha.tar.gz

mv DrupalGap-drupalgap_7.x-1.5-alpha/* www

rm -rf drupalgap_7.x* DrupalGap*

Por favor consulte:

Especificar la ruta del Sitio en Drupal:

cp www/app/default.settings.js www/app/settings.js

vi www/app/settings.js

'site_path':'http://127.0.0.1'

Agregar algunos plugins:

cordova plugin add org.apache.cordova.console org.apache.cordova.device org.apache.cordova.dialogs org.apache.cordova.file org.apache.cordova.inappbrowser org.apache.cordova.network-information

cordova plugin add org.apache.cordova.camera org.apache.cordova.geolocation

Correr la app:

cordova build – Para empaquetar el apk.

cordova run android – Para empaquetar el .apk e instalar en cualquier aparato detectado por adb.

cordova build
cordova run android

ripple

Para más información: