- Arquitectura: elementos generales y tecnologías - Infraestructura de Backend: Capas de datos, negocios y servicios - Frontend: preparación, componentes y más.

2. Nuestras
locaciones

3. Nuestros
Panelistas
Mariano Mazzieri
Lead Developer
Paulina Ibarra
Marketing Analyst

4. Introducción
• Propósito / Objetivos
• Prototipo: Angular Blog
• Foco
QUESTIONS
#ArquitecturaBelatrix

5. Prototipo - Caso de Estudio
Angular Blog
- Login y Autenticación
QUESTIONS
#ArquitecturaBelatrix

6. Prototipo - Caso de Estudio
Angular Blog
- Menú Principal
QUESTIONS
#ArquitecturaBelatrix

7. Prototipo - Caso de Estudio
Angular Blog
- Registración
QUESTIONS
#ArquitecturaBelatrix

8. Prototipo - Caso de Estudio
Angular Blog
-Mantenimiento
de Cuenta
QUESTIONS
#ArquitecturaBelatrix

9. Prototipo - Caso de Estudio
Angular Blog
- Nuevo Post
QUESTIONS
#ArquitecturaBelatrix

10. Prototipo - Caso de Estudio
Angular Blog
- Visualización y
Comentarios
QUESTIONS
#ArquitecturaBelatrix

11. Prototipo - Caso de Estudio
Angular Blog
-Posts Recientes
QUESTIONS
#ArquitecturaBelatrix

12. Prototipo - Caso de Estudio
Angular Blog
-Búsqueda
QUESTIONS
#ArquitecturaBelatrix

13. Arquitectura
Elementos Generales
- AngularBlog.UI
- AngularBlog.API
QUESTIONS
#ArquitecturaBelatrix

14. Arquitectura
Tecnologías
- Angular 2
- TypeScript
- WebAPI 2
- OAuth 2
- Entity Framework 6
- CastleWindsor
QUESTIONS
#ArquitecturaBelatrix

15. Backend
Infraestructura
QUESTIONS
#ArquitecturaBelatrix

16. Backend
Capa de Datos
- Repositorios
- AccountRepository
- PostsRepository
QUESTIONS
#ArquitecturaBelatrix

17. Backend
Capa de Negocios
- Servicios
- AccountService
- PostsService
QUESTIONS
#ArquitecturaBelatrix

18. Backend
Capa de Interfaz de Servicios
Web API 2
- OAuth 2
- CastleWindosor
QUESTIONS
#ArquitecturaBelatrix

19. Frontend
Preparación del Proyecto
Instalación de Angular 2
- NuGet
- NPM
QUESTIONS
#ArquitecturaBelatrix

20. Frontend
Configuración Global de Rutas
·Configuración del Servidor Web / IIS
·Ruta Base SPA
-Configuración Client-Side
-Configuración Server-Side
QUESTIONS
#ArquitecturaBelatrix

21. Frontend
Estructura de Directorios
QUESTIONS
#ArquitecturaBelatrix

22. Frontend
Bootstrapping
- App Component
- App Module
- Main
- Index
QUESTIONS
#ArquitecturaBelatrix

23. Frontend
Configuración de Rutas Internas
Funcionalidad Ruta
app.routing.ts
-Path
-Component
-Data
-Resolve
-Activate
-
QUESTIONS
#ArquitecturaBelatrix

24. Frontend
Componentes
·Imports
·Anotaciones
-Selector
-Template URL
Module Id
QUESTIONS
#ArquitecturaBelatrix

25. Frontend
Componentes
-Login Component
-Account Component
-Posts List Component
-New Post Component
App Component
QUESTIONS
#ArquitecturaBelatrix

26. Frontend
Servicios de Datos
· Http, Headers, Observables, Promises
· Elementos Comunes
-Busy Indicator
-Manejo de Errores
Uso de otros servicios especializados
QUESTIONS
#ArquitecturaBelatrix

27. Frontend
Configuración
·Server Side
·No es parte del build
·Responsabilidades del SettingsService
-Obtener Datos
-Proveer Interfaz de Acceso
-Asegurar Disponibilidad a Consumidores
QUESTIONS
#ArquitecturaBelatrix

28. Frontend
Autenticación
UserService
-Realiza el Login y gestion de Auth Token
-Provee información del usuario actual
-Expone el estado de autenticación del usuario
-Genera Headers con autorización para la API
-Logout
QUESTIONS
#ArquitecturaBelatrix

29. Frontend
Autorización
LoggedInGuard
-Utilizado en la configuración de rutas internas
-Implementa CanActivate
-UserService proporciona estado de la sesión
QUESTIONS
#ArquitecturaBelatrix

30. Frontend
Comunicación y Mensajería
MediatorService
·Subscripción a través de Observales
·Emisión de mensajes
-Error
-Success
-Busy
QUESTIONS
#ArquitecturaBelatrix

31. Prototipo
QUESTIONS
#ArquitecturaBelatrix

32. ¡Muchas Gracias!