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

Hvorfor opbygge 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 en e-handelswebsted der solgte og leverede blomster, et blødt legetøj og et lykønskningskort pakket sammen som en gave. Dette var et idévalideringsforsøg, og vi tog det ikke alvorligt. Så det sluttede snart.

Senere prøvede 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. For det meste var grunden den samme: det var et sideprojekt for os, og vi vidste intet om markedet for gulvfliser.

Men i løbet af denne periode udviklede vi en masse e-handelswebsteder 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 succesrig - vi lærte meget om e-handelswebsudvikling 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 op til en idé om at udvikle en Shopify-app. Denne platform vokser hurtigt, og der er en stor efterspørgsel på markedet for at udvide platformmuligheder.

At opbygge et produkt snarere end at gøre 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 har fundet en idé til din ansøgning. Nu er du nødt til at beslutte, om din app skal interagere med købmandsforretninger ved at udvide skabeloner eller injicere nogle scripts. Eller måske har du brug for at arbejde med et 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 butiksdata og udsende noget i administrationsafsnittet, har du at gøre med 1 type eller 1 kompleksitetspunkt. Hvis du har brug for at arbejde med eksterne API'er og stadig har et afsnit i Admin, har du 2 kompleksitetspunkter. Og så videre.

Start udvikling med en kedelplade

Vi kan godt se, at vores app er ret kompliceret (skønt den ser ud som en nem). Da vi blev enige om app-idé og oprindelig MVP, begyndte jeg at undersøge og fandt, at Shopify har en fantastisk shopify_app Ruby perle.

Dette er en temmelig sej ting, der sparer dig meget tid: det genererer en Shopify-appramme uden at skulle konfigurere OAuth-flow manuelt. Andre ting at bemærke:

  • Genereret Shop-model
  • Enkel webhooks og scriptTags-registrering
  • Autentificeringsmetoder
  • App Proxy-verifikation (til dine tilpasninger på butikssiden)

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

Brug anbefalede værktøjer

Derefter har jeg undersøgt, hvordan man henvender sig til 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. Din app ser ud som en oprindelig Shopify-app med admin-sektioner som "Produkter" eller "Ordrer" (Shopify bruger den også, antager jeg).

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

Udvidelse af Shopify Admin

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

Til velkomstsiden (en, som købmænd vil se efter appinstallation uden nogen dataopsætning endnu), skal du gøre disse ting:

  • Tilføj en rute:
få '/ velkommen' => 'Hjem # indeks'
  • Opret en Rails-controller:
klasse HomeController 
  • Tilføj en visningsskabelon, der netop gengiver React-komponent ved hjælp af rea-rails-perle:
# home / index.html.erb
<% = react_component ("Velkommen", {
  apiKey: ShopifyApp.configuration.api_key,
  shopOrigin: "https: // # {@ shop_session & .url}",
  debug: Rails.env.development ?,
  forceRedirect:! Rails.env.development? &&! Rails.env.test?
})%>
  • Opret en React-komponent, der gengiver nogle Shopify Polaris-komponenter (som f.eks. EmptyState).

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

Det tredje trin handler om gengivelse. Jeg har installeret rea-rails-perlen, som leveres med en nifty react_component-hjælper, og jeg har tilføjet en gengivelse af en velkomstkomponent, der passerer alle nødvendige egenskaber. For integrerede apps (dem, der udvider Shopify Admin), skal du mindst videregive apiKey- og shopOrigin-indstillinger for at bruge integrerede komponenter, der leveres med Shopify Polaris. Disse indlejrede komponenter er bare React-indpakninger omkring Shopify Embedded App SDK.

Og til sidst har jeg skrevet en velkomstkomponent og placeret den i mappen app / javascript / komponenter i henhold til config / webpacker.yml.

Bemærk, at jeg har udpakket en kedelplade, som definitionen af ​​shopOrigin- og apiKey-egenskaber, til BasePage-komponenten, som bliver en overordnet komponent for hver appside. InfluencifyApp er en komponent, der gengiver Polaris AppProvider-komponenten, Side, inde i den, og eventuelle børn med {this.props.children} inde på siden.

Med denne opsætning har jeg oprettet andre komponenter med InfluencifyApp som en rodkomponent til hver appside.

Storefront tilpasning

Der er en god mulighed i Shopify, der giver dig mulighed for at tilpasse en købmands butikskontorer: Script-tags. Det er JavaScript-filer, der injiceres i butiksskabelonen.

Du kan nemt registrere dem ved hjælp af gemen shopify_app. Sådan har jeg registreret et script til Influencify-appen (på config / initializers / shopify_app.rb):

# for at inkludere aktiv_url hjælper
inkluderer ActionView :: Helpers :: AssetUrlHelper
...
config.scripttags = [
    {event: 'onload', src: -> (domæne) {asset_url ('influencify.js', vært: ENV ['APP_DOMAIN'])}}}
]

Bemærk, at dine scripts skal være offentligt tilgængelige for alle forhandlere på tværs af enhver af dine implementeringer. Jeg mener med hensyn til Rails, du skulle ikke have en fordøjelse i dit script filnavn som influencify-dd432js .... js, men i stedet skal du placere den kompilerede version i en offentlig mappe eller uploade til CDN.

Den anden mulighed er, at du kan have hele sider eller dele af sider, der serveres af din app. Det vil sige, i tilfælde af at du har brug for at vise noget eller hente nogle data fra dit indsprøjtede script, kan du registrere, hvilke webadresser til købmænd, der vil blive betjent af din app. Denne funktion kaldes Application Proxies. Igen, at implementere dette i din app er meget lettere ved hjælp af shopify_app-perlen - bare følg deres guider.

Test

Test af en Shopify-app kan være lidt vanskelig, men det er velkendt for alle, der nogensinde har arbejdet med tredjeparts API'er og testet via værktøjer som localtunnel eller ngrok. Så hver gang du teste din app, skal du bare starte dit foretrukne tunneling-værktøj og opdatere feltet "Hvidlistet omdirigeringswebadresse (r)" på din appindstillingsside med en URL til dit godkendelsesgenkald, der ser sådan ud: https: / /myapp.localtunnel.me/auth/shopify/callback.

For at teste dine App Proxies-endepunkter for tilpasning af butikspladser, skal du opdatere denne URL-indstilling også under afsnittet "Udvidelser".

For at teste en app har du selvfølgelig også brug for en testudviklingsbutik.

Deployment

Der er ikke noget specielt ved implementering, da dette kun er en almindelig Ruby on Rails-applikation. Jeg har distribueret min app til Heroku-platformen med Puma- og Sidekiq-processerne, der er specificeret via Procfile.

Du skal også indstille de miljøvariabler, du vil bruge i din app via ENV ['SOMETHING'].

En ting mere at bemærke er, at jeg har tilføjet en Node.js buildpack, fordi der var problemer med bygning via Webpack:

git: (master) heroku buildpacks
=== påvirke Buildpack URL'er
1. https://github.com/heroku/heroku-buildpack-ruby
2. https://github.com/heroku/heroku-buildpack-nodejs

Gå videre

Som du kan se, inkluderer bygning af en app, som den er anbefalet af Shopify, mange forskellige trin, og det kan vise sig at være en kompleks opgave for en ikke-erfaren udvikler.

At bygge en app er naturligvis kun toppen af ​​isbjerget. De næste trin i en Shopify-app-bygningssatsning er at fremstille gode promo-materialer, indsende det til App Store, markedsføring og kundesupport / -udvikling, når det er godkendt.

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