Ako zostaviť vašu prvú aplikáciu Shopify

Prečo stavať aplikáciu Shopify?

Vždy som bol nadšený z toho, ako rastie trh elektronického obchodu, a urobil som rôzne pokusy o ponorenie sa do tohto sveta. Asi pred piatimi rokmi sme s partnerom vytvorili webovú stránku elektronického obchodu, ktorá predáva a doručuje kvety, plyšovú hračku a pohľadnicu zabalenú ako darček. Toto bol pokus o overenie nápadu a nebrali sme ho vážne. Takže sa to skoro skončilo.

Neskôr sme sa pokúsili predať podlahové dlaždice (partnerstvo s človekom, ktorý v tejto oblasti pracoval niekoľko rokov), a tiež to nedopadlo dobre. Dôvod bol väčšinou rovnaký: bol to pre nás vedľajší projekt a o trhu s podlahovými dlaždicami sme nič nevedeli.

Počas tejto doby sme však pre klientov našej agentúry vyvinuli množstvo webových stránok elektronického obchodu. Väčšina z týchto webových stránok bola vytvorená pomocou nástroja Ruby on Rails a konkrétne Spree . A tento smer bol úspešný - veľa sme sa dozvedeli o vývoji webových stránok elektronického obchodu a typických problémoch s vývojom (ako aj o marketingu, preprave a rôznych obchodných problémoch).

Tento rok pracujem s novým partnerom, ktorý mal dobré skúsenosti s platformou Shopify . Veľa sme sa rozprávali a prišli sme na nápad s vývojom aplikácie Shopify . Táto platforma rýchlo rastie a na trhu existuje veľký dopyt po rozšírení možností platformy.

Budovanie produktu, skôr ako vývoj pre niekoho na mieru, bolo pre mňa tiež vzrušujúce. Takže tieto dve veci - elektronický obchod a vývoj produktov - sa prirodzene spojili do myšlienky aplikácie Shopify .

Pochopenie zložitosti vytvárania aplikácií

Takže ste prišli s nápadom pre svoju aplikáciu. Teraz sa musíte rozhodnúť, či bude vaša aplikácia interagovať s výkladmi obchodníkov rozšírením šablón alebo vložením niektorých skriptov. Alebo možno budete musieť pracovať s rozhraním API tretích strán a integrovať ho do svojej aplikácie alebo rozšíriť Shopify Admin.

Každá časť môže byť dostatočne zložitá. Takže ak potrebujete niečo urobiť s dátami ukladania Shopify a výstupom niečo v sekcii Správca, máte na mysli 1 typ alebo 1 bod zložitosti. Ak potrebujete pracovať s externými rozhraniami API a stále máte časť v Správcovi, máte 2 body zložitosti. A tak ďalej.

Naštartujte vývoj s varnou doskou

Vidíme, že naša aplikácia je pomerne zložitá (pre zákazníkov to však vyzerá ako jednoduchá aplikácia). Keďže sme sa dohodli na nápade aplikácie a počiatočnom MVP , začal som skúmať a zistil som, že Shopify má skvelý drahokam shopify_appRuby .

To je celkom fajn vec, ktorá vám ušetrí veľa času: generuje pre vás rámec aplikácie Shopify bez potreby manuálneho nastavenia toku OAuth . Ďalšie poznámky:

  • Generovaný model obchodu
  • Jednoduchá registrácia Webhookov a ScriptTagov
  • Prístupy k autentifikácii
  • Overenie Proxy aplikácie (pre vaše prispôsobenia v obchode)

Prázdnu aplikáciu som spustil za pár minút, nie hodín.

Používajte odporúčané nástroje

Ďalej som skúmal, ako vo vašej aplikácii pristupovať k používateľskému rozhraniu správcu. Zistil som, že Shopify zjednodušuje túto úlohu aj pre vás silou ich dizajnového rámca Shopify Polaris .

Polaris je knižnica komponentov React.js , čo je odporúčaný spôsob rozšírenia sekcie Shopify Admin. Vaša aplikácia bude vyzerať ako natívna aplikácia Shopify s administrátorskými sekciami ako „Produkty“ alebo „Objednávky“ ( myslím, že ju používa aj Shopify ).

Mali by ste ho použiť namiesto nejakej vlastnej témy, pretože je dobre zdokumentovaná, podporovaná a má pokyny.

Rozšírenie Shopify Admin

Po úspešnej inštalácii Shopify Polaris do projektu pomocou Webpacker alebo Yarn budete môcť rozšíriť sekciu Shopify Admin.

Na úvodnej stránke (ktorá sa obchodníkom zobrazí po inštalácii aplikácie bez zatiaľ nastavených údajov) urobíte tieto veci:

  • Pridať trasu:
get ‘/welcome’ => ‘home#index’
  • Vytvorte radič Rails :
class HomeController < BaseAuthenticatedController def index endend
  • Pridajte šablónu zobrazenia, ktorá iba vykreslí komponent React pomocou react-railsklenotu:
# home/index.html.erb
  • Vytvorte komponent React, ktorý vykreslí niektoré komponenty Shopify Polaris ( EmptyStatenapríklad).

Prvý krok je úplne jasný pre každého, kto kedy spolupracoval s Ruby on Rails . Druhý krok by mal byť tiež, s výnimkou skutočnosti, že musíte zdediť svoje administrátorské radiče, ShopifyApp::AuthenticatedControlleraby bola každá žiadosť autorizovaná. Vytvoril som podtriedu tejto triedy pre všetky budúce triedy správcovských radičov.

Tretí krok je o vykresľovaní. Nainštaloval som si react-railsklenot, ktorý je dodávaný s šikovným react_componentpomocníkom, a pridal som vykreslenie vítaného komponentu, ktorý odovzdáva všetky potrebné vlastnosti. Pre vstavané aplikácie (tie, ktoré rozširujú Shopify Admin), by ste mali absolvovať minimálne apiKeya shopOriginmožnosti použitia vložených komponentov dodávaných so Shopify Polaris . Tieto vložené komponenty sú iba obaly React okolo Shopify Embedded App SDK.

A nakoniec som napísal Welcomekomponent a umiestnil som ho do app/javascript/componentspriečinka podľa config/webpacker.yml.

Všimnite si, že som extrahoval nejaký štandardný panel, napríklad definíciu shopOrigina apiKeyvlastnosti, do BasePagekomponentu, ktorý bude nadradeným komponentom pre každú stránku aplikácie. InfluencifyAppje komponent, ktorý vykresľuje AppProviderkomponent Polaris Pagevo vnútri a všetky deti vo {this.props.children}vnútri Page.

Pomocou tohto nastavenia som vytvoril ďalšie komponenty InfluencifyAppako koreňový komponent pre každú stránku aplikácie.

Prispôsobenie výkladnej skrine

V Shopify je dobrá voľba , ktorá vám umožňuje prispôsobiť výklady obchodníka: skriptové značky. Sú to súbory JavaScript, ktoré sa vložia do šablóny výkladu.

Môžete ich ľahko zaregistrovať pomocou shopify_appdrahokamu. Takto som zaregistroval skript pre aplikáciu Influencify (zavináč 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.

Vytvorenie aplikácie je samozrejme iba špičkou ľadovca. Ďalším krokom v rámci budovania aplikácií v Shopify sú vytváranie dobrých promo materiálov, ich odosielanie do App Store, marketing a podpora / vývoj zákazníkom po schválení.

Ak sa vám tento príspevok páčil, šírite ho kliknutím na.