Bluejacketeer

Bluejacketeer Descripción

Bluejacketeer es un sistema que ayuda a estudiar a personas de la corporación médica y marineros en general para pasar el Navy-wide Advancement Exam (exámenes avanzados de la marina de los Estados Unidos).

Nuestro cliente nos contactó cuando tuvo problemas con su sitio web en 2015 con varios problemas técnicos y un diseño que no respondía a las necesidades del momento, lo que dañaba seriamente el comportamiento esperado y la experiencia del usuario. Es por esto que comenzamos trabajar para solucionar cada uno de estos problemas críticos que venían arrastrados del proveedor anterior.

La característica clave del sitio web es ofrecer a sus miembros una herramienta sólida para estudiar y aumentar sus posibilidades de ser promovidos, eso solo es posible si los usuarios pueden seguir fácilmente el programa de estudio. En ese momento la experiencia del usuario no era buena, muchas fallas en el sistema no le daban un aspecto profesional como nuestro cliente esperaba. En 2016, luego de varios meses de trabajo lanzamos un primer rediseño utilizando un nuevo diseño web receptivo bajo la antigua plataforma PHP y también desarrollamos una primera versión de la aplicación móvil utilizando Angular y Phonegap (cordova) como base.

En 2017 y 2018, estuvimos involucrados en la migración del antiguo sitio web de PHP a una nueva plataforma utilizando React web para la aplicación y NodeJS para el REST API. Esta versión se lanzó con Heroku, pero no fue lo suficientemente buena para manejar el tráfico, especialmente durante la temporada de exámenes. Al aumentar los recursos, se convirtió en una problema con los costos mensuales en infraestructura. A fines de 2018 y durante el primer trimestre de 2019, asistimos a nuestro cliente en el rediseño de otro sitio web, esta vez incluimos la infraestructura del servidor como una parte clave para mejorar la experiencia del usuario (UX) y al mismo tiempo mantener los gastos bajo control, ejecutando la plataforma de una forma adecuada.

Una agencia de diseño se encargó de la apariencia y nuestro equipo de desarrolladores creó toda la web de acuerdo con el diseño dado combinando distintas técnicas para mejorar UX. Desarrollamos la nueva aplicación React combinando una plantilla responsiva e integrando con el REST API existente.

Durante el rediseño del sitio web, también comenzamos a rehacer la aplicación móvil utilizando tecnologías nativas. Después de 6 meses de arduo trabajo, finalmente lanzamos el nuevo sitio web y la nueva aplicación móvil en noviembre de 2019.

Estructura del sitio web

Debido a la naturaleza de esta aplicación, sumado a las necesidades desde la perspectiva de marketing, recomendamos separar un Sitio de ventas usando Wordpress como sitio primario y la Aplicación web con React en un subdominio.

El sitio web de ventas es clave para promover el programa de estudio, atraer a nuevos estudiantes y brindar ayuda a los usuarios existentes. Este sitio debe ser fácil de editar y mantenerse realmente rápido. Por lo tanto, hemos elegido Wordpress que es uno de los mejores CMS, fácil de usar para cualquier persona no técnica y realmente rápido gracias a nuestras mejoras de optimización y rendimiento. Manejamos este sitio en un servidor VPS con su propia base de datos MySQL.

La plataforma e-learning se ejecuta en un subdominio. Este sitio debe ser rápido también, pero no necesitábamos SEO aquí, entonces elegimos React web combinado con el API existente para desarrollar esta aplicación, manteniendo todo dinámico en un SPA (aplicación de una sola página). La aplicación React está alojada en AWS utilizando el servicio S3 y la aplicación nodeJS en un servidor VPS separado (un droplet en DigitalOcean). A su vez, integramos un clúster para la base de datos PostgreSQL. Esta estructura nos permitió utilizar y combinar de una manera realmente inteligente diferentes hosting y servicios, manteniendo redundancia y alto rendimiento como los aspectos más importante.

Adicionalmente, integramos un panel de administración bien simple que permite al personal de la empresa editar cada sección y mantener todo el contenido actualizado. La aplicación de administración incluye características básicas para crear y administrar usuarios de administración, asignar diferentes permisos y, por supuesto, la capacidad de administrar la bibliografía que se utilizará en el programa de estudio. Uno de los desafíos en este panel fue el panel de búsqueda, hemos definido una página rápida y organizada para los resultados de búsqueda.

La plataforma también incluye las siguientes integraciones

  • Stripe: la pasarela de pago en línea que permite al cliente pagar con las tarjetas de crédito más populares (AmEx, Visa, Master Cards). En el panel de administración, nuestro cliente puede verificar el historial de pago de cada usuario.
  • Intercom: plataforma de mensajes instantáneos para chat en vivo, sección de ayuda y servicio de atención al cliente
  • Apple Store / iTunes: para pagos recurrentes, cuando los clientes se registraron desde iPhone o iPad

Diseño adaptable

Después de lanzar una nueva versión estable del sitio web existente en 2018, comenzamos a trabajar en el nuevo diseño web, con una apariencia moderna y 100% amigable para dispositivos móviles. Para esto integramos lo mejor de React web combinado con el framework Bootstrap v4, rehaciendo por completo la aplicación frontend y sin afectar las características existentes. Obviamente, enfocados en mejorar la experiencia del usuario.

La REST API existente también se fue optimizado, mejorando la estructura de la base de datos y las respuestas de los endpoints más usados. Cuando estuvimos ayudando a crear esa plataforma en 2018, solamente nos encargamos del proceso de control de calidad, detectando problemas de diseño y reportandolos. Entonces, cuando tuvimos la oportunidad de aplicar cambios reales en la aplicación, fuimos a fondo. Tomamos nuestros informes realizados anteriormente y comenzamos a trabajar en varias mejoras. Pudimos cambiar tablas en la base de datos PostgreSQL pero también modificamos más de 30 endpoints en el sistema backend para acelerarlos a todos. Nuestro equipo se centró en UX desde el comienzo del rediseño, porque sabemos que una parte clave de las mejoras están relacionadas con la velocidad de carga en cada página.

Aplicación móvil

Al mismo tiempo que implementamos el nuevo sitio web usando React, comenzamos a planear una nueva aplicación móvil utilizando React Native, manteniendo las mismas funcionalidades que la app anterior, con la capacidad de responder cuestionarios donde sea que estuvieran los usuarios ¡incluso sin conexión!

De la misma manera que hicimos la antigua aplicación móvil Phonegap en 2015, nuestro cliente nos envió Adobe XD con el nuevo diseño para esta aplicación. Los tomamos para integrar los requisitos técnicos, por ejemplo, cómo podemos aprovechar las ventajas del módulo HTML + Javascript existente que implementamos para el sitio web y reutilizar parte de él para desarrollar la aplicación móvil, por eso hemos elegido React Web y React Native.

Los usuarios deben contratar una membresía para poder iniciar sesión en la aplicación móvil. Esta membresía se puede comprar en el sitio web. Implementamos Stripe Gateway con pagos únicos y recurrentes. 

La ventaja de usar React Native es que podemos usar Javascript, que es una tecnología con la que estamos muy familiarizados, pero al final del proceso de compilación del código vamos a publicar una aplicación nativa para cada plataforma. Esto es más rápido de codificar, incluye mejores efectos nativos y mucha más confiabilidad en términos de la experiencia del usuario.

Además de las funcionalidades básicas, también implementamos la lógica para detectar la conexión a Internet (datos móviles o wifi) para que podamos cambiar el modo en línea o fuera de línea. Cuando está desconectado, el usuario aún puede usar el 100% de las características de la aplicación gracias a una base de datos SQLite que integramos para guardar el progreso del usuario internamente en el dispositivo. Tan pronto como la aplicación "detecte" conexión nuevamente, el módulo de sincronización se activará automáticamente para enviar el progreso a la nube.

Con la aplicación móvil, los miembros de Bluejacketeer pueden estudiar exactamente de la misma manera que lo hacen en el sitio web. Aún mejor, pueden usar ambos, sincronizar el progreso de su ruta de estudio y continuar aprendiendo en su dispositivo favorito. La aplicación móvil se creó principalmente con React Native y NativeBase, que proporcionan componentes integrados para un diseño responsivo que garantiza la compatibilidad con una gran lista de dispositivos existentes. La aplicación móvil está compilada para instalarse en plataformas iOS y Android, por supuesto se publicaron en Apple Store y Google Play respectivamente. Soporte de aplicaciones móviles en versiones iOS +10, Android +8.

Apple Store Google Play

Programa de estudio, flashcards y Quals

Implementamos un nuevo sistema de tarjetas (flashcard) para proporcionar a los miembros un mejor enfoque para memorizar fácilmente las respuestas a miles de preguntas del examen. Esto incluye el desarrollo para que el administrador del sistema pueda gestionar tarjetas en una sección del panel de administración, crear cada tarjeta y asociarla a una pregunta existente. De esta manera el usuario puede elegir la interfaz de pregunta-respuesta tradicional (trivia) o sistema de tarjetas para completar una ruta de estudio.

Respecto de los "Quals", se implementó como un nuevo enfoque para mejorar las habilidades. Esto se implementó como un nuevo componente que permite a los administradores cargar, editar y eliminar bibliografía, capítulos y libros que cada estudiante puede consultar para las pruebas. Adicionalmente, se puede personalizar cada ruta de estudio.

Tecnologías

El sitio web fue desarrollado por un proveedor anterior originalmente, era un framework PHP personalizado con solo un puñado de funcionalidades. Allá por el 2015, mejoramos la seguridad del sistema PHP integrando un ORM y ampliando posteriormente una primer version del REST API del servidor utilizando Slim Framework. Este API era una parte clave del desarrollo de la primer versión de la aplicación móvil, ya que necesita manejar todas las solicitudes y entregar resultados para la aplicación.

Durante 2018 y 2019 hemos rediseñado el sitio web completamente utilizando nuevas tecnologías como React y NodeJS. Mejoramos notablemente el rednimiento del REST API y la seguridad de cada servidor utilizando CloudFlare. Utilizamos el mismo REST API para la aplicación móvil, ya que necesita manejar todas las solicitudes y entregar resultados sincronizados en la web. Esta nueva versión del RESTful API se implementó usando SailsJS.

  • React JS: es un framework frontend de código abierto desarrollado y respaldado por Facebook.
  • Bootstrap: es un framework frontend receptivo para implementar diseños web entre navegadores y dispositivos cruzados
  • React Native: es un framework de código abierto para aplicaciones móviles.
  • SailsJS: este es un framework de nodeJS que se utilizó para la API de back-end
  • Wordpress: Utilizamos la versión self-hosted de este gran CMS de código abierto.
  • AWS: hemos implementado todas las aplicaciones frontend utilizando los servicios S3
  • Digital Ocean: hemos implementado la API REST que combina un servidor CentOS VPS y un clúster PostgreSQL para la base de datos.
  • CloudFlare: servicio 24/7 que aumenta la seguridad y la estabilidad para el servidor API que informa automáticamente cualquier incidente.
  • New Relic: servicio 24/7 que informa automáticamente cualquier incidente en el sitio web.
  • Sentry: servicio 24/7 que informa automáticamente cualquier incidente en la app móvil.

Visitar sitio aquí


Etiquetado como

Etiquetas

Serfe info(at)serfe.com https://www.serfe.com/images/serfe_logo_text.png https://www.serfe.com/images/serfe_logo_text.png FALUCHO 2032, S3016LDB, SANTO TOME, SANTA FE, ARGENTINA 1-305-5375397