Како направити прву апликацију Схопифи

Зашто правити апликацију Схопифи?

Одувек сам био узбуђен како тржиште е-трговине расте, и чинио сам разне покушаје да зароним у овај свет. Пре отприлике пет година, партнер и ја смо направили веб страницу за е-трговину која продаје и испоручује цвеће, мекану играчку и честитку спаковану заједно на поклон. Ово је био покушај потврде идеје и нисмо то схватили озбиљно. Тако да се ускоро завршило.

Касније смо покушали да продамо подне плочице (удружили смо се са типом који је неколико година радио у тој области), али ни то није ишло добро. Разлог је углавном био исти: то је за нас био споредни пројекат, а ми нисмо знали ништа о тржишту подних плочица.

Али, за то време развили смо пуно веб страница за е-трговину за клијенте наше агенције. Већина ових веб страница је направљена користећи Руби он Раилс и посебно Спрее . И овај правац је био успешан - научили смо много о развоју веб страница о е-трговини и типичним развојним проблемима (као и маркетингу, отпреми и различитим пословним проблемима).

Ове године радим са новим партнером који је имао добро искуство са Схопифи платформом. Пуно смо разговарали и дошли смо на идеју да развијемо апликацију Схопифи . Ова платформа брзо расте и на тржишту постоји велика потражња за проширивањем могућности платформе.

Изградња производа, уместо да се за некога прилагођавам, такође је била узбудљива за мене. Дакле, ове две ствари - е-трговина и развој производа - природно су се објединиле у идеји апликације Схопифи .

Разумевање сложености изградње апликација

Дакле, смислили сте идеју за своју апликацију. Сада морате да одлучите да ли ће ваша апликација комуницирати са излогима продаваца проширујући предлошке или убризгавањем неких скрипти. Или можда треба да радите са неким независним АПИ-јем и интегришете га у своју апликацију или проширите Схопифи Админ.

Сваки део може бити довољно сложен. Дакле, ако само требате да урадите нешто са Схопифи складиштите податке и изнесете нешто у одељку Администратор, имате посла са 1 типом или 1 тачком сложености. Ако требате да радите са спољним АПИ-јевима и још увек имате неки одељак у Админ-у, имате 2 тачке сложености. И тако даље.

Започните развој са бојлером

Па, видимо да је наша апликација прилично сложена (мада за купце изгледа лако). Пошто смо се сложили око идеје за апликацију и почетног МВП-а , почео сам да истражујем и открио да Схопифи има сјајан shopify_appРуби драгуљ.

Ово је прилично цоол ствар која вам штеди много времена: генерише за вас оквир апликације Схопифи без потребе за ручним подешавањем протока ОАутх . Остале ствари које треба напоменути:

  • Модел генерисане продавнице
  • Регистровање једноставних Вебхоокс-а и СцриптТагова
  • Приступи аутентификацији
  • Верификација проксија апликације (за прилагођавања излога)

Покренуо сам празну апликацију за неколико минута, а не сати.

Користите препоручене алате

Даље, истраживао сам како да приступим администраторском корисничком интерфејсу у својој апликацији. Открио сам да Схопифи поједностављује овај задатак и вама снагом њиховог дизајнерског оквира Схопифи Поларис .

Поларис је библиотека компонената Реацт.јс и ово је препоручени начин за проширивање одељка Схопифи Админ. Ваша апликација ће изгледати као изворна апликација Схопифи са администраторским одељцима као што су „Производи“ или „Поруџбине“ ( претпостављам да је користи и Схопифи ).

Требали бисте је користити уместо неке прилагођене теме, јер је добро документована, подржана и има смернице.

Проширивање Схопифи администратора

Након успешне инсталације Схопифи Полариса у пројекат уз помоћ Вебпацкер-а или Пређе , моћи ћете да проширите одељак Схопифи Админ.

За страницу добродошлице (ону коју ће трговци видети након инсталације апликације, а подаци још нису подешени), урадићете следеће:

  • Додајте руту:
get ‘/welcome’ => ‘home#index’
  • Направите Раилс контролер:
class HomeController < BaseAuthenticatedController def index endend
  • Додајте шаблон приказа који управо приказује компоненту Реацт уз помоћ react-railsдрагуља:
# home/index.html.erb
  • Направите Реацт компоненту која приказује неке Схопифи Поларис компоненте (као EmptyState, на пример).

Први корак је сасвим јасан свима који су икада радили са Руби он Раилс . Други корак би такође требао бити, осим чињенице да требате наследити своје административне контролере, ShopifyApp::AuthenticatedControllerтако да ће сваки захтев бити одобрен. Направио сам поткласу ове класе за све будуће класе администратора.

Трећи корак је рендеровање. Инсталирао сам react-railsдрагуљ који долази са изврсним react_componentпомоћником и додао сам приказ компоненте добродошлице која преноси сва потребна својства. За уграђене апликације (оне које проширују Схопифи Админ) требало би да проследите најмање apiKeyи shopOriginопције за коришћење уграђених компоненти које долазе са Схопифи Поларис . Ове уграђене компоненте су само Реацт омотачи око Схопифи Ембеддед Апп СДК.

И на крају, написао сам Welcomeкомпоненту и ставио је у app/javascript/componentsфасциклу према config/webpacker.yml.

Имајте на уму да сам извукао неки образац, попут дефиниције shopOriginи apiKeyсвојстава, у BasePageкомпоненту која ће бити надређена компонента за сваку страницу апликације. InfluencifyAppје компонента која приказује AppProviderкомпоненту Поларис Page, унутар ње и сву децу која имају {this.props.children}унутрашњост Page.

Овим подешавањем креирао сам друге компоненте InfluencifyAppкао основну компоненту за сваку страницу апликације.

Прилагођавање излога

У Схопифи постоји добра опција која вам омогућава да прилагодите излоге продаваца: Ознаке скрипти. То су ЈаваСцрипт датотеке које ће се убризгати у предложак излога.

Можете их лако регистровати помоћу shopify_appдрагуља. Ево како сам регистровао скрипту за апликацију Инфлуенцифи (на:) 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.

Наравно, прављење апликације је само врх леденог брега. Следећи кораци у Схопифи подухвату за изградњу апликација су израда добрих промо материјала, слање у Апп Сторе, маркетинг и корисничка подршка / развој након што буде одобрен.

Ако вам се свидео овај пост, кликните нада бисте проширили вест.