يمكنك استخدام رسائل Google مع خدمات RCS ومحفظة Google لتصميم عملية تسجيل سلسة: يُكمل المستخدم تسجيله ويتلقّى بطاقة صعود الطائرة ويضيفها مباشرةً إلى محفظة Google من تطبيق "الرسائل". وبعد إضافة البطاقة إلى المحفظة، يتم تعديلها تلقائيًا في حال تغيّرت تفاصيل الرحلة. يتمتع المستخدمون بإمكانية الوصول السريع إلى بطاقة صعود الطائرة محدَّثة مباشرةً على هواتفهم.
يوضّح هذا المستند الخطوات الفنية لتنفيذ بطاقة صعود الطائرة في مسار "محفظة Google". ويعرض أيضًا نموذج محادثة مع نصائح حول التصميم لتوفير تجربة تسجيل دخول سلسة وفعّالة باستخدام ميزة "إدارة التفاعلات مع العملاء".
التنفيذ الفني
لاستخدام بطاقة صعود الطائرة في "محفظة Google"، يجب استخدام Google Wallet API وRBM API.
المتطلبات الأساسية
لبدء استخدام Google Wallet API، اتّبِع الخطوات المطلوبة التالية:
- اشترِك في حساب جهة إصدار "محفظة Google" لتتمكّن من إنشاء البطاقات وتوزيعها في "محفظة Google".
- أنشئ مشروع Google Cloud (GCP) إذا لم يكن لديك مشروع من قبل.
- فعِّل Google Wallet API.
- أنشئ حساب خدمة ومفتاحًا حتى تتمكّن من طلب Google Wallet API.
- عليك تفويض حساب الخدمة في Google Pay & Wallet Console.
- استخدِم نموذج بطاقة صعود الطائرة لإنشاء فئة صعود جديدة.
Google Wallet API
لإنشاء بطاقة صعود طائرة وإنشاء عنوان URL لميزة "الإضافة إلى محفظة Google" في برنامج RBM، اتّبِع الخطوات التالية:
- نفِّذ عمليات المصادقة والتفويضات اللازمة.
- أنشئ عنصر "تذاكر".
- الحصول على رمز JSON مميّز للويب (JWT) موقّع الحد الأقصى لطول رمز JWT المُشفَّر هو 2048 حرفًا.
- استخدِم JWT لإنشاء عنوان URL للإضافة إلى "محفظة Google".
واجهة برمجة التطبيقات RBM
لإرسال اقتراح "إضافة إلى محفظة Google" من RBM، أرسِل إجراء فتح عنوان 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". ينقر المستخدم على زر لإضافة البطاقة إلى محفظته.
ينقر المستخدم على زر للاطّلاع على البطاقة.
تظهر بطاقة الصعود على متن الطائرة مع رمز الاستجابة السريعة.
