Tutorial - Aprende NativeScript – Tutorial de Primeros Pasos

Duración:
15'
Nivel:
principiante
Curso relacionado:
NativeScript

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

https://www.imaginaformacion.com/tutoriales/tutorial_83_imagen_1.jpg

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:

https://www.imaginaformacion.com/tutoriales/tutorial_83_imagen_2.jpg

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:

https://www.imaginaformacion.com/tutoriales/tutorial_83_imagen_3.jpg

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:

https://www.imaginaformacion.com/tutoriales/tutorial_83_imagen_4.jpg

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.

https://www.imaginaformacion.com/tutoriales/tutorial_83_imagen_5.jpg

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

https://www.imaginaformacion.com/tutoriales/tutorial_83_imagen_6.jpg

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

https://www.imaginaformacion.com/tutoriales/tutorial_83_imagen_7.jpg

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

Solicita información sobre NativeScript

En Imagina llevamos más de 13 años ofreciendo formación para empresas, estamos especializados en el área técnica y de ofimática, adaptando nuestras formaciones a vuestras necesidades. Déjanos tus datos, y nos pondremos en contacto contigo para informarte sobre el curso que mejor se ajuste a lo que buscas. Cuéntanos tus necesidades y podremos asesorarte sobre la modalidad que mejor se adapte: En directo, En directo a Medida u Online.

España