Biniş kartını Google Cüzdan'a ekleyin

Sorunsuz bir check-in akışı tasarlamak için Google Mesajlar'ı RCS ve Google Cüzdan ile birlikte kullanabilirsiniz: Kullanıcı check-in işlemini tamamlar, biniş kartını alır ve doğrudan Mesajlar uygulamasından Google Cüzdan'a ekler. Cüzdanına eklenen kart, uçuş bilgileri değişirse otomatik olarak güncellenir. Kullanıcılar, telefonlarında güncel bir biniş kartına hızlıca erişebilir.

Bu belgede, biniş kartını Google Cüzdan akışına uygulama ile ilgili teknik adımlar açıklanmaktadır. Ayrıca, RBM ile sorunsuz ve verimli bir check-in deneyimi için tasarım ipuçlarının yer aldığı örnek bir görüşme de içerir.

Teknik uygulama

Google Cüzdan'a biniş kartı akışını uygulamak için Google Cüzdan API'si ve RBM API'si ile çalışmanız gerekir.

Ön koşullar

Google Cüzdan API'sini kullanmaya başlamak için aşağıdaki gerekli adımları uygulayın:

  1. Google Cüzdan için kart oluşturup dağıtabilmek amacıyla bir Cüzdan kartı sağlayıcı hesabına kaydolun.
  2. Henüz oluşturmadıysanız bir Google Cloud (GCP) projesi oluşturun.
  3. Google Cüzdan API'sini etkinleştirin.
  4. Google Wallet API'yi çağırabilmek için bir hizmet hesabı ve anahtar oluşturun.
  5. Google Pay ve Cüzdan Konsolu'nda hizmet hesabını yetkilendirin.
  6. Yeni bir Boarding sınıfı oluşturmak için biniş kartı şablonunu kullanın.

Google Cüzdan API'si

Bir biniş kartı oluşturmak ve RBM için Google Cüzdan'a ekle URL'si oluşturmak üzere şu adımları uygulayın:

  1. Gerekli kimlik doğrulama ve yetkilendirme işlemlerini yapın.
  2. Kart nesnesi oluşturun.
  3. İmzalı bir JSON Web Jetonu (JWT) alın. Kodlanmış bir JWT'nin maksimum uzunluğu 2.048 karakterdir.
  4. Google Cüzdan'a ekle URL'si oluşturmak için JWT'yi kullanın.

RBM API

RBM'den Google Cüzdan'a ekleme önerisi göndermek için URL açma işlemi gönderin. İleti yükünde aşağıdakileri yapın:

  1. text için "Google Cüzdan'a ekle" yazın.
  2. url için Google Cüzdan'a ekle URL'sini girin.

Google Cüzdan simgesi, öneri etiketinde otomatik olarak gösterilir.

Google Cüzdan'a ekle önerisindeki Google Cüzdan simgesi

Konuşma tasarımı

Bu örnek, kullanıcıları eksiksiz bir check-in akışında yönlendirmek için sohbetin benzersiz gücünden yararlanıyor. Bu örnekte, kullanıcıların hedeflerine ulaşmasına yardımcı olmak için doğal diyalog ve tek dokunuşla öneriler ile zengin kartlar gibi zengin özelliklerin nasıl kullanılabileceği gösteriliyor. Bu örnekteki hedefler: (1) uçuş deneyimimi özelleştirme, (2) biniş kartımı alma ve (3) havaalanında hızlı erişim için Google Cüzdan'a ekleme.

Ardından, görüşmenin özeti gösterilir. Ardından tasarım ipuçları ve akışın adım adım dökümü yer alır. Aracınız için benzer bir tasarım uygulamak istiyorsanız adımlardan sonraki kod örneklerine bakın.

Konuşma diyagramı

Tasarım tavsiyesi

Check-in akışınızı tasarlarken aşağıdaki ilkeleri göz önünde bulundurun:

  • İlk mesajınız en önemlisidir. Kullanıcının etkileşimde bulunması için sohbetin amacını kısaca belirtin.
  • Her mesajda küçük bir bilgi parçası sunulmalı ve kullanıcıdan yanıt vermesi istenmelidir. Önerilen yanıtlar ve önerilen işlemler kullanıcıların sonraki adımı atmasına yardımcı olur.
  • Temsilciniz robotik değil, duyarlı olmalıdır. Markanızın üslubunu yansıtan bir dil kullanın. İdeal marka temsilciniz bir müşteriyle nasıl sohbet ederdi?
  • İnsanlar kendilerini özel hissetmek ister. Kullanıcının uçuş geçmişine göre koltuk veya yemek önererek check-in deneyimini kişiselleştirebilirsiniz.
  • Zengin kartlar ve dönen bantlar sohbeti daha dinamik hale getirir. Kullanıcıların seçenekler arasından seçim yapmasına yardımcı olacak resimleri ve ayrıntıları paylaşmak için bu yanıtları kullanın.
  • İyi bir görüşme iyi bir şekilde sona erer. Kullanıcının biniş kartını göndermeden önce check-in ayrıntılarını onaylayın. Dostane bir kapanışla kişisel bir dokunuş ekleyin.

Check-in akışı

  1. Acente, kullanıcıyı uçuşu için check-in işlemlerinin başladığı konusunda bilgilendirir.

    Check-in ayrıntılarını ve önerilen yanıtları içeren karşılama mesajı

    Kod örneği

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

  2. Kullanıcı, check-in yapmak için önerilen yanıtlardan birine dokunur.

    Giriş yapma önerisine dokunulduğunda

  3. Temsilci, check-in süreciyle ilgili beklentileri belirler.

    Mesajda "Tamam, harika." yazıyor. Check-in işlemi yalnızca 3 adımdan oluşur. Başlamanıza yardımcı olacak ilk adım aşağıda verilmiştir.

    Kod örneği

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

  4. Temsilci, kullanıcıdan güvenlik politikasını kabul etmesini ister.

    Güvenlik politikasıyla ilgili infografik ve kabul etme veya etmeme önerileri içeren zengin kart. Karttaki metinde şunlar yazıyor: Güvenli bir uçuş sağlamak için güvenlik politikamızı inceleyin ve kabul ettiğinizi bize bildirin.

    Kod örneği

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

  5. Kullanıcı, kabul etmek için önerilen yanıta dokunur.

    Kabul etme önerisine dokunulur.

  6. Aracı, kullanıcıya teşekkür eder ve sonraki adımı tanıtır.

    İletide "Teşekkür ederiz. Güvenli bir yolcu, mutlu bir yolcudur!" ifadesi yer alıyor. Sonraki adım

    Kod örneği

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

  7. Temsilci, kullanıcıdan koltuk seçmesini ister.

    Oturma planı infografiği içeren zengin kart. Karttaki metinde "Arkanıza yaslanıp rahatlamanın tam zamanı!" yazıyor. Son uçuşunuza göre bazı koltuklar önerdik. İstediğinizi seçin veya numarayı yazarak tercih ettiğiniz koltuğu bize bildirin. Kartın altındaki önerilerde birkaç oturma seçeneği gösterilir.

    Kod örneği

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

  8. Kullanıcı, seçtiği koltuk için önerilen bir yanıta dokunur.

    18A koltuğu için öneriye dokunulur.

  9. Temsilci, kullanıcının seçimini onaylar.

    Mesaj durumu: 18A koltuğu ayrıldı.

    Kod örneği

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

  10. Temsilci, kullanıcıdan uçakta yiyeceği yemeği seçmesini ister.

    Mesajda: Şimdi yemekten bahsedelim. Uçuşta yiyeceğiniz yemeği önceden sipariş edebilirsiniz. Vejetaryen veya tavuklu bir ana yemekle mutlu olur musunuz?

    Kod örneği

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

  11. Acente, yemek seçeneklerini gösterir.

    Zengin kart bantında iki kart gösteriliyor: Biri salata, diğeri ise fırında tavuk resmi içeriyor. Her iki kartta da malzemeler listesi ve bu yemeği seçme önerisi yer alır.

    Kod örneği

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

  12. Kullanıcı, seçtiği yemek için önerilen yanıtlardan birine dokunur.

    Vejetaryen seçme önerisine dokunulur.

  13. Temsilci, kullanıcının seçimini onaylar.

    Mesajda "Vejetaryen" yazıyor.

    Kod örneği

    const params = {
  messageText: `Vegetarian it is 💚`,
  msisdn: msisdn,
};  

let self = this;  

rbmApiHelper.sendMessage(params, function (response, err) {
  self.sendAskConfirmation(msisdn);  
});

  14. Temsilci, check-in ayrıntılarını özetler.

    Mesajda şu ifade yer alıyor: Notlarımıza göre 18A koltuğunu ve vejetaryen yemeği tercih ettiniz. Lütfen seçimlerinizi onaylayın. Ayrıntıları onaylamak, yemeği değiştirmek veya koltuğu değiştirmek için iletinin altında öneriler gösterilir.

    Kod örneği

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

  15. Kullanıcı, check-in ayrıntılarını onaylamak için önerilen yanıtlardan birine dokunur.

    Ayrıntıları onaylama önerisine dokunulur.

  16. Aracı, check-in işleminin tamamlandığını duyurur.

    Mesaj durumu: Tebrikler! Uçuşunuz için check-in yaptınız. Biniş kartınız aşağıda yer almaktadır. Sizi yakında ağırlamaktan mutluluk duyacağız.

    Kod örneği

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

  17. Aracı, kullanıcının biniş kartını gönderir.

    Zengin kartta, QR kodu ve uçuş ayrıntılarını içeren biniş kartının resmi gösteriliyor. Karttaki metinde: Sizi gelişmelerden haberdar edeceğiz. Uçuş bilgileriniz değişirse bildirim alırsınız. Karttaki öneride "Google Cüzdan'a ekle" yazıyor.

    Kod örneği

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

    Bu yatay zengin kartta, resim havayolu şirketi tarafından sağlanan tamamen işlevsel bir biniş kartıdır. Resimde, taranabilir barkod da dahil olmak üzere gerekli tüm biniş bilgileri gösterilmelidir. Kullanıcılar, Google Mesajlar uygulamasında biniş kartlarını görüntülemek ve taramak için resme dokunabilir.

    Zengin kartta Google Cüzdan'a ekle önerisi gösterilir. Bu öneri, Google Cüzdan uygulamasını açan bir URL açma işlemi'ni tetikler. Kullanıcı, bu uygulamada biniş kartını cüzdanına ekleyebilir. (Uygulama kullanıcının cihazında yüklü değilse kullanıcıdan uygulamayı yüklemesi istenir.) Kart Google Cüzdan'a eklendikten sonra, uçuş bilgileri değişirse kullanıcı otomatik olarak uçuş hatırlatıcısı ve durum güncellemeleri alır.

    Kartlarını Google Cüzdan'a eklemeyen kullanıcılar da güncel tutulmalıdır. Zengin kartta gösterilen biniş bilgilerinde yapılan değişiklikler hakkında kullanıcıya mesaj gönderin.

  18. Kullanıcı, kartı Google Cüzdan'a eklemek için önerilen bir eyleme dokunur.

    Google Cüzdan simgesi ve Google Cüzdan'a ekleme önerisi

  19. Google Cüzdan uygulaması açılır. Kullanıcı, kartı cüzdanına eklemek için bir düğmeye dokunur.

    Cüzdan uygulamasında basitleştirilmiş bir biniş kartı ve Ekle düğmesi gösteriliyor.

  20. Kullanıcı, kartını görüntülemek için bir düğmeye dokunur.

    Onay işareti, kartın üzerinde gösterilir. Google Cüzdan'da görüntüleme düğmesi gösterilir.

  21. QR kodlu biniş kartı gösterilir.

    Tüm uçuş bilgilerini ve QR kodunu içeren biniş kartı