Crea tu primera aplicacion con Volt!!!

En este taller vamos a crear un chat desde cero!!!

Transcript

1. CREA TU PRIMERA APLICACIÓN WEB CON VOLT!! / José Añasco @merongivian
2. DESARROLLO BACK END
3. SOLUCIÓN: RAILS
4. POR QUE? Convenciones sobre configuraciones Desarrollo interactivo Scaffolding Active Record MVC
5. DESARROLLO FRONT END
6. SOLUCIÓN: ... etc...
8. POR QUE? Single Page Applications
9. PROBLEMA: (FRONT-END + BACK-END) Duplicación de lógica Distintos Lenguajes Complejidad
10. SOLUCIÓN: Único lenguaje: necesariamente javascript Único framework ?
11. CONOCE A VOLT
12. VOLT Ruby web framework (servidor y cliente) Compila ruby a javascript (Opal) Actualización de datos en DOM (programación reactiva)
13. CONCEPTOS VOLT
14. MVC VS MVVM
15. MVC VS MVVM
16. COLECCIONES store, page, params, Operaciones en DB Variables underscore ... # R a i l s r a i l s > U s e r . n e w n a m e : " j u a n " # V o l t v o l t > s t o r e . u s e r s . c r e a t e n a m e : " j o s e " v o l t > j u a n = s t o r e . u s e r s . c r e a t e ( n a m e : " j u a n " , e s t a d o _ c i v i l : " s o l t e r o " ) . v a l u e v o l t > j u a n . _ e s t a d o _ c i v i l = > " s o l t e r o "
17. Manejo de Éxito/Error con promises v o l t > j u a n = s t o r e . u s e r s . f i r s t = > P r o m i s e . . v o l t > j u a n . v a l u e = > U s e r . . . s t o r e . u s e r s . w h e r e ( n a m e : ' j u a n ' ) . f i r s t . t h e n d o # e x i t o e n d . f a i l d o # f a l l o e n d
18. BINDINGS Binding Each Bindings de Atributos Bindings de Eventos { { _ i t e m s . e a c h d o | i t e m | } } < p > { { i t e m } } < / p > { { e n d } } < i n p u t t y p e = " t e x t " v a l u e = " { { _ n a m e } } " > < b u t t o n e - c l i c k = " a l e r t " > A l e r t M e < / b u t t o n >
19. WORKSHOP Vamos a crear un Chat ...Pero primero copiemos el repositorio
21. LEVANTAR APLICACIÓN Comandos consola Instalar gemas $ b u n d l e i n s t a l l Crear usuario en consola $ b u n d l e e x e c v o l t c o n s o l e v o l t > j o s e = { n a m e : " j o s e " , e m a i l : " j o s e @ m a i l . c o m " , p a s s w o r d : " p a s s w o r d " } = > { : n a m e = > " j o s e " , : e m a i l = > " j o s e @ m a i l . c o m " , : p a s s w o r d = > " p a s s w o r d " } v o l t > s t o r e . u s e r s < < j o s e = > P r o m i s e . . . v o l t > s t o r e . u s e r s . a l l Correr Aplicación e ingresar al url localhost:3000 $ b u n d l e e x e c v o l t s e r v e r
22. ....Si la app tarda en arrancar usar flag NO_FORKING $ N O _ F O R K I N G = t r u e b u n d l e e x e c v o l t s e r v e r
23. Volt incluye autenticación y boostrap por defecto y Documentación usuarios componentes
24. CHAT FEATURES: Mensajes entre múltiples usuarios Validar longitud mínima de mensajes Múltiples Chats
25. FEATURE 0: MENSAJES
26. MODELO MESSAGE Crear modelo con generador $ b u n d l e e x e c v o l t g e n e r a t e m o d e l m e s s a g e Añadir campo body y atar mensajes a usuarios por medio de permisos c l a s s M e s s a g e < V o l t : : M o d e l o w n _ b y _ u s e r f i e l d : b o d y , S t r i n g e n d
27. VISTA CHAT Crear ruta en archivo route.rb c l i e n t ' / c h a t ' , a c t i o n : ' c h a t ' Crear vista chat.html dentro la carpeta main de vistas (cargados por medio de ) tags < : T i t l e > C h a t < : B o d y > < h 1 > C h a t < / h 1 > Añadir link en main.html < : B o d y > < d i v c l a s s = " c o n t a i n e r " > < d i v c l a s s = " h e a d e r " > < u l c l a s s = " n a v n a v - p i l l s p u l l - r i g h t " > . < : n a v h r e f = " / c h a t " > C h a t < ! - - : n a v - - > < / u l > < / d i v > < / d i v >
28. Añadir acción chat en controlador main m o d u l e M a i n c l a s s M a i n C o n t r o l l e r < V o l t : : M o d e l C o n t r o l l e r . . d e f c h a t # c o d i g o e n d . . e n d e n d
29. Link para página nueva activada en menú de navegador
30. FORMULARIO DE MENSAJES Crear formulario con en chat.html bindings de eventos < : B o d y > . . . < f o r m e - s u b m i t = " s e n d _ m e s s a g e " > < l a b e l > M e s s a g e < / l a b e l > < i n p u t t y p e = " t e x t " c l a s s = " f o r m - c o n t r o l " v a l u e = " { { p a g e . _ m e s s a g e _ b o d y } } " > < / f o r m > A continuación mostrar todos los mensajes guardados con sus respectivos usuarios < : B o d y > f o r m . . . . . { { s t o r e . m e s s a g e s . r e v e r s e . e a c h d o | m e s s a g e | } } < d i v > < s t r o n g > { { m e s s a g e . u s e r . n a m e } } : < / s t r o n g > < s p a n > { { m e s s a g e . b o d y } } < / s p a n > < / d i v > { { e n d } }
31. MÉTODOS DE CONTROLADOR Implementar reset_message y usarlo al ejecutar la acción chat m o d u l e M a i n c l a s s M a i n C o n t r o l l e r < V o l t : : M o d e l C o n t r o l l e r . d e f c h a t r e s e t _ m e s s a g e e n d p r i v a t e d e f r e s e t _ m e s s a g e p a g e . _ m e s s a g e _ b o d y = ' ' e n d . e n d e n d A continuación implementar send_message d e f s e n d _ m e s s a g e s t o r e . m e s s a g e s . c r e a t e ( b o d y : p a g e . _ m e s s a g e _ b o d y ) r e s e t _ m e s s a g e e n d
32. PERMISO DE ACCESO Anadir para permitir acceso al chat solo a usuarios logeados before_action m o d u l e M a i n c l a s s M a i n C o n t r o l l e r < V o l t : : M o d e l C o n t r o l l e r b e f o r e _ a c t i o n : r e q u i r e _ l o g i n , o n l y : : c h a t . .
33. CHECKPOINT 0
34. mensajes se actualizan automáticamente
35. Mensajes entre múltiples Usuarios
36. MESSAGE TAG Crear tag message con el código que contiene el nombre del usuario y el mensaje < : B o d y > . . . < : M e s s a g e > < d i v > < s t r o n g > { { a t t r s . u s e r } } : < / s t r o n g > < s p a n > { { a t t r s . m e s s a g e } } < / s p a n > < / d i v > Usar tag en el bloque each < : B o d y > . . . { { c u r r e n t _ c h a t . m e s s a g e s . r e v e r s e . e a c h d o | m e s s a g e | } } < : m e s s a g e u s e r = " { { m e s s a g e . u s e r . n a m e } } " m e s s a g e = " { { m e s s a g e . b o d y } } " / > { { e n d } } < : M e s s a g e > . . . Correr tests
37. FEATURE 1: VALIDAR MENSAJES
38. CAPTURA DE ERRORES Añadir validación de longitud para el campo body c l a s s M e s s a g e < V o l t : : M o d e l . . v a l i d a t e : b o d y , l e n g t h : 2 e n d Crear bloques de éxito y fallo al momento de crear el mensaje p r i v a t e d e f s e n d _ m e s s a g e c u r r e n t _ c h a t . m e s s a g e s . c r e a t e ( b o d y : p a g e . _ m e s s a g e _ b o d y ) . t h e n { r e s e t _ m e s s a g e } . f a i l d o | e r r o r s | # m a n e j o d e e r r o r e n d e n d
39. MENSAJES DE ERROR Enviar todos los errores a la colección flash p r i v a t e d e f s e n d _ m e s s a g e c u r r e n t _ c h a t . . . . . . . f a i l d o | e r r o r s | e r r o r s . e a c h { | k , v | f l a s h . _ e r r o r s < < " # { k } : # { v } " } e n d e n d
40. CHECKPOINT 1
41. errores por medio de notificaciones bootstrap
42. FEATURE 2: MÚLTIPLES CHATS
43. MODELO CHAT CON MÚLTIPLES MENSAJES Crear modelo chat $ b u n d l e e x e c v o l t g e n e r a t e m o d e l c h a t Relacionar con message c l a s s C h a t < V o l t : : M o d e l h a s _ m a n y : m e s s a g e s e n d Relacionar modelo message con chat c l a s s M e s s a g e < V o l t : : M o d e l . . . b e l o n g s _ t o : c h a t . . . f i e l d : c h a t _ i d . . . e n d
44. LISTA DE CHATS Listar chats con links que guarden el indice actual en params < : B o d y > { { s t o r e . c h a t s . e a c h _ w i t h _ i n d e x d o | c h a t , i n d e x | } } < d i v > { { c h a t . _ n a m e } } | < a e - c l i c k = " p a r a m s . _ i n d e x = i n d e x " > J o i n c h a t < / a > < / d i v > { { e n d } } Cambiar store por el chat a escoger: current_chat { { c u r r e n t _ c h a t . m e s s a g e s . r e v e r s e . e a c h d o | m e s s a g e | } } < : m e s s a g e u s e r = " { { m e s s a g e . u s e r . n a m e } } " m e s s a g e = " { { m e s s a g e . b o d y } } " / > { { e n d } }
45. CURRENT CHAT Escoger el chat por medio de params._index m o d u l e M a i n c l a s s M a i n C o n t r o l l e r < V o l t : : M o d e l C o n t r o l l e r . . . p r i v a t e . . . d e f c u r r e n t _ c h a t c u r r e n t _ i n d e x = ( p a r a m s . _ i n d e x | | 0 ) . t o _ i s t o r e . c h a t s [ c u r r e n t _ i n d e x ] e n d Guardar el mensaje en el chat escogido . . . p r i v a t e . . . d e f s e n d _ m e s s a g e c u r r e n t _ c h a t . m e s s a g e s . c r e a t e ( b o d y : p a g e . _ m e s s a g e _ b o d y ) . . . . . .
46. Crear nuevos chats en consola v o l t > s t o r e . c h a t s . c r e a t e ( n a m e : ' f u n n y c h a t ' ) . . . s t o r e . c h a t s . c r e a t e ( n a m e : ' c o o l c h a t ' )
47. mensajes filtrados por chat
48. LINKS PARA CHATS Remover links de chat.html Crear links con en index url_with < : T i t l e > H o m e < : B o d y > < h 1 > H o m e < / h 1 > { { s t o r e . c h a t s . e a c h _ w i t h _ i n d e x d o | c h a t , i n d e x | } } < d i v c l a s s = " c h a t - l i n k " > { { c h a t . _ n a m e } } | < a h r e f = " { { u r l _ w i t h ( a c t i o n : ' c h a t ' , i n d e x : i n d e x ) } } " > J o i n c h a t < / a > < / d i v > { { e n d } }
49. CHECKPOINT 2
50. QUE FALTA? Soporte para bases de datos SQL has_many through & polymorphic queries
51. GRACIAS :)