Seguimiento de clases
Clase que viene
16
Como tema BONUS, comenzaremos a ver el desarrollo en tecnología móvil:
Master/Detail Flow. Ejemplo: Películas.
Vista master. Configuración de una list view.
Vista Detail. Pasaje de info entre actividades.
Búsqueda de películas REST: Agregando un backend al master/detail de películas
BONUS de la aplicación que sigue los préstamos de libros
Tenés una página específica para la tecnología Android.
Clases anteriores
15
Aprenderemos Tests End to End con Cypress con este ejemplo de las tareas
Como tema BONUS, comenzaremos a ver el desarrollo en tecnología móvil:
14
Continuaremos aprendiendo React:
Ejemplo básico del contador con React Context. Aparece la noción de estado global.
13
Continuaremos aprendiendo React:
Tareas de un equipo de desarrollo contra un backend REST (muestra el uso de servicios asincrónicos)
12
Continuaremos estudiando la programación Web reactiva, para lo cual asegurate de instalarte el entorno.
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.
11
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.
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.
Y por último comenzaremos a estudiar la programación Web reactiva, para lo cual asegurate de instalarte el entorno.
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
10
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.
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.
9
Terminaremos de explicar las Apuestas de una ruleta: combos combinados para apostar a pleno o docena, manejo de validaciones de un formulario. Abriremos páginas para desarrollar
union types vs. interfaces
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
Repasaremos los servicios REST con XTRest:
Qué eran servicios REST
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
8
Terminaremos de explicar las Apuestas de una ruleta: combos combinados para apostar a pleno o docena, manejo de validaciones de un formulario. Abriremos páginas para desarrollar
tipado nominal vs. tipado estructural
uso de constantes en lugar de variables estáticas
uso de funciones como forma de reutilización en los tests
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
7
Continuamos nuestro recorrido por Angular, viendo 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.
Luego seguiremos con Apuestas de una ruleta: combos combinados para apostar a pleno o docena, manejo de validaciones de un formulario.
Para ayudarte con la tecnología de manejo de dependencias, te dejamos este artículo de npm
6
Ahora sí arrancamos la programación web client-side con Angular 8. En la página específica de Angular están las instrucciones para instalarte el entorno (esto lo haremos el martes) y después veremos:
el 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. Y de yapa, conoceremos el lenguaje typescript, javascript con chequeo de tipos.
5
Continuaremos viendo el módulo 3: Web estático
Estilos y look & feel
Luego haremos el Taller de maquetado Web y la Introducción a SASS. El taller de maquetado finalmente fue una sesión iterativa de pasos:
4
Comenzaremos hablando de los formularios en Arena con objetos transaccionales
Tendremos un momento para consultar dudas generales
Y luego comenzaremos con los contenidos del módulo 3: Web estático
Arquitectura web
HTML
3
El jueves
hablaremos de testeo unitario con view models
profundizaremos el concepto Application model. Extendiendo el MVC. Tengan en cuenta los consejos que están al final.
navegación y manejo del estado desde un panel de búsqueda hacia el panel de edición
veremos cómo es la validación y manejo de errores, a partir de diferentes técnicas que incluyen el uso de filtros
y veremos el ejemplo Empresa de telefonía donde se muestra cómo diseñar una búsqueda y edición de objetos polimórficos
Material adicional que te dejamos: ejercicios de binding y Tips para Arena en XTend
2
El martes comenzamos el TP para lo cual tenés que tener instalado el entorno, descargados los ejemplos de la página de Arena y definidos los grupos. Ya vimos:
Manejo de la vista
El jueves veremos el segundo ejemplo del taller original: encuestas de una votación, y si tenemos tiempo veremos Application model. Extendiendo el MVC.
1
El martes hablaremos de
Introducción a las interfaces de usuario.
Instalación del entorno, que seguirá basado en el lenguaje Xtend
Descarga de algunos ejemplos
El jueves comenzaremos con la Unidad 2 Desarrollo de interfaces con componentes.
Haremos este taller que pueden hacer por su cuenta en sus casas (tengan cuidado si intentan bajar el googledoc como PDF porque te inserta caracteres raros cuando quieras copiar código y no te compila, si lo vas a descargar que sea en un formato RTF, Word o directamente con el googledoc abierto). La clase se va a centrar en:
Primer ejemplo: un Conversor de medidas MVC. MVC en arena: eventos, binding.
Para pensar: ¿qué pasa cuando diseñamos pantallas sin binding?