Platform Messenger

Contoh Pengalaman Messenger bersama Original Coast Clothing

Original Coast Clothing (OCC) adalah merek pakaian fiktif yang kami buat untuk menampilkan fitur-fitur utama Platform Messenger. Panduan ini menunjukkan kepada Anda cara mengunduh kode untuk contoh aplikasi ini di lingkungan lokal atau server jarak jauh Anda untuk mempelajari selengkapnya tentang fitur yang ditawarkan Messenger.

Untuk memamerkan pengalaman Messenger sepenuhnya dengan beberapa titik masuk, bisnis fiksi kami ini memiliki fitur berikut:

Fitur Platform

Contoh aplikasi ini memanfaatkan fitur-fitur berikut:

Menerapkan pengalaman ini di Messenger

Di akhir panduan ini, Anda akan memiliki aplikasi Messenger lengkap yang aktif di server Anda, menjawab pesan dari Halaman pengujian Anda.

Sebelum Memulai

Anda akan memerlukan:

Jika Anda memiliki lingkungan pengembangan, staging, dan produksi terpisah, setiap lingkungan akan memerlukan Aplikasi Meta dan Halaman Facebook masing-masing.

Pengaturan Lingkungan Lokal

Untuk menjalankan aplikasi sampel di lingkungan lokal, Anda akan memerlukan NodeJS 10.x atau setelahnya.

Langkah 1. Buat Klona Repositori Contoh Aplikasi

Buat klona repositori original-coast-clothing di mesin lokal Anda.

git clone https://github.com/fbsamples/original-coast-clothing.git
cd original-coast-clothing

Langkah 2. Instal Dependensi Kode

yarn install

Langkah 3. Dapatkan Alamat Eksternal

Untuk menerima pesan, kita harus bisa mendapatkan Webhooks masuk dari Server kami.

Jika Anda memerlukan alamat eksternal, gunakan ngrok karena ini akan memberikan alamat https eksternal yang akan masuk ke aplikasi NodeJS Anda.

Instal ngrok

npm install -g ngrok

Minta terowongan ke server lokal Anda dengan port pilihan Anda

ngrok http 3000

Layar seharusnya menampilkan status ngrok:

Session Status                online
Account                       Redacted (Plan: 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

Connections                   ttl     opn     rt1     rt5     p50     p90
0       0       0.00    0.00    0.00    0.00

Catat URL https dari server eksternal yang meneruskan ke mesin lokal Anda. Pada contoh di atas adalah https://1c3b838deacb.ngrok.io.

Langkah 4. Atur Webhooks dan Profil Messenger

Salin contoh template lingkungan di aplikasi Anda

mv .sample.env .env

Tambahkan nilai lingkungan Anda

Edit file .env untuk menambahkan nilai untuk ID Aplikasi Facebook Anda, ID Halaman Facebook Anda, token akses Halaman Anda, dan Rahasia Aplikasi Anda. Atur nilai VERIFY_TOKEN ke string acak. Aplikasi Anda akan menggunakannya untuk memvalidasi panggilan API.

Langkah 5. Jalankan Aplikasi Anda

node app.js

Anda sekarang dapat mengakses aplikasi di browser Anda di http://localhost:3000

Langkah 6. Konfigurasikan Aplikasi Anda

Jalankan perintah berikut untuk mengonfigurasi pengaturan langganan Webhooks untuk aplikasi Anda dan Profil Messenger Halaman. Perhatikan bahwa Anda perlu menggunakan nilai untuk VERIFY_TOKEN yang ditambahkan di file .env.

http://localhost:3000/profile?mode=all&verify_token=<VERIFY_TOKEN>

Langkah 7. Uji Pengaturan Aplikasi Anda

Kirim pesan ke Halaman Anda dari Facebook atau di Messenger, jika Webhooks Anda menerima suatu peristiwa, Anda telah menyiapkan aplikasi Anda sepenuhnya!

Buat Perubahan Kode

Edit file locales/en_US.json, ganti pesan di bawah get_started.welcome dan mengubahnya dari "Hi {{userFirstName}}! Welcome to Original Coast Clothing..." ke hal lain.

Kembali ke terminal pertama, setiap kali Anda mengubah kode, Anda harus memulai ulang server NodeJS. Hentikan server dengan Ctrl-C dan jalankan lagi, untuk memuat ulang kode baru.

node app.js

Buka Messenger Anda dan kirim pesan ke Halaman Anda dengan kata "Halo", Anda akan mendapatkan pesan baru.

Pengaturan Heroku

Instance Heroku dapat berguna untuk meng-hosting lingkungan produksi atau staging bagi aplikasi atau situs web bisnis Anda.

Langkah 1. Buat Aplikasi Heroku

git init
heroku apps:create
# Creating app... done, ⬢ YOUR-APP-NAME
# Created http://YOUR-APP-NAME.herokuapp.com/ | git@heroku.com:YOUR-APP-NAME.git

Langkah 2. Terapkan Kode ke Heroku

heroku git:remote -a YOUR-APP-NAME
git push heroku master

Langkah 3. Atur Variabel Lingkungan

Temukan Config Vars aplikasi Anda, di dasbor aplikasi Heroku di bawah Settings (Pengaturan). Tambahkan nilai untuk ID Aplikasi Facebook Anda, ID Halaman Facebook Anda, token akses Halaman Anda, Rahasia Aplikasi Anda, dan buat VERIFY_TOKEN.

Langkah 4. Atur Webhooks dan Profil Messenger

Anda seharusnya sekarang dapat mengakses aplikasi Anda. Gunakan VERIFY_TOKEN yang Anda buat sebagai config vars dan panggil endpoint /profile.

https://YOUR-APP-NAME.herokuapp.com/profile?mode=all&verify_token=<VERIFY_TOKEN>

Opsional URL di atas akan mengembalikan id persona yang diunggah. Karena disimpan dalam memori, Anda perlu menambahkan ID yang ditampilkan itu sebagai Config Vars, sehingga ID tersebut dapat bertahan setelah pemuatan ulang.

heroku config:set PERSONA_BILLING=<PERSONA_ID> -a YOUR-APP-NAME
heroku config:set PERSONA_ORDER=<PERSONA_ID> -a YOUR-APP-NAME
heroku config:set PERSONA_SALES=<PERSONA_ID> -a YOUR-APP-NAME

Langkah 5. Uji Aplikasi Anda

Kirim pesan ke Halaman Anda dari Facebook atau di Messenger. Jika Webhooks Anda menerima peristiwa, aplikasi Anda telah siap sepenuhnya!

Pemecahan Masalah

Jalankan lagi aplikasi secara lokal

Setelah menjalankan ngrok, alamat eksternal baru akan disediakan. Perbarui alamat APP_URL di file .env, lalu jalankan server NodeJS.

node app.js

Perbarui alamat Webhooks di Pengaturan Aplikasi Facebook dengan mengunjungi http://localhost:3000/profile?mode=webhook&verify_token=<VERIFY_TOKEN>

Halaman Saya hanya membalas saya, tidak membalas orang lain

Aplikasi Facebook kemungkinan masih dalam Mode Pengembangan. Anda dapat menambahkan seseorang sebagai penguji aplikasi, jika mereka menerimanya, aplikasi tersebut dapat mengirim pesan kepada mereka. Setelah siap, Anda bisa meminta izin pages_messaging agar dapat membalas ke siapa saja.

Pelajari Selengkapnya