Cómo crear tu primera aplicación de Shopify

¿Por qué crear una aplicación de Shopify?

Siempre me ha entusiasmado cómo está creciendo el mercado del comercio electrónico y he realizado varios intentos de sumergirme en este mundo. Hace unos cinco años, un socio y yo creamos un sitio web de comercio electrónico que vendía y entregaba flores, un juguete de peluche y una tarjeta de felicitación empaquetados juntos como regalo. Este fue un intento de validación de ideas y no lo tomamos en serio. Así que terminó pronto.

Más tarde, intentamos vender baldosas (asociándonos con un tipo que había trabajado en esa área durante varios años) y tampoco salió bien. En general, la razón era la misma: era un proyecto paralelo para nosotros y no sabíamos nada sobre el mercado de las baldosas.

Pero, durante este tiempo, desarrollamos muchos sitios web de comercio electrónico para los clientes de nuestra agencia. La mayoría de estos sitios web se crearon utilizando Ruby on Rails y específicamente Spree . Y esta dirección fue exitosa: aprendimos mucho sobre el desarrollo de sitios web de comercio electrónico y los problemas típicos de desarrollo (así como el marketing, el envío y diferentes problemas comerciales).

Este año estoy trabajando con un nuevo socio que tuvo una buena experiencia con la plataforma Shopify . Hablamos mucho y se nos ocurrió la idea de desarrollar una aplicación de Shopify . Esta plataforma está creciendo rápidamente y existe una gran demanda en el mercado para ampliar las posibilidades de la plataforma.

Crear un producto, en lugar de realizar un desarrollo personalizado para alguien, también fue emocionante para mí. Entonces, estas dos cosas, el comercio electrónico y el desarrollo de productos, se han combinado naturalmente en la idea de una aplicación Shopify .

Comprender la complejidad de la creación de aplicaciones

Entonces se le ocurrió una idea para su aplicación. Ahora debe decidir si su aplicación interactuará con las tiendas de los comerciantes extendiendo plantillas o inyectando algunos scripts. O tal vez necesites trabajar con alguna API de terceros e integrarla en tu aplicación, o ampliar un Shopify Admin.

Cada parte puede ser lo suficientemente compleja. Entonces, si solo necesita hacer algo con los datos de la tienda Shopify y generar algo en la sección Administrador, se trata de 1 tipo o 1 punto de complejidad. Si necesita trabajar con API externas y aún tiene alguna sección en Admin, tiene 2 puntos de complejidad. Y así.

Comience el desarrollo con un modelo estándar

Bueno, podemos ver que nuestra aplicación es bastante compleja (aunque para los clientes parece fácil). Desde que acordamos la idea de la aplicación y el MVP inicial , comencé a investigar y descubrí que Shopify tiene una gran joya shopify_appRuby .

Esta es una cosa bastante interesante que le ahorra mucho tiempo: genera para usted un marco de aplicación de Shopify sin la necesidad de configurar el flujo de OAuth manualmente. Otras cosas a tener en cuenta:

  • Modelo de tienda generado
  • Registro simple de Webhooks y ScriptTags
  • Enfoques de autenticación
  • Verificación de proxy de la aplicación (para las personalizaciones de su escaparate)

Lancé una aplicación en blanco en minutos, no en horas.

Utilice las herramientas recomendadas

A continuación, investigué cómo abordar la interfaz de usuario de administrador en su aplicación. Descubrí que Shopify también simplifica esta tarea para ti con el poder de su marco de diseño Shopify Polaris .

Polaris es una biblioteca de componentes de React.js , y esta es la forma recomendada para extender la sección de administración de Shopify . Tu aplicación se verá como una aplicación Shopify nativa con secciones de administración como "Productos" o "Pedidos" ( Shopify también la usa, supongo).

Debería usarlo en lugar de algún tema personalizado, porque está bien documentado, es compatible y tiene pautas.

Ampliación de Shopify Admin

Después de una instalación exitosa de Shopify Polaris en el proyecto con la ayuda de Webpacker o Yarn, podrás extender la sección de administración de Shopify .

Para la página de bienvenida (una que los comerciantes verán después de la instalación de la aplicación sin configuración de datos todavía), entonces hará lo siguiente:

  • Agregar una ruta:
get ‘/welcome’ => ‘home#index’
  • Crea un controlador Rails :
class HomeController < BaseAuthenticatedController def index endend
  • Agregue una plantilla de vista que solo muestre el componente React con la ayuda de react-railsgem:
# home/index.html.erb
  • Crea un componente de React que muestre algunos componentes de Shopify Polaris (como EmptyState, por ejemplo).

El primer paso está bastante claro para todos los que alguna vez hayan trabajado con Ruby on Rails . El segundo paso también debería serlo, excepto por el hecho de que necesita heredar sus controladores de administración ShopifyApp::AuthenticatedControllerpara que se autoricen todas las solicitudes. He creado una subclase de esta clase para todas las futuras clases de controlador de administración.

El tercer paso consiste en renderizar. Instalé la react-railsgema que viene con un react_componentayudante ingenioso y agregué una representación de un componente de bienvenida que pasa todas las propiedades necesarias. Para las aplicaciones integradas (aquellas que amplían Shopify Admin), debe aprobar al menos apiKeyy las shopOriginopciones para utilizar componentes integrados que vienen con Shopify Polaris . Estos componentes integrados son solo envoltorios de React alrededor del SDK de la aplicación integrada de Shopify .

Y finalmente, escribí un Welcomecomponente y lo coloqué en la app/javascript/componentscarpeta de acuerdo con config/webpacker.yml.

Tenga en cuenta que he extraído un texto estándar, como la definición de shopOriginy las apiKeypropiedades, en el BasePagecomponente que será un componente principal para cada página de la aplicación. InfluencifyAppes un componente que representa el AppProvidercomponente Polaris ,, Pagedentro de él, y cualquier elemento secundario {this.props.children}dentro del Page.

Con esta configuración, he creado otros componentes con InfluencifyAppun componente raíz para cada página de la aplicación.

Personalización de escaparates

Hay una buena opción en Shopify que te permite personalizar los escaparates de un comerciante: etiquetas de script. Son archivos JavaScript que se inyectarán en la plantilla de escaparate.

Puede registrarlos fácilmente usando la shopify_appgema. Así es como he registrado un script para la aplicación Influencify (en config/initializers/shopify_app.rb):

# to include asset_url helperinclude ActionView::Helpers::AssetUrlHelper...config.scripttags = [ {event: 'onload', src: -> (domain) { asset_url('influencify.js', host: ENV['APP_DOMAIN']) } }]

Note that your scripts should be publicly accessible for all merchants across any of your deployments. I mean in terms of Rails, you shouldn’t have a digest in your script’s filename like influencify-dd432js....js , but instead, put the compiled version into a public folder or upload to CDN.

The second option is that you can have entire pages or parts of pages served by your app. That is, in case you need to display something or fetch some data from your injected script, you can register which URLs for merchants will be served by your app. This feature is known as Application Proxies. Again, to implement this in your app is way easier with the help of the shopify_app gem — just follow their guides.

Testing

Testing a Shopify app may be a little tricky, but it’s familiar for anyone who’s ever worked with third-party APIs and tested via tools like localtunnel or ngrok. So each time you’re going to test your app, just launch your favorite tunneling tool and update the “Whitelisted redirection URL(s)” field on your app settings page with a URL to your authentication callback that looks like this: //myapp.localtunnel.me/auth/shopify/callback.

To test your App Proxies endpoints for storefront customizations, you need to update this URL setting as well under the “Extensions” section.

Of course, to test an app you also need a test development store.

Deployment

There’s nothing special about deployment, since this is just a regular Ruby on Rails application. I’ve deployed my app to the Heroku platform with the Puma and Sidekiq processes specified via the Procfile.

Also, you need to set the environment variables that you are going to use in your app via ENV['SOMETHING'].

One more thing to notice is I’ve added a Node.js buildpack, because had issues with building via Webpack:

git:(master) heroku buildpacks === influencify Buildpack URLs1. //github.com/heroku/heroku-buildpack-ruby2. //github.com/heroku/heroku-buildpack-nodejs

Going further

Well, as you can see, building an app the way it’s recommended by Shopify includes many different steps, and it may turn out to be a complex task for a non-experienced developer.

Of course, building an app is only the tip of the iceberg. The next steps in a Shopify app building venture are making good promo materials, submitting it to the App Store, marketing, and customer support/development after it has been approved.

If you liked this post, please click on to spread the word.