يمكنك استخدام ميزة الرسائل من Google مع خدمات الاتصالات التفاعلية (RCS) ومحفظة Google لتصميم مسار تسجيل وصول سلس: يكمل المستخدم عملية تسجيل وصوله ويتلقّى بطاقة صعود الطائرة ويضيفها مباشرةً إلى "محفظة Google" من تطبيق "الرسائل". وبعد تعديل المحفظة، يتم تعديل البطاقة تلقائيًا إذا تغيّرت تفاصيل الرحلة الجوية. يمكن للمستخدمين الوصول سريعًا إلى بطاقة صعود الطائرة الحديثة على هواتفهم مباشرةً.
يصف هذا المستند الخطوات الفنية لتنفيذ بطاقة صعود الطائرة إلى مسار "محفظة Google". يتضمّن التطبيق أيضًا نموذجًا لمحادثة مع نصائح بشأن التصميم لضمان تجربة سلسة وأكثر فعالية عند تفعيل ميزة "مراسلة الأنشطة التجارية من خلال خدمات الاتصالات التفاعلية (RCS)".
التنفيذ الفني
لتنفيذ بطاقة صعود الطائرة في مسار "محفظة Google"، يجب استخدام واجهة برمجة تطبيقات Google Wallet وRBM API.
المتطلبات الأساسية
لبدء استخدام Google Wallet API، اتّبِع الخطوات التالية:
- اشترِك في حساب جهة إصدار محفظة كي تتمكن من إنشاء بطاقات وتوزيعها على "محفظة Google".
- أنشِئ مشروع Google Cloud Platform (GCP) إذا لم يكن لديك مشروع.
- تفعيل Google Wallet API
- عليك إنشاء حساب خدمة ومفتاح لتتمكّن من الاتصال بـ Google Wallet API.
- تفويض حساب الخدمة في Google Pay وWallet Console
- يمكنك استخدام نموذج بطاقة صعود الطائرة لإنشاء صف جديد لصعود الطائرة.
واجهة برمجة تطبيقات "محفظة Google"
لإنشاء بطاقة صعود الطائرة وإنشاء عنوان URL لميزة "الإضافة إلى محفظة Google" لميزة "مراسلة الأنشطة التجارية من خلال خدمات الاتصالات التفاعلية (RCS)"، يُرجى اتّباع هذه الخطوات:
- نفّذ عمليات المصادقة والتفويضات اللازمة.
- أنشِئ كائن "البطاقات".
- احصل على رمز JSON المميّز للويب (JWT). يبلغ الحد الأقصى لطول ملف JWT المشفّر 2048 حرفًا.
- استخدِم JWT لإنشاء عنوان URL للإضافة إلى "محفظة Google".
واجهة برمجة تطبيقات ميزة "مراسلة الأنشطة التجارية من خلال خدمات الاتصالات التفاعلية (RCS)"
لإرسال اقتراح "إضافة إلى محفظة Google" من ميزة "مراسلة الأنشطة التجارية من خلال خدمات الاتصالات التفاعلية (RCS)"، أرسِل إجراء عنوان URL مفتوح. في حمولة الرسالة، نفِّذ ما يلي:
- بخصوص
text، أدخِل "إضافة إلى محفظة Google". - بالنسبة إلى
url، أدخِل عنوان URL الخاص بالإضافة إلى "محفظة Google".
سيظهر رمز "محفظة Google" تلقائيًا على تصنيف الاقتراح.
تصميم المحادثة
يستخدم هذا النموذج إمكانات المحادثة الفريدة لتوجيه المستخدمين خلال عملية تسجيل الوصول الكاملة. ويوضّح كيفية استخدام مربع الحوار الطبيعي والميزات الغنية، مثل الاقتراحات بنقرة واحدة والبطاقات التفاعلية، لمساعدة المستخدمين في تحقيق أهدافهم. في هذه الحالة، تكون أهدافهم: (1) تخصيص تجربة رحلتي الجوية (2) والحصول على بطاقة صعود الطائرة (3) وإضافتها إلى "محفظة Google" للوصول إليها بسهولة في المطار.
في ما يلي نظرة عامة على المحادثة. يتبعه نصائح تصميم وتقسيم مفصّل للتدفق. لتنفيذ تصميم مماثل لوكيلك، يُرجى الاطّلاع على عيّنات التعليمات أسفل الخطوات.
نصيحة التصميم
ضع هذه المبادئ في الاعتبار عند تصميم عملية تسجيل الوصول:
- رسالتك الأولى هي الأهم. وضِّح الغرض من المحادثة بإيجاز حتى يكون لدى المستخدم سبب للتفاعل.
- يجب أن تقدم كل رسالة جزءًا صغيرًا من المعلومات وتطلب من المستخدم الرد. تسهِّل الردود المقترحة والإجراءات المقترَحة اتخاذ الخطوة التالية.
- يجب أن يكون الوكيل متجاوبًا وليس آليًا. استخدِم لغة تعكس نبرة صوت علامتك التجارية. كيف يمكنك الدردشة مع أحد ممثلي العلامة التجارية المثاليين مع أحد العملاء؟
- تُشعر الناس بالرضا عن أنفسهم. يمكنك تخصيص تجربة تسجيل الوصول من خلال اقتراح مقاعد أو وجبات استنادًا إلى سجلّ رحلات المستخدم.
- البطاقات التفاعلية ولوحات العرض الدوّارة تجعل المحادثة أكثر ديناميكية. ويمكنك استخدامها لمشاركة التفاصيل والتفاصيل التي ستساعد المستخدم على الاختيار من بين الخيارات.
- تنتهي المحادثة الجيدة. تأكَّد من تفاصيل تسجيل وصول المستخدم قبل إرسال بطاقة صعود الطائرة. أضِف لمسة بشرية عن طريق الإرسال والإرسال.
مسار تسجيل الوصول
يرسل الوكيل إشعارًا إلى المستخدم بأنّ تسجيل الوصول إلى الرحلة الجوية مفتوح.
عيّنة تعليمات برمجية
const suggestions = [ { reply: { text: '⚡ Check in', postbackData: 'checkIn', }, }, { reply: { text: '⏰ Remind me later', postbackData: 'remindMe', }, }, { reply: { text: '✈️ View my flight details', postbackData: 'flightDetails', }, }, { reply: { text: '🔀 Change my flight', postbackData: 'flightChange', }, }, ]; const params = { messageText: 'Check-in for your flight', messageDescription: '👏 Happy morning, Jo! Check-in is now open for your flight from London to Mumbai on ' + getFlightTime() + ' at 2:00PM. What would you like to do? ', msisdn: phoneNumber, suggestions: suggestions, imageUrl: getImageUrl('fly.png'), height: 'MEDIUM', }; rbmApiHelper.sendRichCard(params);ينقر المستخدم على رد مقترح لتسجيل الوصول.
يضع الوكيل توقعات بشأن عملية تسجيل الوصول.
عيّنة تعليمات برمجية
const params = { messageText: "OK, great. It's just 3 simple steps to check in. Here's the first step to get you onboard:", msisdn: msisdn, }; let self = this; rbmApiHelper.sendMessage(params, function (response, err) { self.sendPolicyImage(msisdn); });يطلب الوكيل من المستخدم الموافقة على سياسة الأمان.
عيّنة تعليمات برمجية
const suggestions = [ { reply: { text: 'Yes, I agree', postbackData: 'policy_agree', }, }, { reply: { text: "No, I don't agree", postbackData: 'policy_nack', }, }, ]; const params = { messageText: 'Baggage safety policy', messageDescription: 'To help us ensure a safe flight, please review our safety policy and let us know you agree', msisdn: msisdn, suggestions: suggestions, imageUrl: getImageUrl('policyImage.png'), height: 'MEDIUM', orientation: 'HORIZONTAL', thumbnailImageAlignment: 'LEFT', }; rbmApiHelper.sendRichCard(params);ينقر المستخدم على رد مقترح للموافقة عليه.
يشكر الوكيل المستخدم ويقدّم له الخطوة التالية.
عيّنة تعليمات برمجية
const params = { messageText: "Thank you - A safe passenger is a happy passenger! Here's the next step:", msisdn: msisdn, }; let self = this; rbmApiHelper.sendMessage(params, function (response, err) { self.sendPlan(msisdn); });يطلب الوكيل من المستخدم اختيار مقعد.
عيّنة تعليمات برمجية
const suggestions = [ { reply: { text: 'View the seat map', postbackData: 'view_seat_map', }, }, ]; const outerSuggestions = [ { reply: { text: '17A', postbackData: 'seat_17A', }, }, { reply: { text: '17C', postbackData: 'seat_17C', }, }, { reply: { text: '18A', postbackData: 'seat_18A', }, }, { reply: { text: 'Show me more', postbackData: 'more', }, }, ]; const params = { messageText: 'Choose your seat', messageDescription: "It's time to sit back and get comfy! 💺 We've recommended some seats based on your last flight. Choose the one you want, or let us know your preferred seat by typing the number.", msisdn: msisdn, imageUrl: getImageUrl('seatMap.png'), height: 'TALL', orientation: 'VERTICAL', outerSuggestions: outerSuggestions }; rbmApiHelper.sendRichCard(params);ينقر المستخدم على رد مقترح لمقعده الذي تم اختياره.
يؤكّد الوكيل خيار المستخدم.
عيّنة تعليمات برمجية
this.seatmap[msisdn] = seat; const params = { messageText: `Seat ${seat}, you got it`, msisdn: msisdn, }; let self = this; rbmApiHelper.sendMessage(params, function(res) { self.sendFoodOptions(msisdn); });يطلب الوكيل من المستخدم اختيار وجبة طعام.
عيّنة تعليمات برمجية
const params = { messageText: `Now let's talk food 😋 You can pre-order your in-flight meal. Would you be happy with a vegetarian entree or a chicken entree?`, msisdn: msisdn, }; let self = this; rbmApiHelper.sendMessage(params, function(res) { self.sendFoodDetails(msisdn); });يعرض الوكيل خيارات الوجبات.
عيّنة تعليمات برمجية
const cardContents = [ { title: 'Panzanella salad (v)', description: 'Ingredients: bread, lettuce, onions, tomatoes, olive oil', suggestions: [ { reply: { text: 'Choose vegetarian', postbackData: 'veggie', }, }, ], media: { height: 'MEDIUM', contentInfo: { fileUrl: getImageUrl('salad.jpg'), }, }, }, { title: 'Grilled chicken with greens', description: 'Ingredients: chicken, potatoes, peppers, olive oil', suggestions: [ { reply: { text: 'Choose chicken', postbackData: 'chicken', }, }, ], media: { height: 'MEDIUM', contentInfo: { fileUrl: getImageUrl('chicken.png'), }, }, }, ]; const params = { msisdn: msisdn, cardContents: cardContents, }; rbmApiHelper.sendCarouselCard(params);ينقر المستخدم على رد مقترح على الوجبة التي تم اختيارها.
يؤكّد الوكيل خيار المستخدم.
عيّنة تعليمات برمجية
const params = { messageText: `Vegetarian it is 💚`, msisdn: msisdn, }; let self = this; rbmApiHelper.sendMessage(params, function (response, err) { self.sendAskConfirmation(msisdn); });يلخّص الوكيل تفاصيل تسجيل الوصول.
عيّنة تعليمات برمجية
let seat = this.seatmap[msisdn]; const suggestions = [ { reply: { text: "Yes, I'm happy with that", postbackData: 'happy', }, }, { reply: { text: 'Change my seat', postbackData: 'change_seat', }, }, { reply: { text: 'Change my meal', postbackData: 'change_meal', }, }, ]; const params = { messageText: "Here's what we've noted down: You've opted for seat " + seat + " and a vegetarian meal. Please confirm your choices.", msisdn: msisdn, suggestions: suggestions }; rbmApiHelper.sendMessage(params);ينقر المستخدم على رد مقترح لتأكيد تفاصيل تسجيل الوصول.
يعلن الوكيل أنّ عملية تسجيل الوصول مكتملة.
عيّنة تعليمات برمجية
const params = { messageText: "Hooray! You're now checked in for your flight ☑️ Here's your boarding pass. We're so happy to host you soon!", msisdn: msisdn, }; let self = this; rbmApiHelper.sendMessage(params, function (response, err) { self.sendWalletPass(msisdn); });يُرسل الوكيل بطاقة صعود الطائرة للمستخدم.
عيّنة تعليمات برمجية
this.walletHelper.createFlightPassUrl(this.seatmap[msisdn]).then((url) => { let suggestions = [ { action: { text: 'Add to Google Wallet', postbackData: 'addToWallet', openUrlAction: { url: url }, }, }, ]; const params = { messageText: 'HS123 LHR to BOM\nPassenger: Jo Flow', messageDescription: "We'll keep you up to date! You'll get a notification if your flight details change.", msisdn: msisdn, suggestions: suggestions, imageUrl: getImageUrl('boardingPass.png'), height: 'TALL', orientation: 'HORIZONTAL', thumbnailImageAlignment: 'LEFT', }; rbmApiHelper.sendRichCard(params); });في هذه البطاقة المنسّقة الأفقية، تمثّل الصورة بطاقة صعود الطائرة كاملة الوظائف توفّرها شركة الخطوط الجوية. يجب أن تعرِض الصورة جميع معلومات الصعود إلى الطائرة المطلوبة، بما في ذلك رمز شريطي يمكن مسحه ضوئيًا. ويمكن للمستخدمين النقر على الصورة لعرض بطاقة صعود الطائرة ومسحها ضوئيًا من تطبيق "الرسائل" في Google.
يظهر اقتراح الإضافة إلى "محفظة Google" في البطاقة المنسّقة. يؤدي هذا الاقتراح إلى تشغيل إجراء عنوان URL المفتوح الذي يفتح تطبيق "محفظة Google"، حيث يمكن للمستخدم إضافة بطاقة صعود الطائرة بسهولة إلى محفظته. (إذا لم يكن التطبيق متوفرًا على جهاز المستخدم، سيُطلب منه تثبيته). بعد إضافة البطاقة إلى "محفظة Google"، يتلقّى المستخدم تلقائيًا تذكيرًا بشأن الرحلة الجوية وتعديلات في الحالة في حال تغيّر تفاصيل الرحلة الجوية.
يجب أيضًا إبقاء المستخدمين الذين لا يضيفون البطاقة إلى "محفظة Google" معدّلين. وأرسِل إلى المستخدم أي تغييرات على معلومات صعود الطائرة المعروضة على البطاقة المنسَّقة.
ينقر المستخدم على إجراء مقترح لإضافة البطاقة إلى "محفظة Google".
سيتم فتح تطبيق "محفظة Google". ينقر المستخدم على زر لإضافة البطاقة إلى محفظته.
ينقر المستخدم على زر للاطّلاع على بطاقتك.
ستظهر لك بطاقة صعود الطائرة التي تتضمّن رمز الاستجابة السريعة.
