Kako izraditi svoju prvu aplikaciju Shopify

Zašto graditi aplikaciju Shopify?

Oduvijek sam bio uzbuđen kako raste tržište e-trgovine i činio sam razne pokušaje zaroniti u ovaj svijet. Prije otprilike pet godina, partner i ja napravili smo web stranicu za e-trgovinu koja prodaje i dostavlja cvijeće, mekanu igračku i čestitku spakiranu zajedno na poklon. Ovo je bio pokušaj provjere valjanosti ideje i nismo to shvatili ozbiljno. Tako je uskoro završilo.

Kasnije smo pokušali prodati podne pločice (udruživši se s tipom koji je nekoliko godina radio u tom području), ali ni to nije išlo dobro. Razlog je uglavnom bio isti: to je za nas bio sporedni projekt, a mi nismo znali ništa o tržištu podnih pločica.

No, za to smo vrijeme razvili puno web stranica za e-trgovinu za klijente naše agencije. Većina ovih web stranica izrađena je pomoću Ruby on Rails i posebno Spreea . I ovaj je smjer bio uspješan - naučili smo puno o razvoju web stranica o e-trgovini i tipičnim problemima u razvoju (kao i marketingu, otpremi i različitim poslovnim problemima).

Ove godine radim s novim partnerom koji je imao dobro iskustvo s platformom Shopify . Puno smo razgovarali i došli smo na ideju razvoja aplikacije Shopify . Ova platforma brzo raste i na tržištu postoji velika potražnja za proširivanjem mogućnosti platforme.

I meni je bilo uzbudljivo izrađivati ​​proizvod, a ne raditi prilagođeni razvoj. Dakle, ove dvije stvari - e-trgovina i razvoj proizvoda - prirodno su se spojile u ideju aplikacije Shopify .

Razumijevanje složenosti izgradnje aplikacija

Dakle, smislili ste ideju za svoju prijavu. Sada morate odlučiti hoće li vaša aplikacija komunicirati s izlošcima prodavaca proširujući predloške ili ubrizgavanjem nekih skripti. Ili možda trebate surađivati ​​s API-jem treće strane i integrirati ga u svoju aplikaciju ili proširiti Shopify Admin.

Svaki dio može biti dovoljno složen. Dakle, ako samo trebate nešto poduzeti s Shopify pohraniti podatke i ispisati nešto u odjeljku Administrator, imate posla s jednom vrstom ili 1 točkom složenosti. Ako trebate raditi s vanjskim API-jevima i još uvijek imate neki odjeljak u Admin-u, imate 2 točke složenosti. I tako dalje.

Započnite razvoj s bojlerom

Pa, možemo vidjeti da je naša aplikacija prilično složena (iako za kupce izgleda kao laka). Budući da smo se dogovorili oko ideje za aplikaciju i početnog MVP-a , započeo sam s istraživanjem i otkrio da Shopify ima sjajan shopify_appRuby dragulj.

Ovo je prilično cool stvar koja vam štedi puno vremena: generira za vas okvir aplikacije Shopify bez potrebe za ručnim postavljanjem protoka OAuth . Ostalo za napomenuti:

  • Model generirane trgovine
  • Jednostavne Webhooks i ScriptTags registracije
  • Pristupi provjeri autentičnosti
  • Provjera proxyja aplikacije (za prilagodbe vašeg izloga)

Pokrenuo sam praznu aplikaciju za nekoliko minuta, a ne sati.

Koristite preporučene alate

Dalje, istražio sam kako pristupiti Admin UI u svojoj aplikaciji. Otkrio sam da Shopify pojednostavljuje ovaj zadatak i vama snagom njihovog dizajnerskog okvira Shopify Polaris .

Polaris je knjižnica komponenata React.js i ovo je preporučeni način za proširenje odjeljka Shopify Admin. Vaša će aplikacija izgledati kao izvorna aplikacija Shopify s administratorskim odjeljcima poput "Proizvodi" ili "Narudžbe" ( pretpostavljam da je i Shopify koristi).

Trebali biste ga koristiti umjesto neke prilagođene teme, jer je dobro dokumentirana, podržana i ima smjernice.

Proširivanje Shopify administratora

Nakon uspješne instalacije Shopify Polarisa u projekt uz pomoć Webpackera ili pređe, moći ćete proširiti odjeljak Shopify Admin.

Za stranicu dobrodošlice (onu koju će trgovci vidjeti nakon instalacije aplikacije, a podaci još nisu postavljeni), učinit ćete sljedeće:

  • Dodajte rutu:
get ‘/welcome’ => ‘home#index’
  • Stvorite kontroler Rails :
class HomeController < BaseAuthenticatedController def index endend
  • Dodajte predložak pogleda koji upravo prikazuje komponentu React uz pomoć react-railsdragulja:
# home/index.html.erb
  • Stvorite React komponentu koja generira neke Shopify Polaris komponente (poput EmptyState, na primjer).

Prvi je korak sasvim jasan svima koji su ikad surađivali s Ruby on Rails . I drugi bi korak trebao biti, osim činjenice da morate naslijediti svoje administrativne kontrolere, ShopifyApp::AuthenticatedControllertako da će svaki zahtjev biti autoriziran. Stvorio sam podrazred ove klase za sve buduće klase administratora.

Treći korak odnosi se na prikazivanje. Instalirao sam react-railsdragulj koji dolazi s izvrsnim react_componentpomoćnikom i dodao sam prikaz komponente dobrodošlice koja prolazi sva potrebna svojstva. Za ugrađene aplikacije (one koje proširuju Shopify Admin) trebali biste proslijediti barem apiKeyi shopOriginmogućnosti korištenja ugrađenih komponenti koje dolaze s Shopify Polarisom . Te ugrađene komponente samo su React omoti oko Shopify Embedded App SDK.

I na kraju, napisao sam Welcomekomponentu i smjestio je u app/javascript/componentsmapu prema config/webpacker.yml.

Imajte na umu da sam izvukao neke uzorke, poput definicije shopOrigini apiKeysvojstava, u BasePagekomponentu koja će biti nadređena komponenta za svaku stranicu aplikacije. InfluencifyAppje komponenta koja čini Polaris AppProviderkomponentu Page, unutar nje, i svu djecu koja imaju {this.props.children}unutar Page.

Ovim sam postavljanjem izradio druge komponente s InfluencifyAppkorijenskom komponentom za svaku stranicu aplikacije.

Prilagođavanje izloga

U Shopifyu postoji dobra opcija koja vam omogućuje prilagodbu izloga trgovca: Oznake skripti. To su JavaScript datoteke koje će se ubrizgati u predložak izloga.

Možete ih lako registrirati pomoću shopify_appdragulja. Evo kako sam registrirao skriptu za aplikaciju Influencify (na 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.