UNIVERSIDAD TECNOLOGICA SANTA CATARINA

TECNOLOGIAS DE LA INFORMACION Y COMUNICACIÓN

DESARROLLO MOVIL MULTIPLATAFORMA

MAESTRO: GERARDO ARTURO PRUNEDA AVILA

MELANNIE ALESSANDRA SEGOVIA SOLIS

MICHELLE SARAHÍ MARTÍNEZ BOLAÑOS

RAUL GREGORIO GONZÁLEZ ELIGIO

JOSUÉ CARDONA VELÁZQUEZ

JOSÉ RODOLFO GARCÍA CÁRDENAS

5A

2DO PARCIAL

VIERNES 21 DE FEBRERO 2020

 ÍNDICE
NODE.JS ................................................................................................................. 3
Ventajas ............................................................................................................... 3
DESCARGAR.......................................................................................................... 3
INSTALACION ........................................................................................................ 4
Instalación de NodeJS en Windows ..................................................................... 4
Instalar NodeJS en Linux ..................................................................................... 5
Instalar NodeJS en Mac ....................................................................................... 5
Probando los primeros comandos NodeJS .......................................................... 6
MODULOS O APIS ................................................................................................. 7
INTERFAZ ............................................................................................................... 8
EJEMPLOS ............................................................................................................. 8
Angular.Js ............................................................................................................... 9
Ventajas ............................................................................................................... 9
DESCARGAR........................................................................................................ 10
INSTALACION .........................................................Error! Bookmark not defined.
 NODE.JS

Node.js es un código abierto de JavaScript para la creación de aplicaciones de

red. Permite a los desarrolladores (programadores) ejecutar el código en el lado
del servidor y generar aplicaciones web de forma altamente optimizada.

Ventajas
 Velocidad (se ejecuta en el motor JS de Google).
 Paradigma de E / S sin bloqueo.
 Transmisión de datos (solicitudes y respuestas HTTP como un solo evento).
 Mismo lenguaje (javascript), tanto en el cliente como en el servidor.
 Consultas de bases de datos unificadas (formato JSON).
 Codificación fácil y rápida.
 Buena gestión de paquetes gracias a NPM (y Yarn).
 Capacidad del servidor proxy.
 Ciclos de desarrollo rápidos.

DESCARGAR
Lo primero que vamos hacer es descargar Node.js desde su página oficial
Descarga Node.js. Al momento de escribir este tutorial la versión recomendada es
la 8.11.2 que es una versión LTS.

Una vez descargado el archivo procedemos con la instalación, que no es más que
seguir el wizard y dar Next.

Mencionar que conjuntamente con Node.js se va instalar el gestor de paquetes

NPM.
INSTALACIÓN

Instalación de NodeJS en Windows

Si estás en Windows, al pulsar sobre Install te descargará el instalador para este
sistema, un archivo con extensión "msi" que como ya sabes, te mostrará el típico
asistente de instalación de software.
Una vez descargado, ejecutas el instalador y ¡ya lo tienes!

A partir de ahora, para ejecutar "Node" tienes que irte a la línea de comandos de
Windows e introducir el comando "node".

Entonces entrarás en la línea de comandos del propio NodeJS donde puedes ya

escribir tus comandos Node.

Instalar NodeJS en Linux

En la página de instalación de NodeJS te ofrecen los comandos para instalar Node
en Linux. Son un par de comandos sencillos, pero depende de tu distro, así que es
recomendable que te documentes allí. En este caso instalamos NodeJS 6 en
Ubuntu 16.04. Para ello he usado los siguientes comandos, a ejecutar uno
después del otro.

Con el primer comando obtienes el instalador y con el segundo comando haces la

instalación propiamente dicha. Luego puedes verificar la instalación con el
comando "node -v" y te debería salir la versión que se ha instalado en tu máquina.

Instalar NodeJS en Mac

Ahora para instalar NodeJS sobre Mac es tan sencillo como acceder a la página
de Node y descargar el instalador. Se instala como cualquier otra aplicación, tanto
el propio NodeJS como npm.

Alternativa con Homebrew: La instalación en Mac es muy sencilla si cuentas con el

gestor de paquetes "homebrew". Es tan fácil como lanzar el comando:

brew install nodejs

Durante la instalación es posible que te solicite incluir en tu sistema un paquete de

utilidades por línea de comandos de xcode, si es que no lo tienes ya instalado en
tu OS X. Si se produce un error durante la instalación prueba a hacer un update de
homebrew.
brew update

Probando los primeros comandos NodeJS

En NodeJS la consola de Node puedes escribir instrucciones Javascript. Si lo deseas,
puedes mandar mensajes a la consola con console.log() por lo que ésta podría ser una
bonita instrucción para comenzar con node:

Te mostrará el mensaje "hola mundo" en la consola.

Podemos ver en la siguiente imagen un par de mensajes a la consola de Node

que podemos utilizar para comenzar nuestro camino.
MODULOS O APIS
Así como a lo que las personas se han acostumbrado al trabajar con Apache,
usted puede expandir la funcionalidad de Node instalando módulos. No obstante,
los módulos que usted puede utilizar con Node mejoran en gran medida el
producto, tanto, que es poco probable que haya alguien que utilice Node sin
instalar por lo menos algunos módulos. Así de importantes se han tornado los
módulos, hasta el punto de convertirse en parte esencial del producto completo.
En el aparte de Recursos, incluyo un enlace a la página de módulos, donde están
listados y disponibles todos los módulos posibles. Como una muestra rápida de las
posibilidades, estos incluyen un módulo para escribir páginas creadas
dinámicamente (como PHP), un módulo para facilitar el trabajo con MySQL, un
módulo para ayudar con WebSockets, y un módulo para asistir en el análisis de
texto y de parámetros, entre docenas de módulos disponibles. No entraré en
detalles sobre los módulos, porque como mencioné, este sólo es un artículo de
visión general que le ayuda a entender si Node es algo que usted debería buscar
más adelante, pero es posible, si decide utilizarlo más adelante, que
definitivamente también vaya a trabajar con los módulos disponibles.
Adicionalmente, Node presenta el Node Package Module, que es una forma
integrada de instalar y administrar los módulos Node que esté usando. Este
maneja automáticamente dependencias, de manera que usted puede estar
seguro(a) de que cualquier módulo que usted desee instalar se instalará
correctamente con todas sus partes necesarias. También sirve como una forma
para publicar sus propios módulos en la comunidad Node, si usted opta por
vincularse y escribir su propio módulo. Piense en el NPM como una forma fácil
para expandir la funcionalidad de Node sin tener que preocuparse por
desconfigurar su instalación Node. De nuevo, si usted opta por continuar
avanzando en Node, el NPM será parte vital de su solución Node.
INTERFAZ

EJEMPLOS
1. Netflix
El gigante de la televisión en streaming eligió Node.js por tres razones: la
facilidad con que los desarrolladores de JS lo aprenden, el hecho de que
eliminó la necesidad de escribir código dos veces y el alto rendimiento.
También con Node.js disminuyeron los tiempos de compilación y habilitaron
la personalización del usuario. Como resultado, el equipo de Netflix ha
mejorado la velocidad de carga de la aplicación en un 70%.
2. PayPal
Uno de los factores más importantes para la decisión fue la posibilidad de
derribar la barrera del idioma entre la ingeniería: el uso del mismo idioma en
el servidor y en el lado del cliente mejoró la comunicación interna y la
comprensión del producto en su conjunto. Según la empresa, su aplicación
Node.js permite reducir en un 40% los archivos y un 33% el código. Así, el
tiempo de respuesta se mejoró un 35%, lo que resultó en que las páginas
se cargaban 200 ms más rápido.
3. Uber
Node.js es ideal para sistemas distribuidos que llevan a cabo muchas
solicitudes de red con el objetivo de procesar rápidamente grandes
cantidades de información
Además dispone de un análisis de errores muy intuitivo y con rápido
despliegue de código y dispone constante mejora tecnológica debido a la
comunidad de código abierto. En consecuencia, Uber puede procesar más
de 2 millones de llamadas de procedimiento remoto (RPC) por 1 segundo.
ANGULAR.JS
AngularJS (comúnmente llamado Angular.js o AngularJS 1), es
un framework de JavaScript de código abierto, mantenido por google, que se
utiliza para crear y mantener aplicaciones web de una sola página. Su objetivo es
aumentar las aplicaciones basadas en navegador con capacidad de Modelo Vista
Controlador (MVC), en un esfuerzo para hacer que el desarrollo y
las pruebas sean más fáciles.

La biblioteca lee el HTML que contiene atributos de las etiquetas personalizadas

adicionales, entonces obedece a las directivas de los atributos personalizados, y
une las piezas de entrada o salida de la página a un modelo representado por las
variables estándar de JavaScript. Los valores de las variables de JavaScript se
pueden configurar manualmente, o recuperados de los recursos JSON estáticos o
dinámicos.

AngularJS se puede combinar con el entorno en tiempo de ejecución Node.js,

el framework para servidor Express.js y la base de datos MongoDB para formar el
conjunto MEAN.

Ventajas
 Disociar la manipulación del DOM de la lógica de la aplicación. Esto mejora
la capacidad de prueba del código.
 Considerar a las pruebas de la aplicación como iguales en importancia a la
escritura de la aplicación. La dificultad de las pruebas se ve reducida
drásticamente por la forma en que el código está estructurado.
 Disociar el lado del cliente de una aplicación del lado del servidor. Esto
permite que el trabajo de desarrollo avance en paralelo, y permite la
reutilización de ambos lados.
 Guiar a los desarrolladores a través de todo el proceso del desarrollo de
una aplicación: desde el diseño de la interfaz de usuario, a través de la
escritura de la lógica del negocio, hasta las pruebas.

Angular sigue el patrón MVVM (Model View View-Model) de ingeniería de software

y alienta la articulación flexible entre la presentación, datos y componentes
lógicos. Con el uso de la inyección de dependencias, Angular lleva servicios
tradicionales del lado del servidor, tales como controladores dependientes de la
vista, a las aplicaciones web del lado del cliente. En consecuencia, gran parte de
la carga en el backend se reduce, lo que conlleva a aplicaciones web mucho más
ligeras.
DESCARGAR
Si quieres trabajar con AngularJS tienes que incluir el script del framework en tu
página. Esto lo puedes hacer de varias maneras, o bien te descargas la librería
por completo y la colocas en un directorio de tu proyecto, o bien usas un CDN
para traerte la librería desde un servidor remoto. En principio es indiferente a nivel
didáctico, así que nosotros vamos a comenzar del modo más sencillo, que es
utilizar el CDN.

Accedes a la página de AngularJS: https://angularjs.org/

Pulsas el botón de descarga y encontrarás diversas opciones. Escoges la versión

del framework (si es que te lo permite) y que esté minimizada (minified). Luego
encontrarás un campo de texto donde está la URL de la librería (esa URL está
marcada con las siglas "CDN" al lado). Ya sabes que el CDN te ofrece un
contenido, en este caso un script Javascript, que está alojado en otro servidor,
pero que lo puedes usar desde tu página para mejorar la entrega del mismo.
INSTALACIÓN

Windows

Lo siguiente es descargar Bootstrap de su web oficial, por su simpleza y distintas

posibilidades de descarga no voy a entrar en detalles de como se descarga,
únicamente, al final de la descarga, deberemos tener los
ficheros: bootstrap.css y bootstrap-theme.css.

Lo siguiente que vamos hacer es crear un ejemplo que cargue todo, para ello nos
crearemos una carpeta nueva, por ejemplo c:na, y ahí nos crearemos un
fichero server.js con el siguiente contenido:

var connect = require(‘connect’),

serveStatic = require(‘serve-static’);

var app = connect();

app.use(serveStatic(“.”));
app.listen(5000);
Y desde la consola abierta usando ‘Node.js command prompt’ escribimos:

c:

cd c:na

node server.js

A partir de este momento tendremos un pequeño servidor NodeJS oyendo en el

puerto 5000.

En caso que nos muestre error de que no encuentra ‘connect’ o ‘serve-static’,

deberemos hacer:

c:

cd c:na

npm link connect

npm link serve-static

node server.js

Nos crearemos un nuevo directorio para nuestra prueba, en c:nae1, y dentro

coparemos angular.js, bootstrap.css y bootstrap-theme.css, crearemos un nuevo
fichero llamado index.html con el siguiente contenido:

<!DOCTYPE html>
<html ng-app>
<head>
http://angular.js
<link href=”bootstrap.css” rel=”stylesheet” />
<link href=”bootstrap-theme.css” rel=”stylesheet” />
</head>
<body>

{{“AngularJS”}}

Bootstrap

</body>
</html>
Si abrimos un navegador y escribimos http://localhost:5000/e1 y vemos una web
simple con un botón “bonito”, y con la salvedad que a pesar de haber
escrito {{“AngularJS”}} vemos AngularJS significa que tenemos NodeJS +
AngularJS + Bootstrap correctamente instalados y listos para ser usados.

MÓDULOS O APIs
Los módulos vienen a ser contenedores de diferentes partes de nuestra
aplicación. Podemos definir la cantidad de módulos que nos sean necesarios para
desacoplar totalmente el código, sea por características, por funcionalidad, por
componente reusable, etc. Es bueno tener en cuenta que cuanto más
desacoplado tengamos nuestro código será mucho más fácil mantenerlo y
escalarlo.
Un módulo se declara de la siguiente manera

Como vemos es muy sencillo declarar un módulo, simplemente usamos el

método module de angular, asignamos el nombre que lo identificará y
seguidamente declaramos las dependencias, ¿Cómo? ¿Dependencias?, Así es,
dentro de los corchetes podemos declarar las múltiples dependencias que tenga
nuestro módulo. Las rutas de AngularJS, pues bien, vamos a tener que indicarle a
nuestro módulo la dependencia del cual va hacer uso, y en ese caso
será “ngRoute”, veamos como quedaría.

angular.module('Nombre_del_modulo', ['ngRoute']);

Las dependencias que inyectemos dentro de los módulos u otros componentes,

pueden ser funcionalidades que el mismo AngularJS nos brinda o alguna
funcionalidad que nosotros mismos desarrollemos. Si deseamos añadir más de
una dependencia, bastará con separarlos por comas, de la siguiente manera.

angular.module('Nombre_del_modulo',
['dependencia1','dependencia2','dependencia3']);

Si bien es cierto hemos definido o declarado un módulo en la parte de javascript,

nos falta aún un paso importante para que realmente funcione, y es enlazarlo a la
vista en la cual trabajaremos. Para asociar el módulo declarado a nuestra vista
solo basta con usar la directiva ng-app de la siguiente manera.

<!DOCTYPE html>
<html lang="es" ng-app="Nombre_del_modulo">
<head>
<meta charset="UTF-8">
<title>AngularJS</title>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0/an
gular.min.js"></script>
<script src="app.js"></script>
</head>
<body>
<h1>Hola AngularJS desde @frontendlabs</h1>
</body>
</html>

Como vemos, añadimos la directiva ng-app en la etiqueta html y le indicamos que

módulo es el que trabajará en la vista, importamos el framework AngularJS y
también añadimos el archivo donde tengamos guardado nuestro módulo, en este
caso es app.js. Algo a tener en cuenta es que la directiva “ng-app” podemos
declararla en cualquier etiqueta de nuestro código, solo basta añadirlo por encima
del ámbito donde vayamos a trabajar, podríamos declararlo en la etiqueta “body” u
otra capa contenedora que creamos necesario.

Agregar un controlador

Agregue un controlador a su aplicación y consulte el controlador con la ng-

controllerdirectiva:

Ejemplo
AngularJS Global API
La API global de AngularJS es un conjunto de funciones globales de JavaScript
para realizar tareas comunes como:

 Comparar objetos
 Iterando objetos
 Convertir datos

Se accede a las funciones de la API global utilizando el objeto angular.A

continuación, se muestra una lista de algunas funciones API comunes:

angular.lowercase ()

Ejemplo
INTERFAZ
Crear una interfaz para definir el tipo de tus objetos

Más o menos lo mismo podemos conseguir con una interfaz de TypeScript. Es

algo que ya hemos explicado en el artículo de Interfaces TypeScript. Pero en
resumen, puedes definir una interfaz de clientes de esta manera.

interface Cliente {
nombre: String;
cif: String;
direccion: String;
creado: Date;
}
Luego podemos crear una variable asignando la interface como si fuera un tipo.

let cliente: Cliente;

A partir de aquí el editor nos avisará cuando el valor asignado no cumpla la
interfaz.
Get Started !!

Crearemos una carpeta llamada interfaces y adentro agregaremos un archivo

llamado info-pagina.interface.ts es aqui donde crearemos nuestra interfaz.

2. Generaremos nuestra interfaz apartir de nuestro archivo. json este se encuentra

en la carpeta assets / data y se llama data-pagina-json.
3. Lo que haremos con este archivo JSON será pegarlo en esta herramienta
llamada https://app.quicktype.io/?l=ts una vez abierto el link elegiremos la opción
para convertir Json a typescript y pegaremos nuestro archivo, activaremos la
opción de solo generar interfaz y agregaremos el nombre , a continuación
elegiremos las propiedades opcionales.

4. Una vez hecho esto lo pegaremos en nuestra interfaz donde veremos que las
propiedades tienen un? y su tipo de dato, esto es con el fin de que sea opcionales.

5. Importaremos nuestra interfaz en nuestro servicio y agregaremos a la variable

info y a la resp el tipo de dato, en este caso infPag el cual es el nombre de la
interfaz
6. Ahora solo falta utilizar nuestro servicio en el componente que necesitamos
para ello, no olvides importar el servicio e injectar el servicio en el constructor de la
siguiente forma.
7. Una vez echo esto ya podemos usar este servicio en nuestro archivo .html
interpolando de la siguiente forma {{infopag.info.titulo}}.

Nota: *infopag es el nombre que hemos injectado en el constructor del

componente a utilizar. Info es el objeto de tipo interface en cual se encuentra en
nuestro servicio y nos permite guardar nuestros datos y título es el tipo de
propiedad de nuestro objeto. *

Con estos pocos pasos hemos creado una interfaz sencilla para un servicio
angular de tal forma que nos permita obtener sus propiedades al momento de
llamar al servicio.