(+34) 673 566 782 - (+34) 960 653 052 formacion@imaginagroup.com

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.

Instalar la versión más reciente de Node.js

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:

En la consola podemos una nueva carpeta llamada holaMundo

 

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

Se deberá abrir tu emulador o dispositivo Android.Y aparecerá algo como esto:

Imagen del emulador o dispositivo Android

 

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:

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 una etiqueta para la imagen que queremos que se visualice en nuestro dispositivo.

En el archivo app.components.ts cambiamos el title por Hola Mundo

 

En nuestro dispositivo debe aparecer lo siguiente:

Mensaje Hola Mundo 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

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;
}


Añadimos el anterior código en app.css

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

Si quieres aprender más recuerda que tiene estos cursos con nosotros…

Uso de cookies: Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies

ACEPTAR
Aviso de cookies