Retomando información del post.- Introducción al desarrollo de aplicaciones móviles con Apache CORDOVA, retomamos que para comenzar con Apache CORDOVA necesitamos tener en nuestro equipo:
- Python*
- NodeJS
- Apache CORDOVA
- Editor de textos(Notepad++, Netbeans, Eclipse, Brackets, Sublime, etc.)
- Ant
- FirefoxOS Emulator
- JDK Java
- Android SDK
- Configuracion de variables de entorno
* Python ya se incluye en Linux así que no es necesario instalarlo.
Ya que Python esta incluido en Linux (Ubuntu) y el objetivo es depurar Apache CORDOVA en FirefoxOS por el momento instalaremos únicamente:
Ya que Python esta incluido en Linux (Ubuntu) y el objetivo es depurar Apache CORDOVA en FirefoxOS por el momento instalaremos únicamente:
- NodeJS
- Apache CORDOVA
- Editor de textos(Brackets)
- FirefoxOS Emulator
Para la configuración utilizare un SO Linux (Ubuntu 14.04) pero funciona para Ubuntu 12.x+ o Derivados (Xubuntu, Edubuntu, etc).
 |
| Escritorio de Ubuntu |
Utilizaremos la ultima versión de Apache CORDOVA ya que a partir de la versión 3.x nos facilita la tarea de creación de nuestros proyectos, configuración de plataformas y agregación de plugins, todo gracias a los comandos que nos proporciona Apache CORDOVA.
Comenzemos
Paso 1. Instalar NodeJS
Utilizaremos a NodeJS para realizar la instalación de Apache CORDOVA con ayuda de nmp el cual nos permite realizar la instalación de módulos o paquetes a través de linea de comandos.
Para instalar NodeJS basta con abrir una terminal en nuestro SO Ubuntu, podemos usar el comando rápido Alt + Ctrl + t
 |
| Tambien podemos buscar la terminal desde la interfaz. |
Una vez abierta la terminal bastara con teclear el siguiente comando:
sudo apt-get install nodejs
Comenzara con la instalación.
Una vez terminado tecleamos el siguiente comando:
node -v
Y nos mostrara la versión de node que tenemos instalada.
Paso 2. Instalar Apache CORDOVA
Para poder instalar Apache CORDOVA en nuestra terminal teclearemos el siguiente comando:
 |
| En mi caso instalo la versión 0.10.32 |
Paso 2. Instalar Apache CORDOVA
Para poder instalar Apache CORDOVA en nuestra terminal teclearemos el siguiente comando:
sudo npm install -g cordova
Al finalizar nos mostrara una pantalla como esta:
 |
| El parametro -g indica que se instalara de manera global. |
Al finalizar nos mostrara una pantalla como esta:
Tecleamos el siguiente comando en la terminal:
cordova -v
Y nos mostrara la versión de Apache CORDOVA que se ha instalado.
Paso 3. Instalar Editor de textos (Brackets).
En lo particular me ha parecido interesante brackets ya que es liviano configurable y muy practico.
Para instalarlo debemos ingresar al siguiente enlace: http://brackets.io/
Damos click en el botón de Download.
En mi caso se guardara en la carpeta de Descargas.
Ingresamos desde la terminal a la carpeta donde se ha guardado Brackets
Ahora procedemos a instalar el archivo .deb desde la terminal con el siguiente comando:
sudo dpkg -i Brackets.1.0.Extract.64-bit.deb
Si todo ha salido bien nos mostrara algo como esto:
Podemos buscarlo en nuestros programas instalados y abrirlo.
Paso 4. Instalar FirefoxOS Simulator.
FirefoxOS Simulator se ofrece como un complemento para el navegador Firefox, el cual viene instalado por defecto en Ubuntu, solo basta con abrir el navegador e ir a la pestaña de herramientas y dar click sobre complementos, nos mostrará algo como esto:
Buscamos Firefox OS Simulator.
Y damos click en el botón instalar.
Al finalizar nos abrirá una ventana como esta:
Damos click sobre stopped para iniciar el emulador y nos aparecerá algo como esto:
Paso 5. Como crear nuestro “Hola Mundo” con Apache CORDOVA.
Para crear una aplicación con Apache CORDOVA utilizaremos el siguiente comando:
cordova create holacordova com.hola.cordova Holacordova
La instrucción cordova create creara una carpeta para nuestro proyecto con el nombre “holacordova” y el nombre del proyecto sera Holacordova.
Entramos a la carpeta “holacordova” con el siguiente comando:
cd holacordova/
Agregamos el soporte para FirefosOS a nuestro proyecto con el siguiente comando:
cordova platform add firefoxos
Al terminar mostrara algo como esto:
Y con esto se ha agregado una copia de nuestro proyecto compatible con FirefosOS.
Paso 6. Abrir mi proyecto de Apache CORDOVA con FirefoxOS Simulator.
Para abrir un proyecto en el FirefoxOS Simulator damos click en el botón “Add Directory”:
Seleccionamos el archivo manifest.webapp que se encuentra en holacordova/platforms/firefoxos/www/manifest.webapp
Una vez abierto nos mostrara algo como esto:
Y solo falta dar click en el botón "push" Y listo tenemos nuestra aplicación en el FirefoxOS Simulator.
Con estos sencillos pasos hemos terminado de configurar Apache CORDOVA, FirefoxOS Simulator, creado nuestro “Hola Mundo” y emulado en el FirefoxOS Simulator.
En el siguiente post realizaremos la configuración del Android SDK, para emular nuestra aplicacion en el Emulador Android y así estar listos para el desarrollo y depuración multiplataforma.
Hasta la próxima y no olvides compartir este post con tus amigos y compañeros, dejarme tus dudas, comentarios o sugerencias y seguirme en mis redes sociales.
cordova -v
Y nos mostrara la versión de Apache CORDOVA que se ha instalado.
 |
| En mi caso se ha instalado la versión 4.0.0 |
Paso 3. Instalar Editor de textos (Brackets).
En lo particular me ha parecido interesante brackets ya que es liviano configurable y muy practico.
Para instalarlo debemos ingresar al siguiente enlace: http://brackets.io/
Damos click en el botón de Download.
En mi caso se guardara en la carpeta de Descargas.
Ingresamos desde la terminal a la carpeta donde se ha guardado Brackets
Ahora procedemos a instalar el archivo .deb desde la terminal con el siguiente comando:
sudo dpkg -i Brackets.1.0.Extract.64-bit.deb
Si todo ha salido bien nos mostrara algo como esto:
Podemos buscarlo en nuestros programas instalados y abrirlo.
Paso 4. Instalar FirefoxOS Simulator.
FirefoxOS Simulator se ofrece como un complemento para el navegador Firefox, el cual viene instalado por defecto en Ubuntu, solo basta con abrir el navegador e ir a la pestaña de herramientas y dar click sobre complementos, nos mostrará algo como esto:
Buscamos Firefox OS Simulator.
Y damos click en el botón instalar.
Al finalizar nos abrirá una ventana como esta:
 |
| También lo puedes encontrar en: Herramientas->Desarrollador Web->Firefox OS Simulator |
Damos click sobre stopped para iniciar el emulador y nos aparecerá algo como esto:
Paso 5. Como crear nuestro “Hola Mundo” con Apache CORDOVA.
Para crear una aplicación con Apache CORDOVA utilizaremos el siguiente comando:
cordova create holacordova com.hola.cordova Holacordova
La instrucción cordova create creara una carpeta para nuestro proyecto con el nombre “holacordova” y el nombre del proyecto sera Holacordova.
Entramos a la carpeta “holacordova” con el siguiente comando:
cd holacordova/
Agregamos el soporte para FirefosOS a nuestro proyecto con el siguiente comando:
cordova platform add firefoxos
Al terminar mostrara algo como esto:
Y con esto se ha agregado una copia de nuestro proyecto compatible con FirefosOS.
Paso 6. Abrir mi proyecto de Apache CORDOVA con FirefoxOS Simulator.
Para abrir un proyecto en el FirefoxOS Simulator damos click en el botón “Add Directory”:
Seleccionamos el archivo manifest.webapp que se encuentra en holacordova/platforms/firefoxos/www/manifest.webapp
Una vez abierto nos mostrara algo como esto:
Y solo falta dar click en el botón "push" Y listo tenemos nuestra aplicación en el FirefoxOS Simulator.
 |
| Nuestro "Hola Mundo" |
Con estos sencillos pasos hemos terminado de configurar Apache CORDOVA, FirefoxOS Simulator, creado nuestro “Hola Mundo” y emulado en el FirefoxOS Simulator.
En el siguiente post realizaremos la configuración del Android SDK, para emular nuestra aplicacion en el Emulador Android y así estar listos para el desarrollo y depuración multiplataforma.
Hasta la próxima y no olvides compartir este post con tus amigos y compañeros, dejarme tus dudas, comentarios o sugerencias y seguirme en mis redes sociales.
1 comentarios:
excelente, empezare con ponerle ubuntu a mi equipo y comenzar con apache CORDOVA, sin duda se ve interesante y muy bien explicado, solo tengo una duda, el "hola mundo" no se tiene que ver en el simulatro???
Publicar un comentario