Tutorial NativeScript para principiantes: Crea tu primera app

Aprender NativeScript desde cero

Bienvenido a este tutorial de NativeScript para principiantes. En este tutorial, te guiaremos paso a paso para que puedas crear tu primera aplicación móvil nativa utilizando NativeScript. Aprenderás cómo configurar tu proyecto, ejecutarlo en un emulador o dispositivo Android, y crear una aplicación sencilla que muestra una imagen en la pantalla. No se requieren conocimientos previos de desarrollo móvil, ¡así que prepárate para sumergirte en el emocionante mundo de NativeScript y comenzar a construir tus propias aplicaciones móviles nativas!

Además, si deseas seguir formándote te recomendamos que consultes la página de nuestro curso de 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.

Cómo 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.

Mostrar una imagen en nuestra aplicación

Para crear una aplicación sencilla que muestre una imagen en un dispositivo utilizando NativeScript, sigue estos pasos:

Paso 1

En la carpeta de tu proyecto (holaMundo), abre el archivo app.component.html ubicado en la carpeta src/app.

Paso 2

Elimina todo el contenido del archivo y agrega el siguiente código:

<StackLayout>
<Image src="res://logo" stretch="aspectFit"></Image>
</StackLayout>

En este código, estamos utilizando un StackLayout para contener nuestra imagen. Luego, estamos agregando un elemento Image con el atributo src establecido en "res://logo". Esto hará referencia a una imagen llamada "logo" ubicada en la carpeta de recursos del proyecto.

Paso 3

Ahora, vamos a agregar la imagen en la carpeta de recursos. En la raíz de tu proyecto, crea una carpeta llamada "res". Dentro de la carpeta "res", crea otra carpeta llamada "drawable".

Paso 4

Copia la imagen que deseas mostrar en el dispositivo en la carpeta "drawable". Asegúrate de que la imagen tenga el nombre "logo.png".

Paso 5

Ahora, puedes ejecutar la aplicación en tu emulador o dispositivo Android utilizando el siguiente comando en la terminal:

tns run android

Esto compilará y ejecutará la aplicación en tu emulador o dispositivo Android. Deberías poder ver la imagen que has agregado en la pantalla de tu dispositivo.

¡Y eso es todo! Has creado una aplicación NativeScript simple que muestra una imagen en un dispositivo Android. Puedes explorar más funcionalidades y personalizar la aplicación según tus necesidades.

Hacer que la imagen gire

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.

Sigue aprendiendo NativeScript

En resumen, hemos creado una aplicación básica utilizando NativeScript que muestra una imagen en un dispositivo Android, además de hacer que gire. Este es solo el comienzo de las muchas posibilidades que ofrece el desarrollo con NativeScript. Si estás interesado en aprender más sobre cómo crear aplicaciones móviles nativas utilizando JavaScript y TypeScript, te invitamos a consultar nuestro curso de NativeScript. En este curso, aprenderás conceptos fundamentales, técnicas avanzadas y buenas prácticas para el desarrollo de aplicaciones móviles. ¡No pierdas la oportunidad de expandir tus habilidades y crear experiencias móviles sorprendentes con NativeScript!