Bueno, como nos pasa a todos, un día desperté con esa imperiosa necesidad de crear una app para teléfonos inteligentes; y pues, comenzar no es fácil si tomamos en cuenta que las principales plataformas de desarrollo (IOS y Android) tienen sus costos y complejidades.

(!) Antes de seguir estas instrucciones asegúrese de entender las Condiciones de Uso de nuestro sitio.

Afortunadamente, mis compañeros del centro de innovación habían estado realizando una investigación sobre algo similar, y me hablaron del Ionic Framework, un sistema para desarrollar aplicaciones móviles usando tecnologías web (HTML, CSS, JS/TS, ANGULARJS) etc que luego pueden implementarse tanto en Android como IOS.

Dentro de las bondades de Ionic podemos listar las siguientes:

1. Manejo de plantillas de proyecto predefinidas
2. Acceso a características específicas de hardware (bluetooth, gps, camara, etc)
3. Pre-visualizacion de las apps usando IonicView directamente en los dispositivos móviles tanto para Android como para IOS

Pero bueno, he querido comenzar con el pie derecho, configurando una estación de trabajo LINUX UBUNTU 16.04 así que aquí van algunos lineamientos básicos para comenzar:

---

#1 – NodeJS

Es necesario instalar nodeJS y npm. Para Ubuntuo 16.04 he encontrado esta guía que me ha parecido muy completa. En ella se discuten diferentes métodos. Yo elegí usar el método de nvm (node version manager) que se puede resumir en los siguientes comandos uno por uno.

Antes de iniciar vaya a https://nodejs.org/en/download/ y determine cual es la versión LTS (en nuestro caso es la 6.11)

cd
sudo apt-get update
sudo apt-get install build-essential libssl-dev
curl -sL https://raw.githubusercontent.com/creationix/nvm/v0.31.0/install.sh -o install_nvm.sh
bash install_nvm.sh
source ~/.profile
Opcionalmente: nvm ls-remote | grep Latest
nvm install  6.11
node -v
npm -v

---

#2 – Instalación de IONIC

Ahora, de acuerdo con la guía de inicio de IONIC procedemos con el siguiente comando (puede tardar muchos minutos):

npm install -g cordova ionic --verbose

Luego de unos minutos (como 15 con mi conexion 3G) y de mucho texto en la consola, podemos usar el comando ionic -v para determinar la versión que hemos instalado.

En este punto es importante crear una cuenta personal en https://apps.ionic.io/signup para poder visualizar las aplicaciones con Ionic View. Una vez creada la cuenta podemos usar el siguiente comando para que nuestra instalación de ionic quede conectada a nuestra cuenta.

ionic login

---

#3 Creación de un nuevo proyecto

(!) Antes de crear un nuevo proyecto, es importante asegurarse que su GIT local esté instalado y configurado.

Al momento de escribir este artículo, la guía de inicio hace mención de 3 tipos de proyecto: blank, tabs y sidemenu (aunque hay todo un mercado de tipos de proyecto en la red). La verdad nos gustó más el de tabs, así que usamos estos comandos:

cd
mkdir myIonicTests
cd myIonicTests
ionic start myApp tabs

Dado que ya habíamos hecho login en el paso anterior, podemos decirle que si (Y) a la pregunta de la terminal «Link this app to your Ionic Dashboard to use tools like Ionic View? (Y/n)«. Al decir que sí el sistema termina de crear el app y nos lleva al navegador de Internet a la página de ionic para crear nuevas apps para el visor. Más tarde será necesario utilizar el comando ionic link para conectar el código de nuestra app local con su correspondiente entrada en Ionic View.

(!) Notas: Algo importante de resaltar es que este template de una vez crea el proyecto como un repositorio GIT. Reconectar un repositorio GIT a nuestra cuenta GIT de preferencia es una tarea importante a  futuro, pero eso lo dejaremos para otro artículo.
Otra cosa importante es que el comando start de ionic necesitará una conexión a Internet estable para poder descargar todos los archivos, bibliotecas y dependencias necesarias.

En este punto ya podemos ejecutar el comando ionic serve para pre-visualizar el app en nuestro navegador local.

---

#4 Ejecutar la aplicación en un celular

Nótese que al crear la aplicación en el sitio web de ionic, se generó un código de identificación de la app. En la aplicación IonicViewer de Android o IOS se puede acceder con sus credenciales de ionic, o usando el código de identificación de la aplicación.

Antes de subir el código a Ionic View, necesitamos enlazarlo con nuestra nueva app; usando el comando ionic link. Se usan las flechas arriba y abajo del teclado para seleccionar el app.

Para subir el código más reciente utilizamos el comando ionic upload; luego en la aplicacion de celular Ionic View usamos la opción «Clear App Data» y luego «View App»

En una próxima entrada estaremos discutiendo cómo modificar el código.

 

 6,895 total views,  1 views today