{"id":9178,"date":"2022-05-11T12:52:52","date_gmt":"2022-05-11T10:52:52","guid":{"rendered":"https:\/\/teletrabajoynegocios.com\/teletrabajador\/?p=9178"},"modified":"2022-05-11T12:52:52","modified_gmt":"2022-05-11T10:52:52","slug":"como-hemos-desarrollado-orbe-en-2-meses","status":"publish","type":"post","link":"https:\/\/teletrabajoynegocios.com\/teletrabajador\/como-hemos-desarrollado-orbe-en-2-meses\/","title":{"rendered":"C\u00f3mo hemos desarrollado ORBE en 2 meses"},"content":{"rendered":"<div id=\"telet-2004285701\" class=\"telet-antes-del-contenido telet-entity-placement\"><a href=\"https:\/\/quaderno.io\/?via=jose-manuel94\" aria-label=\"Quaderno General (Spanish) &#8211; 728&#215;90\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/teletrabajoynegocios.com\/teletrabajador\/wp-content\/uploads\/sites\/3\/2020\/11\/Quaderno-General-Spanish-728x90-1.png\" alt=\"\"  srcset=\"https:\/\/teletrabajoynegocios.com\/teletrabajador\/wp-content\/uploads\/sites\/3\/2020\/11\/Quaderno-General-Spanish-728x90-1.png 728w, https:\/\/teletrabajoynegocios.com\/teletrabajador\/wp-content\/uploads\/sites\/3\/2020\/11\/Quaderno-General-Spanish-728x90-1-300x37.png 300w\" sizes=\"(max-width: 728px) 100vw, 728px\" width=\"728\" height=\"90\"   \/><\/a><\/div><p>Este es el primero de muchos posts hablando de c\u00f3mo hemos afrontando el desarrollo de nuestro primer producto.<\/p>\n<p>Digo que es el primero porque pretendemos lanzar m\u00e1s art\u00edculos de este tipo para poder contaros c\u00f3mo se nos ha dado esta aventura y los problemas\/soluciones que hemos podido aplicar en cada momento.<\/p>\n<h2>El Origen<\/h2>\n<p>Vamos a empezar con algo de historieta, de esas que enganchan, para darles forma a los acontecimientos.<\/p>\n<p>Cuando montamos\u00a0<strong><em>Mushdesk<\/em><\/strong>\u00a0sab\u00edamos desde el principio que quer\u00edamos desarrollar aplicaciones para el ecosistema Shopify. Ya no era solo una cuesti\u00f3n de curiosidad sino de oportunidad. El mundo nos brindaba la posibilidad de contar algo as\u00ed que nos pusimos manos a la obra haciendo una primera matriz de aplicaciones para poder filtrar todas aquellas ideas que \u00edbamos anotando como \u00abposibles apps\u00bb.<\/p>\n<p>Uno de los grandes problemas de los\u00a0<em>merchants<\/em>\u00a0(tiendas) es que necesitan mejores herramientas para internacionalizarse. En ese sentido Shopify est\u00e1 desarrollando lo que ellos llaman\u00a0<a href=\"https:\/\/www.shopify.es\/markets\" target=\"_blank\" rel=\"noopener noreferrer\"><em>Shopify Markets<\/em><\/a>, que b\u00e1sicamente se resume en la capacidad de poder configurar zonas (pa\u00edses) con precios diferentes, idiomas diferentes, etc sobre tu mismo comercio de manera que puedas ofrecer una experiencia m\u00e1s personalizada por zona geogr\u00e1fica a tus clientes. Tambi\u00e9n tienen una aplicaci\u00f3n para ofrecer una ventana modal a los\u00a0<em>merchants<\/em>\u00a0que permite preguntar a los clientes a qu\u00e9 versi\u00f3n de la tienda (por pa\u00eds) quieren ir. No obstante, no es suficiente para poder dotar a los\u00a0<em>merchants<\/em>\u00a0de la tecnolog\u00eda necesaria para llevar a cabo la internacionalizaci\u00f3n con \u00e9xito dado que la aplicaci\u00f3n no es lo suficientemente buena como para sacar el m\u00e1ximo potencial de\u00a0<em>Markets<\/em>\u00a0y se queda a medio camino<em>.<\/em><\/p>\n<p>Aqu\u00ed entramos nosotros con\u00a0<a href=\"https:\/\/apps.shopify.com\/orbe\" target=\"_blank\" rel=\"noopener noreferrer\"><strong>ORBE<\/strong><\/a>, la aplicaci\u00f3n de geolocalizaci\u00f3n para Shopify. \u00bfPor qu\u00e9 ORBE? porque los\u00a0<em>merchants<\/em>\u00a0necesitan la mejor tecnolog\u00eda para poder llevar a cabo su internalizaci\u00f3n. ORBE es una aplicaci\u00f3n 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\u00a0<strong><em>Shopify Markets<\/em><\/strong>.<\/p>\n<hr \/>\n<p><img decoding=\"async\" src=\"https:\/\/teletrabajoynegocios.com\/teletrabajador\/wp-content\/uploads\/sites\/3\/2020\/07\/articulos.png\" \/><\/p>\n<p>[wp-rss-aggregator template=\u00bbDefault\u00bb]<\/p>\n<hr \/>\n<h2>Nos ponemos en marcha<\/h2>\n<p>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\u00edamos desarrollado nunca antes una aplicaci\u00f3n para Shopify, pero s\u00ed que est\u00e1bamos dentro del ecosistema como developers para terceros a nivel de personalizaci\u00f3n y desarrollo de temas principalmente. As\u00ed empezamos:<\/p>\n<ul>\n<li aria-level=\"1\">El desarrollo comenz\u00f3 la primera semana de febrero, concretamente el d\u00eda 7 de febrero de 2022.<\/li>\n<li aria-level=\"1\">El stack tecnol\u00f3gico fue sencillo:\n<ul>\n<li aria-level=\"2\"><strong>Backend<\/strong>: PHP con integraciones directas a la API REST y API en GraphQL de Shopify. Esto lo hicimos as\u00ed porque era el lenguaje con el que m\u00e1s experiencia part\u00edamos de base.<\/li>\n<li aria-level=\"2\"><strong>Frontend<\/strong>: dado que quer\u00edamos implementar una ventana modal y necesit\u00e1bamos usar JavaScript si o si optamos por hacerlo con JavaScript Vanilla por una cuesti\u00f3n de rendimiento y compatibilidad con cualquier theme y navegador.<\/li>\n<\/ul>\n<\/li>\n<li aria-level=\"1\">A nivel de tiempos estuvimos a part-time mientras segu\u00edamos haciendo desarrollos para clientes.<\/li>\n<\/ul>\n<h2>Primeras piedras en el camino<\/h2>\n<p>A finales de febrero tuvimos unas cuantas piedras en el camino:<\/p>\n<ol>\n<li aria-level=\"1\">No d\u00e1bamos 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.<\/li>\n<li aria-level=\"1\">Despu\u00e9s de tener un Figma result\u00f3n y parte del c\u00f3digo base montado, resulta que nos enteramos que Shopify justo ha lanzado lo que ellos llaman\u00a0<a href=\"https:\/\/shopify.dev\/apps\/online-store\/theme-app-extensions\" target=\"_blank\" rel=\"noopener noreferrer\"><strong><em>Theme App Extensions<\/em><\/strong><\/a>. B\u00e1sicamente se trata de un sistema de aplicaciones en formato secciones de Shopify que t\u00fa puedes configurar de manera sencilla y ellos se encargan de renderizar todo el front\/back del CRUD de tu aplicaci\u00f3n. En otras palabras, que puedes decirle que quieres un formulario con 10 opciones y Shopify lo genera todo autom\u00e1tico de manera nativa dentro de su backoffice. Esto obviamente nos hizo dedicar la \u00faltima 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\u00e1s pero sinceramente fue un gran paso adelante.<\/li>\n<li aria-level=\"1\">Shopify tiene demasiadas tecnolog\u00edas diferentes para hacer una aplicaci\u00f3n. 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\u00eda JS para el backoffice de tu aplicaci\u00f3n, 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\u00f3n est\u00e1 ah\u00ed no te enteras de qu\u00e9 tienes que usar para tu proyecto hasta que estas cubierto de barro hasta las rodillas. Me hubiese gustado encontrar algo un poco m\u00e1s guiado.<\/li>\n<li aria-level=\"1\">Olv\u00eddate de pensar una soluci\u00f3n sencilla de comunicaci\u00f3n 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\u00e1s que inventarte algo con metafields a traves del API desde Python y leerlo luego con Liquid o alg\u00fan JavaScript desde el front de la tienda.<\/li>\n<\/ol>\n<h2>El funcionamiento<\/h2>\n<p>Hagamos un inciso en el camino.<\/p>\n<p>Suena extra\u00f1o, pero aqu\u00ed 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\u00f3mo hacer la aplicaci\u00f3n montamos lo siguiente.<\/p>\n<p>ORBE se compone de 3 patas:<\/p>\n<ul>\n<li aria-level=\"1\">App Embed (el backoffice)<\/li>\n<li aria-level=\"1\">Theme App Extension (la modal que se ve en el front)<\/li>\n<li aria-level=\"1\">API de Geolocalizaci\u00f3n y Webhooks<\/li>\n<\/ul>\n<h3>App Embed<\/h3>\n<p>Este es el backoffice de la aplicaci\u00f3n. Aqu\u00ed Shopify te dice que eres libre de hacerlo como quieras porque ellos lo que hacen es que llaman a tu aplicaci\u00f3n a trav\u00e9s 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\u00f3n web que luego se incrusta dentro de Shopify pero m\u00e1s tarde te dar\u00e1s cuenta que para sacarle el m\u00e1ximo partido lo ideal es usar ReactJS porque el API REST que tienen no tiene todo lo necesario y tendr\u00e1s que usar otras APIs e incluso la librer\u00eda JavaScript que ellos llaman\u00a0<a href=\"https:\/\/shopify.dev\/apps\/tools\/app-bridge\">App Bridge<\/a>\u00a0que permite conectar el iframe para hacer el login. Este login es via Oauth y aqu\u00ed 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.<\/p>\n<h3>Theme App Extension<\/h3>\n<p>Esta es la ventana modal que permite al cliente que est\u00e1 visitando la tienda poder interactuar y cambiar su experiencia de internacionalizaci\u00f3n. Esta ventana se puede personalizar a trav\u00e9s del editor visual de Shopify de manera muy sencilla con una vista previa. Adem\u00e1s de la parte visual de la ventana modal esta app extension contiene el JavaScript que realiza la petici\u00f3n a la API de geolocalizaci\u00f3n y controla las cookies de idioma para poder redireccionar autom\u00e1ticamente al pa\u00eds que mejor se adapte a la ubicaci\u00f3n del cliente que est\u00e1 visitando la tienda.<\/p>\n<h3>API de Geolocalizaci\u00f3n y Webhooks<\/h3>\n<p>Necesitamos un buen sistema de geolocalizaci\u00f3n y que sea muy r\u00e1pido. 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\u00f3n del cliente sino tambi\u00e9n informaci\u00f3n adicional que pudi\u00e9ramos guardar en base de datos a traves del backoffice y que no tenemos forma de enviar al frontend.<\/p>\n<p>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\u00f3n. Es curioso que la unica manera de controlar el estado de la instalaci\u00f3n en tu propia base de datos es a traves de un Webhook opcional que recibes cuando el usuario desinstala la aplicaci\u00f3n, es decir, que de opcional no tiene nada, pero eso te enterar\u00e1s cuando te rechacen en el proceso de revisi\u00f3n del que ahora pasar\u00e9 a explicar nuestra experiencia.<\/p>\n<h2>Proceso de revisi\u00f3n<\/h2>\n<p>El 25 de marzo subimos la aplicaci\u00f3n a la App Store a trav\u00e9s del formulario que te pone en cola para la revisi\u00f3n de la app. El proceso en s\u00ed mismo no es demasiado complejo siempre que cumplas con las diferentes cuestiones que ellos detallan en la documentaci\u00f3n. Hay 2 partes para pasar con \u00e9xito la validaci\u00f3n y que la aplicaci\u00f3n pueda estar disponible en la App Store: la parte funcional y la parte de l\u00f3gica de negocio.<\/p>\n<p>La parte funcional b\u00e1sicamente es que la aplicaci\u00f3n 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\u00f3n. Tengo que deciros que en nuestro caso la primera vez que subimos la aplicaci\u00f3n nos la echaron para atr\u00e1s en cuesti\u00f3n de 1 hora porque el bot detect\u00f3 que hab\u00eda procesos que no estaban bien. Ah\u00ed fue donde descubrimos que necesit\u00e1bamos si o si implementar el webhook opcional (que de opcional no tiene nada) que nos permite saber si una tienda ha desinstalado la aplicaci\u00f3n para poder hacer el proceso de reinstalaci\u00f3n correctamente.<\/p>\n<p>La parte de l\u00f3gica 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\u00f3n de la persona porque simplemente Shopify no tiene un entorno para probar procesos como la instalaci\u00f3n o la desinstalaci\u00f3n de manera controlada como si simulases ser un\u00a0<em>merchant<\/em>. Dicho esto, una vez llegamos a la revisi\u00f3n por parte de una persona, todo se realiza a trav\u00e9s de correo electr\u00f3nico, ellos van probando la aplicaci\u00f3n y ven que todo est\u00e9 correcto, que funcionen los pagos, etc.<\/p>\n<p>Fue en este punto cuando nos echaron para atr\u00e1s la aplicaci\u00f3n, tuvimos diferentes revisores a lo largo de 1 mes. Estuvimos intent\u00e1ndolo como unas 6 &#8211; 7 veces y cada vez se iban acotando m\u00e1s los errores. Muchas veces eran cosas muy sencillas como por ejemplo que se nos pasase poner una \u00ab\/\u00bb en el final de una URL o cuando en la casilla de precio del tier free no pusimos nada cuando en realidad ten\u00edamos 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\u00f3n.<\/p>\n<p>Como conclusiones de este periodo, quiz\u00e1s son excesivamente escrupulosos en la revision pero despu\u00e9s una vez visualizas el resultado final se nota una mayor calidad en la aplicaci\u00f3n. Realmente el desarrollo como tal fueron 2 meses y uno de proceso de revisi\u00f3n constante en el que testear, es decir, empezamos en febrero y finalmente en abril lanzamos la aplicaci\u00f3n.<\/p>\n<p>\u00bfSab\u00e9is que es lo mejor de todo? El proceso de revisi\u00f3n se alarg\u00f3 tanto que nos dio tiempo a lanzar una actualizaci\u00f3n que mejoraba bastante el MVP a\u00f1adiendo funcionalidades y cambios menores as\u00ed que para cuando nos validaron correctamente la aplicaci\u00f3n lanzamos directamente la siguiente versi\u00f3n.<\/p>\n<h2>Conclusiones<\/h2>\n<p>En cuesti\u00f3n de casi 3 meses tenemos nuestra primera aplicaci\u00f3n,\u00a0<a href=\"https:\/\/apps.shopify.com\/orbe\"><strong>ORBE<\/strong><\/a>, funcionando en la App Store. Estamos preparando la siguiente versi\u00f3n y creciendo en usuarios y posiciones en la App Store. En pr\u00f3ximos art\u00edculos os contaremos c\u00f3mo estamos evolucionando el producto y las cifras.<\/p>\n<p><a href=\"https:\/\/mushdesk.com\/\"><em>Alberto Gonz\u00e1lez<\/em><\/a><\/p>\n<div id=\"telet-3171187701\" class=\"telet-despues-del-contenido telet-entity-placement\"><a target=\"_blank\" href=\"\/\/aff.lucushost.com\/resources\/click\/?n=gDxoXMAJ&aff=756\"><img decoding=\"async\" border=\"0\" alt=\"LucusHost, el mejor hosting\" src=\"\/\/aff.lucushost.com\/resources\/banners\/?zoneid=5123&n=gDxoXMAJ&aff=756\" \/><\/a><\/div>","protected":false},"excerpt":{"rendered":"<p>Este es el primero de muchos posts hablando de c\u00f3mo hemos afrontando el desarrollo de nuestro primer producto. Digo que es el primero porque pretendemos lanzar m\u00e1s art\u00edculos de este&hellip; <\/p>\n","protected":false},"author":1,"featured_media":9179,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_links_to":"","_links_to_target":""},"categories":[7],"tags":[20,19],"class_list":["post-9178","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-practicos","tag-fuprisa","tag-jose-manuel-fuentes-prieto"],"nelio_content":{"autoShareEndMode":"never","automationSources":{"useCustomSentences":false,"customSentences":[]},"efiAlt":"","efiUrl":"","followers":[1],"highlights":[],"isAutoShareEnabled":true,"networkImageIds":[],"permalinkQueryArgs":[],"series":[],"suggestedReferences":[]},"jetpack_featured_media_url":"https:\/\/teletrabajoynegocios.com\/teletrabajador\/wp-content\/uploads\/sites\/3\/2022\/05\/hombre-asustado-muchas-tareas-trabajo.jpg","_links":{"self":[{"href":"https:\/\/teletrabajoynegocios.com\/teletrabajador\/wp-json\/wp\/v2\/posts\/9178","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/teletrabajoynegocios.com\/teletrabajador\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/teletrabajoynegocios.com\/teletrabajador\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/teletrabajoynegocios.com\/teletrabajador\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/teletrabajoynegocios.com\/teletrabajador\/wp-json\/wp\/v2\/comments?post=9178"}],"version-history":[{"count":2,"href":"https:\/\/teletrabajoynegocios.com\/teletrabajador\/wp-json\/wp\/v2\/posts\/9178\/revisions"}],"predecessor-version":[{"id":9186,"href":"https:\/\/teletrabajoynegocios.com\/teletrabajador\/wp-json\/wp\/v2\/posts\/9178\/revisions\/9186"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/teletrabajoynegocios.com\/teletrabajador\/wp-json\/wp\/v2\/media\/9179"}],"wp:attachment":[{"href":"https:\/\/teletrabajoynegocios.com\/teletrabajador\/wp-json\/wp\/v2\/media?parent=9178"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/teletrabajoynegocios.com\/teletrabajador\/wp-json\/wp\/v2\/categories?post=9178"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/teletrabajoynegocios.com\/teletrabajador\/wp-json\/wp\/v2\/tags?post=9178"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}