চেক-আউট প্রয়োগ করার নির্দেশিকা

এক নজরে

ওয়েব iOS API

Google Maps Platform ওয়েব (JS, TS), Android ও iOS-এর জন্য উপলভ্য এবং এটি জায়গা, দিকনির্দেশ ও দূরত্ব সম্পর্কে তথ্য পাওয়ার জন্য ওয়েব পরিষেবা API-ও অফার করে। এই গাইডের স্যাম্পেলগুলি একটি প্ল্যাটফর্মের জন্য লেখা হয়েছে, তবে অন্যান্য প্ল্যাটফর্মে প্রয়োগের জন্য ডকুমেন্টেশন লিঙ্ক প্রদান করা হয়েছে।

এখনই তৈরি করুন!

Google Cloud কনসোলে কুইক বিল্ডার আপনাকে ইন্ট্যার‍্যাক্টিভ UI ব্যবহার করে ঠিকানা ফর্মের অটোফিল ফিচার তৈরি করতে দেয়। এটি আপনার জন্য JavaScript কোড তৈরি করে।

অনলাইন শপিং ও অর্ডার করা আমাদের জীবনের একটি অবিচ্ছেদ্য অংশ হয়ে উঠেছে। একই দিনে ডেলিভারি পরিষেবা থেকে শুরু করে ট্যাক্সি বুক করা বা ডিনার অর্ডার করা, গ্রাহকরা এখন একটি সহজ চেক-আউট প্রক্রিয়া আশা করেন।

তবে, এইসব অ্যাপ্লিকেশনগুলিতে বিলিং বা শিপিংয়ের জন্য ঠিকানা লেখার বিষয়টি চেক-আউট ফ্লোতে একটি বাধা হিসেবে থেকে যায়, যা সময় সাপেক্ষ এবং কষ্টকর। মোবাইল জগতে বাধাহীন চেক-আউট অভিজ্ঞতা আরও বেশি গুরুত্বপূর্ণ হয়ে ওঠে, যেখানে ছোট স্ক্রিনে জটিল টেক্সট এন্ট্রি করা বিরক্তিকর হতে পারে এবং গ্রাহক কনভার্সনের ক্ষেত্রে এটি আরেকটি বাধা।

এই ডকুমেন্টটি আপনার গ্রাহকদের চেক-আউট প্রসেস দ্রুত সম্পূর্ণ করতে সাহায্য করার জন্য, আগে থেকে ঠিকানা লেখা সংক্রান্ত নির্দেশিকা প্রদান করে।

নিচের ডায়াগ্রামে চেকআউট প্রয়োগ করার সাথে যুক্ত মূল API দেখানো হয়েছে। ডায়াগ্রাম বড় করতে সেটিতে ক্লিক করুন।

API চালু করা হচ্ছে

চেকআউট প্রয়োগ করতে, আপনাকে Google Cloud কনসোলে নিম্নলিখিত API চালু করতে হবে:

সেট-আপ সম্পর্কে আরও তথ্যের জন্য, Google Maps Platform ব্যবহার শুরু করা দেখুন।

অনুশীলন বিভাগ

নিচের বিভাগগুলিতে চেক-আউট ফ্লো উন্নত করার জন্য পরামর্শ ও কাস্টমাইজেশন সম্পর্কে আলোচনা করা হয়েছে।

  • টিক চিহ্ন আইকন হল একটি মূল প্র্যাক্টিস।
  • তারকা আইকন হল একটি ঐচ্ছিক কাস্টমাইজেশন যা সমাধানকে আরও উন্নত করতে সাজেস্ট করা হয়।
ইনপুট ফিল্ডে অটোমেটিক সম্পূর্ণ হওয়ার সুবিধা যোগ করা ঠিকানার ফর্ম অটোফিল করা। সব প্ল্যাটফর্মে ব্যবহারকারীর অভিজ্ঞতা উন্নত করতে এবং ন্যূনতম কীস্ট্রোকের মাধ্যমে ঠিকানার নির্ভুলতা উন্নত করতে টাইপ-অ্যাজ-ইউ-গো কার্যকারিতা যোগ করুন।
Maps Static API-এর মাধ্যমে ভিজ্যুয়াল কনফার্মেশন প্রদান করা প্রদত্ত ঠিকানার জন্য অক্ষাংশ/দ্রাঘিমাংশ কোঅর্ডিনেট খুঁজে পাওয়া (জিওকোডিং), অথবা কোনও ভৌগোলিক লোকেশনের অক্ষাংশ/দ্রাঘিমাংশ কোঅর্ডিনেটকে ঠিকানায় পরিবর্তন করা (রিভার্স জিওকোডিং)।
চেক-আউট আরও উন্নত করার ব্যাপারে পরামর্শ চেক-আউট অভিজ্ঞতা আরও ভালো করতে, জায়গা অটোমেটিক সম্পূর্ণ করার উন্নত ফিচার ব্যবহার করুন।

ইনপুট ফিল্ডে অটোকমপ্লিট যোগ করা হচ্ছে

এই উদাহরণে ব্যবহার করা হয়েছে: Places Library, Maps JavaScript API এছাড়াও উপলভ্য: Android | iOS

জায়গা অটোমেটিক সম্পূর্ণ করা ফিচার আপনার অ্যাপ্লিকেশনে ঠিকানা লেখার কাজ সহজ করে দিতে পারে, যার ফলে কনভার্সন রেট বাড়ে এবং আপনার গ্রাহকরা নির্বিঘ্ন অভিজ্ঞতা পান। অটো-কমপ্লিট একটি সিঙ্গেল, দ্রুত এন্ট্রি ফিল্ড প্রদান করে "টাইপ-অহেড" ঠিকানা সংক্রান্ত পূর্বাভাস সহ যা বিলিং বা শিপিং ঠিকানা ফর্ম অটোমেটিক পূরণ করতে ব্যবহার করা যেতে পারে।

আপনার অনলাইন শপিং কার্টে 'প্লেস অটোকমপ্লিট' ফিচার যোগ করার মাধ্যমে, আপনি এগুলি করতে পারবেন:

  • ঠিকানা এন্ট্রি সংক্রান্ত ভুল কমানো।
  • চেক-আউট প্রসেসে ধাপের সংখ্যা কমান।
  • মোবাইল বা পরে থাকা যায় এমন ডিভাইসে ঠিকানা লেখার অভিজ্ঞতা আরও সহজ করে তোলে।
  • গ্রাহকের অর্ডার দেওয়ার জন্য প্রয়োজনীয় কিস্ট্রোক এবং মোট সময় উল্লেখযোগ্যভাবে হ্রাস করুন।

ব্যবহারকারী অটোকমপ্লিট এন্ট্রি বক্স বেছে নিয়ে টাইপ করা শুরু করলে, সম্ভাব্য ঠিকানার তালিকা দেখানো হয়:

ব্যবহারকারী পূর্বাভাসের তালিকা থেকে কোনও ঠিকানা বেছে নিলে, আপনি ঠিকানা যাচাই করতে এবং লোকেশন পেতে উত্তর ব্যবহার করতে পারবেন। আপনার অ্যাপ্লিকেশন তখন ঠিকানা এন্ট্রি ফর্মের সঠিক ফিল্ডগুলি পূরণ করতে পারে:

ভিডিও: 'প্লেস অটোকমপ্লিট' ফিচারের মাধ্যমে ঠিকানা লেখার ফর্ম আরও উন্নত করুন:

ঠিকানা ফর্ম

ওয়েব

Android

iOS

'জায়গা অটোমেটিক সম্পূর্ণ করা' ফিচার ব্যবহার শুরু করা

আপনি জাভাস্ক্রিপ্টের কয়েক লাইন কোড লিখে আপনার সাইটে 'অটোমেটিক সম্পূর্ণ হওয়া' ফিচার যোগ করতে পারবেন।

আপনি নিজের সাইটে Maps JavaScript API অন্তর্ভুক্ত করতে এবং Places লাইব্রেরি নির্দিষ্ট করতে পারবেন, এমনকি আপনি ম্যাপ না দেখালেও। নিম্নলিখিত উদাহরণ থেকে কীভাবে এটি করতে হয় এবং ইনিশিয়ালাইজেশন ফাংশন এক্সিকিউট করতে হয় তা জানুন। 

<script async
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&loading=async&libraries=places&callback=initAutocomplete&solution_channel=GMP_guides_checkout_v1_a">
</script>

এরপর, ব্যবহারকারীর ইনপুটের জন্য আপনার পৃষ্ঠায় একটি টেক্সট বক্স যোগ করুন: 

<input id="autocomplete" placeholder="Enter your address"></input>

শেষে, 'অটোমেটিক সম্পূর্ণ' পরিষেবা শুরু করুন এবং নাম দেওয়া টেক্সট বক্সের সাথে এটি লিঙ্ক করুন: 

function initAutocomplete() {
  // Create the autocomplete object, restricting the search predictions to
  // addresses in the US and Canada.
  autocomplete = new google.maps.places.Autocomplete(address1Field, {
    componentRestrictions: { country: ["us", "ca"] },
    fields: ["address_components", "geometry"],
    types: ["address"],
  });
  address1Field.focus();
  // When the user selects an address from the drop-down, populate the
  // address fields in the form.
  autocomplete.addListener("place_changed", fillInAddress);
}

আগের উদাহরণে, ব্যবহারকারী কোনও ঠিকানা সংক্রান্ত পূর্বাভাস বেছে নিলে place_changed ইভেন্ট লিসেনার ট্রিগার হয় এবং fillInAddress ফাংশনটি এক্সিকিউট করা হয়। নিচের উদাহরণে দেখানো ফাংশনটি বেছে নেওয়া উত্তরটি নেয় এবং ঠিকানার উপাদানগুলি বের করে যাতে সেগুলি একটি ফর্মের মধ্যে দেখা যায়।

TypeScript

function fillInAddress() {
  // Get the place details from the autocomplete object.
  const place = autocomplete.getPlace();
  let address1 = "";
  let postcode = "";

  // Get each component of the address from the place details,
  // and then fill-in the corresponding field on the form.
  // place.address_components are google.maps.GeocoderAddressComponent objects
  // which are documented at http://goo.gle/3l5i5Mr
  for (const component of place.address_components as google.maps.GeocoderAddressComponent[]) {
    // @ts-ignore remove once typings fixed
    const componentType = component.types[0];

    switch (componentType) {
      case "street_number": {
        address1 = `${component.long_name} ${address1}`;
        break;
      }

      case "route": {
        address1 += component.short_name;
        break;
      }

      case "postal_code": {
        postcode = `${component.long_name}${postcode}`;
        break;
      }

      case "postal_code_suffix": {
        postcode = `${postcode}-${component.long_name}`;
        break;
      }

      case "locality":
        (document.querySelector("#locality") as HTMLInputElement).value =
          component.long_name;
        break;

      case "administrative_area_level_1": {
        (document.querySelector("#state") as HTMLInputElement).value =
          component.short_name;
        break;
      }

      case "country":
        (document.querySelector("#country") as HTMLInputElement).value =
          component.long_name;
        break;
    }
  }

  address1Field.value = address1;
  postalField.value = postcode;

  // After filling the form with address components from the Autocomplete
  // prediction, set cursor focus on the second address line to encourage
  // entry of subpremise information such as apartment, unit, or floor number.
  address2Field.focus();
}

জাভাস্ক্রিপ্ট

function fillInAddress() {
  // Get the place details from the autocomplete object.
  const place = autocomplete.getPlace();
  let address1 = "";
  let postcode = "";

  // Get each component of the address from the place details,
  // and then fill-in the corresponding field on the form.
  // place.address_components are google.maps.GeocoderAddressComponent objects
  // which are documented at http://goo.gle/3l5i5Mr
  for (const component of place.address_components) {
    // @ts-ignore remove once typings fixed
    const componentType = component.types[0];

    switch (componentType) {
      case "street_number": {
        address1 = `${component.long_name} ${address1}`;
        break;
      }

      case "route": {
        address1 += component.short_name;
        break;
      }

      case "postal_code": {
        postcode = `${component.long_name}${postcode}`;
        break;
      }

      case "postal_code_suffix": {
        postcode = `${postcode}-${component.long_name}`;
        break;
      }
      case "locality":
        document.querySelector("#locality").value = component.long_name;
        break;
      case "administrative_area_level_1": {
        document.querySelector("#state").value = component.short_name;
        break;
      }
      case "country":
        document.querySelector("#country").value = component.long_name;
        break;
    }
  }

  address1Field.value = address1;
  postalField.value = postcode;
  // After filling the form with address components from the Autocomplete
  // prediction, set cursor focus on the second address line to encourage
  // entry of subpremise information such as apartment, unit, or floor number.
  address2Field.focus();
}

window.initAutocomplete = initAutocomplete;

এই ডেটা পাওয়ার পরে, আপনি এটি আপনার ব্যবহারকারীর জন্য মিলে যাওয়া ঠিকানা হিসেবে ব্যবহার করতে পারবেন। কয়েকটি কোড লাইন থেকে, আপনি নিশ্চিত করতে পারবেন যে গ্রাহক অল্প সময়ের মধ্যে সঠিক ঠিকানা লিখেছেন।

এই কোড স্যাম্পেল-এ ঠিকানা এন্ট্রি ফর্ম পূরণ করার জন্য একটি ওয়ার্কিং ডেমো এবং সম্পূর্ণ সোর্স কোড দেখুন।

'জায়গা অটোমেটিক সম্পূর্ণ করা' ফিচার প্রয়োগ করার সময় যেসব বিষয় বিবেচনা করতে হবে

আপনি যদি শুধু উইজেট ব্যবহার করার চেয়ে বেশি কিছু করতে চান, তাহলে 'জায়গা অটোমেটিক সম্পূর্ণ করা' ফিচারটি আপনাকে বেশ কিছু বিকল্প অফার করে, যার মাধ্যমে আপনি নিজের ইমপ্লিমেন্টেশন কাস্টমাইজ করতে পারবেন। আপনি লোকেশন সঠিকভাবে ম্যাচ করার জন্য পরিষেবার কম্বিনেশন ব্যবহার করতে পারেন।

  • ঠিকানার ফর্মের জন্য, types প্যারামিটারকে address-এ সেট করুন যাতে রাস্তার সম্পূর্ণ ঠিকানার সাথে মিল সীমাবদ্ধ করা যায়। প্লেস অটোমেটিক সম্পূর্ণ হওয়ার অনুরোধে কাজ করে এমন ধরন সম্পর্কে আরও জানুন।
  • সারা বিশ্ব জুড়ে সার্চ করার প্রয়োজন না থাকলে, উপযুক্ত বিধিনিষেধ ও পক্ষপাত সেট করুন। আপনি নির্দিষ্ট অঞ্চলে ম্যাচ পক্ষপাতদুষ্ট বা সীমাবদ্ধ করতে একাধিক প্যারামিটার ব্যবহার করতে পারেন।
    • কোনও এলাকার জন্য সীমাবদ্ধতা সেট করতে আয়তাকার বাউন্ড সেট করতে bounds ব্যবহার করুন। শুধুমাত্র সেইসব এলাকার ঠিকানা যাতে দেখানো হয় তা নিশ্চিত করতে strictBounds ব্যবহার করুন।
    • নির্দিষ্ট কিছু দেশে উত্তর সীমিত করতে componentRestrictions ব্যবহার করুন।
  • ম্যাচ করার সময় নির্দিষ্ট কিছু ফিল্ড বাদ পড়ে গেলে, ফিল্ড এডিট করার সুবিধা চালু রাখুন এবং প্রয়োজন হলে গ্রাহকদের ঠিকানা আপডেট করার অনুমতি দিন। কারণ, 'জায়গা অটোমেটিক সম্পূর্ণ করা' ফিচারের মাধ্যমে ফেরত আসা বেশিরভাগ ঠিকানায় সাবপ্রিমিজ নম্বর থাকে না, যেমন অ্যাপার্টমেন্ট, স্যুট বা ইউনিট নম্বর, এই উদাহরণে ফোকাস 'ঠিকানা লাইন ২'-এ সরিয়ে নিয়ে যাওয়া হয় যাতে ব্যবহারকারীকে প্রয়োজন হলে সেই তথ্য পূরণ করতে উৎসাহিত করা যায়।

Maps Static API-এর মাধ্যমে ভিজ্যুয়াল কনফার্মেশন প্রদান করা

আপনার গ্রাহক তার ঠিকানা লেখার পরে, স্ট্যাটিক ম্যাপের মাধ্যমে ডেলিভারি বা পিক-আপ লোকেশনের ভিজ্যুয়াল কনফার্মেশন প্রদান করুন। এর ফলে গ্রাহক অতিরিক্ত আশ্বাস পান যে ঠিকানাটি সঠিক এবং এর ফলে ডেলিভারি বা পিক-আপ সংক্রান্ত সমস্যা কমে যায়। আপনি ঠিকানা লেখার পৃষ্ঠায় স্ট্যাটিক ম্যাপ দেখাতে পারেন অথবা ট্রানজ্যাকশন সম্পূর্ণ হওয়ার পরে কনফার্মেশন ইমেলে এটি অন্তর্ভুক্ত করতে পারেন।

আপনি Maps Static API-এর মাধ্যমে এই দুটি ব্যবহারিক ক্ষেত্রই প্রয়োগ করতে পারবেন, যা কোনও পৃষ্ঠা বা ইমেলের মধ্যে যেকোনও ইমেজ ট্যাগে ম্যাপের একটি ইমেজ ভার্সন যোগ করে।

Maps Static API ব্যবহার শুরু করা

আপনি ওয়েব সার্ভিস কলের মাধ্যমে Maps Static API ব্যবহার করতে পারেন, যা আপনার উল্লেখ করা প্যারামিটারের ভিত্তিতে ম্যাপের ছবি ভার্সন তৈরি করে। ডায়নামিক ম্যাপের মতো, আপনি ম্যাপের ধরন নির্দিষ্ট করতে, একই ক্লাউড-ভিত্তিক স্টাইল ব্যবহার করতে এবং লোকেশন আলাদা করে দেখানোর জন্য মার্কার যোগ করতে পারবেন।

নিচের কলটি একটি রোডম্যাপ দেখায়, যার সাইজ হল ৬০০x৩০০ পিক্সেল, যা Googleplex-এ কেন্দ্র করে Mountain View, CA-তে ১৩ জুম লেভেলে। এছাড়াও, এটি নীল রঙের ডেলিভারি লোকেশন মার্কার এবং অনলাইন ম্যাপ স্টাইল নির্দিষ্ট করে। 

      https://maps.googleapis.com/maps/api/staticmap?center=37.422177,-122.084082
      &zoom=13
      &size=600x300
      &maptype=roadmap
      &markers=color:blue%7Clabel:S%7C37.422177,-122.084082
      &map_id=8f348d1b5a61d4bb
      &key=YOUR_API_KEY
      &solution_channel=GMP_guides_checkout_v1_a

এটি নিম্নলিখিত বিভাগে ভাগ করা হয়েছে:

API URL https://maps.googleapis.com/maps/api/staticmap?
ম্যাপের কেন্দ্র center=37.422177,-122.084082
জুম লেভেল zoom=13
ছবির সাইজ size=৬০০x৩০০
ম্যাপের ধরন maptype=roadmap
স্টোর লোকেশন মার্কার markers=color:blue%7Clabel:C%7C37.422177,-122.084082
ক্লাউড ম্যাপ স্টাইল map_id=8f348d1b5a61d4bb
API Key key=YOUR_API_KEY
সমাধান চ্যানেল প্যারামিটার। আরও তথ্যের জন্য, প্যারামিটার ডকুমেন্টেশন দেখুন। solution_channel=GMP_guides_checkout_v1_a

অনুরোধের উত্তরে নিম্নলিখিত ছবিটি দেখানো হয়:

Maps Static API বিকল্প সম্পর্কে আরও তথ্য পেতে, ডকুমেন্টেশন দেখুন।

চেক-আউট আরও উন্নত করার পরামর্শ

'প্লেস অটোকমপ্লিট' ফিচারের কিছু উন্নত ফিচার ব্যবহার করে আপনি গ্রাহকের অভিজ্ঞতা আরও উন্নত করতে পারবেন। আপনার অটোফিল অ্যাড্রেস এন্ট্রি বক্স উন্নত করার জন্য এখানে কিছু পরামর্শ দেওয়া হল:

  • ব্যবসা বা আগ্রহের জায়গার নামের ভিত্তিতে ব্যবহারকারীদের ঠিকানা লিখতে দিন। "টাইপ অ্যাহেড" অনুমান পরিষেবা শুধু ঠিকানার জন্যই কাজ করে না, আপনি ব্যবসা বা ল্যান্ডমার্কের নাম লেখার অনুমতিও দিতে পারেন। কোনও ব্যবহারকারী ব্যবসার নাম লেখার পরে, আপনি Place Details-এ কল করে ঠিকানা পেতে পারেন। ঠিকানা এবং প্রতিষ্ঠানের নাম, দুটিই লেখার অনুমতি দিতে, 'অটোমেটিক সম্পূর্ণ করুন' সংজ্ঞা থেকে types প্রপার্টি সরিয়ে দিন।
  • আপনার ওয়েবসাইটের স্টাইলের সাথে ম্যাচ করার জন্য প্লেস অটোকমপ্লিট বক্সের লুক ও ফিল কাস্টমাইজ করুন। এছাড়াও, আপনার শপিং কার্টের লুক ও অনুভূতির সাথে ম্যাচ করার জন্য আপনি অটোমেটিক সম্পূর্ণ করার উইজেট স্টাইল করতে পারেন। উইজেটের চেহারা কাস্টমাইজ করতে আপনি CSS ক্লাস ব্যবহার করতে পারেন। আরও তথ্যের জন্য, স্টাইল অটোমেটিক সম্পূর্ণ হওয়া দেখুন।
  • কাস্টম UI তৈরি করুন। Google-এর ডিজাইন করা UI ব্যবহার না করে আপনি যদি কাস্টম UI তৈরি করতে চান, তাহলে কোনও ইনপুটের জন্য পূর্বাভাস পেতে, প্রোগ্রাম্যাটিকভাবে প্লেস অটোকমপ্লিট পরিষেবা কল করুন। আপনি প্রোগ্রাম্যাটিক উপায়ে এইসব জায়গায় প্লেস অটোকমপ্লিট সংক্রান্ত সাজেশন পেতে পারেন: JavaScript, Android, এবং iOS এছাড়াও, আপনি সরাসরি Places API-এর মাধ্যমে ওয়েব পরিষেবা API কল করতে পারেন।