Sådan bygger du din første Shopify-app

Hvorfor oprette en Shopify-app?

Jeg har altid været begejstret for, hvordan e-handelsmarkedet vokser, og har gjort forskellige forsøg på at dykke ned i denne verden. For cirka fem år siden byggede en partner og jeg et e-handelswebsted, der sælger og leverer blomster, et tøjdyr og et lykønskningskort pakket sammen som en gave. Dette var et idevalideringsforsøg, og vi tog det ikke alvorligt. Så det sluttede snart.

Senere forsøgte vi at sælge gulvfliser (samarbejde med en fyr, der havde arbejdet i dette område i flere år), og det gik heller ikke godt. Årsagen var hovedsagelig den samme: det var et sideprojekt for os, og vi vidste intet om markedet for gulvfliser.

Men i løbet af denne tid udviklede vi en masse e-handelswebsites til vores bureaus kunder. De fleste af disse websteder blev bygget ved hjælp af Ruby on Rails og specifikt Spree . Og denne retning var en succes - vi lærte meget om udvikling af e-handelswebsteder og typiske udviklingsproblemer (såvel som marketing, forsendelse og forskellige forretningsproblemer).

I år arbejder jeg med en ny partner, der havde god erfaring med Shopify- platformen. Vi talte meget og kom på en idé om at udvikle en Shopify- app. Denne platform vokser hurtigt, og der er en stor efterspørgsel på markedet for at udvide platformens muligheder.

At bygge et produkt i stedet for at lave brugerdefineret udvikling for nogen var også spændende for mig. Så disse to ting - e-handel og produktudvikling - er naturligvis kombineret til ideen om en Shopify- app.

Forståelse af app-bygningskompleksitet

Så du er kommet med en idé til din ansøgning. Nu er du nødt til at beslutte, om din app vil interagere med handlernes butiksfacader ved at udvide skabeloner eller injicere nogle scripts. Eller måske skal du arbejde med en tredjeparts API og integrere det i din app eller udvide en Shopify- administrator.

Hver del kan være kompleks nok. Så hvis du bare har brug for at gøre noget med Shopify- lagringsdata og output noget i Admin-sektionen, har du at gøre med 1 type eller 1 punkt af kompleksitet. Hvis du har brug for at arbejde med eksterne API'er og stadig har et afsnit i Admin, har du 2 punkter af kompleksitet. Og så videre.

Start udviklingen med en kedelplade

Nå kan vi se, at vores app er ret kompleks (selvom det for kunder ligner en let). Da vi blev enige om appidee og indledende MVP , begyndte jeg at undersøge og fandt ud af, at Shopify har en stor shopify_appRuby- perle.

Dette er en smuk cool ting, der sparer dig meget tid: det genererer en Shopify- app-ramme til dig uden behov for at opsætte OAuth- flow manuelt. Andre ting at bemærke:

  • Genereret butiksmodel
  • Enkle Webhooks og ScriptTags registrering
  • Godkendelsesmetoder
  • App-proxy-verifikation (til dine tilpasninger i butiksfacaden)

Jeg har lanceret en tom app på få minutter, ikke timer.

Brug anbefalede værktøjer

Dernæst har jeg undersøgt, hvordan man nærmer mig Admin UI i din app. Jeg fandt ud af, at Shopify forenkler denne opgave også for dig med kraften i deres designramme Shopify Polaris .

Polaris er et React.js- komponentbibliotek, og dette er den anbefalede måde at udvide Shopify Admin-sektionen på. Din app vil ligne en indbygget Shopify- app med admin-sektioner som "Produkter" eller "Ordrer" ( Shopify bruger det også, tror jeg).

Du skal bruge det i stedet for et brugerdefineret tema, fordi det er veldokumenteret, understøttet og har retningslinjer.

Udvidelse af Shopify-administrator

Efter en vellykket installation af Shopify Polaris i projektet ved hjælp af Webpacker eller Garn, kan du udvide Shopify Admin-sektionen.

For velkomstsiden (en, som forhandlere vil se efter appinstallation uden data opsat endnu), skal du gøre disse ting:

  • Tilføj en rute:
get ‘/welcome’ => ‘home#index’
  • Opret en Rails- controller:
class HomeController < BaseAuthenticatedController def index endend
  • Tilføj en visningsskabelon, der bare gengiver React- komponent ved hjælp af react-railsperle:
# home/index.html.erb
  • Opret en React- komponent, der gengiver nogle Shopify Polaris- komponenter (som EmptyStatef.eks.).

Det første trin er helt klart for alle, der nogensinde har arbejdet med Ruby on Rails . Det andet trin skal være så godt, bortset fra at du skal arve dine admin-controllere fra, ShopifyApp::AuthenticatedControllerså enhver anmodning vil blive godkendt. Jeg har oprettet en underklasse af denne klasse til alle fremtidige admin controller-klasser.

Det tredje trin handler om gengivelse. Jeg har installeret react-railsperlen, der kommer med en smidig react_componenthjælper, og jeg har tilføjet en gengivelse af en velkomstkomponent, der passerer alle nødvendige egenskaber. For indlejrede apps (dem, der udvider Shopify Admin), skal du i det mindste videregive apiKeyog shopOriginmuligheder for at bruge indlejrede komponenter, der følger med Shopify Polaris . Disse indlejrede komponenter er bare React- indpakninger omkring Shopify Embedded App SDK.

Og endelig har jeg skrevet en Welcomekomponent og placeret den i app/javascript/componentsmappen i henhold til config/webpacker.yml.

Bemærk, at jeg har hentet nogle kedelplader, som definitionen af shopOriginog apiKeyegenskaber, ind i den BasePagekomponent, der skal være en overordnet komponent for hver app-side. InfluencifyApper en komponent, der gengiver Polaris- AppProviderkomponenten Page, inde i den, og alle børn med {this.props.children}inde i Page.

Med denne opsætning har jeg oprettet andre komponenter med InfluencifyAppsom en rodkomponent for hver app-side.

Tilpasning af butiksfronten

Der er en god mulighed i Shopify, der giver dig mulighed for at tilpasse en forhandlers butiksfacader: Script-tags. De er JavaScript-filer, der indsprøjtes i skabelonen til butiksfacaden.

Du kan nemt registrere dem ved hjælp af shopify_appperlen. Sådan har jeg registreret et script til Influencify-appen (at 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.

At bygge en app er selvfølgelig kun toppen af ​​isbjerget. De næste trin i et Shopify-appbygningsforetagende er at fremstille gode promomaterialer, sende det til App Store, markedsføring og kundesupport / -udvikling, efter at det er blevet godkendt.

Hvis du kunne lide dette indlæg, skal du klikke på ✋ for at sprede ordet.