Angular y NativeScript Instalación - Jruano · Angular y NativeScript - Instalación - - 2019...

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

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.

https://nodejs.org/es/


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

https://www.npmjs.com/


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

https://angular.io/


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.

http://localhost:4200/


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.

https://www.nativescript.org/


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://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.

https://apps.apple.com/us/app/nativescript-playground/id1263543946

https://apps.apple.com/es/app/nativescript-preview/id1264484702

https://play.nativescript.org/


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

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 Instalación - Jruano · Angular y NativeScript - Instalación - - 2019...

Documents

Transcript of Angular y NativeScript Instalación - Jruano · Angular y NativeScript - Instalación - - 2019...