Cómo hemos desarrollado ORBE en 2 meses

Este es el primero de muchos posts hablando de cómo hemos afrontando el desarrollo de nuestro primer producto.

Digo que es el primero porque pretendemos lanzar más artículos de este tipo para poder contaros cómo se nos ha dado esta aventura y los problemas/soluciones que hemos podido aplicar en cada momento.

El origen

Vamos a empezar con algo de historieta, de esas que enganchan, para darles forma a los acontecimientos.

Cuando montamos Mushdesk sabíamos desde el principio que queríamos desarrollar aplicaciones para el ecosistema Shopify. Ya no era solo una cuestión de curiosidad sino de oportunidad. El mundo nos brindaba la posibilidad de contar algo así que nos pusimos manos a la obra haciendo una primera matriz de aplicaciones para poder filtrar todas aquellas ideas que íbamos anotando como "posibles apps".

Uno de los grandes problemas de los merchants (tiendas) es que necesitan mejores herramientas para internacionalizarse. En ese sentido Shopify está desarrollando lo que ellos llaman Shopify Markets, que básicamente se resume en la capacidad de poder configurar zonas (países) con precios diferentes, idiomas diferentes, etc sobre tu mismo comercio de manera que puedas ofrecer una experiencia más personalizada por zona geográfica a tus clientes. También tienen una aplicación para ofrecer una ventana modal a los merchants que permite preguntar a los clientes a qué versión de la tienda (por país) quieren ir. No obstante, no es suficiente para poder dotar a los merchants de la tecnología necesaria para llevar a cabo la internacionalización con éxito dado que la aplicación no es lo suficientemente buena como para sacar el máximo potencial de Markets y se queda a medio camino.

Aquí entramos nosotros con ORBE, la aplicación de geolocalización para Shopify. ¿Por qué ORBE? porque los merchants necesitan la mejor tecnología para poder llevar a cabo su internalización. ORBE es una aplicación que te permite geolocalizar al cliente en tu tienda (incluso si el cliente accede a la tienda con una VPN) y ofrecerle la mejor experiencia posible con una ventana modal no intrusiva completamente personalizable y compatible con Shopify Markets.

Nos ponemos en marcha

Ya tenemos la idea, la necesidad no resuelta y la oportunidad de mercado. Nos ponemos en marcha con el desarrollo. Tengo que decir que previamente no habíamos desarrollado nunca antes una aplicación para Shopify, pero sí que estábamos dentro del ecosistema como developers para terceros a nivel de personalización y desarrollo de temas principalmente. Así empezamos:

• El desarrollo comenzó la primera semana de febrero, más concretamente, el 7 de febrero de 2022.
• El stack tecnológico fue sencillo:
• Backend: PHP con integraciones directas a la API REST y API en GraphQL de Shopify. Esto lo hicimos así porque era el lenguaje con el que más experiencia partíamos de base.
• Frontend: dado que queríamos implementar una ventana modal y necesitábamos usar JavaScript si o si optamos por hacerlo con JavaScript Vanilla por una cuestión de rendimiento y compatibilidad con cualquier theme y navegador.
• A nivel de tiempos estuvimos a part-time mientras seguíamos haciendo desarrollos para clientes.

Primeros piedras en el camino

A finales de febrero tuvimos unas cuantas piedras en el camino:

1. No dábamos a vasto desarrollando para clientes y haciendo el producto a la vez. Como somos 2 personas tuvimos que optar porque uno se dedicase full producto y el otro full cliente para no morir los dos por intentar llegar a todo.

2. Después de tener un Figma resultón y parte del código base montado, resulta que nos enteramos que Shopify justo ha lanzado lo que ellos llaman Theme App Extensions. Básicamente se trata de un sistema de aplicaciones en formato secciones de Shopify que tú puedes configurar de manera sencilla y ellos se encargan de renderizar todo el front/back del CRUD de tu aplicación. En otras palabras, que puedes decirle que quieres un formulario con 10 opciones y Shopify lo genera todo automático de manera nativa dentro de su backoffice. Esto obviamente nos hizo dedicar la última semana del mes en ver como poder aprovechar todo el potencial de Shopify a pesar de tener que desechar parte del proyecto. Parece un paso atrás pero sinceramente fue un gran paso adelante.

3. Shopify tiene demasiadas tecnologías diferentes para hacer una aplicación. Esto es un poco raro y como developer me deja algo confundido, pero Shopify por lo visto considera que es algo bueno mantener el legacy en su producto. Tienes API REST, API GraphQL, API Admin, una librería JS para el backoffice de tu aplicación, Liquid como lenguaje para el front pero solo de themes y de theme app extensions, webhooks, herramientas de desarrollo que solo funcionan con determinadas apps y finalmente un framework CSS que, aunque ellos dicen que funciona con JavaScript Vanilla realmente no le sacas el mismo provecho que con ReactJS. En definitiva, que, aunque la documentación está ahí no te enteras de qué tienes que usar para tu proyecto hasta que estas cubierto de barro hasta las rodillas. Me hubiese gustado encontrar algo un poco más guiado.

4. Olvídate de pensar una solución sencilla de comunicación entre backoffice y parte frontend de la tienda. Son entornos muy cerrados. Si haces un backoffice con Python por poner un ejemplo y quieres usar datos que almacenas en una base de datos en la ficha de producto de la tienda por poner otro ejemplo, date por muerto. Tendrás que inventarte algo con metafields a traves del API desde Python y leerlo luego con Liquid o algún JavaScript desde el front de la tienda.

El funcionamiento

Hagamos un inciso en el camino.

Suena extraño, pero aquí estamos para destripar todo el proceso y voy a explicaros lo curioso que es el funcionamiento de una app tan sencilla en apariencia como ORBE en Shopify. Llegados a este punto, aproximadamente en marzo cuando descubrimos cómo hacer la aplicación montamos lo siguiente.

ORBE se compone de 3 patas:

• App Embed (el backoffice)
• Theme App Extension (la modal que se ve en el front)
• API de Geolocalización y Webhooks

Aplicación integrada

Este es el backoffice de la aplicación. Aquí Shopify te dice que eres libre de hacerlo como quieras porque ellos lo que hacen es que llaman a tu aplicación a través de un iframe incrustado en su panel. Es un poco espada de Damocles, al principio te vienes arriba y piensas que es positivo porque puedes usar cualquier framework tanto front como backend dado que es una aplicación web que luego se incrusta dentro de Shopify pero más tarde te darás cuenta que para sacarle el máximo partido lo ideal es usar ReactJS porque el API REST que tienen no tiene todo lo necesario y tendrás que usar otras APIs e incluso la librería JavaScript que ellos llaman App Bridge que permite conectar el iframe para hacer el login. Este login es via Oauth y aquí volvemos a lo mismo, puedes hacer el login tanto con frontend como con backend aunque luego vas a terminar pasando por el aro de usar su App Bridge porque es obligatorio para poder publicar en la App Store.

Theme App Extension

Esta es la ventana modal que permite al cliente que está visitando la tienda poder interactuar y cambiar su experiencia de internacionalización. Esta ventana se puede personalizar a través del editor visual de Shopify de manera muy sencilla con una vista previa. Además de la parte visual de la ventana modal esta app extension contiene el JavaScript que realiza la petición a la API de geolocalización y controla las cookies de idioma para poder redireccionar automáticamente al país que mejor se adapte a la ubicación del cliente que está visitando la tienda.

API de Geolocalización y Webhooks

Necesitamos un buen sistema de geolocalización y que sea muy rápido. Esto lo hacemos con nuestro propio API a la que llamamos desde el JS de la ventana modal y es el que nos permite obtener no solo la geolocalización del cliente sino también información adicional que pudiéramos guardar en base de datos a traves del backoffice y que no tenemos forma de enviar al frontend.

Tema Webhooks, es SUPER importante implementarlos. Hay dos tipos, obligatorios para cumplir la GDPR y opcionales para controlar eventos de la tienda o de la aplicación. Es curioso que la unica manera de controlar el estado de la instalación en tu propia base de datos es a traves de un Webhook opcional que recibes cuando el usuario desinstala la aplicación, es decir, que de opcional no tiene nada, pero eso te enterarás cuando te rechacen en el proceso de revisión del que ahora pasaré a explicar nuestra experiencia.

Proceso de revisión

El 25 de marzo subimos la aplicación a la App Store a través del formulario que te pone en cola para la revisión de la app. El proceso en sí mismo no es demasiado complejo siempre que cumplas con las diferentes cuestiones que ellos detallan en la documentación. Hay 2 partes para pasar con éxito la validación y que la aplicación pueda estar disponible en la App Store: la parte funcional y la parte de lógica de negocio.

La parte funcional básicamente es que la aplicación funcione bien, es decir, que se pueda instalar, que se pueda acceder con Oauth, que se pueda desinstalar, etc. Este proceso lo revisa un bot con una serie de tests que realiza sobre la aplicación. Tengo que deciros que en nuestro caso la primera vez que subimos la aplicación nos la echaron para atrás en cuestión de 1 hora porque el bot detectó que había procesos que no estaban bien. Ahí fue donde descubrimos que necesitábamos si o si implementar el webhook opcional (que de opcional no tiene nada) que nos permite saber si una tienda ha desinstalado la aplicación para poder hacer el proceso de reinstalación correctamente.

La parte de lógica de negocio la revisa una persona una vez has pasado el test del bot. Tengo que deciros que nosotros tuvimos 2 intentos con el bot antes de llegar a la revisión de la persona porque simplemente Shopify no tiene un entorno para probar procesos como la instalación o la desinstalación de manera controlada como si simulases ser un merchant. Dicho esto, una vez llegamos a la revisión por parte de una persona, todo se realiza a través de correo electrónico, ellos van probando la aplicación y ven que todo esté correcto, que funcionen los pagos, etc.

Fue en este punto cuando nos echaron para atrás la aplicación, tuvimos diferentes revisores a lo largo de 1 mes. Estuvimos intentándolo como unas 6 - 7 veces y cada vez se iban acotando más los errores. Muchas veces eran cosas muy sencillas como por ejemplo que se nos pasase poner una "/" en el final de una URL o cuando en la casilla de precio del tier free no pusimos nada cuando en realidad teníamos que poner 0. No os voy a mentir, hubo fallos que encontraron dado que hacen de betatesters que nos vino muy bien que nos los dijeran para mejorar la aplicación.

Como conclusiones de este periodo, quizás son excesivamente escrupulosos en la revision pero después una vez visualizas el resultado final se nota una mayor calidad en la aplicación. Realmente el desarrollo como tal fueron 2 meses y uno de proceso de revisión constante en el que testear, es decir, empezamos en febrero y finalmente en abril lanzamos la aplicación.

¿Sabéis que es lo mejor de todo? El proceso de revisión se alargó tanto que nos dio tiempo a lanzar una actualización que mejoraba bastante el MVP añadiendo funcionalidades y cambios menores así que para cuando nos validaron correctamente la aplicación lanzamos directamente la siguiente versión.

Conclusiones

En cuestión de casi 3 meses tenemos nuestra primera aplicación, ORBE, funcionando en la App Store. Estamos preparando la siguiente versión y creciendo en usuarios y posiciones en la App Store. En próximos artículos os contaremos cómo estamos evolucionando el producto y las cifras.