Clases 2018

Como tema BONUS, comenzaremos a ver el desarrollo en tecnología móvil:

• Introducción al desarrollo con Android
  • Primer ejemplo: conversor de millas a kilómetros. Activities, vista y modelo.
  • Cómo configurar ícono y título de la aplicación
• Ciclo de vida de las actividades
• Master/Detail Flow. Ejemplo: Películas.
  • Vista master. Configuración de una list view.
  • Vista Detail. Pasaje de info entre actividades.
  • Activities y Fragments en diferentes dispositivos

Tenés una página específica para la tecnología Android.

Y por último veremos la tecnología Ionic con un ejemplo: Carga de Productos

Seguimos con React:

• Haremos una mejora a las funciones reductoras del contador con React Redux, como pueden ver en este branch
• Y seguiremos con el ejemplo Mundial 2018 - Rusia: es una serie de ejemplos que permite ir conociendo diferentes conceptos de la tecnología
  • comenzamos con una búsqueda de los países que juegan la copa, en base al grupo que le tocó en la primera fase o en la descripción. Repasamos componentes customs, estado, props, servicios, etc.
  • luego agregamos la posibilidad de ingresar los resultados de los partidos del mundial, definiendo rutas con React
  • en la tercera versión podrás ver la tabla de posiciones que se irá actualizando dinámicamente a medida que cargás los resultados, utilizando React Redux para tener en un store los resultados actualizados del mundial

Continuaremos aprendiendo React:

• Tareas de un equipo de desarrollo contra un backend REST (muestra el uso de servicios asincrónicos, sin Redux)
• Tenés un ejemplo básico del contador utilizando React Redux, con React Bootstrap. Aparece la noción de estado global.

Comenzaremos a estudiar la programación Web reactiva, para lo cual veremos:

• Hola-mundo: el primer ejemplo en React, contiene dos componentes
  • un contador al que podemos sumarle o restarle uno
  • un label que permite saludar a una persona (muestra cómo pasarle parámetros a un componente)
  • explica los conceptos componente, props, estado, y da una introducción al testeo unitario de componentes con Jest + Enzyme
• Conversor: el tradicional conversor de millas a kilómetros.
  • Hay un branch conversor-inmutable que define un conversor con estado, más parecido a los ejemplos vistos anteriormente.
  • Explica el ciclo de vida mutación de estado y posterior render, testing y la arquitectura de ambas soluciones

Hay un Apunte introductorio a ReactJS que recomendamos leer para entender la filosofía de la programación funcional que vas a profundizar en la materia Paradigmas de Programación.

También tenés la documentación oficial de ReactJS para estudiar los conceptos principales.

• Vamos a estudiar el mecanismo de trabajo asincrónico propio de javascript (y que NodeJS fuerza) a partir del ejemplo de promises.
• Repasaremos el ejemplo de Tareas simplificando nuestra comunicación asincrónica con el backend utilizando la sintaxis async / await. Esto lo pueden descargar en el siguiente branch.
• Y te dejamos un material interesante sobre los errores comunes al trabajar con promises
• Y para ver cómo evitamos repetición de ideas veremos el ejemplo Streaming - series y películas: componentes visuales reutilizables para agregar diferentes colecciones de una serie o película, uno para actores y otro para calificaciones de la película. También la serie y la película comparten un componente padre donde cargan la información compartida, solo se define una vez.
• Por último, veremos cómo migrar una aplicación web (la de tareas con routing) a una de escritorio mediante el framework Electron. Te dejamos el link al branch que explica paso a paso cómo hacerlo.

• Comenzaremos conectaremos un frontend que permite actualizar la lista de tareas pendientes de un equipo de desarrollo utilizando como backend nuestro servicio XTRest: el ejemplo es Tareas. Le prestaremos especial atención a la comunicación y al manejo de errores.

• Comenzaremos a estudiar servicios REST con XTRest:
  • Haremos una breve introducción a los servicios REST
  • Y luego empezaremos a ver el primer ejemplo en XTrest: Tareas, veremos cómo probarlo en POSTMAN
  • Repasaremos lo visto con el segundo ejemplo, Biblioteca
  • Tendremos una muy breve introducción a templates server-side con el ejemplo del Conversor

• Búsqueda de libros: a partir de aquí vemos los services de Angular como objetos encargados de conocer un origen de datos y recolectar información. En principio el servicio es solamente local. El ejemplo cuenta también la definición de pipes custom para filtrar una búsqueda en forma local + el testeo unitario de un componente utilizando un stub del servicio de Angular. Para la vista se utiliza el framework Material Design for Bootstrap, que de aquí en adelante será nuestro estándar.
• Tareas Routing: muestra un ejemplo de aplicación Master/Detail, donde se genera un Alta-Modificación de Tareas pendientes, y se introduce el framework de routing de Angular que permite definir la navegación de componentes

Continuaremos conociendo Angular, en este caso

• Componentes reutilizables: en este ejemplo se muestra cómo crear componentes reutilizables que tienen su propio estado, en particular
  • un componente que muestra un usuario dentro de una tabla HTML de usuarios
  • un componente contador que muestra un número y permite que el usuario sume o reste ese valor de a uno
  • Para la vista se utiliza el framework Material Design.
• Apuestas de una ruleta: combos combinados para apostar a pleno o docena, manejo de validaciones de un formulario.

Ahora sí arrancamos la programación web client-side con Angular 6. En la página específica de Angular están las instrucciones para instalarte el entorno (esto lo haremos el martes) y después estudiaremos estos ejemplos:

• Conversor: aquí aprenderás sobre cómo crear una aplicación desde cero con Angular CLI, el mecanismo de binding entre vista y modelo dentro de un formulario template, las validaciones, las transformaciones de datos (pipes built-in) y el testeo unitario. Para la vista se utiliza el framework Bootstrap Twitter.

Comenzaremos haciendo un Taller de maquetado Web, aprovechando para hablar de Responsiveness

Luego haremos una breve Introducción a SASS

Terminaremos de cerrar los conceptos de Arena

• Validación y manejo de errores.
• Repasaremos los conceptos salientes: binding, arquitectura general de la solución en Arena, widgets, navegación, estado de la vista y pasaje de información entre vistas, y profundizaremos
  • Repositorios y Homes
  • Application Context
  • Manejo de la transacción
• Si hay dudas las despejaremos en ese momento

Y comenzaremos a entender cómo construir una aplicación Web, para lo cual iniciaremos la unidad 3: Web estática

• Introducción a la arquitectura web

En casa podés estudiar acerca de estos temas:

• Formulario HTML básico
• CSS

El jueves hablaremos de testeo unitario con view models, repasaremos el Binding avanzado de propiedades calculadas resolviendo dos requerimientos nuevos:

• primero que inhabilite el botón "Sumar voto" si el candidato es del PRO
• que se inhabilite el botón "Sumar voto" para la zona Capital Federal
• modelaremos un panel de búsqueda
• profundizaremos el concepto Application model. Extendiendo el MVC.
• navegación y manejo del estado hacia el panel de edición
• agregaremos validaciones en la ventana de edición. el uso de filtros
• un ejemplo donde se muestra cómo diseñar una búsqueda y edición de objetos polimórficos

Para ayudarte con el TP tenés dos guías: Cómo crear un panel de edición y Cómo crear un panel de búsqueda

Y también material de consulta sobre: Repositorios y Homes. Application Context. Manejo de la transacción.

El martes terminarán de instalar Arena en sus notebooks y máquinas del LC4 y comenzarán diseñando vista y modelo de las pantallas más simples del TP.

Veremos otros tipos de controllers: transformers para adaptar diferentes valores en los inputs.

Luego continuaremos el taller con el segundo ejemplo: encuesta para votaciones en diferentes zonas. Hay una página similar que cuenta el ejemplo apuestas de un casino.

BONUS: Vamos a generar una tabla con los resultados de la encuesta, y para mostrar el candidato más votado en otro color veremos cómo trabajar con transformers para columnas de una grilla.

Material para ayudarte con el TP: Guía de Componentes. Bindings. Layouts

El ejemplo que muestra widgets es muy útil (fijate los otros ejemplos que hay para bajarse).

El martes hablamos de Mi Cursada. Script Clase Introducción: Introducción a las interfaces de usuario. Configuración del entorno cliente pesado en Arena. Descarga de ejemplos. Intro a Arena. Disclaimer.

El jueves comenzamos con la Unidad 2 Desarrollo de interfaces con componentes.

Haremos este taller para lo cual es importante tener el entorno configurado (bajá el taller en formato RTF o Word, no lo bajes como PDF porque te va a insertar caracteres raros cuando quieras copiar código). La clase se va a centrar en:

• Introducción a Arena. Cómo configurar un proyecto Arena (dominio + vista)
• Primer ejemplo: un Conversor de medidas MVC. MVC en arena: eventos, binding.
• Para pensar: ¿qué pasa cuando diseñamos pantallas sin binding?

• Clases 2017