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:

Tema RWD basado en “Omega Base Theme”

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:

Importante: No es recomendable “hackear” ni módulos, ni temas del núcleo o contribuidos.

Hay una serie de temas que ofrecen una función más allá de la apariencia inmediata y la sensación, son temas que tienen la intención de ser usados como sub-temas.

Estos tipos de temas se conocen como: Temas Base.

“Responsive Design – Responsive Grid”

Antes de continuar: Responsive Web Design no es una tendencia emergente en Diseño Web, pero con la cantidad constante y creciente de aparatos móviles o de navegación que se usan en la calle, RWD es un tema que no puede ser ignorado.

Responsive Web Design se basa en la idea de que un Sitio Web debe adaptarse tanto como sea posible a cualquier dispositivo en el que se está navegando.

Omega Base Theme

Vamos a usar el tema Omega, parece tener una buena reseña en:

http://drupal.org/project/html5_tools

lo que significa que es una buena elección para basarnos en un tema HTML5.

cd /var/www/SITE/htdocs/

drush rl html5_tools
drush dl html5_tools
drush en html5_tools

drush rl omega
drush dl omega
drush en omega

drush rl omega_tools
drush dl omega_tools-7.x-4.x-dev
drush en omega_tools

Ahora podemos generar el sub-tema utilizando Drush:

drush omega-wizard

Seguidamente se puede verificar que el sub-tema basado en Omega está disponible y habilitado:

http://SITE/?q=admin/appearance

Drush

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:

Drush es un shell de línea de comandos y una interfaz de secuencias de comandos de Unix para Drupal. Si usted no está familiarizado con “shell scripting”, por favor consulte la documentación de su shell (por ejemplo, man bash) también puede leer un tutorial en línea (por ejemplo, la busque: “tutorial de bash”) esto sin duda le ayudará a sacar el máximo provecho de Drush.

El núcleo de Drush viene con una gran cantidad de comandos útiles para interactuar con código de módulos/temas/perfiles. De la misma manera, corre update.php, ejecuta consultas SQL y migraciones de Bases de Datos, además incluye utilidades misceláneas, por ejemplo, para correr cron o limpiar la memoria caché.

Instalación

composer global require drush/drush:dev-master

Sí y sólo sí $HOME/.composer/vendor/bin no se encuentra en $PATH:

echo $PATH

export PATH="$PATH:$HOME/.composer/vendor/bin"

source .bashrc

echo $PATH

Actualización

composer global update

drush status

PHP executable : /usr/bin/php
PHP configuration : /etc/php5/cli/php.ini
PHP OS : Linux
Drush version : 7.0-dev
Drush temp directory : /tmp

Limpiar todo el cache cuando estamos desarrollando:

cd /var/www/SITE/htdocs

drush cc all