Az első Shopify alkalmazás elkészítése

Miért építsen Shopify alkalmazást?

Mindig izgatottan vártam, hogyan növekszik az e-kereskedelmi piac, és különféle kísérleteket tettem arra, hogy belemerüljek ebbe a világba. Körülbelül öt évvel ezelőtt egy partnerünk épített egy e-kereskedelmi weboldalt, amely virágokat, puha játékot és egy ajándékba csomagolt üdvözlőkártyát értékesített és szállított. Ez egy ötlet érvényesítési kísérlet volt, és nem vettük komolyan. Tehát hamar véget ért.

Később megpróbáltunk padlólapokat eladni (partnerkapcsolatban voltunk egy sráccal, aki több éve ezen a területen dolgozott), és ez sem ment jól. Többnyire az oka ugyanaz volt: számunkra egy mellékprojekt volt, és semmit sem tudtunk a padlólapok piacáról.

De ez idő alatt rengeteg e-kereskedelmi weboldalt fejlesztettünk ki ügynökségünk ügyfelei számára. Ezen webhelyek többségét a Ruby on Rails és kifejezetten a Spree felhasználásával építették . És ez az irány sikeres volt - sokat megtudtunk az e-kereskedelem weboldalainak fejlesztéséről és a tipikus fejlesztési problémákról (valamint a marketingről, a szállításról és a különböző üzleti problémákról).

Ebben az évben egy új partnerrel dolgozom, akinek jó tapasztalatai voltak a Shopify platformmal kapcsolatban. Sokat beszélgettünk, és eszünkbe jutott egy Shopify alkalmazás fejlesztése . Ez a platform gyorsan növekszik, és a piacon nagy az igény a platformlehetőségek kiterjesztésére.

A termék építése ahelyett, hogy valakinek egyedi fejlesztést végzett volna, számomra is izgalmas volt. Tehát ez a két dolog - az e-kereskedelem és a termékfejlesztés - természetesen egyesült a Shopify alkalmazás ötletében .

Az alkalmazásépítés összetettségének megértése

Szóval előállt egy ötlet a jelentkezéshez. Most el kell döntenie, hogy az alkalmazás kölcsönhatásba lép-e a kereskedők kirakataival, sablonok kiterjesztésével vagy néhány szkript injektálásával. Vagy esetleg együtt kell működnie valamilyen harmadik fél API-val, és integrálnia kell azt az alkalmazásába, vagy ki kell terjesztenie a Shopify rendszergazdáját.

Minden rész elég bonyolult lehet. Tehát, ha csak valamit kell tennie a Shopify tároló adataival, és valamit ki kell adnia az Adminisztrálás szakaszban, akkor 1 típusú vagy 1 összetett ponttal van dolga. Ha külső API-kkal kell dolgoznia, és még mindig van néhány szakasza az Adminisztrálásban, akkor 2 összetettsége van. Stb.

Indítsa el a fejlesztést kazánnal

Nos, láthatjuk, hogy alkalmazásunk meglehetősen összetett (bár az ügyfelek számára ez egyszerűnek tűnik). Mivel megegyeztünk az alkalmazás ötletében és a kezdeti MVP-ben , elkezdtem kutatni, és megállapítottam, hogy a Shopify- nak remek shopify_appRuby gyöngyszeme van.

Ez egy nagyon jó dolog, amely rengeteg időt takarít meg Önnek: létrehoz egy Shopify alkalmazás keretrendszert az OAuth- folyamat manuális beállítása nélkül . Egyéb megjegyzendő dolgok:

  • Generált Shop modell
  • Egyszerű Webhooks és ScriptTags regisztráció
  • A hitelesítés megközelítései
  • Alkalmazásproxy ellenőrzése (a kirakat testreszabásához)

Üres alkalmazást indítottam percek alatt, nem órák alatt.

Használjon ajánlott eszközöket

Ezután azt kutattam, hogyan lehet megközelíteni az adminisztrátori felhasználói felületet az alkalmazásában. Megtudtam , hogy a Shopify egyszerűsíti ezt a feladatot az Ön számára is, a Shopify Polaris tervezési keretének erejével .

A Polaris egy React.js komponenskönyvtár, és ez a Shopify Admin szakasz kibővítésének ajánlott módja . Az alkalmazás úgy fog kinézni, mint egy natív Shopify alkalmazás, rendszergazdai szakaszokkal, például „Termékek” vagy „Rendelések” ( gondolom, a Shopify is használja).

Néhány egyéni téma helyett használja, mert jól dokumentált, támogatott és iránymutatásokkal rendelkezik.

A Shopify Admin kiterjesztése

Miután sikeresen telepítette a Shopify Polarist a projektbe a Webpacker vagy a Yarn segítségével , kibővítheti a Shopify Adminisztrációs részt.

Az üdvözlő oldalon (amelyet a kereskedők az alkalmazás telepítése után látnak, még nincs beállítva adat), akkor tegye a következőket:

  • Útvonal hozzáadása:
get ‘/welcome’ => ‘home#index’
  • Hozzon létre egy Rails vezérlőt:
class HomeController < BaseAuthenticatedController def index endend
  • Adjon hozzá egy nézet sablont, amely csak a React komponenst jeleníti meg a react-railsgem segítségével :
# home/index.html.erb
  • Hozzon létre egy React komponenst, amely egyes Shopify Polaris alkatrészeket (például EmptyStatepéldául) megjelenít.

Az első lépés mindenki számára egyértelmű, aki valaha együtt dolgozott a Ruby on Rails- szel . A második lépésnek is ennek kell lennie, kivéve azt a tényt, hogy örökölnie kell az adminisztrátorokat, ShopifyApp::AuthenticatedControllerígy minden kérés jogosult lesz. Létrehoztam ennek az osztálynak egy alosztályát az összes jövőbeli adminisztrátor osztály számára.

The third step is about rendering. I’ve installed the react-rails gem which comes with a nifty react_component helper, and I’ve added a rendering of a welcome component passing all necessary properties. For Embedded Apps (those that extend Shopify Admin) you should pass at least apiKey and shopOrigin options to utilize embedded components coming with Shopify Polaris. These embedded components are just React wrappers around the Shopify Embedded App SDK.

And finally, I’ve written a Welcome component and placed it into the app/javascript/components folder according to config/webpacker.yml.

Note that I’ve extracted some boilerplate, like the definition of shopOrigin and apiKey properties, into the BasePage component which is going to be a parent component for each app page. InfluencifyApp is a component that renders the Polaris AppProvider component, Page, inside it, and any children with {this.props.children} inside the Page.

With this setup, I’ve created other components with InfluencifyApp as a root component for each app page.

Storefront customization

There’s a good option in Shopify that allows you to customize a merchant’s storefronts: Script Tags. They are JavaScript files that will be injected into the storefront template.

You can register them easily using the shopify_app gem. Here is how I’ve registered a script for Influencify app (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.

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.