ঠিকানা বই থেকে পরিচিতিগুলি কীভাবে অ্যাক্সেস করবেন

টমাস স্টেইনার

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

আধুনিক উপায়

কন্টাক্ট পিকার এপিআই ব্যবহার করে

অ্যাড্রেস বুক থেকে কন্ট্যাক্ট পেতে, আপনাকে কন্ট্যাক্ট পিকার এপিআই (Contact Picker API) ব্যবহার করতে হবে, যা ব্যবহারকারীদের তাদের কন্ট্যাক্ট লিস্ট থেকে এন্ট্রি নির্বাচন করতে এবং নির্বাচিত এন্ট্রিগুলোর সীমিত বিবরণ আপনার অ্যাপের সাথে শেয়ার করতে দেয়। name ), email ), tel , address , এবং icon )-এর মতো বেশ কিছু প্রপার্টি উপলব্ধ আছে। সুনির্দিষ্টভাবে সমর্থিত প্রপার্টিগুলো সম্পর্কে জানতে, navigator.contacts.getProperties() কল করুন। ব্যবহারকারীকে একাধিক কন্ট্যাক্ট নির্বাচন করার অনুমতি দিতে, navigator.contacts.select() এর দ্বিতীয় প্যারামিটার হিসেবে {multiple: true} পাস করুন।

Browser Support

  • ক্রোম: সমর্থিত নয়।
  • Edge সমর্থিত নয়।
  • ফায়ারফক্স সমর্থিত নয়।
  • সাফারি সমর্থিত নয়।

Source

ক্রোমের অ্যান্ড্রয়েড সংস্করণে ভার্সন ৮০ থেকে কন্টাক্ট পিকার এপিআই পাওয়া যাচ্ছে।

ক্লাসিক উপায়

একটি নিয়মিত ফর্ম ব্যবহার করে

বিকল্প পদ্ধতি হলো একটি সাধারণ ফর্ম ব্যবহার করা, যেখানে ব্যবহারকারী যোগাযোগের বিবরণ প্রবেশ করাতে পারেন।

Browser Support

  • ক্রোম: ১.
  • প্রান্ত: ১২।
  • ফায়ারফক্স: ১।
  • সাফারি: ৩।

Source

প্রগতিশীল উন্নয়ন

যদি কন্টাক্ট পিকার এপিআই সমর্থিত হয়, তাহলে স্ট্যাটিক ফর্ম ফিল্ডগুলো লুকান এবং তার পরিবর্তে একটি পিকার বাটন দেখান।

const button = document.querySelector('button');
const name = document.querySelector('.name');
const address = document.querySelector('.address');
const email = document.querySelector('.email');
const tel = document.querySelector('.tel');
const pre = document.querySelector('pre');
const autofills = document.querySelectorAll('.autofill');

if ('contacts' in navigator) {
  button.hidden = false;
  for (const autofill of autofills) {
    autofill.parentElement.style.display = 'none';
  }
  address.parentElement.style.display = 'block';
  button.addEventListener('click', async () => {
    const props = ['name', 'email', 'tel', 'address'];
    const opts = { multiple: false };
    try {
      const [contact] = await navigator.contacts.select(props, opts);
      name.value = contact.name;
      address.value = contact.address;
      tel.value = contact.tel;
      email.value = contact.email;
    } catch (err) {
      pre.textContent = `${err.name}: ${err.message}`;
    }
  });
}

আরও পড়ুন

ডেমো

এইচটিএমএল 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link
      rel="icon"
      href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🎉</text></svg>"
    />
    <title>How to access contacts from the address book</title>
  </head>
  <body>
    <h1>How to access contacts from the address book</h1>

    <p>Ship your order as a present to a friend.</p>
    <button hidden type="button">Open address book</button>
    <pre></pre>

    <label> Name <input class="name" autocomplete="name"></label>

    <label hidden>Address <input class="address" required></label>

    <label>Street <input class="autofill" autocomplete="address-line1" required></label>

    <label>City <input class="autofill" autocomplete="address-level2" required></label>

    <label>State / Province / Region (optional) <input class="autofill" autocomplete="address-level1"></label>

    <label>ZIP / Postal code (optional) <input class="autofill" autocomplete="postal-code"></label>

    <label>Country <input class="autofill" autocomplete="country"></label>

    <label>Email<input class="email" autocomplete="email"></label>

    <label>Telephone<input class="tel" autocomplete="tel"></label>
  </body>
</html>

সিএসএস 


        html {
  box-sizing: border-box;
  font-family: system-ui, sans-serif;
  color-scheme: dark light;
}

*, *:before, *:after {
  box-sizing: inherit;
}

body {
  margin: 1rem;
}

input {
  display: block;
  margin-block-end: 1rem;
}

জেএস 


        const button = document.querySelector('button');
const name = document.querySelector('.name')
const address = document.querySelector('.address')
const email = document.querySelector('.email')
const tel = document.querySelector('.tel')
const pre = document.querySelector('pre')
const autofills = document.querySelectorAll('.autofill')

if ('contacts' in navigator) {
  button.hidden = false;
  for (const autofill of autofills) {
    autofill.parentElement.style.display = 'none'
  }
  address.parentElement.style.display = 'block';
  button.addEventListener('click', async () => {
    const props = ['name', 'email', 'tel', 'address'];
    const opts = {multiple: false};
    try {
      const [contact] = await navigator.contacts.select(props, opts);
      name.value = contact.name;
      address.value = contact.address;
      tel.value = contact.tel
      email.value = contact.email;
    } catch (err) {
      pre.textContent = `${err.name}: ${err.message}`
    }
  });
}