Transcript
00:00:00Membangun toko Shopify kini lebih mudah dari sebelumnya karena sekarang Anda cukup menggabungkannya dengan
00:00:04agen AI yang Anda gunakan untuk membuat kode dan membiarkan mereka menangani semuanya. Namun, sekadar menghubungkan Claude code ke
00:00:09toko Anda saja tidak cukup. Untuk mendapatkan toko yang tidak terlihat umum seperti
00:00:14toko Shopify lainnya di luar sana, Anda perlu menggabungkannya dengan beberapa elemen kunci dalam pengaturan Anda.
00:00:19Di akhir video ini, Anda akan mengetahui seluruh alur kerja yang dapat Anda gunakan untuk menyiapkan
00:00:23pipa Shopify Anda dari awal hingga akhir agar Anda bisa mulai menjual produk Anda segera.
00:00:28Anda perlu mengikuti beberapa langkah untuk mempersiapkan pembangunan toko Anda. Hal pertama
00:00:32yang Anda perlukan adalah akun partner Shopify, jadi bukalah browser dan daftarlah. Akun partner
00:00:37penting karena memberi Anda akses ke alat pengembangan yang memungkinkan Anda bereksperimen dengan
00:00:41platform tersebut. Ini pada dasarnya adalah sandbox untuk toko Anda, tempat Anda dapat membangun aplikasi seperti yang
00:00:46biasanya dilakukan, sekaligus mengekspos alat pengembangan seperti pembayaran palsu dan pengguna uji agar Anda
00:00:51dapat menguji aplikasi sebelum diluncurkan. Dan nanti, jika Anda merasa aplikasi Anda siap untuk mulai
00:00:56berjualan, Anda hanya perlu menambahkan integrasi pembayaran dan Anda dapat dengan mudah memindahkan akun pengembangan ke
00:01:01akun pedagang tempat Anda dapat mulai menjual produk asli kepada orang asli.
00:01:05Nah, setelah Anda membuat aplikasi di dalam proyek, saatnya menginstal Shopify CLI. Anda dapat melakukannya dengan
00:01:10menyalin perintah instalasi dari dokumen CLI dan menjalankannya di terminal. Setelah Anda menjalankannya, Anda
00:01:15akan diminta untuk memilih antara aplikasi React atau aplikasi ekstensi. Kami memilih aplikasi React karena itulah
00:01:20yang sering kami kembangkan dan lebih mudah untuk menyesuaikan aplikasinya dengan cara itu. Setelah itu, Anda dapat memilih
00:01:26bahasa yang ingin Anda gunakan dan kami memilih TypeScript karena keamanan tipe dan fitur keamanannya jika
00:01:31dibandingkan dengan JavaScript. Setelah Anda menyelesaikan penyiapan ini, ia akan menginstal semua dependensi yang diperlukan untuk
00:01:37menjalankan aplikasi. Setelah dependensi masuk, proyek akan siap dan saat Anda menjalankannya, Anda akan
00:01:41melihat templat dasar aplikasi dari mana Anda dapat mulai membuat perubahan lebih lanjut. Jadi setelah CLI
00:01:46telah diinstal, ada hal lain yang perlu Anda instal, dimulai dengan perangkat AI Shopify yang
00:01:51menambah proses pembangunan. Bagian terpenting darinya adalah MCP dan perintah instal untuk
00:01:56MCP untuk semua agen pengodean AI dapat ditemukan di dokumen. Karena kami menggunakan Claude code, kami menyalin perintah
00:02:03untuk Claude dan menginstal MCP, dan Anda dapat melakukan hal yang sama dengan alat pengodean pilihan Anda. Setelah MCP
00:02:08diinstal, ia mengekspos alat-alatnya ke Claude, tetapi MCP saja tidak cukup karena semua alat di dalamnya
00:02:14pada dasarnya ada di sana untuk membantu Claude membangun dengan lebih baik. MCP tidak memiliki cara untuk mendorong perubahan ke toko Anda yang berjalan
00:02:19di cloud. Ia hanya berisi dokumen dan pengetahuan tentang API Shopify beserta validasi lainnya. Jadi
00:02:25pengaturan ini tidak cukup untuk membangun dengan sendirinya. Dan itulah mengapa CLI penting karena ia
00:02:30sebenarnya adalah jembatan antara aplikasi Shopify dan pengaturan lokal. Selain MCP, Anda juga perlu
00:02:35menginstal plugin. Plugin penting karena berisi beberapa agen dan keterampilan yang dibundel bersama.
00:02:40Anda dapat menginstalnya dengan mengikuti perintah instal. Setelah menjalankan perintah instalasi,
00:02:44jalankan perintah reload plugins dan semua agen serta keterampilan akan siap digunakan.
00:02:49Sekarang pengaturan utama selesai, tetapi sebelum Anda benar-benar mulai membangun, Anda perlu menyiapkan proyeknya
00:02:53itu sendiri. Hal pertama yang harus disiapkan adalah file Claude.md, yang pada dasarnya adalah file untuk memandu
00:02:59agen tentang praktik yang Anda ingin ia ikuti. Claude.md yang kami tambahkan berisi semua praktik terbaik yang
00:03:05selalu kami bicarakan. Kami memiliki video khusus untuk ini di mana kami membahas praktik terbaik untuk
00:03:10file Claude.md, yang dapat Anda tonton di saluran kami. Selain Claude.md, Anda juga memerlukan
00:03:15hal lain di tempatnya. Secara default, Claude menghasilkan SVG dan menggunakannya sebagai penanda tempat untuk gambar. Namun
00:03:21SVG ini tidak cukup untuk visual toko kami, jadi kami membuat keterampilan untuk menutupi celah tersebut. Kami membuat
00:03:26keterampilan pembuatan gambar Gemini, yang memungkinkan agen mana pun yang menginstalnya memanggil CLI Gemini dan
00:03:32memintanya untuk membuat gambar untuk situs web. Keterampilan tersebut berisi instruksi tentang cara memanggil CLI Gemini
00:03:38dan di mana menyimpan gambar yang dihasilkan. Dan karena CLI Gemini telah mengintegrasikan pembuatan gambar, tidak
00:03:44perlu kunci API terpisah, jadi Anda dapat menggunakan keterampilan ini secara langsung hanya dengan mengandalkan autentikasi
00:03:50CLI Gemini. Selain pembuatan gambar, kami juga membangun keterampilan lain untuk kemudahan kami sendiri. Keterampilan prototipe
00:03:55bekerja dengan cara setiap kali Anda meminta perubahan desain kepada agen, ia pertama-tama membuat file HTML
00:04:01yang dapat Anda pratinjau, dan setelah Anda mempratinjaunya, ia menerapkan perubahan tersebut ke desain aplikasi. File
00:04:05skill.md berisi detail tentang keseluruhan alur kerja yang dibagi menjadi dua fase. Setelah keterampilan ini ada
00:04:11di tempatnya, ada beberapa hook yang juga Anda konfigurasikan dan hubungkan di settings.json di dalam folder .claud.
00:04:17Hook ini pada dasarnya bertindak sebagai pagar pembatas untuk Claude. Misalnya, skrip pre-tool yang digunakan dapat
00:04:22menghentikan Claude sebelum ia mendorong perubahan langsung ke aplikasi tanpa persetujuan Anda. Anda dapat mengonfigurasi sebanyak
00:04:28hook yang Anda inginkan. Jadi dengan pengaturan ini, kami siap untuk benar-benar membangun aplikasinya. Namun sebelum kami bergerak
00:04:33ke depan, mari kita dengarkan kata-kata dari sponsor kami, Willow Voice. Jika Anda menghabiskan sebagian besar hari Anda mengetik email,
00:04:37pesan Slack, dokumen, dan prompt, Anda bekerja jauh lebih lambat dari yang seharusnya. Willow Voice memungkinkan Anda
00:04:42berbicara alih-alih mengetik di mana saja di komputer Anda, dan teks muncul secara instan. Ini tidak seperti
00:04:47dikte bawaan Anda yang salah setiap kata lainnya. Willow tiga kali lebih akurat, dan itu
00:04:52benar-benar memformat semuanya dengan benar dengan paragraf dan struktur. Bagian terbaiknya adalah ia beradaptasi dengan apa yang Anda
00:04:57lakukan; formal saat Anda menulis email, santai saat Anda di Slack, dan teknis saat Anda dalam kode.
00:05:02Ia belajar bagaimana Anda menulis dari waktu ke waktu sehingga hasilnya terdengar seperti Anda, bukan robot. Lebih dari 100.000 profesional
00:05:07menggunakannya setiap hari, dan itu bersertifikat SOC2 dengan kepatuhan HIPAA dan nol retensi data, sehingga kata-kata Anda
00:05:13tetap pribadi. Saya telah menggunakannya selama seminggu terakhir, dan kembali mengetik terasa sangat lambat sekarang.
00:05:18Unduh Willow Voice secara gratis menggunakan tautan di deskripsi. Nah setelah ini ada di tempatnya, Anda bisa
00:05:23cukup meminta Claude tentang apa yang ingin Anda bangun. Anda perlu menjelaskan halaman arahan yang Anda inginkan,
00:05:27sama seperti bagaimana kami menyebutkan gaya yang kami ingin halaman arahan ikuti. Dan karena kami telah
00:05:31mengonfigurasi keterampilan tersebut, ia memuat keterampilan prototipe terlebih dahulu. Jadi alih-alih membuat perubahan langsung pada
00:05:36aplikasi yang sebenarnya, ia menulis kode HTML di mana ia menyelesaikan desainnya, dan kemudian menunggu persetujuan kami.
00:05:41Ia juga membuka desain di tab baru agar kami dapat mempratinjaunya. Versi pertama yang ia bangun
00:05:46terlihat bersih dan berfungsi dengan baik secara visual, tetapi ia menggunakan bagian penanda tempat di halaman arahan di mana
00:05:51gambar seharusnya berada. Karena kami telah menginstal keterampilan pembuatan gambar, ia seharusnya memuat
00:05:55itu secara langsung dan menggunakan pembuatan gambar sejak awal. Jadi kami memintanya lagi untuk menggunakan
00:06:00keterampilan pembuatan gambar dan benar-benar membuat gambar untuk bagian penanda tempat tersebut. Setelah kami memberikan prompt itu,
00:06:05ia meluncurkan beberapa CLI Gemini melalui alat bash dan membukanya dalam mode YOLO agar CLI Gemini
00:06:12tidak diblokir oleh perintah izin apa pun. Claude meluncurkan beberapa terminal dan semuanya
00:06:17mulai membuat gambar secara paralel. Pembuatan gambar membutuhkan waktu yang lebih lama, jadi Anda harus menunggu sampai
00:06:22selesai. Setelah gambar siap, Anda dapat memeriksa situs web dan itu akan terlihat jauh lebih dipoles. Dan
00:06:27karena prompt pembuatan gambar juga dikendalikan oleh Claude, gambar tersebut sangat cocok dengan gaya UI.
00:06:33Sekarang dengan visual ditambahkan, situs web selesai. Anda dapat mengulangi desain pada titik ini.
00:06:38Karena kami tidak memiliki perubahan lagi untuk dibuat, kami meminta Claude untuk melanjutkan dan menerapkan aplikasi di toko.
00:06:43Ia akan menanyakan beberapa pertanyaan terkait bagaimana Anda ingin aplikasi diterapkan, seperti apakah Anda
00:06:48ingin disinkronkan dengan toko langsung atau tidak, yang kami lakukan, jadi kami memilih opsi itu. Setelah Anda menjawab
00:06:53pertanyaannya, ia melanjutkan untuk mengonversi desain HTML menjadi aplikasi itu sendiri, bukan langsung ke aplikasi utama,
00:06:58tetapi ke aplikasi pengembangan yang telah kami buat. Ia meniru desain satu-ke-satu dan Anda dapat mempratinjau aplikasi
00:07:03sendiri untuk melihat bahwa ia telah sepenuhnya meniru desainnya. Nah, itu adalah hal yang baik bahwa kami menggunakan pratinjau HTML
00:07:08sebelum benar-benar menerapkannya di aplikasi karena proses ini memakan banyak waktu. Dan jika Anda
00:07:13mengulangi desain menggunakan proses ini, itu akan membuang banyak waktu dan token. Prototyping HTML
00:07:18jauh lebih cepat dan lebih mudah untuk diulangi. Juga, jika Anda menikmati konten kami, pertimbangkan untuk
00:07:23menekan tombol hype karena itu membantu kami membuat lebih banyak konten seperti ini dan menjangkau lebih banyak orang.
00:07:28Sampai titik ini, aplikasi disinkronkan ke URL toko yang sebenarnya. Desain yang baru saja Anda bangun ada di server lokal
00:07:34untuk pratinjau di mesin lokal dan itu juga ada di dalam pratinjau tema, yang merupakan tempat di mana ia
00:07:39pada dasarnya mengirim tema ke aplikasi pengembangan sehingga kami dapat mempratinjaunya secara langsung. Itu bukan versi final,
00:07:44itu hanya draf. Jadi kami cukup menyuruhnya untuk menyinkronkan langsung dan ia menggunakan Shopify CLI dan alat MCP
00:07:50untuk menyinkronkan desain ke URL utama yang dikonfigurasi untuk toko Shopify. Dan setelah ini,
00:07:55Claude akan memperbarui desain secara langsung di aplikasi Anda. Nah, demikian pula, Anda dapat memintanya untuk memperbarui semua
00:08:00halaman lain di situs web Anda dan ia akan mengikuti proses yang sama. Ia akan terlebih dahulu membuat prototipe bagian-bagiannya,
00:08:05kemudian memperbaruinya di aplikasi yang sebenarnya dan kemudian menyinkronkannya ke toko yang dihosting. Tapi ada beberapa hal
00:08:10yang masih perlu Anda lakukan pada toko Anda agar siap. Pada titik ini, Anda tidak akan dapat menambahkan
00:08:14produk karena memperbarui produk dan menyiapkannya untuk implementasi memerlukan API admin Shopify.
00:08:20Itu tidak dapat dilakukan tanpa API admin karena inilah yang memberi Anda akses ke bagian utama dari
00:08:25toko seperti halaman tentang, produk, dan fitur manajemen lainnya. Sampai sekarang, kami hanya
00:08:30melakukan perubahan pada tema dan menerapkan tema itu ke toko itu sendiri untuk visual. Untuk menghubungkan
00:08:35API admin, Anda perlu mengautentikasinya dengan toko menggunakan Shopify CLI. Setelah Anda memasukkan
00:08:41perintah autentikasi dengan tautan otorisasi Anda, ia akan membuka browser dari mana Anda dapat mengautentikasi. Setelah
00:08:46itu, Anda akan dapat membuat halaman terkait toko dan itu akan menggunakan MCP Shopify dan alat CLI
00:08:52secara bersama-sama untuk memperbarui bagian lain dari halaman tersebut. Nah, Anda bisa memintanya untuk menambahkan produk lain ke
00:08:56toko Anda agar Anda dapat mulai berjualan. Tetapi untuk menambahkan produk, Anda perlu mengonfigurasi izin
00:09:01untuk toko Shopify sehingga ia dapat mengakses alat melalui API admin. Menambahkan produk memerlukan izin lebih
00:09:06dari yang kami berikan sebelumnya. Kami hanya menambahkan izin tulis konten, tetapi untuk menambahkan
00:09:11produk, kami memerlukan izin tambahan seperti menulis produk serta membaca dan menulis publikasi.
00:09:16Jadi, Anda perlu menjalankan perintah otorisasi lagi tetapi dengan izin tambahan. Setelah itu selesai,
00:09:20Anda dapat meminta Claude untuk menambahkan produk ke situs Anda. Dan setelah ia melakukannya, Anda dapat memeriksa aplikasi dan melihat
00:09:25produk terdaftar di sana bersama dengan toko yang siap dengan detail produk dan fitur keranjang serta
00:09:30juga dapat memeriksa produk di panel admin. Namun siapa pun yang mengunjungi toko Anda masih tidak akan dapat melakukan
00:09:35pembelian pada titik ini. Agar toko benar-benar siap untuk menjual produk, Anda perlu menambahkan detail pembayaran
00:09:40agar pembayaran dapat diproses. Anda juga perlu memilih paket karena kecuali Anda melakukannya,
00:09:45siapa pun yang mengunjungi toko Anda perlu memasukkan kata sandi untuk melihatnya, yang jelas tidak layak. Jadi,
00:09:51setelah Anda memilih paket Anda, Anda akan dapat mulai menjual produk Anda. Nah, keseluruhan panduan pengaturan
00:09:55dan semua keterampilan yang dibuat di sini dapat ditemukan di AI Labs Pro untuk video ini dan untuk semua video kami sebelumnya
00:10:02dari mana Anda dapat mengunduh dan menggunakannya untuk proyek Anda sendiri. Jika Anda menemukan nilai dalam apa yang kami lakukan
00:10:07dan ingin mendukung saluran ini, ini adalah cara terbaik untuk melakukannya. Tautan ada di deskripsi.
00:10:11Itu membawa kita ke akhir video ini. Jika Anda ingin mendukung saluran ini dan membantu kami terus membuat
00:10:16video seperti ini, Anda dapat melakukannya dengan menggunakan tombol super thanks di bawah. Seperti biasa,
00:10:20terima kasih telah menonton dan saya akan melihat Anda di video berikutnya.
Community Posts
No posts yet. Be the first to write about this video!
Write about this video