¿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.