http://upamsite.azurewebsites.net/rib/movil2.

pdf

MI Ignacio Huitzil Velasco 1

WEB APPS
Por MI Ignacio Huitzil Velasco
PTC Universidad Politécnica de Amozoc Pue.
ignacio.huitzil@upamozoc.edu.mx
ignacio.h.velasco@gmail.com

MI Ignacio Huitzil Velasco 2

Contenido
• Web app
• ¿Cómo funciona internet?
• Arquitectura cliente-servidor
• Arquitectura cliente-servidor 3 capas
• Tecnologías C-S y Servidores Dinámicos
• Metodología tradicional de desarrollo
• Modelo Vista Controlador
• MVC
• ¿Qué es un framework?
• Sailsjs

MI Ignacio Huitzil Velasco 3

Contenido
• MVC herramientas que utilizaremos
• Primer practica instalar sailsjs
• Pruebas de versión e instalación
• Crear Mi primer proyecto y API
• MODELO
• Crear una base de datos en mongodb
• Sailsjs configurar el modelo
• Vista o frontend Configurando
• Vistas Views/layout
• Crear Mi primer pagina web estática con sailsjs
MI Ignacio Huitzil Velasco 4
Contenido
• CSS materialize
• Ejemplo:
Entiendo el modelo para la BD universidad
• MER Y MODELO RELACIONAL de universidad
• Api
• Relaciones o asociasiones
• Agregar registros al modelo con GET
• Callback
• Peticiones/funciones síncronas y asíncronas
• Controller o control
• Callbakcs / views
• Resultados

MI Ignacio Huitzil Velasco 5

MI Ignacio Huitzil Velasco 6
Web app

MI Ignacio Huitzil Velasco 7

 Web app
Es desarrollada con lenguajes
como HTML5, JavaScript y CSS3.

Se programan independiente del

sistema operativo en el que se usará la
aplicación.

Las aplicaciones web se ejecutan dentro

del propio navegador web del
dispositivo.

MI Ignacio Huitzil Velasco 8

Ventajas y desventajas de las Web app

MI Ignacio Huitzil Velasco 9

¿Cómo funciona internet?

MI Ignacio Huitzil Velasco 10

Arquitectura cliente-servidor

MI Ignacio Huitzil Velasco 11

Arquitectura cliente-servidor 3 capas

MI Ignacio Huitzil Velasco 12

Tecnologías C-S y Servidores Dinámicos

MI Ignacio Huitzil Velasco 13

MI Ignacio Huitzil Velasco 14
Metodología tradicional de desarrollo

MI Ignacio Huitzil Velasco 15

Modelo Vista Controlador

MI Ignacio Huitzil Velasco 16

MVC

MI Ignacio Huitzil Velasco 17

¿Qué es un framework?

MI Ignacio Huitzil Velasco 18

Sailsjs
• Es un framework creado con la filosofía "Convención sobre Configuración"
o CoC, por sus siglas en inglés.

• Que significa permitir enfocarnos en el desarrollo de la idea.

• http://sailsjs.org/documentation/reference/

MI Ignacio Huitzil Velasco 19

Sailsjs
• Es un framework de Node.js.

• Realizado bajo el framework Express.

• Diseñado para el MVC de frameworks como Ruby on Rails.

• Posee un soporte para los requisitos de aplicaciones modernas: data-driven APIs con una
arquitectura escalable y service-oriented.

• Facilita el desarrollo de APIs REST, servidores de archivos, seguridad y websockets para menajar
peticiones en tiempo real gracias a Socket.io.

• Es especialmente bueno para el desarrollo de chats, monitoreo en tiempo real o juegos

multijugadores.

MI Ignacio Huitzil Velasco 20

MVC herramientas que utilizaremos
• View
• Materializecss
• JQ, JS
• HTML5

• Servidor dinámico
• Nodejs, express

• Model
• Mysql o mongoDB

MI Ignacio Huitzil Velasco 21

Primer practica instalar sailsjs

1. Tener instalado node.js

2. sudo npm install sails -g

MI Ignacio Huitzil Velasco 22

Pruebas de versión e instalación
•node –v

•npm --v

•sails –v

MI Ignacio Huitzil Velasco 23

Crear Mi primer proyecto y API

• Crear una carpeta llamada uni en escritorio

• Crear un proyecto
• cd /uni
• sails new universidad
• cd /universidad
• sails lift

• Probar link http://localhost:1337 (en un browser)

• Crear un api
• sails generate api alumno (verificar carpetas api/controller y model)

MI Ignacio Huitzil Velasco 24

MODELO
• INSTALAR MONGODB
1. brew update
2. brew install mongodb
3. brew install mongodb --with-openssl
4. mongo –-version (testear)
5. sudo mkdir –p /data/db
6. cd /
7. sudo chmod –R 777 data (dar permisos)
8. mongod (una nueva terminal levanta el servidor del GDB)
9. mongo (para estar en el GDB y trabajar en el)

MI Ignacio Huitzil Velasco 25

MI Ignacio Huitzil Velasco 26
Crear una base de datos en mongodb
1. show dbs
2. use universidad (creamos la BD)
3. db.createUser(
{
user: "accountUser",
pwd: "password",
roles: [ "readWrite", "dbAdmin" ] dbOwner dbOwner
} • The database owner can
perform any administrative
)
action on the database.
1. show dbs • This role combines the
2. db.universidad.find() privileges granted by the
readWrite, dbAdmin and
MI Ignacio Huitzil Velasco userAdmin roles. Mongodb.
27
 Sailsjs configurar el modelo
• En terminal dentro de nuestro proyecto universidad ejecutar
npm install sails-mongo –save

• config/connection
• Línea 59 conexión local mongodb
• Cambiar nombre de la conexión
• Datos nombre de usuario
• Contraseña, puerto, BD
• config/model.js
• Connection:’nombre del servidor- conector’

MI Ignacio Huitzil Velasco 28

Vista o frontend Configurando

• Materiales
• Carpeta Materialize
• jquery.js

• Debe quedar así

• dentro de carpeta assets
• dentro de arpeta js crear archivo init.js
• verificar

MI Ignacio Huitzil Velasco 29

Vistas Views/layout
• Layout deben quedar los links

• Crear dentro de la carpeta View

• Una carpeta llamada alumno
• Dentro de esta un archivo inicio.ejs

• Carpeta config/routes
• Crear una ruta estática
• /inicio es la ruta de nuestra URL

MI Ignacio Huitzil Velasco 30

Crear Mi primer pagina web estática con
sailsjs
• En el archivo view/layout
• Agregar del siguiente link http://materializecss.com/navbar.html
• Nav
• Agregar link de icons dentro del primer wraper de NAV
• <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
• <%- body -%> queda vacio
• Footer

• En assets/dependencies/init.js agregar
$(document).ready(function(){
$(".button-collapse").sideNav();
});
• Probar con nueva ruta el sitio

MI Ignacio Huitzil Velasco 31

CSS materialize
• Cambiar colores

• Agregar iconos

• slider

MI Ignacio Huitzil Velasco 32

 Ejemplo:
Entiendo el modelo para la BD universidad

MI Ignacio Huitzil Velasco 33

MER de universidad

MI Ignacio Huitzil Velasco 34

Modelo Relacional
de universidad

MI Ignacio Huitzil Velasco 35

 Api
• Generar los api (cada uno tiene su propio control y modelo)
 alumno
carrera
materia
profesor
Imparte_materia

• Relaciones o asociaciones (Trabaja bajo formato JSON)

• 1-1
• 1-N
• N-M

MI Ignacio Huitzil Velasco 36

1-1

id_carrera:{
owner:{
collection:‘alumno', model:‘carrera',
via : 'owner' //unique:true
} }
Insertar datos
siempre del lado
del model para
los FK
MI Ignacio Huitzil Velasco 37
Control agregar registros mediante URL

MI Ignacio Huitzil Velasco 38

Agregar registros al modelo con GET
• Ejemplo
http://localhost:1337/something/create?content=hello&userNam
e=Nate&userId=1&chatroomId=1

• En mongodb siempre hacer un use universidad

• db.alumno.find() es Similar a SELECT de SQL

MI Ignacio Huitzil Velasco 39

1-N
Insertar datos
siempre del lado
del model para
los FK

cursa: {
collection:'materia', matricula: {
via: 'matricula' model: 'alumno'
} }

MI Ignacio Huitzil Velasco 40

 N-M

id_profesor:{
materias:{ model:'profesor' profesores: {
collection: 'materia', }, collection: 'profesor',
via: 'id_profesor', id_materia: { via: 'id_materia',
through:'imparte_materia' model: 'materia' through:'imparte_materia
} }
}

MI Ignacio Huitzil Velasco 41

MI Ignacio Huitzil Velasco 42
Callback
• Es la llamada de una función que se envía por parámetro.

• Una función A le envía como parámetro una función B (callback) y este se

ejecutara adentro de la función A.

• Por que se puede mandar funciones como parámetros.

• La respuesta es que en JavaScript las funciones se tratan como objetos, es

decir, que las funciones son objetos de tipo función.
MI Ignacio Huitzil Velasco 43
Peticiones/funciones síncronas y asíncronas
Bloqueante No Bloqueante

Dentro de la función se
Los callbacks son de este ejecutan funciones antes
tipo se ejecutan hasta que de que termine la primera.
termine la primer función.
MI Ignacio Huitzil Velasco 44
Controller o control
• Del archivo config/ blueprints descomentar línea 47, 72, 86
• Finalidad no depender de rutas estáticas.

• El nuevo nombre para nuestra ruta dentro de controller, hace referencia a una
vista con el mismo nombre.
• new:function(req,res){ }; --------------------> 1er controller.
/api/controllers/Alumnocotroller.js

• Crear archivo en---------------------->

• Archivo config/model descomentar línea 30

MI Ignacio Huitzil Velasco 45
Callbakcs / views
• req= request, res=response

• res.view() Respond with an HTML page.

• res.redirect() Redirect the requesting user-agent to the given absolute or
relative url.

MI Ignacio Huitzil Velasco 46

Resultados

MI Ignacio Huitzil Velasco 47

Agregar

MI Ignacio Huitzil Velasco 48

Ver un alumno

MI Ignacio Huitzil Velasco 49

Editar

MI Ignacio Huitzil Velasco 50

Ver todos

MI Ignacio Huitzil Velasco 51

Gracias por su atención
M.I Ignacio Huitzil Velasco

,
Universidad Politénica de Amozoc
ignacio.huitzil@upamozoc.edu.mx
Tel: (222) 168 85 67/ 168 83 58 ext. 123

MI Ignacio Huitzil Velasco 52