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.
- Activities y Fragments en diferentes dispositivos
- 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.
- Ejemplo del Mundial 2018 Rusia
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:
- Binding avanzado
- 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
- Mi Cursada. Script Clase Introducción:
- Introducción a las interfaces de usuario.
- Arena
- Instalación del entorno, que seguirá basado en el lenguaje Xtend
- Intro a Arena. Disclaimer.
- Cómo configurar un proyecto Arena (dominio + vista)
- 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?