Encuentra todos los videos en Channel 9 > https://channel9.msdn.com/Niners/soreygarcia
Mostrando entradas con la etiqueta MVVM. Mostrar todas las entradas
Mostrando entradas con la etiqueta MVVM. Mostrar todas las entradas
domingo, 8 de mayo de 2016
#NinjaTips - Xamarin Forms: Creando una app desde cero (2 de N)
Hola, vamos con un nuevo video. Déjame todos tus comentarios y sugerencias. Espero que lo disfrutes. Recuerda que el código de los laboratorios está disponible en mi Github > https://github.com/soreygarcia/xamarin-forms-lab
Encuentra todos los videos en Channel 9 > https://channel9.msdn.com/Niners/soreygarcia
Encuentra todos los videos en Channel 9 > https://channel9.msdn.com/Niners/soreygarcia
Etiquetas:
MVVM,
MVVM Avanzado,
Xamarin Forms,
XAML
domingo, 1 de mayo de 2016
#NinjaTips - Xamarin Forms: Creando una app desde cero (1 de N)
Al fin he retomado mis videos de NinjaTips en Channel 9. Espero que les guste esta nueva etapa avanzando un poco mas rapido y viendo como construir y evolucionar una app de verdad.
Encuentra todos los videos en Channel 9 > https://channel9.msdn.com/Niners/soreygarcia
Encuentra todos los videos en Channel 9 > https://channel9.msdn.com/Niners/soreygarcia
lunes, 14 de julio de 2014
MVVM para principiantes #ForDummies
Hace unos días dí una charla para el Proyecto Génesis del MVP Miguel Muñoz Serafín por invitación de Lina Manjarrés, a quienes les agradezco la oportunidad de compartir con la gente sobre mis temas favoritos.
Les comparto el hangout y espero les sea de utilidad.
Les comparto el hangout y espero les sea de utilidad.
domingo, 16 de marzo de 2014
Taller MVVM Imagine Camp Medellín
El día de ayer estuve participando como Speaker en el Imagine Camp Medellín, enseñando a los estudiantes que se preparan para participar en el Imagine Cup, como aplicar MVVM en aplicaciones portables. El reto era lograr que comprendieran todos los conceptos, y aunque de entenderlo a hacerlo hay todavía camino, seguramente que es más fácil cuando entiendes a que te enfrentas.
Quería compartirles la presentación cuyo nivel es intermedio. El código fuente pueden encontrarlo en el repositorio de Github de Avanet y estudiarlo. Además dí una charla sobre UX para Windows Phone y Windows 8, así que espero que todo les resulte de utilidad. :)
Quería compartirles la presentación cuyo nivel es intermedio. El código fuente pueden encontrarlo en el repositorio de Github de Avanet y estudiarlo. Además dí una charla sobre UX para Windows Phone y Windows 8, así que espero que todo les resulte de utilidad. :)
domingo, 27 de enero de 2013
Planificando las bases de una aplicación Windows Phone
Hace unos días hice el intento de escribir un artículo de un tema que noto entre los asistentes a talleres o cursos que es un vacío común. Espero que lo que escribí les ayude a enteder un poco más.El ejemplo es una aplicación de la cual existen varios clientes ya, pero a la que quisiera dar mi enfoque personal y seguirla creciendo, :)
En este punto igual se encuentra la serie de MVVM que inicié alguna vez y que espero terminar pronto.
Espero como siempre que sea de utilidad
Sorey
viernes, 10 de agosto de 2012
Construyendo las Vistas a partir de las Vista Modelo para MVVM en Windows Phone
Avanzando con el post anterior, un video montando el estilo y creando las vistas de nuestro lector RSS con MVVM en Windows Phone
El código de la aplicación se está publicando en Github:
https://github.com/soreygarcia/RssReader
Nos vemos la próxima
Sorey
https://github.com/soreygarcia/RssReader
Nos vemos la próxima
Sorey
lunes, 6 de agosto de 2012
Construyendo las Vistas a partir de las Vista Modelo para MVVM en Windows Phone
Si recién llegas a este post, recuerda que hace parte de una serie, así que te invito a ponerte al día hasta el post anterior.
Bueno antes de continuar con otra parte divertida de todo esto, definiré cuales funcionalidades implementar en esta etapa para generar un producto pronto (Minimum viable product). Las funciones seleccionadas serán dos: mostrar en línea la lista de post desde un rss y la lista de tweets vía rss, al clickear en cada item navegaremos al explorador con su link asociado.
Recuerden terminar la meta propuesta en el anterior post, de crear las Vista Modelo propuestas en el UML, antes de continuar.
Aquí les dejo como se vería MainViewModel si seguimos la estructura propuesta como ejemplo en el código autogenerado.
Como ven conserve el método LoadData sugerido en la plantilla. Nos aseguramos que todo compile perfectamente y estamos listos para crear nuestros datos de ejemplo en Expression Blend. Podrá quedar una pequeña "Advertencia" (no error) alertando que los datos de ejemplo no existen, pero lo solucionaremos cuando creemos nuestra propias vistas.
Si no sabes crear los datos de ejemplo te invito a revisar el video de ejemplo que cree para mostrar como se configuran. Debes tener en cuenta es que esta vez no vas a configurar manualmente los campos de los datos de ejemplo, si no que usarás la opción crear datos de ejemplo desde una clase:
Luego de esto se te pedirá que selecciones la clase desde donde se generan los datos de ejemplo y seleccionarás MainViewModel
En la pestaña de datos podras ver la estructura que creaste para esta clase
Y en el árbol de proyectos podrás ver que se volvió a generar el archivo de datos de ejemplo que habiamos borrado en pasos anteriores, pero está vez generó los datos de ejemplo con la estructura que necesitamos.
Recuerden que a diferencia de los datos de ejemplo generados manualmente, los datos generados a partir de una clase, no se ven en tiempo de ejecución a menos que cambiemos manualmente esta configuración.
No olviden guardar antes de regresar a Visual Studio y de aceptar que el proyecto en Visual Studio se recargue para mostrar los cambios hechos en Expression Blend.
Además recuerden que si añaden campos a las clases y quieren que se generen datos de ejemplo deben borrar el archivo de datos de ejemplo y repetir el proceso, esto no alterará en ninguna forma el código, pero en Expression Blend deben vincular los datos de ejemplo a las vistas nuevamente para que se refresque la vista de diseño.
Por lo pronto, si estas siguiendo ordenamente este tutorial el reto es empezar a ensamblar las vistas con los datos de ejemplo que se generaron. Para ello recuerden ver el video de ejemplo. El próximo post de la serie, será un video creando las listas y ensamblando el estilo
El código de la aplicación se está publicando en Github:
https://github.com/soreygarcia/RssReader
Nos vemos la próxima, éxitos con el reto.
Sorey
Bueno antes de continuar con otra parte divertida de todo esto, definiré cuales funcionalidades implementar en esta etapa para generar un producto pronto (Minimum viable product). Las funciones seleccionadas serán dos: mostrar en línea la lista de post desde un rss y la lista de tweets vía rss, al clickear en cada item navegaremos al explorador con su link asociado.
Recuerden terminar la meta propuesta en el anterior post, de crear las Vista Modelo propuestas en el UML, antes de continuar.
Aquí les dejo como se vería MainViewModel si seguimos la estructura propuesta como ejemplo en el código autogenerado.
Como ven conserve el método LoadData sugerido en la plantilla. Nos aseguramos que todo compile perfectamente y estamos listos para crear nuestros datos de ejemplo en Expression Blend. Podrá quedar una pequeña "Advertencia" (no error) alertando que los datos de ejemplo no existen, pero lo solucionaremos cuando creemos nuestra propias vistas.
Si no sabes crear los datos de ejemplo te invito a revisar el video de ejemplo que cree para mostrar como se configuran. Debes tener en cuenta es que esta vez no vas a configurar manualmente los campos de los datos de ejemplo, si no que usarás la opción crear datos de ejemplo desde una clase:
Luego de esto se te pedirá que selecciones la clase desde donde se generan los datos de ejemplo y seleccionarás MainViewModel
En la pestaña de datos podras ver la estructura que creaste para esta clase
Y en el árbol de proyectos podrás ver que se volvió a generar el archivo de datos de ejemplo que habiamos borrado en pasos anteriores, pero está vez generó los datos de ejemplo con la estructura que necesitamos.
Recuerden que a diferencia de los datos de ejemplo generados manualmente, los datos generados a partir de una clase, no se ven en tiempo de ejecución a menos que cambiemos manualmente esta configuración.
No olviden guardar antes de regresar a Visual Studio y de aceptar que el proyecto en Visual Studio se recargue para mostrar los cambios hechos en Expression Blend.
Además recuerden que si añaden campos a las clases y quieren que se generen datos de ejemplo deben borrar el archivo de datos de ejemplo y repetir el proceso, esto no alterará en ninguna forma el código, pero en Expression Blend deben vincular los datos de ejemplo a las vistas nuevamente para que se refresque la vista de diseño.
Por lo pronto, si estas siguiendo ordenamente este tutorial el reto es empezar a ensamblar las vistas con los datos de ejemplo que se generaron. Para ello recuerden ver el video de ejemplo. El próximo post de la serie, será un video creando las listas y ensamblando el estilo
El código de la aplicación se está publicando en Github:
https://github.com/soreygarcia/RssReader
Nos vemos la próxima, éxitos con el reto.
Sorey
domingo, 5 de agosto de 2012
Ensamblando la infraestructura de Vistas a Vista Modelo en MVVM usando Windows Phone
Bueno, siendo que en el post anterior ya tomamos decisiones de diseño, es el momento de empezar a ensamblar nuestro proyecto, vamos a crear una aplicación con base en la plantilla de panorama
Bueno ahora voy a proponerles una estructura para un proyecto, primero se los enseño y luego hago las aclaraciones.
En este punto estamos listos para crear nuestras propias clases Vista Modelo, del post anterior
Bueno ahora voy a proponerles una estructura para un proyecto, primero se los enseño y luego hago las aclaraciones.
Como pueden ver, yo creo dos proyectos o assemblies, RssReader.UI el cual es nuestro proyecto de tipo panorama y RssReader.UI.Logic el cual es una librería de clases. Si bien puede trabajarse todo en un solo proyecto, varias razones me parecen agradables de acostumbrarse a trabajar así, si quisieramos trasladarnos a una libreria portable para Windows 8 y Windows Phone 8, seguro desde esta estructura sería más provechoso que empezar a serapar las vistas de ambas aplicaciones, y tambien cuando trabajamos de mano de un diseñador, es más facil establecerle los limites, los lugares que no debe tocar, y el espacio donde el es totalmente libre. Por otro lado simplemente es personal, a mi me parece más ordenado.
Otra cosa que podrán notar es que en el proyecto panorama se han creado unas carpetas por defecto, lo que podemos hacer para no perder la estructura creada es pasar las clases a la libreria en la carpeta correspondiente ViewModels, añadir la referencia entre los assemblies.
No se olviden de completar los namespace de las clases, por RssReader.UI.Logic.ViewModels
Además habrán 2 errores de código que corregiremos haciendo referencia al nuevo espacio de nombres al que pertenece la clase.
Si llegaramos a observar las clases MainViewModel e ItemViewModel que fueron creadas por la plantilla, vamos a notar que ambas además de heredar de INotifyPropertyChanged implementan la interfaz a través de un evento y un método que es el responsable de notificar los cambios a la interfaz.
Ya que este método es común para esas y todas las Vista Modelo que creemos, lo que podemos hacer es crear una clase adicional que implemente este método y que todas nuestras Vista Model hereden de ella. Hablando en UML esto sería más o menos así:
Como ven, es mi costumbre adicionar 2 propiedades adicionales en esta clase comun, estas nos ayudarán más adelante a comunicar mensajes desde la vista modelo mientras se está realizando una operación. Si miramos nuestra clase en código habrá quedado de esta forma:
Como pueden ver al método NotifyPropertyChanged le fue alterado el alcance para que sea protegido, esto es para que las clases hijas de BindableBase puedan acceder a el.
Además debemos tener en cuenta que las propiedades que deseemos usar para enlazar con nuestras Vistas deben ser full properties o propiedades completas e invocar en el set de la propiedad el nombre de la propiedad que se está cambiando.
La invocación a la notificación de cambio puede realizarse desde otros sitios, esta es la forma general, ya que el cambio se notificará cuando se establezca o cambie el valor de la propiedad. Para Windows 8 y Windows Phone 8 existe una forma de no "quemar" o dejar fijo el nombre de la propiedad, y lo pueden leer en el post de Walter Novoa.
No olviden cambiar el lugar de donde hereda MainViewModel e ItemViewModel para que sea BindableBase.
Siguendo estas indicaciones y el diagrama UML para el siguiente post, debemos tener ya nuestras Vistas Modelo implementadas. No olviden fijarse bien en el diagrama y que las listas deben ser de tipo ObservableCollection.
Una última anotación para finalizar tiene que ver con el código de ejemplo que encontrarán en las clases que se crearon por defecto tiene algo adicional en el set, y es que verifican que el valor de la variable asociada haya cambiado para notificar el cambio.
En algunos escenarios cuando movemos mucho los objetos en memoria nos puede pasar que al enlazar algún objeto no se refresque un dato, y podemos tardar un buen tiempo en identificar que esta es la razón, la elección es de escenario, si vamos a dejarlo como lo proponen en este código auto generado, es bueno ser conscientes de que ahí está.
A partir de este post, el código de la aplicación quedará publicado en Github:
Nos vemos la próxima.
Sorey
Planeando el lector RSS para MVVM usando Windows Phone
Después de haber entendido un poco sobre MVVM en el primer post sigue mi parte favorita planear el estilo de la aplicación. Esto a parte de ser tierno y divertido, va muy de mano con alinearse al nuevo estilo de interfaces propuesto para Windows Phone y Windows 8, pero además como veremos en este post servirá para crear parte de nuestras clases Vista Modelo. Así que empecemos.
Eligiendo el estilo
Lo primero será elegir el estilo base, el icono, el mosaico y la pantalla de inicio de nuestra aplicación. Recuerden que para esto uso Inkscape y que pueden encontrar un video de ejemplo en mi blog o tambien el post de ideas para aplicar el estilo metro.
Notarán que adicionalmente he creado unos íconos que tienen un fondo gris, el gris siempre lo dejo como temporal, ya que lo uso para dar las dimensiones que quiero a la imagen.
Los iconos blancos son de 48 x 48 y los uso para iconos de la barra de aplicación o Application Bar, las imagenes dentro no deben ser de más de 26 X 26 para dejar espacio al circulo propio de estos botones. Los otros iconos son para poner un adorno a los títulos del panorama que ya verán más adelante.
No sé ustedes, si yo tengo una interfaz agradable trabajo mejor :)
Este es el momento de soñar (en mi caso por que es mi aplicación), cuando tenemos un cliente es momento de acordar como se verá nuestra aplicación.
Veamos cuales son los retos del sueño, en primer lugar hay que generar bastantes elementos gráficos y ni que decir de los estilos.
¿Qué eso que tiene que ver con MVVM? Cada cosas que vemos aquí tendrá una implicación en la implementación, y detalles como usar un corazón cuando un item es favorito o usar imágenes diferentes segun el tipo de item del rss va a ser algo que nos facilitará el implementar bien las propiedades que enlazamos.
Con respecto al estilo, puse un ejemplo que no voy a implementar en la imagen, cuando se da compartir, pero es más por colocar un ejemplo de cuanto podemos complicarnos, si lo notan bien la imagen cuando el item de twitter está seleccionada cambia, para hacerlo más sencillo implementaré el sombreado en el ejemplo de la lista de post, el cual no cambia la imagen asociada al item. Sin embargo, reto para el final de la serie de post, será implementar el estilo propuesto en la imagen ¿qué tal? Es simple, veremos como les va, pero mejor después de aprender ;)
Otra anotación muy importante para el estilo, aprovechando este post, es definir si permitiremos que nuestra aplicación cambie de color cuando se cambia el tema de fondo en el dispositivo. Si bien esto quedaría muy bien, implica mucho más tiempo cuidando que todo vaya bien en ambos estilos y en ocasiones crear estilos que cambien de acuerdo al tema, así que yo lo pensaría dos veces ;
En esta aplicación no vamos a intentarlo, la razón es que la verdad no se vé muy bien :S
Ahora planeamos las demás ventanas de nuestra aplicación, son simples prototipos, algunas cosas no quedarán o se pueden hacer por etapas.
Planeando la aplicación
Hasta este punto hemos estado pensando en nuestras Vistas, nada de implementación, esto mismo se podría hacer con lapiz y papel, usando plantillas para prototipos. Con estas vistas podemos empezar a planear algo de lo que serán nuestras Vista Modelo.
Una manera más formal de mirar el tema de planear la aplicación puede encontrarse en el Blog de Arturo Toledo, en el cual nos explica sobre Arquitectura de la Información en una aplicación Windows Phone. En esta imagen tomada desde ese post, nos podemos hacer una idea global sobre como deberíamos planificar por ejemplo la navegación
Noten que la navegación es planificada de forma lineal, cada camino conduce a una ruta de páginas a través de las cuales el usuario avanza o retrocede, y debemos cuidar que esto sea intuitivo y que no se los usuarios no se pierdan a través de ellas.
Para quienes quieran explorar alternativas a este tipo de navegación, exíste una forma de evitarlo, y la explica Josue Yeray en su blog.
Por otro lado y continuando en nuestro post, las Vista Modelo deben ser pensadas no en terminos de las pantallas que usamos si no en terminos de los elementos que manejan nuestras pantallas. Si observamos con detenimiento nuestra planeación veremos que nuestra ventana o panorama principal, tiene tres listas, y existe otra lista adicional de mensajes de visitantes, por lo que nuestras vistas modelo iniciales en UML podrían ser las siguientes:
Si han creado un proyecto tipo panorama o pivot, verán que cuando las plantillas se crean, una estructura similar a estar se crea tambien en clases de ejemplo. Esto lo veremos cuando empecemos a implementar nuestra aplicación.
Como podemos observar, el MainViewModel no refiere unicamente a la pantalla principal, de hecho esta clase sirve como el contexto general de la aplicación y las propiedades de esta sirven para reflejar muchos comportamientos generales. En el ejemplo que les refiero de las plantillas por defecto se encuentra generalmente una propiedad denominada IsDataLoaded, que ayuda a controlar que cuando la aplicación se recupera de un segundo plando, si los datos se encuentran aún en memoria estos no vuelvan a intentar cargarse.
Otra propiedad que añadiré para poder iniciar en el siguiente post el montaje de nuestra aplicación es el item seleccionado, el cual nos ayudará a mostrar los datos en la pantalla de detalle de un item.
Además de esto debemos tener en cuenta, que nuestras Vistas Modelo deben heredar de la clase INotifyPropertyChanged, interfaz que a su vez obliga a nuestra clase a implementar un evento que permitirá a las Vista Model, reportar los cambios en los datos y estructuras a las Vistas y que las listas que queremos mostrar en nuestra interfaces deben ser de tipo ObservableCollection. Estos son temas de infraestructura del patrón que abordaremos en el siguiente post.
Por lo pronto nuestro modelo UML de Vistas Modelo se vería de la siguiente forma:
Eligiendo el estilo
Lo primero será elegir el estilo base, el icono, el mosaico y la pantalla de inicio de nuestra aplicación. Recuerden que para esto uso Inkscape y que pueden encontrar un video de ejemplo en mi blog o tambien el post de ideas para aplicar el estilo metro.
Notarán que adicionalmente he creado unos íconos que tienen un fondo gris, el gris siempre lo dejo como temporal, ya que lo uso para dar las dimensiones que quiero a la imagen.
Los iconos blancos son de 48 x 48 y los uso para iconos de la barra de aplicación o Application Bar, las imagenes dentro no deben ser de más de 26 X 26 para dejar espacio al circulo propio de estos botones. Los otros iconos son para poner un adorno a los títulos del panorama que ya verán más adelante.
No sé ustedes, si yo tengo una interfaz agradable trabajo mejor :)
Este es el momento de soñar (en mi caso por que es mi aplicación), cuando tenemos un cliente es momento de acordar como se verá nuestra aplicación.
¿Qué eso que tiene que ver con MVVM? Cada cosas que vemos aquí tendrá una implicación en la implementación, y detalles como usar un corazón cuando un item es favorito o usar imágenes diferentes segun el tipo de item del rss va a ser algo que nos facilitará el implementar bien las propiedades que enlazamos.
Con respecto al estilo, puse un ejemplo que no voy a implementar en la imagen, cuando se da compartir, pero es más por colocar un ejemplo de cuanto podemos complicarnos, si lo notan bien la imagen cuando el item de twitter está seleccionada cambia, para hacerlo más sencillo implementaré el sombreado en el ejemplo de la lista de post, el cual no cambia la imagen asociada al item. Sin embargo, reto para el final de la serie de post, será implementar el estilo propuesto en la imagen ¿qué tal? Es simple, veremos como les va, pero mejor después de aprender ;)
Otra anotación muy importante para el estilo, aprovechando este post, es definir si permitiremos que nuestra aplicación cambie de color cuando se cambia el tema de fondo en el dispositivo. Si bien esto quedaría muy bien, implica mucho más tiempo cuidando que todo vaya bien en ambos estilos y en ocasiones crear estilos que cambien de acuerdo al tema, así que yo lo pensaría dos veces ;
En esta aplicación no vamos a intentarlo, la razón es que la verdad no se vé muy bien :S
Ahora planeamos las demás ventanas de nuestra aplicación, son simples prototipos, algunas cosas no quedarán o se pueden hacer por etapas.
Planeando la aplicación
Hasta este punto hemos estado pensando en nuestras Vistas, nada de implementación, esto mismo se podría hacer con lapiz y papel, usando plantillas para prototipos. Con estas vistas podemos empezar a planear algo de lo que serán nuestras Vista Modelo.
Una manera más formal de mirar el tema de planear la aplicación puede encontrarse en el Blog de Arturo Toledo, en el cual nos explica sobre Arquitectura de la Información en una aplicación Windows Phone. En esta imagen tomada desde ese post, nos podemos hacer una idea global sobre como deberíamos planificar por ejemplo la navegación
Noten que la navegación es planificada de forma lineal, cada camino conduce a una ruta de páginas a través de las cuales el usuario avanza o retrocede, y debemos cuidar que esto sea intuitivo y que no se los usuarios no se pierdan a través de ellas.
Para quienes quieran explorar alternativas a este tipo de navegación, exíste una forma de evitarlo, y la explica Josue Yeray en su blog.
Por otro lado y continuando en nuestro post, las Vista Modelo deben ser pensadas no en terminos de las pantallas que usamos si no en terminos de los elementos que manejan nuestras pantallas. Si observamos con detenimiento nuestra planeación veremos que nuestra ventana o panorama principal, tiene tres listas, y existe otra lista adicional de mensajes de visitantes, por lo que nuestras vistas modelo iniciales en UML podrían ser las siguientes:
Si han creado un proyecto tipo panorama o pivot, verán que cuando las plantillas se crean, una estructura similar a estar se crea tambien en clases de ejemplo. Esto lo veremos cuando empecemos a implementar nuestra aplicación.
Como podemos observar, el MainViewModel no refiere unicamente a la pantalla principal, de hecho esta clase sirve como el contexto general de la aplicación y las propiedades de esta sirven para reflejar muchos comportamientos generales. En el ejemplo que les refiero de las plantillas por defecto se encuentra generalmente una propiedad denominada IsDataLoaded, que ayuda a controlar que cuando la aplicación se recupera de un segundo plando, si los datos se encuentran aún en memoria estos no vuelvan a intentar cargarse.
Otra propiedad que añadiré para poder iniciar en el siguiente post el montaje de nuestra aplicación es el item seleccionado, el cual nos ayudará a mostrar los datos en la pantalla de detalle de un item.
Además de esto debemos tener en cuenta, que nuestras Vistas Modelo deben heredar de la clase INotifyPropertyChanged, interfaz que a su vez obliga a nuestra clase a implementar un evento que permitirá a las Vista Model, reportar los cambios en los datos y estructuras a las Vistas y que las listas que queremos mostrar en nuestra interfaces deben ser de tipo ObservableCollection. Estos son temas de infraestructura del patrón que abordaremos en el siguiente post.
Por lo pronto nuestro modelo UML de Vistas Modelo se vería de la siguiente forma:
Si tienen dudas agradezco sus comentarios, realizar actualizaciones a los post es importante para que podamos comprender el tema. Si eres un experto en esto y andas leyendo por aquí y ves alguna equivocación, también agradeceré profundamente tus constructivos comentarios.
Nos vemos en el siguiente post.
Sorey
sábado, 4 de agosto de 2012
Aprendiendo MVVM en Windows Phone
Recordando un poco una vieja promesa vamos a iniciar una pequeña serie de post a través de los cuales vamos a dar un paso más en esto de aprender Windows Phone, un paso que seguro podrá ayudar además a entrar en el mundo del desarrollo de aplicaciones para Windows 8 usando XAML.
El nuevo reto es aprender el patrón MVVM (Modelo Vista, Vista Modelo) y para esto vamos a empezar de cero el lector RSS que habiamos construido antes, aprendiendo y repasando cosas en el camino. Seguro no soy la más experta en esto, pero espero que la sencilla implementación de MVVM que vamos a realizar sirva a principiantes a empezar el camino del desarrollo de aplicaciones más profesionales.
Nota Importante: Si recién estás aprendiendo Windows Phone te recomiendo mirar los tutoriales en video de la Serie Windows Phone y los Hands on Labs creados para la Maratón de Windows Phone en Colombia. Esta serie de post no será tan detallada ya que asumiré que ya se tienen conocimientos previos.
Vamos a empezar por dibujarnos un mapa mental de un escenario típico de una aplicación móvil, detallando un poco más en la parte del dispositivo, la notación es UML (Perdón a los amantes de UML por lo minimalista)
El nuevo reto es aprender el patrón MVVM (Modelo Vista, Vista Modelo) y para esto vamos a empezar de cero el lector RSS que habiamos construido antes, aprendiendo y repasando cosas en el camino. Seguro no soy la más experta en esto, pero espero que la sencilla implementación de MVVM que vamos a realizar sirva a principiantes a empezar el camino del desarrollo de aplicaciones más profesionales.
Nota Importante: Si recién estás aprendiendo Windows Phone te recomiendo mirar los tutoriales en video de la Serie Windows Phone y los Hands on Labs creados para la Maratón de Windows Phone en Colombia. Esta serie de post no será tan detallada ya que asumiré que ya se tienen conocimientos previos.
Vamos a empezar por dibujarnos un mapa mental de un escenario típico de una aplicación móvil, detallando un poco más en la parte del dispositivo, la notación es UML (Perdón a los amantes de UML por lo minimalista)
Ahora bien, el principal problema al que nos enfrentamos es que tanto entendemos lo que vemos, y que de toda esa complejidad se derive nuestra necesidad de usar MVVM para mejorar la experiencia de los usuarios en nuestras aplicaciones.
Otra nota importante: Si no entiendes la mayoría de cosas que ves, te recomiendo ver al menos la presentación de Aplicaciones Distribuidas que tiene la teoría correspondiente y el primero de los videos de Programación en Capas que hice alguna vez, ya tiene su tiempo, pero al inicio conceptualmente puede servirte bastante.
Resumiré de forma atrevida el tema, diciendo que, el que no podamos controlar lo que sucede cuando hacemos una invocación a través de una red (internet o local) desde nuestros dispositivos, hace que nos veamos en la necesidad de que nuestras aplicaciones respondan y notifiquen a través de la interfaz de usuario lo que está ocurriendo o minimamente que muestren un mensaje indicando que aun estamos trabajando y debemos esperar, hoy en día eso es minimamente lo que espera un usuario, que tal fácil es de lograr de la forma adecuada lleva a cosas que hay que aprender.
Esta es una necesidad típica que se experimenta hace tiempo en la llamada Web 2.0 que ha creado una nueva tendencia en los usuarios de ser más exigentes con las experiencias que ofrecen las interfaces en todo tipo de aplicaciones, por lo que hoy en día muchos pueden estar familiarizados ya con el concepto puesto que han usado el patrón MVC (Modelo Vista Controlador).
Para empezar entonces debemos tener en cuenta 2 puntos, el primero es que trabajar con MVVM nos crea 3 capas lógicas dentro de una capa que conocemos como "Presentación" en el modelo tradicional de Programación en Capas, el segundo, dependiente de este primer punto, es que en estas capas abandonamos de cierta forma los llamados a métodos que estamos acostumbrados a realizar, ya que invocamos métodos que no tienen un retorno directo, si no que envian notificaciones usando eventos y delegados. ¿Que, qué? Si, eso mismo, de entender estas dos ideas es que se va a tratar esta serie de post, la siguiente imagen es el reflejo de lo que dije, y si miran bien es una de las partes del despliegue que les mostré previamente:
Para quienes les gusta leer en inglés, la imagen pertenece al libro gratuito "Developing an Advanced Windows Phone 7.5 App that Connects to the Cloud" publicado por Microsoft, una fuente increible para desarrolladores con ya conocimientos, si te pierdes allá, aquí te espero de vuelta.
Vamos a empezar resumiendo de manera muy sencilla las responsabilidades de las 3 capas lógicas que éxisten dentro de MVVM y poco a poco en la serie de post iremos entendiendo los detalles de cada una. (A los expertos en MVVM espero no molestarlos igual con mi minimalismo, esto es para principiantes)
Vista: La vista es la responsable de contener todos nuestras interfaces de usuario, en el caso de Windows Phone todos los elementos que contienen el marcado XAML. Aqui nos preocuparemos exclusivamente por lo que ve el usuario (etiquetas, listas, cuadros de mensajes, cajas de texto, etc...) y los elementos con los que interactúa para solicitar acciones a la aplicación (botones, gestos, menus, etc...). Ojo, que no nos preocupamos por el código que se ejecuta cuando el usuario solicita algo, solo por proveer el mecanismo para que el usuario pueda solicitarlo.
En este punto cabe aclarar que cada XAML tiene su Code Behind, la mayoría de desarrolladores .NET estan acostumbrados a usar este código que se genera automáticamente al presionar los controles, para implementar allí lógica de la interfaz, y otros un poco menos experimentados lo usan incluso para procesar lógica de negocio.
Si bien MVVM no implica cero Code Behind, si nos lleva necesariamente a usarlo muchisimo menos, sobre todo cuando los controles que usamos tienen la posibilidad de ser usados por el patrón naturalmente.
Por ejemplo (espero no sea un error de mi parte), el Application Bar de Windows Phone 7.5 no permite enlazarlo a las Vistas Modelos a través de comandos (terminos que detallaremos luego), razón por la cual tenemos que implementar algo de Code Behind si queremos dar un comportamiento apropiado a los llamados asincrónicos desde un botón o menú del Application Bar.
Vista Modelo: Estas clases son las encargadas de notificar a las vistas los datos que deben mostrarse o actualizarse y solicitar al modelo cargar datos desde las fuentes de datos. Sin embargo su principal función será tomar los datos que entrega el modelo y traducirlos en estructuras de datos que las vistas puedan mostrar, es allí donde todo se vuelve mágico, si pensamos correctamente en cuales estructuras crear para nuestra aplicación.
Modelo: Esta clases son las encargadas de acceder a las fuentes de datos bien sean locales (en el dispositivo) o remotas, de ahí que necesitemos entender el primer diagráma que les mostré al inicio del post.
Tener fuentes locales es sencillo, hay cientos de tutoriales que enseñan a hacerlo, sin embargo la tendencia actual de las aplicaciones nos llevan a tener aplicaciones conectadas a la nube, y bien alojados en un servidor o hosting tradicional, y este esquema implica tener una aplicación desplegada y disponible para consultar y modificar los datos centrales. Qué tan escalable sea tu aplicación ante un crecimiento inesperado, dependerá mucho más de que tanto hiciste ahí, en tu backend.
Además es importante considerar, que los llamados que hace el modelo a servicios remotos, deben ser realizados en forma asincrónica, y que hay comportamientos de las interfaces que pueden requerir que se desarrollen servicios que despachen a los dispositivos la cantidad de datos apropiada y de acuerdo a las solicitudes de los usuarios, puesto que debemos considerar que muchos de ellos usan las aplicaciones a través de planes de datos con cobro por bytes, cuantos bytes consumen desde nuestroa aplicación es importante, si queremos no queremos quejas al respecto por parte de los usuarios de nuestras aplicaciones.
Bien, por este post, de mi parte es todo.
Les comparto un post con una explicación muy agradable del patrón MVVM y para quienes quieran ir un poco más rápido que mis post, les recomiendo empezar por este video de Josue Yeray, tiene su tiempo pero seguramente despues de verlo varias veces con atención encontrarán que en realidad no es tan dificil.
Nos vemos la próxima
Sorey ;)
lunes, 30 de enero de 2012
No apto para expertos: Windows Phone y yo
Desde fines del año pasado he tenido como meta iniciar una serie de post a través de los cuales enseñar a alguien que recien empieza a desarrollar para Windows Phone. Quien me conozca un poco, sabe que tengo la manía por tratar de explicar las cosas simples y que mi tipo de público no es experto, es más ese tipo de personas que saben poco y tienen prisa y para quien todo está demasiado avanzado para ser comprensible por que apenas y cuentan con nociones básicas de programación. Ni mucho menos espero ayudar con la prisa, pero si motivarlos a darse pausa y aprender.
Hoy día muchos desarrolladores experimentados (cabe aclarar que no lo soy) dan por sentado que muchos conceptos son de manejo general para la gente que empieza a programar, por tanto muchos promulgan lo fácil que es desarrollar para muchas tecnologías solo por que hoy las herramientas lo hacen más fácil, olvidando que ellos casi han crecido y evolucionado con las herramientas y por eso les resulta tan natural y comprensible, pues bien, eso es cierto, muchos además de ellos, pueden desarrollar y hacer cosas bastante avanzadas, pero entre esos "duros de la programación" muchos practican el arte de la imitación y copiar pegar y no tienen claros los conceptos detras de lo que hacen, cosa que a mi particularmente no me resulta agradable, que funcione no significa que está bien.
Por eso es este inicio, probablemente lento y pausado de acuerdo al tiempo que tendré disponible, pero si estas empezando, trataremos de ir bastante despacio, aclarando al menos un poco los conceptos asociados o al menos dejando la inquietud y los mejores recursos relacionados que pueda encontrarme por ahí.
Pretendo seguir una buena idea que me dió @Warnov ¿Por qué no empezar a enseñar programación con Windows Phone? Sería una buena forma de capturar la atención de los que están empezando y aprender nuevas tecnologías al tiempo, sin embargo practicar esto en mi salón de clases no me parecio adecuado con la universidad en que trabajo, así que intentaré hacerlo en mi blog.
Por favor ten en cuenta que no pretendo enseñar a programar, la algoritmia y la lógica de programación (al menos estructurada) son bases que debes tener, ir tan atrás sería pretencioso de mi parte, de hecho la idea no es muy diferente a lo que otros hacen en la red, solo quiero ir dando ideas de lo que conozco y pues ya ustedes me ayudarán pidiendo explicaciones de cosas que deje en el aire o por qué no corrigiendome, yo también aprendo cada día.
Mis post no serán aptos para expertos, pero llevarán toda la buena vibra para quienes deseen aprender, como se lo decía a un amigo alguna vez no encuentro mejor forma de saber si yo misma entiendo, que tratar de explicarlo, si no puedo explicarlo, no lo entiendo, es así de sencillo. ;).
Todo esto nació de intentar explicar el patrón MVVM usado por defecto en las plantillas de Windows Phone, explicar el uso de un patrón es un tema que unos hacen mejor que otros, entender las razones por las que deben aplicarse es algo que toma tiempo y tiene un trasfondo importante. De hecho soy partidaria de que si no entiendes el uso de patrones, sencillamente no los utilices, todo podría volverse un caos. Usa buenas prácticas de programación y construye tu código de forma ordenada antes que hacer cosas que no entiendes.
Para empezar les mencionaré algunos temas en los que evaluarse y preguntar cuanto los entendemos y de esa manera sabremos que tanto esfuerzo debemos colocar en aprender:
Comprensión de conceptos relacionados con orientación a objetos además de los típicos objetos, clases, encapsulamiento, herencia y polimorfismo, entender las raices de todo eso a través de los principios modularidad, reutilización, alta cohesión, bajo acoplamiento, un tanto de programación por capas y mucho más del concepto de frameworks y patrones en especial el patrón observer y de ahí adelante, MVP, MVC y MVVM. Además y obviamente programación básica con C# (Generics, herencia, eventos, delegados, interfaces...), además Silverlight, XML, XAML, Web Services, ahmmm... y mucho más
¿Todo un reto no? Viéndolo así no parece tan simple, pero ya verán que lo logramos ;)
Nos vemos en mi primer post ;)
Suscribirse a:
Entradas (Atom)




















