شما میتوانید از Google Messages به همراه RCS و Google Wallet برای طراحی یک جریان ورود یکپارچه استفاده کنید: کاربر ورود خود را تکمیل میکند، کارت پرواز خود را دریافت میکند و آن را مستقیماً از طریق برنامه Messages به Google Wallet اضافه میکند. پس از قرار دادن کارت در کیف پول، در صورت تغییر جزئیات پرواز، کارت به طور خودکار بهروزرسانی میشود. کاربران به سرعت به کارت پرواز بهروز شده روی تلفن خود دسترسی دارند.
این سند مراحل فنی پیادهسازی کارت ورود به سیستم در جریان Google Wallet را شرح میدهد. همچنین شامل یک نمونه مکالمه به همراه نکات طراحی برای یک تجربه ورود روان و کارآمد با RBM است.
پیادهسازی فنی
برای پیادهسازی کارت ورود به جلسه در جریان Google Wallet، با API Google Wallet و API RBM کار خواهید کرد.
پیشنیازها
برای شروع کار با API کیف پول گوگل، مراحل زیر را دنبال کنید:
- برای ایجاد و توزیع مجوز برای Google Wallet، یک حساب کاربری صادرکننده کیف پول ثبت کنید .
- اگر از قبل پروژهای در گوگل کلود (GCP) ندارید، آن را ایجاد کنید.
- فعال کردن API کیف پول گوگل
- یک حساب کاربری و کلید سرویس ایجاد کنید تا بتوانید API کیف پول گوگل را فراخوانی کنید.
- حساب سرویس را در کنسول Google Pay و Wallet تأیید کنید.
- برای ایجاد یک کلاس جدید شبانهروزی از الگوی کارت ورود به جلسه استفاده کنید.
رابط برنامهنویسی کاربردی (API) کیف پول گوگل
برای ایجاد کارت پرواز و ایجاد آدرس اینترنتی «افزودن به کیف پول گوگل» برای RBM، این مراحل را دنبال کنید:
- احراز هویت و مجوزهای لازم را انجام دهید.
- یک شیء Passes ایجاد کنید.
- یک JSON Web Token (JWT) امضا شده دریافت کنید. حداکثر طول یک JWT کدگذاری شده 2048 کاراکتر است.
- از JWT برای ایجاد یک URL برای افزودن به Google Wallet استفاده کنید.
رابط برنامهنویسی کاربردی RBM
برای ارسال پیشنهاد افزودن به کیف پول گوگل از RBM، یک اکشن Open URL ارسال کنید. در قسمت پیام، موارد زیر را انجام دهید:
- برای
text، «افزودن به کیف پول گوگل» را وارد کنید. - برای
url، آدرس اینترنتی افزودن به کیف پول گوگل (Add to Google Wallet) را وارد کنید.
نماد کیف پول گوگل به طور خودکار روی برچسب پیشنهاد نمایش داده میشود.
طراحی مکالمه
این نمونه از قدرت منحصر به فرد مکالمه برای هدایت کاربران در طول یک فرآیند کامل ثبت نام استفاده میکند. این نشان میدهد که چگونه میتوانید از گفتگوی طبیعی و ویژگیهای غنی، مانند پیشنهادات تکلمسی و کارتهای غنی، برای کمک به کاربران در رسیدن به اهدافشان استفاده کنید. در این مورد، اهداف آنها عبارتند از: (1) سفارشیسازی تجربه پرواز من، (2) دریافت کارت پرواز من، و (3) اضافه کردن آن به کیف پول گوگل برای دسترسی سریع در فرودگاه.
در ادامه، مروری بر این مکالمه ارائه شده است. در ادامه، نکات طراحی و شرح گام به گام جریان کار آمده است. برای پیادهسازی طرحی مشابه برای عامل خود، به نمونههای کدی که در ادامهی مراحل آمده است، مراجعه کنید.
مشاوره طراحی
هنگام طراحی جریان ورود به سیستم، این اصول را در نظر داشته باشید:
- اولین پیام شما مهمترین است. هدف مکالمه را به طور خلاصه بیان کنید تا کاربر دلیلی برای تعامل داشته باشد.
- هر پیام باید اطلاعات مختصری را ارائه دهد و کاربر را به پاسخ دادن ترغیب کند. پاسخهای پیشنهادی و اقدامات پیشنهادی به کاربران کمک میکند تا گام بعدی را بردارند.
- نماینده شما باید پاسخگو باشد، نه ربات. از زبانی استفاده کنید که منعکس کننده لحن صدای برند شما باشد. نماینده ایده آل برند شما چگونه با مشتری صحبت می کند؟
- مردم دوست دارند احساس خاص بودن کنند. شما میتوانید با پیشنهاد صندلی یا غذا بر اساس سابقه پرواز کاربر، تجربه ثبت نام را شخصیسازی کنید.
- کارتهای غنی و چرخ و فلکها، گفتگو را پویاتر میکنند. از آنها برای به اشتراک گذاشتن تصاویر و جزئیاتی استفاده کنید که به کاربر در انتخاب از بین گزینهها کمک میکند.
- یک مکالمه خوب به خوبی به پایان میرسد. قبل از ارسال کارت پرواز، جزئیات ورود کاربر را تأیید کنید. با یک خداحافظی دوستانه، حس انسانی را به مکالمه اضافه کنید.
جریان ورود
نماینده به کاربر اطلاع میدهد که ثبت نام برای پروازش آغاز شده است.
نمونه کد
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); });
در این کارت افقیِ غنی ، تصویر، یک کارت پرواز کاملاً کاربردی است که توسط شرکت هواپیمایی ارائه میشود. تصویر باید تمام اطلاعات مورد نیاز برای سوار شدن به هواپیما، از جمله یک بارکد قابل اسکن را نمایش دهد. کاربران میتوانند برای مشاهده و اسکن کارت پرواز خود از طریق برنامه پیامرسان گوگل، روی تصویر ضربه بزنند.
یک پیشنهاد «افزودن به کیف پول گوگل» روی کارت غنی ظاهر میشود. این پیشنهاد باعث فعال شدن یک عمل باز کردن URL میشود که برنامه کیف پول گوگل را باز میکند، جایی که کاربر میتواند کارت پرواز را به کیف پول خود اضافه کند. (اگر برنامه روی دستگاه کاربر نباشد، از او خواسته میشود که آن را نصب کند.) پس از افزودن کارت به کیف پول گوگل، کاربر به طور خودکار یادآوری پرواز و بهروزرسانیهای وضعیت را در صورت تغییر جزئیات پرواز خود دریافت میکند.
کاربرانی که کارت خود را به Google Wallet اضافه نمیکنند نیز باید بهروز نگه داشته شوند. در مورد هرگونه تغییر در اطلاعات سوار شدن نشان داده شده روی کارت غنی، به کاربر پیام دهید.
کاربر برای افزودن کارت به کیف پول گوگل، روی یک اقدام پیشنهادی ضربه میزند.
برنامه کیف پول گوگل باز میشود. کاربر دکمهای را لمس میکند تا کارت را به کیف پول خود اضافه کند.
کاربر برای مشاهدهی کارت عبور خود، دکمهای را لمس میکند.
کارت پرواز با کد QR نمایش داده میشود.
