Contoh dukungan API Messenger untuk Pengalaman Instagram - Original Coast Clothing
Original Coast Clothing (OC) adalah merek pakaian fiktif yang dibuat untuk menampilkan fitur-fitur utama Platform Instagram yang memberikan pengalaman pelanggan yang luar biasa. Dengan menggunakan demo ini sebagai inspirasi, siapa saja dapat membuat dukungan API Messenger yang menyenangkan untuk pengalaman Instagram yang memanfaatkan otomatisasi dan dukungan pelanggan langsung. Kode sumber terbuka untuk aplikasi dan panduan tentang cara menerapkan pengalaman di lingkungan lokal atau server jarak jauh Anda juga disediakan. Ada juga contoh pengalaman Messenger pendamping. Cobalah sekarang dengan berkirim pesan ke @originalcoastclothing atau mengomentari suatu postingan. |  |
Fitur Platform
Pengalaman ini memanfaatkan fitur platform berikut. Jika Anda memutuskan untuk menerapkan pengalaman di Halaman Anda, kode akan menggunakan semuanya:
- Berkirim Pesan
- Cuplikan Teks, Gambar, dan tautan
- Template generik
Terapkan pengalaman ini di Instagram
Di akhir panduan ini, Anda akan memiliki aplikasi Instagram lengkap yang aktif di server Anda, menjawab pesan dari akun Anda.
Kode yang mendukung pengalaman ini adalah sumber terbuka. Siapa saja dapat dengan mudah memulai mengembangkan pengalaman berkirim pesan yang hebat.
Kode dirilis di bawah Lisensi BSD, memungkinkan Anda untuk menggunakannya secara bebas untuk kebutuhan Anda. Kode di-hosting di GitHub untuk referensi selengkapnya.
Persyaratan untuk menerapkan aplikasi Instagram
- Akun Profesional Instagram (akun Kreator atau akun Bisnis).
- Halaman Facebookyang terhubung ke akun Instagram. Pastikan Anda memiliki Halaman Facebook yang mewakili identitas akun Profesional Instagram Anda saat terhubung dengan pengguna. Untuk membuat Halaman baru, kunjungi https://www.facebook.com/pages/create, Anda juga dapat menyiapkan Halaman pengujian untuk memulai.
- Akun Developer yang dapat melakukan Tugas di Halaman Anda. Akun Developer memungkinkan Anda untuk membuat aplikasi baru, yang merupakan inti dari setiap integrasi Facebook. Anda dapat mendaftar sebagai developer dengan membuka situs web Developer Meta dan mengeklik tombol "Mulai".
- Aplikasi Facebook dengan pengaturan Dasar yang telah dikonfigurasi. Untuk membuat aplikasi baru, kunjungi https://developers.facebook.com/ dan klik Tambahkan Aplikasi Baru
Langkah-langkah Pengaturan
Tujuan dari bagian ini adalah untuk mengumpulkan semua token akses dan id yang diperlukan agar aplikasi Instagram berhasil mengirim dan menerima pesan. Sebelum memulai, pastikan Anda telah melengkapi semua daftar persyaratan di atas. Pada tahap ini Anda harus memiliki Halaman, aplikasi Facebook yang terdaftar, dan akun Profesional Instagram.
Jika Anda baru saja membuat aplikasi Facebook baru, kemungkinan aplikasi tersebut dalam mode pengembangan. Perhatikan bahwa aplikasi dalam mode ini hanya diizinkan untuk mengirim pesan kepada orang-orang yang terhubung ke aplikasi (Admin, Developer, dan Penguji). Anda dapat melanjutkan panduan ini dalam mode ini, tetapi setelah aplikasi Anda siap untuk publik, aplikasi perlu melalui tinjauan aplikasi untuk izin instagram_manage_messages. Untuk informasi selengkapnya, lihat Tinjauan Aplikasi
- Konfigurasikan integrasi Instagram Anda dengan mengikuti dokumentasi Memulai.
- Tambahkan beberapa akun pengujian Instagram yang akan Anda gunakan untuk menguji pengalaman.
Pada titik ini Anda harus memiliki hal berikut
- ID Aplikasi
- Rahasia Aplikasi
- ID Halaman
- Token Akses Halaman
- Akun Instagram yang terhubung ke Halaman
- Akun Instagram terdaftar sebagai akun tes
Penerapan satu klik menggunakan Heroku atau Glitch
Pengalaman dapat secara otomatis digunakan ke Heroku atau Glitch menggunakan tombol berikut. Anda akan diminta untuk memasukkan variabel lingkungan yang diperlukan untuk menyelesaikan pengaturan.
Terapkan pada HerokuTerapkan di GlitchTerapkan secara lokal menggunakan ngrok
Layanan tunneling memaparkan server web lokal Anda ke URL eksternal yang dapat dijangkau oleh Webhooks Facebook. Ada banyak layanan semacam itu. Dalam contoh ini, kami akan menggunakan ngrok.
1. Klona repo-nya
Klona repositori ke mesin lokal:
git clone https://github.com/fbsamples/original-coast-clothing-ig.git cd original-coast-clothing-ig
2. Instal layanan tunelling
Jika belum terinstal, instal ngrok melalui unduh atau melalui baris perintah:
$ npm install -g ngrok
Di direktori repo ini, minta terowongan ke server lokal Anda dengan port pilihan Anda
$ ngrok http 3000
Layar harus menunjukkan status ngrok:
Session Status online
Account Redacted (Plan:iuluufkccebegkhifrlgfhudrtbthgln Free)
Version 2.3.35
Region United States (us)
Web Interface http://127.0.0.1:4040
Forwarding http://1c3b838deacb.ngrok.io -> http://localhost:3000
Forwarding https://1c3b838deacb.ngrok.io -> http://localhost:3000
Perhatikan URL https dari server eksternal yang diteruskan ke mesin lokal Anda. Pada contoh di atas adalah https://1c3b838deacb.ngrok.io.
3. Instal dependensi
Buka tab terminal baru, juga di direktori repo.
$ npm install
Alternatifnya, gunakan Yarn:
$ yarn install
4. Siapkan file .env
Salin file .sample.env ke .env
$ cp .sample.env .env
Edit file .env untuk menambahkan semua nilai bagi aplikasi dan halaman Anda.
5. Jalankan aplikasi Anda secara lokal
$ node app.js
Anda sekarang seharusnya dapat mengakses halaman default aplikasi di browser Anda di http://localhost:3000
Konfirmasikan bahwa Anda juga dapat mengakses aplikasi di URL eksternal dari langkah 2.
Terapkan menggunakan Heroku
1. Klona repo-nya
Klona repositori ke mesin lokal:
git clone https://github.com/fbsamples/original-coast-clothing-ig.git cd original-coast-clothing-ig
2. Instal Heroku CLI
Jika direktori belum repo git, buatlah:
$ git init
Initialized empty Git repository in .git/
$ git add .
$ git commit -m "My first commit"
3. Instal Heroku CLI
Jika belum terinstal, unduh dan instal Heroku CLI
4. Buat aplikasi dari CLI
$ heroku apps:create
Creating app... done, ⬢ mystic-wind-83
Created http://mystic-wind-83.herokuapp.com/ | git@heroku.com:mystic-wind-83.git
Catat nama yang diberikan untuk aplikasi Anda. Dalam contoh ini, namanya mystic-wind-83.
5. Atur variabel lingkungan
Di Dasbor Aplikasi Heroku, temukan aplikasi Anda dan atur variabel konfigurasi mengikuti komentar di file .sample.env
Alternatifnya, variabel env dapat diatur dari baris perintah seperti ini:
$ heroku config:set PAGE_ID=XXXX
6. Terapkan kode
$ git push heroku master
7. Lihat output catatan
$ heroku logs --tail
Hubungkan Webhooks Anda
Sekarang setelah server Anda berjalan, endpoint Webhooks Anda ada di jalur /webhook. Dalam contoh Heroku di atas, ini adalah http://mystic-wind-83.herokuapp.com/webhook.
Siapkan Webhooks Anda dengan mengikuti [panduan Webhooks Platform Messenger] ( https://developers.facebook.com/docs/messenger-platform/webhooks
Setelah langganan Webhooks divalidasi, berlanggananlah peristiwa berikut:
- comments
- messages
- messaging_postbacks
Uji Webhooks dengan mengeklik tombol "Uji" di sebelah langganan peristiwa. Anda akan melihat peristiwa pengujian di output catatan server Anda.
Uji apakah pengaturan aplikasi Anda berhasil
Saat login ke akun dengan peran "Penguji Instagram", coba kirim pesan ke akun Instagram yang terhubung ke Halaman Anda, atau tinggalkan komentar di postingan.
Jika Anda melihat tanggapan atas pesan Anda di Instagram, Anda telah sepenuhnya mengatur aplikasi Anda! Voilà!
Pemecahan Masalah
Aplikasi hanya membalas saya, tidak membalas orang lain
Aplikasi Facebook kemungkinan masih dalam Mode Pengembangan. Anda dapat menambahkan orang lain sebagai penguji aplikasi, jika mereka menerimanya, aplikasi tersebut dapat mengirim pesan kepada mereka. Setelah siap, Anda bisa meminta izin instagram_manage_messages agar dapat membalas ke siapa saja.
Isu Lainnya
Panduan ini salah? Beri tahu kami dengan mengisi laporan Masalah