84

Nueva App de Platzi | Qué Stack de programación y metodologías de diseño usamos

3236Puntos

hace un mes

Hoy Platzi tiene la mejor versión de App Móvil que hayamos tenido jamás, pero detrás de este producto hay varias historias; -Qué tecnologías usamos, en cuánto tiempo se construyó, qué nuevos features tiene, qué esperar en futuras versiones e incluso las charlas difíciles con el CEO acerca de cuándo lanzar.

Comencemos por aclarar qué tecnologías, lenguajes de programación, frameworks y librerías usamos para hacer esta App. (Después hablamos de las discusiones con Freddy)

Comencemos por la parte de enfrente:

Frontend:

Las vistas están hechas con React Native y creamos los componentes más importantes en lenguajes nativos con Kotlin en Android y Objective-C en iOS. Las tres características que están programadas en lenguaje nativo son: El reproductor de video y audio, las descargas y el chromecast.

  • Librerías

La gran mayoría de las librerías fueron creadas por nosotros y únicamente utilizamos tres que son mantenidas por la comunidad. La arquitectura es Flux, es decir, utilizamos Redux para manejar nuestro estado junto con Redux Thunk.

Tener nuestras propias librerías nos a permitido decidir el ritmo con el que actualizamos a las últimas versiones de React Native. La app anterior de Platzi dependía de librerías de terceros que no nos permitía actualizar tan rápido, eso nos llevó a un serio problema de escalabilidad. Aprendimos de esto.

¿Qué librerías escribimos?
El login con Twitter, la integración con Google Analytics, nuestro propio sistema de caché, los módulos de pagos, rotación del teléfono, el reproductor de video con soporte a subtítulos, el reproductor de audio para podcast y cursos en audio, el módulo de Chromecast y el módulo de Descargas. Yep, todo eso.

PD: Hay planes de hacer la librerías Open Source, ya les iremos contando.

Toda esta combinación de decisiones se ve reflejada en el buen rendimiento de la aplicación. Por ejemplo, logramos una reducción del tamaño final de la App de 32mb a 27mb.

frontend.png

Backend:

La arquitectura de Platzi está basada en Microservicios, esto no es un secreto. Nuestro stack está formado por Python + Django, Docker y Postgres. (¿Sabías que hace unos meses pasamos de Mysql a Postgres?)

  • APIs

Un dilema interesante fue; Mejorar el API que ya teníamos o crear uno nuevo desde cero. El resultado fue gris. Decidimos crear un nuevo API reutilizable desde cualquier parte de la plataforma escrito especialmente para la app y además reutilizar algunos endpoints que aún tenía sentido mantener.

Uno de nuestros objetivos principales en esta misión fue buscar reducir en un 50% el tiempo de carga del endpoint de cursos de Platzi. Construir un nuevo API era la mejor oportunidad para lograrlo. Spoiler Alert: Lo logramos, se redujo a la mitad la espera en consultas.

Para el API utilizamos Django Rest Framework, toda la arquitectura y las clases que se derivan a partir de allí (ViewSets, ModelViewSets, Serializers, etc). Uno de los mayores problemas que enfrentamos al utilizar Django Rest Framework es la optimización de los serializadores.

Un poquito de profundidad en este punto: Teníamos el problema del N+1 y era el mayor responsable del tiempo alto de respuesta. Implementé el eager loading (en Django prefetch_related) en todas las consultas que debían tener resultados anidados. Si quieres entender más este punto, te recomiendo este blog post

backend.png

Diseño:

Para comenzar con las fases de diseño, primero decidimos qué características de las versión anterior debíamos mantener y cuáles debíamos añadir con base en las solicitudes de nuestros estudiantes. Decidimos mantener las piezas núcleo de la app: cursos, clases, descargas y perfil.

Después planteamos el flujo completo desde el registro hasta la pasarela de pagos y realizamos bocetos que llenaron una pared completa en una sala de reuniones, lo llamamos el cuarto de la App.

Cuando ya teníamos un flujo consistente hicimos los wireframes utilizando Adobe XD, después creamos cada componente dinámico en Sketch, por último documentamos y creamos un sistema de diseño.

disenno.png

El equipo:

team2.png

Lanzamiento:

Fue por el tercer mes de desarrollo que tuvimos una charla dura con Freddy (el CEO), fue una de esas charlas difíciles, orientadoras, de las que forjan el carácter. Cuando salimos de esa reunión teníamos solo una cosa bien clara: debíamos validar con estudiantes reales lo que estábamos haciendo.

Nosotros como AppTeam queríamos lanzar hasta tener todo perfectamente pulido, pero el camino ideal no es así, había llegado el momento de validar el trabajo de meses.

El nivel de aplicación móvil que lanzamos es un proyecto muy ambicioso, llevó un poco más de medio año y necesitó el trabajo de un equipo 100% dedicado. A nivel negocio, es arriesgado para la empresa lanzar y que que nuestros estudiantes no usen la aplicación.

Es así como decidimos sacar un release en beta para Android, con nuestra mayor base de usuarios. Mientras, Marcela Arias y Julián Mora, UX designer de Platzi, realizaron una serie de pruebas de usuario con estudiantes seleccionados, aquí empezamos a recibir feedback real de nuestro estudiantes.

timeline.png

Sumado todo el feedback que los estudiantes dejaron logramos corregir errores, validamos que el camino que habíamos tomado era el correcto y finalmente, un 30 de Septiembre, cuando decidimos que estaba todo funcional; lanzamos a producción la nueva App de Platzi.

Screen Shot 2019-10-15 at 22.04.29.png
Screen Shot 2019-10-15 at 22.04.15.png
Screen Shot 2019-10-15 at 22.04.02.png
Screen Shot 2019-10-15 at 22.03.49.png
Screen Shot 2019-10-15 at 22.03.34.png
Screen Shot 2019-10-15 at 22.03.23.png
Eduardo Álvarez
Eduardo Álvarez
@walis85300

3236Puntos

hace un mes

Todas sus entradas
Escribe tu comentario
+ 2
Ordenar por:
7
3215Puntos

Increíble, un aplauso para todo el team platzi por compartir las partes del desarrollo, la lectura ha ayudado a orientarme un poco mejor a la hora de seguir un flujo de trabajo. Espero tener la chance de ser parte de este equipo maravilloso a mas tardar el próximo año.

1
un mes

Excelente programación y metodología para el beneficio de nuestro quehacer como docentes.

5
3251Puntos

Ustedes realmente aplican lo que predican. Que buen post. Gracias por tomarse el tiempo de compartir todo eso con la comunidad. y La aplicación es excelente.

1
17 días

Felicitaciones y gracias por este diseño.

1
17 días

Lo mejor de aplicaciones y diseño lo tienen usted aquí, muchas gracias y felicitaciones.

1
733Puntos
4 días

Excelente aplicación

4
8772Puntos

Excelente post: Claro, preciso y muy tecnológico. ¿Qué hacer para ser un usuario y probar las app beta que construye Platzi?

4
3236Puntos
24 días

Lo haces desde el store, te registras como beta tester

2
8772Puntos
20 días

Gracias amigo @walis85300 por tu respuesta… probaré

3
4416Puntos

Les quedó fenomenal la app, gran trabajo sobre todo porque ya se puede ver la info de las carreras tal cual como en la página. Y los cursos destacados todo buenisimo

1
17 días

Lo mejor de diseños lo tienen usted aquí, muchas gracias y felicitaciones.

3
549Puntos

Gracias por compartir su experiencia, vale mucho ver de cerca el proceso que usaron, la tecnología y la metodología.

A nivel técnico realmente mucho el haber creado sus propias librerias, seguro fue complicado pero demuestra que estamos en Platzi y las cosas se hacen bien.

3
5003Puntos

La aplicacion web es buena, pero me parece que la anterior era mas intuitiva y mas vistosa, ademas aquí no aparece los distintivos de los cursos que son obligatorios para aprobar cualquier carrera de Platzi, pues hasta el momento no los he visto

3
5065Puntos

Felicitaciones, son un equipo increíble!
Estaría interesante un tutorial o curso de como integrar componentes nativos con React Native.

3
3027Puntos

Muchísimas gracias por el update, el cambio es más que enorme. Sabiendo que seimpre están abiertos a feedback, me gustaría sugerir que mejoraran la interacción de la app para el feature en android que te permite dividir la pantalla para usar dos apps al mismo tiempo (platzi arriba y app de notas abajo, por ejemplo).

Si bien es cierto que actualmente no hay problemas en ejecutar la app en pantalla dividida, el inconveniente surge en el momento en el que redimensionas cualquiera de las dos pantallas, debido a que la app te saca de la clase que estás mirando y te regresa al listado de clases del curso en cuestión, situación que llega a ser bastante frustrante.

2

Buenas noches, Equipo Platzi

Muy bien, en verdad los felicito por el nuevo diseño de la app de platzi. Un diseño moderno, muy interactivo y funcional.

Me encanto

1
17 días

Les agradezco por toda esta información que me han brindado para aplicarla en mi que hacer a diario Y felicitaciones.

2
1918Puntos

Genial buen post, te enseña todo el proceso del desarrollo de una app de nivel, lo de los microservicios está interesante y seria bueno poder tener un curso o post de esto ya que no se encuentra mucha información sobre los microservicios con python y django, Saludos.

1
17 días

Lo mejor de aplicaciones y diseño lo tienen usted aquí, muchas gracias y felicitaciones.

2
1622Puntos

Hola.
¿Este cambio también afectó a la web principal de Platzi?
Ya no puedo ver mis cursos guardados 😦

1
17 días

Gracias por toda esta información la cual estoy explorando y necesito aplicar en mi que hacer.

2

Gracias por contarnos como la hicieron, la app está buenísima. Sería genial que las librerías fueran open source. Que sigan los éxitos

2
1934Puntos

Muy buena app. Proyecto ambicioso. Excelente trabajo. Gracias por compartir.

2
2953Puntos

Si que esta bien, muy bien.

2
4708Puntos

Cuando lanzan la APP para Android TV ?

2
5214Puntos

Gracias por actualizar la app, les quedo genial.

2
1818Puntos

Hola, voy a probar la nueva app a ver que tal. Una consulta, que navigator utilizan??

Saludos desde Argentina! ❤️

2

Lo único, los LIVES me cierran el programa en iOs.

2
8300Puntos

Viendo como se gestionó el proyecto entiendo porque las fallas que aun siguen estando. Se centraron mucho en la experiencia de usuario y en agregar funcionalidades nuevas, mientras que las funcionalidades viejas como las de descargar los videos aun siguen andando mal. Aplaudo por las funcionalidades nuevas como las rutas de aprendizaje, pero por favor, concentrense en que las cosas anden bien antes de extenderlas. Igualmente no se puede pedir más, son pocos en el proyecto y la verdad lo terminaron en un tiempo bastante acelerado, raro que no exploto todo (o que no comentaron los bloopers del desarrollo jajajaja)

2
243Puntos

Felicidades! Está genial!

2
1779Puntos

Ya sincroniza bien??? Pq antes lo que hacía en la web no se actualizaba en la app y viceversa

2

El diseño de la app esta genial, pero he tenido problemas con la parte funcional de la misma.

  • Descargue dos cursos y al dia siguiente cuando los queria ver, la app se cerraba al intentar entrar a pestaña de descargas, tuve que desinstalar la app

  • Ahora he descargado cursos pero no aparecen en la pestaña de descargas, pero si uso el buscado al abrir el curso, me aparece descargado

  • Los cursos que llevo en la app, no me aparecen como vistos en la plataforma web.

2
2152Puntos

Por fin se sincroniza el progreso de los cursos entre las diferentes plataformas?

2
4Puntos

La revisé y solo veo que tiene videos y no tiene para practicar el código tipo Sololearn?

Si es solo para ver videos, la verdad creo que no aporta mucho…

2
5340Puntos

El app se ve genial, pero sería muchísimo mejor si en el sitio web organizan las rutas de la misma forma en que quedaron en el app, lo cual generaría una verdadera omnicanalidad para Platzi.

2
4541Puntos

No lo se ustedes pero a mi no me agrada para nada django,siento que te tienes que regir mucho a sus reglas.

2
508Puntos

Mostrarnos como manejaron este tipo de proyecto tiene un valor sin igual para muchos… simplemente gracias por compartirlo.

2

Muchas felicidades, probaré pronto lo nuevo de Chromecast. 😄

2
5003Puntos

Faltan los iconos que dicen que cursos son obligatorios y cuales no para hacer los exámenes de las carreras de Platzi…por favor retomen eso

2
13614Puntos

A mi no me funciona, se me quedan los cursos en blanco. Diganme una dirección y les envío los pantallazos.
Gracias.

2
3006Puntos

Me gusto mucho el nuevo app, lo descargue para Andriod y funciona muy bien. La usabilidad es facil de entender

2
311Puntos

Es fascinante conocer el detrás de bambalinas, tener en mente que un producto/app no solamente debe estar construido con un lenguaje por ser el que conocemos o por ser fácil de usar sino por las vondades que nos otorgan.

1
242Puntos

Buenisimo el Post, da gusto leer contenido de este estilo mil gracias por el aporte ❤️

1

Les agradezco por toda esta información que me han brindado para aplicarla en mi que hacer a diario Y felicitaciones.

1

Felicitaciones por todas estas metodologías de diseño, las cuales le están aportando tanto a mi familia en su que hacer como profesionales. Gracias

1

Super chevere y muy interesante, mi prima ya lo esta explorando. Felicitaciones.

1

Genial sin palabras uffffff felicitaciones.

1

Uffffffffffffff genial lo estamos explorando. Graciass

1

FELICITACIONES POR ESTE GRAN DISEÑO, YA LO ESTOY EXPLORANDO. GRACIAS

1

felicitaciones por tan excelente diseño.

1

Cracks, me encanta que too el equipo sea joven, activo, y que tomen el atrevimiento de asumir retos tan grandes ¡son unas maquinas! Mi sueño es estar trabajando junto a ustedes algún día.

1

FELICITACIONES Y GRACIAS POR ESTE DISEÑO EL CUAL SERA DE GRAN UTILIDAD EN NUESTRO QUE HACER COMO DOCENTES. FELICITACIONES.

1

MUCHAS GRACIAS POR ESTE EXCELENTE PROGRAMA EL CUAL ME SERÁ DE GRAN UTILIDAD EN MI QUE HACER COMO DOCENTE. FELICITACIONES.

1

FELICITACIONES POR ESTA HERRAMIENTA, LA CUAL ES SUPER GENIAL PARA NUESTRO QUE HACER.

1

ME TOME EL TIEMPO DE LEER DETENIDAMENTE Y VEO LO ESPECTACULAR DE ESTA HERRAMIENTA PARA TRABAJARLA NOSOTROS COMO PROFESIONALES. FELICITACIONES.

1

ES SUPER GENIAL ESTA PROGRAMACIÓN, FELICITACIONES.

1

Felicitaciones por este grande diseño super genial para nuestro trabajo como docentes.