إضافة بطاقة صعود الطائرة إلى "محفظة Google"

يمكنك استخدام رسائل Google مع خدمات الاتصالات التفاعلية (RCS) ومحفظة Google لتصميم عملية تسجيل وصول سلسة: يكمل المستخدم عملية تسجيل الوصول، ويتلقّى بطاقة الصعود إلى الطائرة، ويضيفها مباشرةً إلى "محفظة Google" من تطبيق "الرسائل". وبعد إضافة البطاقة إلى المحفظة، يتم تعديلها تلقائيًا في حال تغيّرت تفاصيل الرحلة. يمكن للمستخدمين الوصول بسرعة إلى بطاقة صعود الطائرة الحديثة على هواتفهم.

يوضّح هذا المستند الخطوات الفنية اللازمة لتنفيذ عملية إضافة بطاقة صعود الطائرة إلى "محفظة Google". يتضمّن أيضًا محادثة نموذجية تتضمّن نصائح حول التصميم لتوفير تجربة تسجيل وصول سلسة وفعّالة باستخدام RBM.

التنفيذ الفني

لتنفيذ مسار بطاقة صعود الطائرة إلى "محفظة Google"، عليك استخدام Google Wallet API وRBM API.

المتطلبات الأساسية

لبدء استخدام Google Wallet API، اتّبِع الخطوات المطلوبة التالية:

اشترِك في حساب جهة إصدار على Wallet لتتمكّن من إنشاء بطاقات وتوزيعها على Google Wallet.
أنشئ مشروعًا على Google Cloud (GCP) إذا لم يسبق لك ذلك.
فعِّل Google Wallet API.
أنشئ حساب خدمة ومفتاحًا لتتمكّن من طلب Google Wallet API.
منح الإذن لحساب الخدمة في Google Pay and Wallet Console
استخدِم نموذج بطاقة صعود الطائرة لإنشاء فئة Boarding جديدة.

Google Wallet API

لإنشاء بطاقة صعود إلى الطائرة وإنشاء عنوان URL لـ "إضافة إلى محفظة Google" في RBM، اتّبِع هذه الخطوات:

أكمِل عمليات المصادقة والتفويض اللازمة.
إنشاء عنصر بطاقات
الحصول على رمز JSON مميّز للويب (JWT) مُوقّع الحد الأقصى لطول رمز JWT مشفّر هو 2048 حرفًا.
استخدِم رمز JWT لإنشاء عنوان URL لزر "الإضافة إلى محفظة Google".

RBM API

لإرسال اقتراح "الإضافة إلى محفظة Google" من RBM، أرسِل إجراء فتح عنوان URL. في حمولة الرسالة، اتّبِع الخطوات التالية:

بالنسبة إلى text، أدخِل "الإضافة إلى محفظة Google".
بالنسبة إلى url، أدخِل عنوان URL الخاص بـ "الإضافة إلى محفظة Google".

سيظهر رمز "محفظة Google" تلقائيًا على تصنيف الاقتراح.

رمز "محفظة 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);

ينقر المستخدم على ردّ مقترَح لتسجيل الوصول.

يحدّد الوكيل التوقعات بشأن عملية تسجيل الوصول.

تتضمّن الرسالة ما يلي: حسنًا، رائع. ما عليك سوى اتّباع 3 خطوات لتسجيل الوصول. في ما يلي الخطوة الأولى لبدء استخدام هذه الميزة

عيّنة تعليمات برمجية

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);

ينقر المستخدم على ردّ مقترَح للمقعد الذي اختاره.

يؤكّد الوكيل اختيار المستخدم.

حالات الرسائل: المقعد 18A، تمّت الموافقة.

عيّنة تعليمات برمجية

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);  
});

يقدّم الوكيل ملخّصًا لتفاصيل تسجيل الوصول.

نص الرسالة: إليك ما سجّلناه: لقد اخترت المقعد 18A ووجبة نباتية. يُرجى تأكيد خياراتك. تظهر الاقتراحات أسفل الرسالة لتأكيد التفاصيل أو تغيير الوجبة أو تغيير المقعد.

عيّنة تعليمات برمجية

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". بل هي بطاقة مستقلة أنشأتها شركة الطيران. للحفاظ على التناسق، يجب أن تبدو البطاقة في البطاقة التفاعلية مشابهة للبطاقة في "محفظة Google". استخدِم نموذج بطاقة صعود الطائرة في "محفظة Google" كمرجع.

يظهر اقتراح الإضافة إلى "محفظة Google" على البطاقة التفاعلية. يؤدي هذا الاقتراح إلى تشغيل إجراء فتح عنوان URL يفتح تطبيق "محفظة Google"، حيث يمكن للمستخدم إضافة بطاقة الصعود إلى الطائرة إلى محفظته. (إذا لم يكن التطبيق مثبَّتًا على جهاز المستخدم، سيُطلب منه تثبيته). بعد إضافة البطاقة إلى "محفظة Google"، يتلقّى المستخدم تلقائيًا تذكيرًا بالرحلة وآخر الأخبار في حال تغيّرت تفاصيل الرحلة.

يجب أيضًا إبقاء المستخدمين الذين لا يضيفون بطاقاتهم إلى "محفظة Google" على اطّلاع بآخر الأخبار. إرسال رسالة إلى المستخدم بشأن أي تغييرات في معلومات الصعود إلى الطائرة المعروضة على البطاقة التفاعلية
ينقر المستخدم على إجراء مقترَح لإضافة البطاقة إلى "محفظة Google".
سيفتح تطبيق "محفظة Google". ينقر المستخدم على زر لإضافة البطاقة إلى محفظته.
ينقر المستخدم على زر لعرض بطاقته.
تظهر بطاقة صعود الطائرة مع رمز الاستجابة السريعة.