Hello world Nativescript!

CLI de Nativescript

El CLI de Nativescript es una colección de herramientas en línea de comandos para construir y ejecutar aplicaciones Nativescript. Para comprender lo que estamos instalando, el CLI de Nativescript es un paquete npm instalado en nodejs.

Las aplicaciones Nativescript constan de:

• Ficheros XML: el layout de la página (distribución de elementos) y los controles de UI
• Ficheros Javascript: los eventos y la lógica de negocio
• Ficheros CSS: el estilo de las páginas

El CLI coge los ficheros XML, JS, CSS y construye una aplicación que puede desplegarse en un simulador, en un emulador o en un dispositivo real. El CLI también se encarga de hacer el despliegue y ejecución de la aplicación.

El CLI de nativescript se lanza ejecutando el comando tns (que viene de Telerik NativeScript). El primer parámetro de tns es un comando que indica lo que tiene que hacer el CLI. La sintaxis de tns es:

    tns <command> [command parameters] [--options]

Comandos de tns:

• doctor : chequea que la instalación de Nativescript está correcta
• info : muestra información sobre Nativescript: versión de Nativescript instalada, versión de Android, iOS y core-modules (si estamos en el directorio de un proyecto). En todos los casos indica si existe una versión más moderna para actualizar.
• proxy : muestra la configuración del proxy (si existe)
• create : crea un nuevo proyecto Nativescript
• platform add <platform> : configura el proyecto actual para una plataforma, ios o android
• platform list : muestra todas las plataformas configuradas en el proyecto actual
• platform remove <platform> : elimina una plataforma configurada del proyecto actual
• platform update <platform> : actualiza una plataforma configurada en el proyecto actual
• prepare <platform> : copia contenido especial desde el directorio app al directorio de la plataforma
• build <platform> : construye el proyecto actual para una plataforma
• deploy <platform> : despliega el proyecto actual a un dispositivo físico o emulador
• run <platform> : ejecuta el proyecto actual en un dispositivo físico o emulador
• debug <platform> : depura el proyecto actual en un dispositivo físico o emulador
• install : instala todas las dependencias del proyecto especificadas en el fichero package.json del directorio del proyecto
• appstore : muestra las aplicaciones registradas en appstore (sólo se puede ejecutar en OSX)
• appstore upload : sube el proyecto actual al appstore (sólo se puede ejecutar en OSX)
• device : muestra todos los dispositivos físicos o virtuales disponibles
• device log : abre un stream de log para un dispositivo
• update : actualiza la aplicación con las últimas versiones de core-modules y las plataformas instaladas

En resumen, el CLI nos permite:

• Crear el esqueleto de la aplicación
• Añadir plataformas (iOS y/o Android) a la aplicación
• Construir la aplicación (.apk para Android, .ipa para iOS)
• Desplegar la aplicación en un simulador, emulador o dispositivo
• Ejecutar y depurar la aplicación en un emulador o simulador
• Ejecutar la aplicación en un dispositivo conectado al ordenador

Esqueleto de la aplicación

El primer paso para tener una aplicación Nativescript es construir el esqueleto de la aplicación, que consta de una serie de directorios (con una estructura fija) y una serie de ficheros base.

No tenemos que crear ese esqueleto a mano, el CLI se encarga de crearlo a partir de unas plantillas que se descarga cuando creamos el proyecto. Estas plantillas son paquetes npm disponibles en http://www.npmjs.com (muchas de estas plantillas comienzan con tns-template).

Para lanzar el CLI de Nativescript, tenemos que abrir un 'Command Prompt' o un 'Powershell' en Windows, o bien, un 'terminal' en MacOSX.

Ir al directorio base donde tengamos todos los proyectos y ejecutar el comando:

 tns create HelloWorld

donde HelloWorld es el nombre de la aplicación.

Este comando crea un subdirectorio llamado HelloWorld en el directorio donde lo hemos ejecutado, y dentro de este subdirectorio, crea la siguiente estructura:

    /HelloWorld

        /app

        /hooks

        /node_modules

        /platforms

       package.json

Con este comando hemos creado un esqueleto de aplicación utilizando una plantilla por defecto, pero podríamos haber utilizado otra de las plantillas que existen en el repositorio npm. Para ello, tendríamos que haber añadido el parámetro: --template. Por ejemplo, para crear una aplicación con otro template (se pueden buscar templates en www.npmjs.com, pero lo habitual es partir del template por defecto):

    tns create EmptyApp --template tns-template-xxxxx

Plataformas

Nativescript soporta dos plataformas: iOS y Android. Cuando creamos el proyecto nuevo, el CLI no incluye ninguna plataforma al proyecto nuevo. Sin embargo, es necesario añadir al menos una plataforma a nuestro proyecto, para poder ejecutarlo en un simulador, emulador o dispositivo. Añadir una plataforma a nuestro proyecto se hace con el CLI.

La decisión de qué plataforma añadir es una cuestión de preferencias, pero si vamos a desarrollar en Windows, entonces sólo tenemos una alternativa: Android, ya que sólo podemos desarrollar para iOS en MacOSX. En cualquier caso, siempre podemos empezar con Windows/Android, y más adelante, en un Mac, añadir la plataforma iOS y compilar el proyecto para iOS. Así que este problema es secundario.

Para añadir plataformas a nuestro proyecto

    tns platform add android

    tns platform add ios

Estos comandos crean un nuevo subdirectorio (android o ios) debajo de HelloWorld/platforms, que contiene las librerías de runtime para cada plataforma.

Actualización de Nativescript

Nativescript se actualiza con frecuencia (cada mes o menos, tenemos actualizaciones). Para saber qué versión de Nativescript tenemos instalada:

    tns --version

Para actualizar Nativescript a la última versión:

    npm install -g nativescript

Una vez actualizada la versión de Nativescript, tenemos que actualizar los ficheros de runtime de cada plataforma y los core-modules de Nativescript:

    tns update

Este comando actualiza todo el proyecto. Si queremos actualizar por ejemplo una plataforma, haremos lo siguiente:

    tns remove <platform>

    tns add <platform>

Ejecución de la aplicación

Para ejecutar la aplicación:

    tns run android --emulator

    tns run ios --emulator

El CLI compila el código Nativescript (XML, JS y CSS) y lo enlaza con el runtime de la plataforma correspondiente, generando una aplicación.

El comando run construye la aplicación, genera el fichero APK ó IPA, lo despliega en el emulador y lo ejecuta. Este comando tarda un buen rato en poner en marcha la aplicación en el emulador (minutos en el caso de Android, dependiendo del equipo).

Flujo de trabajo

El comando run realiza todo el proceso, pero a veces es necesario ejecutar los pasos por separado.

Para construir la aplicación:

    tns build ios

    tns build android

El comando build enlaza el código de la aplicación con los módulos core y con el runtime de Nativescript y produce la aplicación nativa para iOS o Android.

El comando run, e incluso el comando build, tardan bastante tiempo en realizar su trabajo, y parece que desarrollar con Nativescript va a resultar un proceso engorroso, perdiendo gran parte del tiempo esperando a que la aplicación se construya y se lance en el emulador cada vez que hacemos un cambio en el código. Para resolver este problema, tenemos el comando livesync, que permite inyectar el código directamente en la aplicación que está corriendo en el emulador:

    tns livesync ios --emulator

    tns livesync android --emulator

La primera vez que se ejecuta el comando livesync, el CLI comprueba si la aplicación se ha construido y si está ejecutándose. Si no es así, el CLI la construye y la ejecuta. Si se vuelve a ejecutar el comando livesync de nuevo, el CLI busca los cambios en el código y sincroniza los cambios. Cada vez que hacemos un cambio en el código, tenemos que ejecutar livesync para que se sincronice.

Para evitar estar lanzando el comando livesync continuamente, existe una opción a este comando --watch para monitorizar continuamente los cambios en el código de la aplicación:

    tns livesync ios --emulator --watch

    tns livesync android --emulator --watch

A partir de la versión 3 de Nativescript, el comando run ya hace el trabajo equivalente a livesync y watch. Por tanto, simplemente tenemos que hacer run, no es necesario el comando livesync ni la opción --watch.

Aplicación vacía

El comando tns create crea una aplicación con cierta funcionalidad. No es mucho, pero sí tiene algunas cosas. Normalmente, lo que queremos es empezar nuestra aplicación desde cero, sin el código de ejemplo que mete el template por defecto. Podríamos utilizar el template tns-template-blank con la opción --template. Sin embargo, desde la versión 3, este template ha quedado obsoleto, y por tanto, no se recomienda usarlo.

Yo recomiendo vaciar el proyecto que nos crea por defecto tns create, y así partimos de una aplicación vacía. Para ello, podemos vaciar los siguientes ficheros:

• app/app.css, se recomienda dejar la línea:
  @import 'nativescript-theme-core/css/core.light.css';
• app/app.js
• main-page.js
• main-page.xml

Uso de Genymotion en Android

Una de las críticas habituales en el desarrollo para la plataforma Android es la lentitud en el arranque y recarga del emulador que viene con el SDK de Android. Si hemos seguido paso a paso lo que se indica en este artículo ya lo habremos podido comprobar: pueden pasar varios minutos desde que lanzamos la aplicación hasta que realmente se ejecuta en el emulador. Además, la interacción con el emulador también es bastante lenta y pesada.

Pero tenemos una alternativa: genymotion, un emulador Android mucho más ligero y rápido que el del SDK. Genymotion es gratuito para uso personal.

Para lanzar una aplicación Narivescript en genymotion, simplemente tenemos que lanzar un emulador genymotion y ejecutar el comando:

    tns run android --emulator

y la aplicación se lanzará en genymotion.