Apa itu aplikasi Shopify dan bagaimana cara membuatnya

Diterbitkan: 2022-07-29

Salah satu pertanyaan yang sering kami dapatkan ketika berbicara dengan pengembang atau pemimpin teknik tentang apa yang kami lakukan adalah, apa sebenarnya aplikasi Shopify itu dan alat serta teknologi apa yang diperlukan untuk membuatnya? Pertanyaan lain yang sering diajukan adalah, Apakah masalah jika saya tidak memiliki pengalaman dalam membuat aplikasi Shopify?

Mari kita jawab pertanyaan ini dengan mengelaborasi berbagai aspek teknologi pengembangan aplikasi Shopify.

Bagaimana aplikasi Shopify dibandingkan dengan aplikasi web

Perspektif kami tentang topik ini adalah bahwa aplikasi Shopify berfungsi seperti aplikasi web standar tetapi sangat terhubung dengan platform Shopify melalui API. Ini memiliki beberapa implikasi:

  • Untuk membuat aplikasi Shopify, Anda dapat menggunakan teknologi yang sama seperti untuk aplikasi web. Anda tidak terbatas pada teknologi tertentu (walaupun menggunakan beberapa teknologi tertentu dapat membuat hidup Anda lebih mudah—kita akan membahasnya nanti).
  • Biasanya, Anda perlu membangun backend dan frontend.
  • Anda bertanggung jawab atas hosting & pengoperasian aplikasi.
  • Setelah aplikasi disetujui oleh Shopify, proses rilis juga sepenuhnya di bawah kendali Anda.

Dari perspektif pedagang, kita dapat mengatakan bahwa Shopify adalah Software-as-a-Service (SaaS), serta aplikasi Shopify. Artinya, pedagang tidak perlu berinteraksi dengan jenis kode apa pun untuk menginstal aplikasi Anda.

Komponen aplikasi Shopify

Kami mengidentifikasi tiga komponen logis yang biasanya dimiliki aplikasi Shopify:

  • Admin pedagang
  • Pemrosesan webhook
  • Aplikasi yang menghadap pelanggan (UI etalase)

Dari ketiganya, yang terakhir belum tentu diperlukan. Itu tergantung pada fungsi yang ingin Anda berikan kepada pedagang. Misalnya, aplikasi kami Candy Rack terdiri dari ketiga komponen, sedangkan Loyal hanya terdiri dari dua bagian pertama.

Admin pedagang

Admin pedagang adalah dasbor tempat pedagang menyiapkan & mengonfigurasi aplikasi. Shopify merekomendasikan untuk melayani admin pedagang dalam antarmuka Shopify (disebut aplikasi tersemat). Ini berarti Anda menyematkan aplikasi ke dalam administrasi Shopify menggunakan iframe.

Aplikasi yang disematkan datang dengan beberapa batasan:

  • Karena cara kerja otentikasi, Anda kurang lebih terbatas pada arsitektur aplikasi satu halaman (walaupun solusi parsial dimungkinkan dengan bantuan Turbolinks atau Inertia.js).
  • Mungkin efisien menggunakan React untuk menulis frontend karena ada library yang disediakan oleh Shopify: Library Polaris UI memastikan UX Anda konsisten dengan admin Shopify lainnya dan App Bridge bertindak sebagai jembatan frontend yang menyediakan data konteks Shopify ke aplikasi Anda berjalan di iframe.

Admin pedagang juga merupakan titik kontak pertama antara aplikasi Anda dan pedagang, dan ini adalah tempat di mana proses instalasi ditangani. Instalasi pada dasarnya berarti memperoleh izin untuk mengakses data toko penjual melalui OAuth.

Ini juga merupakan bagian dari aplikasi tempat Anda menangani penagihan jika aplikasi Anda tidak gratis.

Admin pedagang di aplikasi Shopify Aplikasi Permen
Admin pedagang

Pemrosesan webhook

Webhook adalah cara Shopify menginformasikan aplikasi Anda tentang berbagai peristiwa yang terjadi di toko tempat aplikasi itu diinstal: misalnya, pembuatan pesanan baru atau pembaruan produk. Anda memutuskan acara mana yang akan Anda ikuti.

Logika bisnis yang perlu dijalankan berdasarkan peristiwa yang diterima harus ditangani secara pasti oleh pekerja latar belakang. Jika tidak, Anda dapat dengan mudah membebani aplikasi Anda. Anda juga dapat mempertimbangkan untuk mendelegasikan penerimaan acara di luar aplikasi Anda.

Aplikasi yang menghadap pelanggan (UI etalase)

Jika aplikasi Anda memperluas Shopify Storefront (yang berarti aplikasi tersebut membawa fitur baru ke pelanggan toko), Anda perlu "memasukkannya" ke front store. Untuk melakukannya, Anda perlu memberi tahu Shopify melalui API untuk menyuntikkan sumber daya JavaScript Anda ke toko depan. Ada dua metode paling populer untuk itu: Script Tag dan App Embed block. Ada juga kemungkinan untuk memperluas tema etalase secara langsung dengan beberapa komponen visual menggunakan Blok Aplikasi (juga disebut sebagai bagian Aplikasi).

Pengembangan aplikasi yang menghadap pelanggan mungkin merupakan bagian yang paling menantang dari keseluruhan proses. Biasanya, Anda memperluas atau bahkan mengganti perilaku default toko depan. Saat melakukan ini, Anda perlu memastikan bahwa itu berfungsi pada tema Shopify yang berbeda, dengan berbagai pengaturan toko, dan dengan cara yang tidak merusak apa pun dalam situasi yang tidak terduga. Selain itu, selalu ada aplikasi pihak ketiga lain yang mengganggu aplikasi Anda.

UI toko depan juga tempat Anda harus memperhatikan kinerja dan ukuran aplikasi Anda.

Bagian yang menghadap pelanggan dari aplikasi Shopify Candy Rack
Bagian yang menghadap pelanggan dari aplikasi Shopify

Evolusi pengembangan aplikasi Shopify

Meskipun saya katakan sebelumnya bahwa membangun aplikasi Shopify pada dasarnya adalah pengembangan aplikasi web, pernyataan ini sebenarnya hanya sebagian benar. Pada tahun 2021, Shopify memperkenalkan konsep ekstensi checkout. Sebelum itu, tidak mungkin untuk memperluas fungsionalitas checkout dengan aplikasi Shopify. Dalam aspek ini, pengalaman pengembang berbeda dibandingkan dengan aplikasi web karena terjadi di lingkungan yang sangat terbatas (misalnya Anda hanya dapat menggunakan serangkaian komponen React yang telah disiapkan sebelumnya), dan proses pembuatan dan rilis ditangani oleh Shopify.

Ada kemungkinan bahwa di masa depan, Shopify akan bergerak ke arah pendekatan ini di area lain untuk memiliki kontrol lebih besar atas aplikasi pihak ketiga. Akibatnya, pengembangan aplikasi Shopify akan bergeser lebih jauh dari pengembangan aplikasi web.

Tumpukan teknologi Digismoothie

Backend

Teknologi inti:

  • Python
  • Kerangka web Django
  • RQ atau Seledri
  • PostgreSQL
  • Redis

Terkadang, kami juga menggunakan:

  • Labu
  • API Cepat

Paling depan

  • Bereaksi (terkadang, kami menggunakan Preact untuk aplikasi yang menghadap pelanggan untuk alasan kinerja)
  • Tailwind + Komponen gaya
  • Bereaksi Permintaan
  • Polaris UI

Komunikasi backend-frontend

Bagaimana kita berkomunikasi tergantung pada kasus penggunaan dan produk. Teknologi berikut adalah bagian dari tumpukan teknologi kami:

  • GrafikQL
  • REST API
  • Soket web
  • Kelembaman

Infrastruktur

Strategi kami di sini adalah menggunakan solusi terkelola

  • Heroku
  • Vercel
  • Suar Awan
  • AWS

Anda dapat mempelajari lebih lanjut tentang teknologi yang kami gunakan dari artikel ini.

Arsitektur khas aplikasi Shopify oleh Digismoothie
Arsitektur khas aplikasi Shopify oleh Digismoothie

Kesimpulan

Saya harap Anda telah mempelajari apa artinya membangun aplikasi Shopify dari perspektif teknis dan teknologi apa yang dapat digunakan.

Akhirnya, mari kita kembali ke pertanyaan yang diajukan di awal. Apakah masalah bagi seorang insinyur dengan latar belakang pengembangan web untuk bergabung dengan tim yang bekerja pada aplikasi Shopify? Saya akan mengatakan pasti tidak. Jika seorang insinyur memiliki pemahaman yang baik tentang konsep & teknologi yang digunakan dalam pengembangan aplikasi web modern, mereka dapat terjun dengan sangat cepat. Pengetahuan tentang ekosistem dan API Shopify akan datang selangkah demi selangkah.