Instalar el proyecto
git clone https://github.com/Curso-Fullstack-MEAN-Octubre2017/oscarsuarez.git
cd oscarsuarez
npm install
npm start
Arquitectura de MEAN
-
El Cliente (Navegador)
- Es donde el usuario puede visualizar la aplicación y donde puede interactuar con ella.
-
Nube (Internet):
- La nube hace referencia a servicios que usamos a través de internet.
-
El Servidor físico:
- Es un ordenador que permite usar sus recursos de forma remota a través de una red.
-
MongoDB
- MongoDb es una base de datos NoSql es un tipo de base de datos que no usa la típica estructura de tablas relacionadas sino que almacena los datos con una estructura clave:valor. Pide muy pocos recursos y es fácilmente escalable.
-
Mongoose
- Es una librería que permite conectar una base de datos MongoDb con un servidor NodeJS
-
NodeJS:
- Node es un entorno que permite ejecutar código javascript del lado del servidor.
-
ExpressJS
- Es un framework de NodeJs, encargado de interpretar las peticiones HTTP y recibirlas a través de un Router y redirigir la petición al controller que realiza la petición a la base de datos. También ofrece un motor de plantillas JADE.
-
AngularJS
- Es un framework de javascript que permite la creación de "single page application" lo que permite navegar en una página web sin tener que refrescar todo el contenido de la misma. Su principal característica es el Binding o doble Binding que permite pasar información a través de una variable Scope desde el modelo hacia la parte visual.
MODELO DE DATOS
CASOS DE USO
DIAGRAMAS
Diagrama de flujo Cliente-Mascota
Diagrama de flujo Calendario-Cita
Servicios REST publicados
Implementación CRUD Pet
-
Schema para MongoDB del modelo Pet
-
Servicios REST:
Líneas donde se define una ruta base /api a las url REST de pet https://github.com/Curso-Fullstack-MEAN-Octubre2017/oscarsuarez/blob/dafe3f949e75624d6e01e14f75d193d0951d0182/app.js#L15 https://github.com/Curso-Fullstack-MEAN-Octubre2017/oscarsuarez/blob/dafe3f949e75624d6e01e14f75d193d0951d0182/app.js#L34
Enlace a la línea donde está la definición de la url REST para el método GET que permite obtener un animal por su ID. https://github.com/Curso-Fullstack-MEAN-Octubre2017/oscarsuarez/blob/dafe3f949e75624d6e01e14f75d193d0951d0182/routes/pet.js#L10
Enlace al inicio de la función donde se realiza la petición a la base de datos y obtiene el resultado de la misma https://github.com/Curso-Fullstack-MEAN-Octubre2017/oscarsuarez/blob/dafe3f949e75624d6e01e14f75d193d0951d0182/controllers/pet.js#L18
Controlador Angular
Componente.js
Línea donde se define el nombre del módulo y el del componente.
-
Y a continuación se le indica la ruta de la plantilla HTML.
-
Linea donde empieza la petición http get para obtener el json con los detalles del pet
-
En la siguiente línea se asigna la respuesta a la variable scope.
Componente.html
- Ejemplo donde se muestra un dato a través de la directiva ng-model de angular
Configuración del Módulo
- en App.module.js se incluye los nombres de los módulos que se van usar en la aplicación.
Ruta Angular
-
En el archivo app.config.js es donde se hace las llamadas a los modules en función de la ruta en la que estamos
-
En el index.html se importa la ruta al módulo
Servicios REST publicados
Appointments
| METODO | URL | BODY | RESPONSE |
|---|---|---|---|
| GET | /api/appointments | Null | Res.json([appointments]) |
| GET | /api/appointments/:id | Null | Res.json(appointment) |
| GET | /api/appointments/:from/:to | Null | Res.json(appointments) |
| POST | /api/appointments | {JSON} | Res.json(createdAppointment) |
| PUT | /api/appointments/:id | {JSON} | Res.json(updatedAppointment) |
Pets
| METODO | URL | BODY | RESPONSE |
|---|---|---|---|
| GET | /api/customers/:id/pets | Null | Res.json([pets]) |
| GET | /api/pet/:id | Null | Res.json(pet) |
| DELETE | /api/pet/:id | Null | Res.send.status(200) |
| POST | /api/pet/:id | {JSON} | Res.json(createdPet) |
| PUT | /api/pet/:id | {JSON} | Res.json(updatedPet) |
Customers
| METODO | URL | BODY | RESPONSE |
|---|---|---|---|
| GET | /api/customers | Null | Res.json([customers]) |
| GET | /api/customers/:id | Null | Res.json(customer) |
| POST | /api/customers | {JSON} | Res.json(createdCustomer) |
| PUT | /api/customers/:id | {JSON} | Res.json(updatedCustomer) |
Ficheros Encargados de publicar las rutas
-
Appointments:
-
Pets:
-
Customers:
Implementaciones
Directivas Personalizadas
permiten encapsular código HTML para facilitar su reutilización
- Aquí se crean las directivas para los inputs del formulario
- https://github.com/Curso-Fullstack-MEAN-Octubre2017/oscarsuarez/blob/ff39d0c39bc5ead07f1f8dfa4426fb13358b606c/public/app/directives/input-templates.js
- Aquí se ve como se llama a esa directiva personalizada:
Servicios
Facilita la reutilización de funciones inyectando el servicio en diferentes componentes
- Un ejemplo de Factory
- https://github.com/Curso-Fullstack-MEAN-Octubre2017/oscarsuarez/blob/ab6d7e01c79a4f3bc0d8139db2696bfe01b704f4/public/app/services/appointments-services.js#L4
Servicios con Resource
- Facilita la creación de métodos CRUD en servicios Angular.
Control de concurrencia optimista (OCC)
- Comprueba que se actualiza un dato siempre sobre su última versión.
Separación de responsabilidades
En la ruta simplemente envío la información y recibo la respuesta en forma de promesa, El controlador se encarga de la lógica
- Ejemplo con get pet by id
Validaciones
Impedir que datos incorrectos se inserten en la base de datos
- Ejemplo con la librería Validate
Eventos
Es una forma de poder avisar a componentes cuando una acción es realizada.
- Ejemplo donde se emite un evento
- Ejemplo donde se recepciona ese evento
SocketIo
- Abre un stream de conexión entre el cliente y el servidor lo que permite que el servidor ante cualquier cambio actualice los datos de los clientes suscritos sin que ellos tengan que solicitarlo. https://github.com/Curso-Fullstack-MEAN-Octubre2017/oscarsuarez/blob/ab6d7e01c79a4f3bc0d8139db2696bfe01b704f4/routes/socketio-manager.js#L1
Controladores anidados
El componente padre engloba a los hijos y es notificado de cualquier cambio en sus hijos y se encarga de refrescarlos.
https://github.com/Curso-Fullstack-MEAN-Octubre2017/oscarsuarez/blob/ab6d7e01c79a4f3bc0d8139db2696bfe01b704f4/public/app/modules/appointments-module/appointments-module.html
https://github.com/Curso-Fullstack-MEAN-Octubre2017/oscarsuarez/blob/ab6d7e01c79a4f3bc0d8139db2696bfe01b704f4/public/app/modules/appointments-module/appointments-module.js
Pantallas de la App y componentes asociados en GitHub
Inicio
Buscar Clientes
Detalle de clientes
https://github.com/Curso-Fullstack-MEAN-Octubre2017/oscarsuarez/tree/master/public/app/modules/customerdetail-module
https://github.com/Curso-Fullstack-MEAN-Octubre2017/oscarsuarez/tree/master/public/app/modules/pet-module
Detalle de la Mascotas
Calendario de citas
Horas disponibles
Detalle de cita
Crear/Editar Cita
Despliegue de la app a producción
- Base de datos: www.mlab.com
- Servidor: www.heroku.com
Url: https://pet-store-app.herokuapp.com/
GitHub: www.github.com/suarezoscar
Curso FULLSTACK – Oscar Suarez – Octubre/Noviembre 2017