Angular y Nativescript Instalacion

Angular y NativeScript Instalación
Para instalar Angular primero debemos de instalar nodeJS
Instalación nodeJS
Web: https://nodejs.org/es/
Para ello nos dirigimos a la web de node y seleccionados la versión que deseamos instalar.
Descargamos, comenzamos la instalación, haciendo click en Next.
Angular y NativeScript - Instalación - www.jruano.com - 2019

Aceptamos la licencia y hacemos click en Next.
Seguimos con click en Next.

De nuevo click en Next.
Volvemos a hacer click en Next.

Y click en Intall.
Finalizamos con click en Finish.

Abrimos la CMD y comprobamos que tenemos node instalado con:
node -v
Instalamos NPM
Web: https://www.npmjs.com/
Y seguidamente instalar NPM.
Para ello usamos el siguiente comando:
Npm install npm@latest –g
Comprobamos que lo tenemos instalado con:
npm -v

Instalación Angular
Web: https://angular.io/
Instalamos angular CLI para crear aplicaciones en Angular.
npm install -g @angular/cli
nos pedirá si queremos compartir datos anónimos sobre el uso de

Angular, elegimos s o n
Comprobamos la versión instalada para ver que se ha instalado correctamente con:
ng v

Creamos un directorio por ejemplo angular-apps
Nos dirigimos al directorio que hemos creado anteriormente y creamos nuestra aplicación
Angular donde app1 será el nombre de nuestra aplicación.
ng new app1
Nos preguntara si queremos añadir routing, diremos y puesto que lo más normal es usarlo
para poder realizar navegación entre rutas, y elegiremos un formato de estilos en nuestro caso
CSS
La cual nos creara el siguiente directorio con este contenido.

Una vez creada nuestra aplicación, entramos en el directorio que nos acaba de crear de
nuestra aplicación y arrancamos la aplicación:
cd app1
ng serve --open
Nos abrirá directamente la dirección donde se está ejecutando nuestra aplicación.
http://localhost:4200
Para parar el proceso de arranque de nuestra aplicación usamos:
Ctrl + c
Escribimos s y presionamos Enter.

Instalación Native Script
Web: https://www.nativescript.org/
Instalamos Native Script para crear aplicaciones nativas para

Android e IOS.
npm install -g nativescript
Nos pedirá si queremos compartir estadísticas de uso, escribimos Y

o n según queramos y presionamos Enter, seguidamente nos preguntará si queremos usar
bash o zsk igualmente escribimos Y o no según queramos y presionamos Enter.
Luego nos preguntara si deseamos recibir comunicaciones en nuestro correo, escribimos

nuestro correo o dejamos en blanco y pulsamos Enter.

Y ya se termina de completar la instalación.
Verificamos que se ha instalado correctamente con el comando: tns

Seguidamente tenemos que instalar los requerimientos para Android mediante el siguiente
comando:
@powershell -NoProfile -ExecutionPolicy Bypass -Command "iex ((new-object

net.webclient).DownloadString('https://www.nativescript.org/setup/win'))"
Durante la instalación nos solicitara si deseamos automatizar las instalaciones para ello
escribiremos A y pulsaremos enter.
También nos solicitara si deseamos instalar Android emulator, escribimos Y pulsamos Enter.

Reiniciamos el pc para terminar las instalaciones y comprobamos que las variables de entorno
JAVA_HOME y ANDROID_HOME están correctas ejecutando los siguientes comandos:
echo %ANDROID_HOME% y %JAVA_HOME%
Para finalizar y ver que todo lo que se ha instalado está correcto, podemos ejecutar el
comando:
tns doctor
En el caso de que quisiéramos poder probar nuestras aplicaciones en nuestro terminal

necesitaremos instalarnos las aplicaciones NativeScript Playground y NativeScript Preview en
nuestro dispositivo.
https://play.google.com/store/apps/details?id=org.nativescript.play
https://play.google.com/store/apps/details?id=org.nativescript.preview

https://apps.apple.com/us/app/nativescript-playground/id1263543946
https://apps.apple.com/es/app/nativescript-preview/id1264484702
NativeScript también nos provee de un editor online
https://play.nativescript.org/
Donde poder probar nuestras aplicaciones, si presionamos en el botón Preview podremos

probar nuestra aplicación directamente en nuestro terminal.

Nos aparecerá una nueva ventana para que escaneemos a través de la aplicación
anteriormente instalada el código QR
Con lo que iniciaremos la aplicación NativeScript Playground y escaneamos el código QR

Entonces automáticamente podremos ver la aplicación en nuestro dispositivo.
Y como vemos nos aparece en el editor nuestro dispositivo.

Si realizamos un cambio por ejemplo en el texto y guardamos.
Se muestra el resultado en nuestro terminal automáticamente.

Para crear una nueva aplicación ejecutaremos el siguiente comando en el directorio donde
tengamos nuestras aplicaciones.
tns create prueba --ng
Y como vemos si vamos al directorio de creación nos la ha creado.

Para ejecutar la aplicación nos dirigiremos al directorio de la misma
cd prueba
Y ejecutaremos el siguiente comando
tns preview
Y como vemos nos aparecerá el código QR para mediante la aplicación NativeScript Playground
podamos ver nuestra aplicación
Vamos a la aplicación y escaneamos el código QR, esta envía la aplicación a nuestro

dispositivo.

Y como podemos ver ya se nos carga automáticamente en nuestro dispositivo.
Para parar la consola hacemos Ctrl + c , escribimos s y presionamos Enter.

Para compilar la aplicación a Android usaremos el siguiente comando.
tns build android --bundle
Y al final termina generando un fichero .apk
Para compilar la aplicación a IOS usaremos el siguiente comando.
tns build ios –bundle
Pero necesitaremos tener un ordenador mac para poder compilar la solución si no, nos
producirá el siguiente error.

Para arrancar la aplicación en local usaremos el siguiente comando
tns run android --bundle
Si no tenemos ningún dispositivo y ningún emulador cargado nos dará el siguiente error.
Para ios seria el siguiente comando
tns run ios --bundle
Igualmente, al no ser un sistema mac nos aparecerá el siguiente error
Para poder tener dispositivos virtuales antes debemos de instalar Android Studio, por lo que
nos dirigimos a su web y procedemos a su descarga.
https://developer.android.com/studio

Aceptamos y descargamos.
Comenzamos la instalación haciendo click en Next.
Marcamos la opción de dispositivos virtuales Android y hacemos click en Next.

De nuevo hacemos click en Next.
Click en Install para que empiece la instalación.

Hacemos click en Next.
Y Finish para finalizar la instalación e inicializar Android estudio.
Marcamos que no queremos importar configuraciones y hacemos click en OK.

Marcamos según deseemos mandar estadísticas de uso o no a Google.
Hacemos click en Next.
Marcamos Standard y click en Next.

Elegimos el tema que más nos guste para desarrollar y click en Next.
Y hacemos click en Finish para acabar la configuración inicial.

Termina de descargar los componentes y hacemos click en Finish.
Hacemos click sobre configure para comenzar la configuración de nuestro dispositivo virtual.

Hacemos click sobre AVD Manager.
Hacemos click sobre Create Virtual Device.
Elegimos un dispositivo y hacemos click en Next.

Elegimos una imagen de sistema y hacemos click en Download.
Una vez descargada hacemos click en Finish.

Como vemos ya no aparece la palabra Download, hacemos click en Next
En la siguiente ventana instalamos primeramente Haxm

Dejamos la configuración por defectoy hacemos click en Next.
Hacemos click en Finish.

Y hacemos click en Finish.
Y como vemos ya aparece un nuevo dispositivo para inicializarlo hacemos click sobre el botón
de play.

Con lo que nos lanzara un emulador del terminal.
Una vez creado nuestro terminal virtual para ver los dispositivos que tenemos escribimos el
siguiente comando:
tns devices android

Y ya podemos arrancar nuestra aplicación en local apuntando al dispositivo que hemos
agregado en Android Studio con el comando
tns run Android --bundle
Y como vemos ahora si se muestra en el dispositivo virtual

Para parar la reproducción del dispositivo virtual hacemos click en Stop.

Angular y Nativescript Instalacion

Cargado por

Copyright:

Formatos disponibles

Angular y Nativescript Instalacion

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Angular y Nativescript Instalacion

Cargado por

Copyright:

Formatos disponibles

Angular y NativeScript Instalación

Para instalar Angular primero debemos de instalar nodeJS

Descargamos, comenzamos la instalación, haciendo click en Next.

Angular y NativeScript - Instalación - www.jruano.com - 2019

Seguimos con click en Next.

Angular y NativeScript - Instalación - www.jruano.com - 2019

Volvemos a hacer click en Next.

Angular y NativeScript - Instalación - www.jruano.com - 2019

Finalizamos con click en Finish.

Angular y NativeScript - Instalación - www.jruano.com - 2019

Y seguidamente instalar NPM.

Para ello usamos el siguiente comando:

Npm install npm@latest –g

Comprobamos que lo tenemos instalado con:

Angular y NativeScript - Instalación - www.jruano.com - 2019

Instalamos angular CLI para crear aplicaciones en Angular.

npm install -g @angular/cli

nos pedirá si queremos compartir datos anónimos sobre el uso de

Comprobamos la versión instalada para ver que se ha instalado correctamente con:

Angular y NativeScript - Instalación - www.jruano.com - 2019

La cual nos creara el siguiente directorio con este contenido.

Angular y NativeScript - Instalación - www.jruano.com - 2019

Nos abrirá directamente la dirección donde se está ejecutando nuestra aplicación.

Para parar el proceso de arranque de nuestra aplicación usamos:

Escribimos s y presionamos Enter.

Angular y NativeScript - Instalación - www.jruano.com - 2019

Instalamos Native Script para crear aplicaciones nativas para

npm install -g nativescript

Nos pedirá si queremos compartir estadísticas de uso, escribimos Y

Luego nos preguntara si deseamos recibir comunicaciones en nuestro correo, escribimos

Angular y NativeScript - Instalación - www.jruano.com - 2019

Verificamos que se ha instalado correctamente con el comando: tns

Angular y NativeScript - Instalación - www.jruano.com - 2019

@powershell -NoProfile -ExecutionPolicy Bypass -Command "iex ((new-object

Angular y NativeScript - Instalación - www.jruano.com - 2019

echo %ANDROID_HOME% y %JAVA_HOME%

En el caso de que quisiéramos poder probar nuestras aplicaciones en nuestro terminal

Angular y NativeScript - Instalación - www.jruano.com - 2019

NativeScript también nos provee de un editor online

Donde poder probar nuestras aplicaciones, si presionamos en el botón Preview podremos

Angular y NativeScript - Instalación - www.jruano.com - 2019

Con lo que iniciaremos la aplicación NativeScript Playground y escaneamos el código QR

Angular y NativeScript - Instalación - www.jruano.com - 2019

Y como vemos nos aparece en el editor nuestro dispositivo.

Angular y NativeScript - Instalación - www.jruano.com - 2019

Se muestra el resultado en nuestro terminal automáticamente.

Angular y NativeScript - Instalación - www.jruano.com - 2019

tns create prueba --ng

Y como vemos si vamos al directorio de creación nos la ha creado.

Angular y NativeScript - Instalación - www.jruano.com - 2019

Y ejecutaremos el siguiente comando

Vamos a la aplicación y escaneamos el código QR, esta envía la aplicación a nuestro

Angular y NativeScript - Instalación - www.jruano.com - 2019

Para parar la consola hacemos Ctrl + c , escribimos s y presionamos Enter.

Angular y NativeScript - Instalación - www.jruano.com - 2019

tns build android --bundle

Y al final termina generando un fichero .apk

Para compilar la aplicación a IOS usaremos el siguiente comando.

tns build ios –bundle