El equipo docente está formado por profesores del Departamento de Ingeniería de Sistemas Telemáticos (DIT) que han realizado cursos MOOC anteriormente con mucho éxito. Es el mismo equipo docente que conforma el ?Itinerario Desarrollo Web Fullstack con JavaScript y Node.js? formado por 4 MOOCs. En concreto señalar que este curso solicitado será desarrollado e impartido principalmente por los profesores Álvaro Alonso González y Enrique Barra Arias que imparten React y React Native desde hace 5 años en la asignatura Ingeniería Web del ?Grado en Ingeniería de Tecnologías y Servicios de Telecomunicación? impartido en la ETSIT. El resto de profesores del equipo darán soporte docente durante la creación y colaborarán en la dinamización y resolución de problemas durante el desarrollo del curso. Además se cuenta con el soporte técnico de Abel Carril para la grabación de vídeos y gestión de la plataforma MiriadaX.

El objetivo de esta propuesta es crear un curso de muy alta calidad de desarrollo de aplicaciones de cliente usando las tecnologías de React y React Native de 3 ECTS de carga docente.

Las tecnologías de React y React Native son una manera novedosa y muy potente de realizar el desarrollo de aplicaciones web de cliente, son una de las tecnologías más demandadas en el mercado laboral hoy en día. Y este curso permitirá a los ingenieros egresados dominarlas y hacer sus propias aplicaciones de forma autónoma. Cualquier ingeniero con conocimientos básicos de HTML, CSS y JavaScript (es decir que haya hecho alguna página web básica durante su formación de ingeniería) podrá acceder al curso ya que está diseñado para empezar por la base y terminar por los conceptos avanzados. Esto también permitirá el reciclaje de profesionales que deseen cambiar de ámbito o rama y acercarse más al desarrollo de aplicaciones. Si no se poseen los conocimientos básicos para acceder a este curso se pondrá a la disposición de los alumnos una lista de videos y tareas para adquirirlos previamente a cursarlo o incluso pueden hacer el otro MOOC que tenemos desarrollado sobre desarrollo frontend (https://miriadax.net/curso/html5mooc/).

React es unos de los principales frameworks de creación de aplicaciones que existe hoy en día, es el de mayor crecimiento de oferta de empleo en nuestro país. Por otro lado es una tecnología madura que cuenta con un gran soporte y una comunidad muy activa y la simplicidad a la hora de crear aplicaciones le hacen en una de las mejores herramientas a la hora de realizar desarrollo frontend y junto con la parte de React Native se pueden crear aplicaciones nativas Android e iOS con el mismo código desarrollado para la aplicación web, dotando a esta tecnología de un gran potencial. Es sorprendente que haya una oferta de cursos en inglés sobre React bastante amplia, pero en castellano esta oferta es escasa (de hecho MiriadaX no tiene ningún curso de React ni React Native) y en general de pago y muy cara.

Los objetivos de aprendizaje de este curso son:

• Identificar las diferencias entre Single Page Application (SPA), Multiple Page Application (MPA), aplicaciones híbridas y aplicaciones nativas
• Adquirir los conocimientos básicos sobre la arquitectura de las aplicaciones web de cliente con React
• Ser capaz de desarrollar aplicaciones web de cliente con React de forma autónoma
• Diferenciar entre aplicaciones móviles Android e iOS
• Aprender a desarrollar aplicaciones móviles con React Native

0. Introducción al curso

Bienvenida a los alumnos e introducción a este MOOC

1. Bases del desarrollo de aplicaciones web. Modelo cliente-servidor. Patrón MVC

Este módulo presenta las bases del desarrollo web, HTML, JavaScript, CSS y los modelos y patrones relacionados con este desarrollo tan demandado hoy en día

2. Desarrollo de aplicaciones web basadas en el cliente. Tecnologías y herramientas útiles

En este segundo módulo se presentan las tecnologías relacionadas, las librerías y las herramientas útiles que ayudan al desarrollo web. Estas herramientas como Babel, Firebug, Minify, Watchify, ...

3. Conceptos base de React y JSX

React, conceptos básicos, el estado y las propiedades. Introducción al lenguaje JSX que es una extensión de JavaScript

4. Componentes y su ciclo de vida

Los componentes de React se explican en este módulo con ejemplos sencillos, también se explica el ciclo de vida de los componentes

5. Composición de componentes

Este módulo presenta la forma en que los componentes se comunican y coordinan para crear la aplicación, de nuevo con ejemplos sencillos

6. Hooks, Context y Rutas

Este módulo introduce los hooks, el contexto y la manera de configurar rutas con React Router para que la aplicación pueda tener histórico y rutas parciales

7. Añadiendo Redux, completando la arquitectura

En este módulo se explica la arquitectura de Redux que complementa con React para gestionar el estado y las acciones, es una alternativa a los hooks especialmente interesante para aplicaciones grandes

8. React Native. Introducción, conceptos básicos, componentes y APIs

Este módulo ofrece una introducción a React Native, un framework que permite construir aplicaciones móviles nativas utilizando JavaScript y React. Se describirán los diferentes componentes, características y APIs que proporciona React Native.

9. React Native. Navegadores, componentes nativos y conceptos avanzados

Este módulo presenta los navegadores de React Native para cambiar entre pantallas, introduce más componentes y termina con algunos conceptos avanzados que vienen muy bien para desarrollar aplicaciones nativas Android e iOS

El curso será grabado con el plató SAGA (https://innovacioneducativa.upm.es/saga/plato-saga). Tecnología que conocemos muy bien por haber sido desarrollada por el Grupo de Innovación Educativa al que pertenece el equipo docente de este curso. Se pretende utilizar múltiples modos de grabación (solo ponente, ponente + transparencias, ponente + pantalla para desarrollo de código guiado, etc.).

También se utilizará una herramienta de autocorrección que hemos utilizado con mucho éxito en el resto de cursos MOOC. del ?Itinerario Desarrollo Web Fullstack con JavaScript y Node.js?. Dicha herramienta se llama Moocauto y es gratuita y open source. https://openbase.com/js/moocauto. Gracias a esta herramienta los alumnos reciben feedback instantáneo sobre el trabajo realizado y por tanto está comprobado que su satisfacción es mayor al no tener que esperar a una corrección asíncrona por parte de los profesores o de otros alumnos (tipo p2p). La motivación al progresar obteniendo los conocimientos del curso hace que la tasa de abandono sea menor.

Por último este curso ofrece a los alumnos una actividad gamificada de tipo escape room educativa. En ella los alumnos tienen que superar una serie de retos relacionados con los conocimientos aprendidos en el curso siguiendo una narrativa de conseguir desactivar una bomba que irá a explotar. La pueden realizar en parejas por lo que esto fomenta la colaboración entre alumnos y crea comunidad. La realización de esta actividad es posible gracias a un software realizado por el equipo docente de este MOOC y que ha sido probado y validado en multitud de escenarios (titulaciones, escuelas, otros moocs y universidades distintas) y por la comunidad científica en varias publicaciones certificando su eficiencia en términos de mejora del aprendizaje del alumno y adherencia al curso (ejemplo: https://ieeexplore.ieee.org/document/8936344).

El curso está dirigido a usuarios con conocimientos básicos de HTML, JavaScript y CSS interesados en aprender a utilizar React y/o React Native para el desarrollo de aplicaciones

Si no se poseen los conocimientos básicos para acceder a este curso se pondrá a la disposición de los interesados una lista de videos y tareas para adquirirlos previamente a realizar este curso o incluso se puede cursar previamente el MOOC sobre desarrollo frontend (https://miriadax.net/curso/html5mooc/).

El curso cuenta con actividades de evaluación de tres tipos:

• tests de contenidos al final de cada módulo
• ejercicios o tareas de desarrollo de código corregidos con la herramienta de corrección automática Moocauto
• ejercicios o tareas de desarrollo de código corregidos mediante evaluación entre pares p2p

La combinación de corrección automática con la herramienta Moocauto y evaluación entre pares p2p creemos que es muy beneficiosa ya que por un lado el alumno obtiene feedback instantáneo de su avance en dichas prácticas y con las prácticas p2p puede ver el código desarrollado por compañeros, analizarlo y evaluarlo con lo que también aprende mucho.

En los ejercicios de contenido los alumnos tendrán que ir desarrollando aplicaciones paso a paso, en los primeros módulos de un modo muy guiado y poco a poco de forma más autónoma y aplicaciones con más complejidad. Las aplicaciones primero se desarrollan con React y posteriormente con React Native (obteniendo la aplicación Android e iOS equivalente a la aplicación web de React).

Las aplicaciones que deben desarrollar los alumnos son, un juego de un tres en ralla (con turnos, partidas, comprobación del ganador, etc.), una aplicación de gestión de películas (con visualizar, añadir, editar y borrar de los elementos) y un juego tipo cuestionario (donde hay que bajarse datos para elaborar el cuestionario en tiempo real y enviar las respuestas del jugador al servidor). Con la primera aprenden sobre los componentes y arquitectura de las aplicaciones, con la segunda formularios y gestión de datos y con la tercera interacción con el servidor entre otras cosas.

El equipo docente del curso será el encargado de dinamizarlo.  Para ello entrará en los foros y pondrá noticias relacionadas con la tecnología React, planteará debates y por supuesto resolverá dudas planteadas por los participantes del MOOC.