de Igor Petrov

Cum să creați prima aplicație Shopify

Cum sa creati prima aplicatie Shopify

De ce să construiești o aplicație Shopify?

Am fost întotdeauna încântat de creșterea pieței comerțului electronic și am făcut diverse încercări de a scufunda în această lume. Acum aproximativ cinci ani, un partener și cu mine am construit un site de comerț electronic care vândea și livra flori, o jucărie moale și o felicitare ambalate împreună ca cadou. Aceasta a fost o încercare de validare a ideii și nu am luat-o în serios. Așa că s-a încheiat curând.

Mai târziu, am încercat să vindem gresie (parteneriat cu un tip care lucrase în acea zonă de câțiva ani) și nici nu a mers bine. În mare parte, motivul a fost același: a fost un proiect secundar pentru noi și nu știam nimic despre piața plăcilor de pardoseală.

Dar, în acest timp, am dezvoltat o mulțime de site-uri de comerț electronic pentru clienții agenției noastre. Majoritatea acestor site-uri web au fost construite folosind Ruby on Rails și în mod specific Sindrofie. Și această direcție a avut succes – am aflat multe despre dezvoltarea site-urilor de comerț electronic și problemele tipice de dezvoltare (precum și despre marketing, transport și diferite probleme de afaceri).

Anul acesta lucrez cu un nou partener care a avut o experiență bună cu Shopify platformă. Am vorbit mult și am venit la o idee de a dezvolta un Shopify aplicație. Această platformă crește rapid și există o cerere mare pe piață pentru extinderea posibilităților platformei.

Construirea unui produs, mai degrabă decât dezvoltarea personalizată pentru cineva, a fost interesantă și pentru mine. Deci, aceste două lucruri – comerțul electronic și dezvoltarea produselor – s-au combinat în mod firesc cu ideea de Shopify aplicație.

Înțelegerea complexității clădirii aplicațiilor

Deci, ai venit cu o idee pentru aplicația ta. Acum trebuie să decideți dacă aplicația dvs. va interacționa cu vitrinele comercianților prin extinderea șabloanelor sau prin injectarea unor scripturi. Sau poate că trebuie să lucrați cu un API terță parte și să îl integrați în aplicația dvs. sau să extindeți un Shopify Administrator.

Fiecare parte poate fi suficient de complexă. Deci, dacă trebuie doar să faci ceva cu Shopify stocați date și scoateți ceva în secțiunea Administrator, aveți de-a face cu 1 tip sau 1 punct de complexitate. Dacă trebuie să lucrați cu API-uri externe și aveți încă o secțiune în Admin, aveți 2 puncte de complexitate. Și așa mai departe.

Începeți dezvoltarea cu un cazan

Ei bine, putem vedea că aplicația noastră este destul de complexă (deși pentru clienți pare una simplă). Din moment ce am fost de acord cu ideea și inițialul aplicației MVP, Am început să cercetez și am constatat că Shopify are o mare shopify_app Rubin bijuterie.

Acesta este un lucru destul de cool, care vă economisește mult timp: vă generează un Shopify cadru de aplicații fără a fi nevoie să configurați OAuth curge manual. Alte lucruri de remarcat:

  • Model de magazin generat
  • Înregistrare simplă Webhooks și ScriptTags
  • Abordări de autentificare
  • Verificarea proxy a aplicației (pentru personalizările vitrinei dvs.)

Am lansat o aplicație goală în câteva minute, nu în câteva ore.

În continuare, am cercetat cum să abordez interfața de administrare a aplicației în aplicația dvs. am aflat ca Shopify simplifică această sarcină și pentru dvs., cu puterea cadrului lor de proiectare Shopify Polaris.

Polaris este o React.js biblioteca de componente, iar acesta este modul recomandat pentru extinderea fișierului Shopify Secțiunea de administrare. Aplicația dvs. va arăta ca un nativ Shopify aplicație cu secțiuni de administrare precum „Produse” sau „Comenzi” (Shopify îl folosește și eu, cred).

Ar trebui să o utilizați în loc de o temă personalizată, deoarece este bine documentată, acceptată și are reguli.

Extinderea administratorului Shopify

După o instalare reușită a Shopify Polaris în proiect cu ajutorul Webpacker sau Fire, veți putea extinde Shopify Secțiunea de administrare.

Pentru pagina de întâmpinare (una pe care comercianții o vor vedea după instalarea aplicației fără date configurate încă), atunci veți face aceste lucruri:

  • Adăugați un traseu:
get ‘/welcome’ => ‘home#index’
  • Creeaza o Șine controlor:
class HomeController < BaseAuthenticatedController def index endend
  • Adăugați un șablon de vizualizare care se redă doar Reacţiona componentă cu ajutorul react-rails bijuterie:
# home/index.html.erb<%= react_component("Welcome", {  apiKey: ShopifyApp.configuration.api_key,  shopOrigin: "https://#{ @shop_session&.url }",  debug: Rails.env.development?,  forceRedirect: !Rails.env.development? && !Rails.env.test?}) %>
  • Creeaza o Reacţiona componentă care redă unele Shopify Polaris componente (cum ar fi EmptyState, de exemplu).

Primul pas este destul de clar pentru toți cei care au lucrat vreodată Ruby on Rails. Al doilea pas ar trebui să fie la fel, cu excepția faptului că trebuie să moșteniți controlerele de administrare de la ShopifyApp::AuthenticatedController deci fiecare cerere va fi autorizată. Am creat o subclasă a acestei clase pentru toate viitoarele clase de controlere de administrare.

Cum sa creati prima aplicatie Shopify

Al treilea pas este despre redare. Am instalat react-rails bijuterie care vine cu un nifty react_component helper și am adăugat o redare a unei componente binevenite care trece toate proprietățile necesare. Pentru aplicațiile încorporate (cele care se extind Shopify Admin) ar trebui să treci cel puțin apiKey și shopOrigin opțiuni de utilizat componente încorporate venind cu Shopify Polaris. Aceste componente încorporate sunt doar Reacţiona ambalaje în jurul Shopify SDK pentru aplicații încorporate.

Și în cele din urmă, am scris un Welcome componentă și a plasat-o în app/javascript/components dosar conform config/webpacker.yml.

1611993191 693 Cum sa creati prima aplicatie Shopify

Rețineți că am extras niște plăci centrale, cum ar fi definiția shopOrigin și apiKey proprietăți, în BasePage componentă care va fi o componentă părinte pentru fiecare pagină a aplicației. InfluencifyApp este o componentă care redă Polaris AppProvider componentă, Page, în interiorul acesteia și orice copii cu {this.props.children} în interiorul Page.

Cu această configurare, am creat alte componente cu InfluencifyApp ca componentă rădăcină pentru fiecare pagină a aplicației.

Personalizare vitrina

Există o opțiune bună în Shopify care vă permite să personalizați vitrinele unui comerciant: etichete de script. Sunt fișiere JavaScript care vor fi injectate în șablonul vitrinei.

Le puteți înregistra cu ușurință folosind shopify_app bijuterie. Iată cum am înregistrat un script pentru Influențează aplicație (la 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']) } }]

Rețineți că scripturile dvs. ar trebui să fie accesibile publicului pentru toți comercianții din oricare dintre implementările dvs. Adică, în ceea ce privește Rails, nu ar trebui să aveți un rezumat în numele fișierului scriptului, cum ar fi influencify-dd432js....js , dar, în schimb, puneți versiunea compilată într-un fișier public folder sau încărcați pe CDN.

A doua opțiune este că puteți avea pagini întregi sau părți de pagini difuzate de aplicația dvs. Adică, în cazul în care trebuie să afișați ceva sau să preluați unele date din scriptul injectat, puteți înregistra ce adrese URL pentru comercianți vor fi difuzate de aplicația dvs. Această caracteristică este cunoscută sub numele de Procurarea aplicației. Din nou, să implementați acest lucru în aplicația dvs. este mult mai ușor cu ajutorul shopify_app bijuterie – doar urmează-le ghiduri.

Testarea

Testarea a Shopify aplicația poate fi puțin dificilă, dar este familiară pentru oricine a lucrat vreodată cu API-uri terțe și a testat prin instrumente precum localtunnel sau ngrok. Deci, de fiecare dată când veți testa aplicația, lansați instrumentul dvs. preferat de tunelare și actualizați câmpul „Adresă URL (uri) de redirecționare pe listă albă” de pe pagina de setări a aplicației cu o adresă URL de apelare de autentificare care arată astfel: https://myapp.localtunnel.me/auth/shopify/callback.

Pentru a testa punctele finale App Proxies pentru personalizările vitrinei, trebuie să actualizați această setare URL și în secțiunea „Extensii”.

Desigur, pentru a testa o aplicație aveți nevoie și de un magazin de dezvoltare a testelor.

Implementare

Nu este nimic special în implementare, deoarece acesta este doar un lucru obișnuit Ruby on Rails cerere. Mi-am implementat aplicația în Heroku platformă cu Puma și Sidekiq procesele specificate prin Procfile.

De asemenea, trebuie să setați variabilele de mediu pe care le veți folosi în aplicație ENV['SOMETHING'].

Încă un lucru de observat este că am adăugat un Node.js buildpack, deoarece a avut probleme cu construirea prin Webpack:

git:(master) heroku buildpacks     === influencify Buildpack URLs1. https://github.com/heroku/heroku-buildpack-ruby2. https://github.com/heroku/heroku-buildpack-nodejs

Mergând mai departe

Ei bine, după cum puteți vedea, construirea unei aplicații așa cum este recomandată de Shopify include mulți pași diferiți și se poate dovedi a fi o sarcină complexă pentru un dezvoltator fără experiență.

Desigur, construirea unei aplicații este doar vârful aisbergului. Următorii pași într-un Shopify compania de construcție a aplicațiilor realizează materiale promoționale bune, o trimit în App Store, marketing și asistență / dezvoltare pentru clienți după ce a fost aprobată.

Dacă ți-a plăcut această postare, te rugăm să dai clic pe să răspândească vestea.