Device API (Camera, GPS, Contacts) ব্যবহারের নিয়ম

Framework7 একটি শক্তিশালী ফ্রন্ট-এন্ড ফ্রেমওয়ার্ক যা মোবাইল এবং ওয়েব অ্যাপ্লিকেশন তৈরি করতে ব্যবহৃত হয়। মোবাইল ডিভাইসের হার্ডওয়্যার এবং সিস্টেম ফিচার যেমন ক্যামেরা, GPS, কনট্যাক্টস ইত্যাদি ব্যবহারের জন্য আপনাকে Framework7 কে নেটিভ প্ল্যাটফর্মের সাথে ইন্টিগ্রেট করতে হবে। এর জন্য সাধারণত Cordova বা Capacitor ব্যবহার করা হয়। নিচে Framework7 এর সাথে Cordova এবং Capacitor ব্যবহার করে ডিভাইস API গুলো কিভাবে ব্যবহার করবেন তা বিস্তারিতভাবে ব্যাখ্যা করা হলো।

পূর্বশর্ত

1. Node.js এবং NPM ইনস্টল করা থাকতে হবে।

2. Framework7 CLI ইনস্টল করা থাকতে হবে:

   npm install framework7-cli -g
   

3. Cordova বা Capacitor ইনস্টল করা থাকতে হবে (নিম্নলিখিত ধাপগুলো Cordova এবং Capacitor উভয়ের জন্য প্রযোজ্য)।

১. Cordova বা Capacitor ইন্টিগ্রেশন

Cordova ইন্টিগ্রেশন

Cordova একটি প্লাগইন-ভিত্তিক প্ল্যাটফর্ম যা মোবাইল অ্যাপ্লিকেশনে নেটিভ ফিচার যোগ করতে সহায়তা করে।

Cordova ইনস্টল করা:

npm install -g cordova

Framework7 প্রজেক্টে Cordova যোগ করা:

cd <project-name>
framework7 add cordova

এই কমান্ডটি আপনার Framework7 প্রজেক্টে Cordova সংযোগ করবে এবং প্রয়োজনীয় ফাইল ও ফোল্ডার তৈরি করবে।

Capacitor ইন্টিগ্রেশন

Capacitor হলো একটি আধুনিক প্ল্যাটফর্ম যা Cordova এর বিকল্প হিসেবে কাজ করে এবং আরও উন্নত ফিচার প্রদান করে।

Capacitor ইনস্টল করা:

npm install @capacitor/core @capacitor/cli
npx cap init

Framework7 প্রজেক্টে Capacitor যোগ করা:

cd <project-name>
npx cap add android
npx cap add ios

এই কমান্ডগুলো আপনার প্রজেক্টে Android এবং iOS প্ল্যাটফর্ম যুক্ত করবে।

২. প্রয়োজনীয় প্লাগইন ইনস্টল করা

Cordova প্লাগইন উদাহরণ

• Camera প্লাগইন:

  cordova plugin add cordova-plugin-camera
  npm install @ionic-native/camera
  

• Geolocation প্লাগইন:

  cordova plugin add cordova-plugin-geolocation
  npm install @ionic-native/geolocation
  

• Contacts প্লাগইন:

  cordova plugin add cordova-plugin-contacts
  npm install @ionic-native/contacts
  

Capacitor প্লাগইন উদাহরণ

Capacitor প্লাগইনের জন্য, আপনাকে npm প্যাকেজ ইনস্টল করতে হবে এবং প্রয়োজন অনুযায়ী প্ল্যাটফর্ম স্পেসিফিক কোড যোগ করতে হবে।

• Camera প্লাগইন:

  npm install @capacitor/camera
  npx cap sync
  

• Geolocation প্লাগইন:

  npm install @capacitor/geolocation
  npx cap sync
  

• Contacts প্লাগইন: Capacitor-এর ডিফল্ট Contacts প্লাগইন নেই, তাই আপনাকে থার্ড-পার্টি প্লাগইন ব্যবহার করতে হবে বা কাস্টম প্লাগইন তৈরি করতে হবে।

৩. প্লাগইন ব্যবহার করা

Cordova প্লাগইন ব্যবহারের উদাহরণ

ক্যামেরা ব্যবহার:

document.getElementById('take-photo').addEventListener('click', function() {
  navigator.camera.getPicture(onSuccess, onFail, { 
    quality: 50,
    destinationType: Camera.DestinationType.DATA_URL
  });

  function onSuccess(imageData) {
    var image = document.getElementById('myImage');
    image.src = "data:image/jpeg;base64," + imageData;
  }

  function onFail(message) {
    alert('Failed because: ' + message);
  }
});

GPS ব্যবহার:

document.getElementById('get-location').addEventListener('click', function() {
  navigator.geolocation.getCurrentPosition(onSuccess, onError);

  function onSuccess(position) {
    alert('Latitude: ' + position.coords.latitude + '\n' +
          'Longitude: ' + position.coords.longitude);
  }

  function onError(error) {
    alert('Error: ' + error.message);
  }
});

Contacts ব্যবহার:

document.getElementById('get-contacts').addEventListener('click', function() {
  navigator.contacts.find(
    ["displayName", "name"],
    onSuccess,
    onError,
    { filter: "", multiple: true }
  );

  function onSuccess(contacts) {
    contacts.forEach(function(contact) {
      console.log('Display Name = ' + contact.displayName);
    });
  }

  function onError(contactError) {
    alert('onError!');
  }
});

Capacitor প্লাগইন ব্যবহারের উদাহরণ

ক্যামেরা ব্যবহার:

import { Camera, CameraResultType } from '@capacitor/camera';

document.getElementById('take-photo').addEventListener('click', async () => {
  const image = await Camera.getPhoto({
    quality: 90,
    allowEditing: false,
    resultType: CameraResultType.DataUrl
  });

  const imageElement = document.getElementById('myImage');
  imageElement.src = image.dataUrl;
});

GPS ব্যবহার:

import { Geolocation } from '@capacitor/geolocation';

document.getElementById('get-location').addEventListener('click', async () => {
  const coordinates = await Geolocation.getCurrentPosition();

  alert('Latitude: ' + coordinates.coords.latitude + '\n' +
        'Longitude: ' + coordinates.coords.longitude);
});

Contacts ব্যবহার:

Capacitor-এর জন্য Contacts প্লাগইন নেই, তাই আপনাকে Cordova প্লাগইন ব্যবহার করতে হতে পারে অথবা নিজস্ব প্লাগইন তৈরি করতে হবে।

৪. Permissions কনফিগার করা

Android Permissions

config.xml (Cordova) বা AndroidManifest.xml (Capacitor) এ প্রয়োজনীয় পারমিশন যোগ করতে হবে।

Cordova:

config.xml এ:

<platform name="android">
    <config-file parent="/*" target="AndroidManifest.xml">
        <uses-permission android:name="android.permission.CAMERA" />
        <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
        <uses-permission android:name="android.permission.READ_CONTACTS" />
    </config-file>
</platform>

Capacitor:

android/app/src/main/AndroidManifest.xml এ:

<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
<uses-permission android:name="android.permission.READ_CONTACTS" />

iOS Permissions

Info.plist এ প্রয়োজনীয় পারমিশন যোগ করতে হবে।

Cordova:

config.xml এ:

<platform name="ios">
    <config-file parent="NSCameraUsageDescription" target="*-Info.plist">
        <string>Need camera access to take photos</string>
    </config-file>
    <config-file parent="NSLocationWhenInUseUsageDescription" target="*-Info.plist">
        <string>Need location access to get your GPS coordinates</string>
    </config-file>
    <config-file parent="NSContactsUsageDescription" target="*-Info.plist">
        <string>Need contacts access to read your contacts</string>
    </config-file>
</platform>

Capacitor:

ios/App/App/Info.plist এ:

<key>NSCameraUsageDescription</key>
<string>Need camera access to take photos</string>
<key>NSLocationWhenInUseUsageDescription</key>
<string>Need location access to get your GPS coordinates</string>
<key>NSContactsUsageDescription</key>
<string>Need contacts access to read your contacts</string>

৫. ডেভেলপমেন্ট এবং ডিপ্লয়মেন্ট

Cordova

অ্যাপ বিল্ড করা:

cordova build android
cordova build ios

অ্যাপ রান করা:

cordova run android
cordova run ios

Capacitor

প্ল্যাটফর্ম সিনক্রোনাইজ করা:

npx cap sync

অ্যাপ বিল্ড এবং ওপেন করা:

npx cap build
npx cap open android
npx cap open ios

৬. সম্পূর্ণ উদাহরণ: ক্যামেরা API ব্যবহার করে ছবি নেওয়া

HTML:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Framework7 Camera Example</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/framework7/framework7-bundle.min.css">
</head>
<body>
  <div id="app">
    <div class="view view-main">
      <div class="page">
        <div class="navbar">
          <div class="navbar-inner">
            <div class="title">Camera Example</div>
          </div>
        </div>
        <div class="page-content">
          <button id="take-photo" class="button button-fill">Take Photo</button>
          <img id="myImage" src="" alt="Captured Image" style="margin-top:20px; width:100%; height:auto;">
        </div>
      </div>
    </div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/framework7/framework7-bundle.min.js"></script>
  <script src="cordova.js"></script> <!-- Cordova ব্যবহার করলে প্রয়োজন -->
  <script>
    var app = new Framework7({
      root: '#app',
    });

    document.getElementById('take-photo').addEventListener('click', function() {
      if (navigator.camera) {
        navigator.camera.getPicture(onSuccess, onFail, { 
          quality: 50,
          destinationType: Camera.DestinationType.DATA_URL
        });

        function onSuccess(imageData) {
          var image = document.getElementById('myImage');
          image.src = "data:image/jpeg;base64," + imageData;
        }

        function onFail(message) {
          alert('Failed because: ' + message);
        }
      } else {
        alert('Camera API not supported');
      }
    });
  </script>
</body>
</html>

Capacitor ক্যামেরা উদাহরণ:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Framework7 Camera Example</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/framework7/framework7-bundle.min.css">
</head>
<body>
  <div id="app">
    <div class="view view-main">
      <div class="page">
        <div class="navbar">
          <div class="navbar-inner">
            <div class="title">Camera Example</div>
          </div>
        </div>
        <div class="page-content">
          <button id="take-photo" class="button button-fill">Take Photo</button>
          <img id="myImage" src="" alt="Captured Image" style="margin-top:20px; width:100%; height:auto;">
        </div>
      </div>
    </div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/framework7/framework7-bundle.min.js"></script>
  <script type="module">
    import { Camera, CameraResultType } from '@capacitor/camera';

    var app = new Framework7({
      root: '#app',
    });

    document.getElementById('take-photo').addEventListener('click', async () => {
      try {
        const image = await Camera.getPhoto({
          quality: 90,
          allowEditing: false,
          resultType: CameraResultType.DataUrl
        });

        const imageElement = document.getElementById('myImage');
        imageElement.src = image.dataUrl;
      } catch (error) {
        alert('Error taking photo: ' + error.message);
      }
    });
  </script>
</body>
</html>

উপসংহার

Framework7 এর সাথে Cordova বা Capacitor ব্যবহার করে আপনি সহজেই মোবাইল ডিভাইসের ক্যামেরা, GPS, কনট্যাক্টস ইত্যাদি ডিভাইস API গুলো ইন্টিগ্রেট করতে পারেন। এর মাধ্যমে আপনার অ্যাপ্লিকেশন আরও শক্তিশালী এবং ইউজার-ফ্রেন্ডলি হবে। নিচে কিছু মূল পয়েন্ট উল্লেখ করা হলো:

• Cordova বা Capacitor ব্যবহার করে Framework7 প্রজেক্টে নেটিভ প্ল্যাটফর্ম ইন্টিগ্রেট করুন।
• প্রয়োজনীয় প্লাগইন ইনস্টল এবং পারমিশন কনফিগার করুন।
• JavaScript API ব্যবহার করে ডিভাইস ফিচার গুলো হ্যান্ডল করুন।
• অ্যাপ্লিকেশন বিল্ড এবং ডিপ্লয় করুন মোবাইল প্ল্যাটফর্মে।

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

অতিরিক্ত রিসোর্স

• Framework7 Documentation
• Cordova Documentation
• Capacitor Documentation
• Ionic Native Plugins

এই রিসোর্সগুলো আপনাকে আরও গভীরভাবে Framework7 এবং নেটিভ প্ল্যাটফর্ম ইন্টিগ্রেশনের বিষয়ে জানতে সহায়তা করবে।