Unidad 3

Introducción

En esta unidad vas a repasar algunos técnicas de implementación de sistemas físicos interactivos 1 que te permitirán implementar la experiencia interactiva del curso. Además, vas a profundizar en el funcionamiento de las aplicaciones y en los conceptos que sustentan este funcionamiento. Finalmente, verás cómo depurar posibles problemas que se presenten al poner en funcionamiento las aplicaciones.

¿Qué aprenderás en esta unidad?

En esta fase, recordarás los conceptos básicos necesarios para implementar la aplicación interactiva en tiempo real de este curso.

Actividad 01

caso de estudio: arquitectura de la aplicación

Enunciado: en esta actividad vas a analizar la arquitectura de la aplicación que está en este sitio repositorio.

Esta actividad será grupal. La realizaremos durante las sesiones 1 y 2 de la semana 5 del curso. Vamos a recorrer lentamente el código de la aplicación y a construir un diagrama de su arquitectura. Las grabaciones de las sesiones 1 y 2 están aquí:

Te pediré que no tomes notas, que te concentres en la explicación y que hagas preguntas si algo no te queda claro.

Vamos a realizar el diagrama aquí

Entrega: vas a analizar de nuevo la aplicación tu mismo y a construir de memoria, pero con análisis crítico, un diagrama de la arquitectura de la aplicación. Al hacer esto vas a identificar qué partes de la aplicación no entiendes y vas a poder hacer preguntas más precisas.

Para construir el diagrama, puedes usar draw.io.

📝 Actividad pendiente por iniciar

El archivo student.md está vacío

Actividad 02

caso de estudio: ejecución de la aplicación

Enunciado: en esta actividad vas a ejecutar la aplicación que está en este sitio repositorio.

De nuevo, el ejercicio será grupal, presta atención a los pasos y los conceptos asociados a cada paso. Luego vas a ejecutar la aplicación tu mismo y a hacer preguntas si algo no te queda claro.

Entrega: vas a documentar los pasos que seguiste para ejecutar la aplicación y a documentar qué hace cada paso.

📝 Actividad pendiente por iniciar

El archivo student.md está vacío

Investigación

En esta fase, vas a experimentar y ganar confianza con las herramientas que te permitirás implementar y depurar el tipo de aplicaciones interactivas en tiempo real que desarrollarás en el curso.

Actividad 03

Pruebas locales

Enunciado: clona en tu computador este sitio repositorio.

Vas a repetir localmente los pasos que seguiste en la actividad anterior, pero antes tendrás que instalar la aplicación node.js en tu computador. Observa bien el sitio web de descarga para elegir la versión correcta para tu sistema operativo. Incluso nota que puedes descargar una versión Windows Installer (.msi) o macOS Installer (.pkg).

Entrega: vas a documentar los pasos que seguiste para ejecutar la aplicación y a escribir qué hace cada paso. Trata de hacer este ejercicio de manera consciente. La idea es que detectes vacíos conceptuales y preguntes si algo no te queda claro o no entiendes la razón de un paso.

📝 Actividad pendiente por iniciar

El archivo student.md está vacío

Actividad 04

Diagrama de la arquitectura de la aplicación

Enunciado: realiza un diagrama de la arquitectura de la aplicación al ejecutarla en local.

Entrega: realiza el diagrama. Puedes usar draw.io.

📝 Actividad pendiente por iniciar

El archivo student.md está vacío

Actividad 05

Experimentos locales

Enunciado: vas a volver a ejecutar la aplicación localmente y a experimentar con ella. El objetivo de esto es que realmente ganes confianza con la aplicación y que puedas hacer preguntas más precisas sobre ella.

Ten presente que puedes:

Instalar visual studio code.
Abrir la carpeta con el código de la aplicación para que puedas editar partes de la aplicación si te hace falta (te hará falta).

Experimento 1: qué tal si en vez de correr la aplicación en un cliente móvil y en un cliente de escritorio, corres ambas instancias en tu computador. Puedes usar dos browser diferentes para esto. No olvides abrir la consola de desarrollo para ver los mensajes que se envían y se reciben. Recuerda observar también la consola del servidor.

Experimento 2: qué tal si juegas con diferentes tipos de mensajes al hacer socket.emit. ¿Qué se te ocurre modificar?

Experimento 3: qué tal si ahora modificas también los datos que estás enviando. ¿Qué se te ocurre modificar?

Experimento 4: nota que en los datos que se envían en el mensaje se define un tipo de mensaje (touch). Elimina este campo en los datos y modifica el tipo de mensaje que envías al hacer socket.emit.

Entrega: muestra los códigos de los experimentos y analiza los resultados que obtienes de cada uno de ellos. ¿Qué aprendiste?

📝 Actividad pendiente por iniciar

El archivo student.md está vacío

Aplicación

En esta fase, vas a poner a prueba los conceptos que repasaste y profundizaste. Te voy a proponer un problema y la idea es que lo resuelvas usando lo aprendido en la fase de investigación.

Actividad 06

Reto de transferencia del aprendizaje

Enunciado: con todo lo que ya aprendiste vas enfrentarte a un escenario completamente nuevo. Este reto demandará de ti lo siguiente:

Estar atento a los detalles y refinar aquellos conceptos que aún no te quedan claros.
Vas a usar un modelo del lenguaje para generar código, pero ya tendrás las herramientas conceptuales y la terminología técnica para guiar al modelo para que haga lo que necesitas.

Vas a construir una aplicación que le permita a un cliente capturar una imagen de su cámara o del sistema de archivos y enviarla a otro cliente remoto.

Entrega: muestra el código de la aplicación: servidor y clientes. Explica claramente:

¿Cómo se comunican los clientes con el servidor?
¿Cómo se comunican los clientes entre sí?
¿Qué tipo de mensajes se envían?
¿Qué tipo de datos se envían?
¿Qué tipo de eventos se generan?
¿Cómo es el flujo de datos entre los clientes y el servidor?
¿Cómo es el flujo de datos entre los clientes?

🚀 Tu solución:

Actividad 6

codigo del desktop

let conn;
let camara;
let btnCapturar;
let btnTransmitir;
let selectorArchivo;
let imagenActual;

function setup() {
  createCanvas(400, 400);
  background(200);

  conn = io('http://localhost:3000');

  conn.on('connect', () => {
    console.log('Conexión establecida con el servidor');
  });

  camara = createCapture(VIDEO);
  camara.size(400, 300);
  camara.hide();

  btnCapturar = createButton('Capturar Imagen');
  btnCapturar.position(10, height + 10);
  btnCapturar.mousePressed(capturarImagen);

  btnTransmitir = createButton('Enviar Imagen');
  btnTransmitir.position(140, height + 10);
  btnTransmitir.mousePressed(transmitirImagen);
  btnTransmitir.hide();

  selectorArchivo = createFileInput(cargarImagenLocal);
  selectorArchivo.position(280, height + 10);
}

function capturarImagen() {
  imagenActual = camara.get();
  btnTransmitir.show();
}

function cargarImagenLocal(archivo) {
  if (archivo.type === 'image') {
    loadImage(archivo.data, (img) => {
      imagenActual = img;
      transmitirImagen();
    });
  }
}

function transmitirImagen() {
  if (imagenActual) {
    const datos = imagenActual.canvas.toDataURL();
    conn.emit('image', datos);
    console.log('Imagen transmitida al servidor');
    btnTransmitir.hide();
  }
}

function draw() {
  background(200);
  image(camara, 0, 0);

  if (imagenActual) {
    image(imagenActual, 50, 320, 100, 75);
  }
}

mobile:

let socketCon;
let imagenRecibida;

function setup() {
  createCanvas(400, 400);
  background(240);

  socketCon = io('http://localhost:3000');

  socketCon.on('connect', () => {
    console.log('Cliente móvil conectado');
  });

  socketCon.on('image', (contenido) => {
    console.log('Nueva imagen recibida');

    if (imagenRecibida) {
      imagenRecibida.remove();
    }

    imagenRecibida = createImg(contenido, 'foto');
    imagenRecibida.hide();

    setTimeout(() => {
      redraw();
    }, 100);
  });

  noLoop();
}

function draw() {
  background(240);

  if (imagenRecibida) {
    image(imagenRecibida, 50, 50, 300, 300);
  }
}

¿Cómo se comunican los clientes con el servidor?

Los clientes (desktop y mobile) se conectan al servidor mediante WebSockets usando la librería socket.io. Esto ocurre con la línea:

conn = io(‘http://localhost:3000’); // en desktop
socketCon = io(‘http://localhost:3000’); // en mobile

Esta conexión permite intercambiar mensajes en tiempo real sin necesidad de recargar la página.

¿Cómo se comunican los clientes entre sí?

Los clientes no se comunican directamente entre sí. En cambio, el cliente desktop envía un mensaje al servidor, y este lo redistribuye (con socket.broadcast.emit(…)) a los demás clientes conectados, como el cliente mobile.

Por ejemplo:

conn.emit(‘image’, datos); // desde el cliente desktop

Y en el servidor:

socket.broadcast.emit(‘image’, datos); // reenviado a otros clientes

¿Qué tipo de mensajes se envían?

Evento image: que transporta una imagen capturada o cargada por el usuario desde el cliente desktop hasta el servidor, y luego al cliente mobile.

¿Qué tipo de datos se envían?

El dato enviado es una cadena de texto codificada en base64 que representa una imagen.

Ejemplo del formato:

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgA..

Esto se obtiene con:

imagenActual.canvas.toDataURL();

¿Qué tipo de eventos se generan?

connect: cuando el cliente se conecta exitosamente al servidor.

image: cuando se envía o recibe una imagen.

Cómo es el flujo de datos entre los clientes y el servidor?

El cliente desktop toma una foto desde la cámara o selecciona una imagen local.

La imagen se codifica como una cadena base64.

Se envía al servidor con conn.emit(‘image’, datos).

El servidor recibe ese evento y reenvía la imagen a los demás

¿Cómo es el flujo de datos entre los clientes?

La comunicación sigue este flujo indirecto a través del servidor:

Cliente Desktop ──(emit ‘image’)──▶ Servidor ──(broadcast ‘image’)──▶ Cliente Mobile

El cliente desktop actúa como emisor, y el cliente mobile como receptor. No hay contacto directo entre ellos.

Consolidación y metacognición

En esta fase, vas a reflexionar acerca de lo que aprendiste en la unidad y cómo lo aprendiste.

Actividad 07

Consolidación de esta unidad

Enunciado: en esta actividad vas a reflexionar acerca de lo que aprendiste en esta unidad.

Revisa de nuevo cada una de las actividades de esta unidad. Lista los conceptos que aprendiste en cada una de ellas y define estos conceptos.
¿Qué conceptos nuevos aprendiste en esta unidad?
¿Qué conceptos te resultaron más difíciles de entender?
Toma la aplicación que construiste en la actividad 6. Analiza cada parte de la aplicación, lista los conceptos que aplicaste y cómo los aplicaste. Muestra las partes del código donde aplicaste cada concepto.
¿Qué limitaciones encuentras en lo aprendido en esta unidad si deseas aplicar los aprendido para implementar una experiencia interactiva usando el modelo input-procesamiento-output?
¿Qué tendrías que aprender para superar estas limitaciones?

Entrega: muestra tus respuestas a las cuestiones anteriores.

📝 Actividad pendiente por iniciar

El archivo student.md está vacío

Actividad 08

Metacognición

Enunciado: en esta actividad vas a reflexionar acerca de lo que aprendiste en esta unidad y cómo lo aprendiste.

Ve a la última actividad de la unidad anterior. Revisa lo que planeaste. ¿Se cumplió? ¿Por qué si o por qué no?
¿Cómo fue tu gestión del tiempo en esta unidad? ¿Aprovechaste el tiempo en las sesiones de clase? ¿Por qué crees que sí o por qué crees que no?
¿Invertiste el tiempo de trabajo por fuera del aula? ¿Por qué sí o por qué no? Si no lograste cumplir con tus compromisos, ¿Qué te impidió hacerlo? ¿Qué estrategias concretas vas a implementar para mejorar tu gestión del tiempo en la próxima unidad?
En esta unidad aprendiste unos conceptos nuevos. ¿Qué crees que falta aprender en la próxima unidad para lograr unas aplicaciones interactivas en tiempo real que permitan construir aplicaciones muy ricas en interacción usando el modelo input-procesamiento-output?

Entrega: muestra tus respuestas a las cuestiones anteriores.

Ten presente que al terminar la próxima unidad regresarás a la última cuestión de esta actividad para que revises si lo que crees que debías aprender, realmente lo aprendiste.

📝 Actividad pendiente por iniciar

El archivo student.md está vacío