Tutorial - Aprende NativeScript – Tutorial de Primeros Pasos

¿Qué es NativeScript?

Es un framework de código abierto diseñado para crear aplicaciones móviles nativas permitiendo a los desarrolladores a utilizar los lenguajes de programación de JavaScript, XML, CSS o mediante cualquier lenguaje que se transpila a JavaScript, como TypeScript. NativeScript soporta frameworks como Angular y Vue.

Puedes utilizar  cualquier librería de JavaScript que puedes encontrar en npm que no se base en el navegador y el DOM.

NativeScript utiliza Javascript VM para poder acceder al SDK’s nativo de Android y IOS y no solo el Webview, por lo tanto tu App va a tener mayores capacidades sobre todo en el tema de rendimiento. De esta manera puedes generar un archivo que puedes enviar a las tiendas como Play Store y App Store.

Instalar NativeScript

El CLI de NativeScript está instalado en Node. Así que vamos a necesitar tener instalado la versión más reciente de Node.js. Puedes descargarlo en este link.

NOTA: Debes tener también instalado el JDK.

Una vez instalado abrimos la consola de comandos (cmd en Windows, Terminal en Mac) del administrador y lo ejecutamos de la siguiente manera:

npm install -g nativescript

Cuando se complete la instalación, asegúrese de verificar su instalación ejecutando el comando:

tns doctor

Crear proyecto de una App con NativeScript

Vamos a crear la primera App NativeScript, usando la consola de comandos escribiendo lo siguiente:

tns create holaMundo --template nativescript-template-ng-tutorial

Si todo se ha ejecutado correctamente podemos ver en la ubicación del directorio una nueva carpeta llamada holaMundo y en la consola le saldrá algo como lo siguiente:

A continuación, nos ubicamos en la carpeta del proyecto, para que a partir de ahora siempre se ejecute desde esa ubicación.

cd holaMundo

Ejecutamos nuestra nueva App, mediante la ejecución en la terminal:

tns run android

Una vez abierto el emulador o dispositivo Android, aparecerá algo como esto:

A continuación vamos a crear una aplicación sencilla, que mostrará una imagen en el dispositivo.

Abrimos el proyecto que hemos creado en visual studio code:

En el archivo app.components.ts cambiamos el title por Hola Mundo y añadimos un alt para la imagen que queremos que se visualice en nuestro dispositivo.

Ya tenemos creada una sencilla aplicación, a continuación vamos animar nuestra imagen mediante un keyframes en el css para hacer que la imagen gire. Abrimos el archivo app.css

Y añadimos el siguiente código:

@keyframes girar{   from{transform: rotate(0);}   to{transform: rotate(360);}}Image{   animation-name: girar;   animation-duration: 3s;   animation-iteration-count: infinite;   animation-timing-function: linear;}

Finalmente se visualizará la imagen girando sobre sí misma en la pantalla.