মিনি অ্যাপের উপাদান

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

ওয়েব উপাদান

ওয়েব কম্পোনেন্টগুলোর সূচনা হয়েছিল এই প্রতিশ্রুতি নিয়ে যে, ডেভেলপাররা এগুলোকে একত্রিত করে তার উপর ভিত্তি করে চমৎকার অ্যাপ তৈরি করতে পারবে। এই ধরনের অ্যাটমিক কম্পোনেন্টের উদাহরণ হলো গিটহাবের টাইম-এলিমেন্টস , স্টেফান জুডিসের ওয়েব-ভাইটালস-এলিমেন্ট , অথবা নির্লজ্জভাবে বলতে গেলে, গুগলের ডার্ক মোড টগল । তবে, যখন সম্পূর্ণ ডিজাইন সিস্টেমের কথা আসে, আমি দেখেছি যে লোকেরা একই ভেন্ডরের তৈরি একটি সুসংহত কম্পোনেন্ট সেটের উপর নির্ভর করতে বেশি পছন্দ করে। এর একটি অসম্পূর্ণ উদাহরণ তালিকায় রয়েছে SAP-এর UI5 ওয়েব কম্পোনেন্টস , পলিমার এলিমেন্টস , ভ্যাদিনের এলিমেন্টস , মাইক্রোসফটের FAST , ম্যাটেরিয়াল ওয়েব কম্পোনেন্টস , সম্ভবত AMP কম্পোনেন্টস এবং আরও অনেক কিছু। এই প্রবন্ধের আওতার বাইরে থাকা বিভিন্ন কারণের জন্য, অনেক ডেভেলপার React , Vue.js , Ember.js ইত্যাদির মতো ফ্রেমওয়ার্কের দিকেও ঝুঁকেছেন। ডেভেলপারকে এই বিকল্পগুলোর যেকোনো একটি বেছে নেওয়ার স্বাধীনতা দেওয়ার পরিবর্তে (অথবা, আপনার দৃষ্টিকোণ অনুযায়ী, তাদেরকে কোনো একটি প্রযুক্তিগত পছন্দ করতে বাধ্য করার পরিবর্তে), সুপার অ্যাপ প্রোভাইডাররা সার্বিকভাবে এমন কিছু কম্পোনেন্ট সরবরাহ করে যা ডেভেলপারদের অবশ্যই ব্যবহার করতে হয়।

মিনি অ্যাপের উপাদানসমূহ

আপনি এই উপাদানগুলোকে উপরে উল্লিখিত যেকোনো কম্পোনেন্ট লাইব্রেরির মতো ভাবতে পারেন। উপলব্ধ কম্পোনেন্টগুলোর একটি সার্বিক ধারণা পেতে, আপনি WeChat-এর কম্পোনেন্ট লাইব্রেরি , ByteDance-এর কম্পোনেন্ট , Alipay-এর কম্পোনেন্ট , Baidu-এর কম্পোনেন্ট এবং Quick App-এর কম্পোনেন্টগুলো ব্রাউজ করতে পারেন।

এর আগে আমি দেখিয়েছি যে, উদাহরণস্বরূপ, WeChat-এর <image> ট্যাগটি আড়ালে একটি ওয়েব কম্পোনেন্ট হলেও, এই কম্পোনেন্টগুলোর সবগুলোই প্রযুক্তিগতভাবে ওয়েব কম্পোনেন্ট নয়। <map> এবং <video> -এর মতো কিছু কম্পোনেন্ট OS-এর বিল্ট-ইন কম্পোনেন্ট হিসেবে রেন্ডার হয়, যা WebView-এর উপর লেয়ার হিসেবে যুক্ত থাকে। ডেভেলপারের কাছে এই বাস্তবায়নের খুঁটিনাটি প্রকাশ করা হয় না; এগুলো অন্য যেকোনো কম্পোনেন্টের মতোই প্রোগ্রাম করা হয়।

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

  • কন্টেইনারগুলি দেখুন
    • view
    • swiper
    • scroll-view
    • cover-view
    • cover-image
    • movable-view
    • movable-area
  • মৌলিক বিষয়বস্তু
    • text
    • icon
    • progress
    • rich-text
  • ফর্ম উপাদান
    • button
    • form
    • label
    • input
    • textarea
    • radio
    • radio-group
    • checkbox
    • checkbox-group
    • switch
    • slider
    • picker-view
    • picker
  • নেভিগেশন
    • navigator
  • মিডিয়া উপাদান
    • image
    • video
  • ক্যানভাস
    • canvas
  • মানচিত্র
    • map
  • খোলা উপাদানগুলি
    • web-view
    • lifestyle
    • contact-button
  • প্রবেশগম্যতা
    • aria-component

নিচে, আপনি দেখতে পাচ্ছেন যে Alipay-এর <image> একটি a:for ডিরেক্টিভে ( তালিকা রেন্ডারিং দেখুন) ব্যবহৃত হয়েছে, যা index.js এ দেওয়া একটি ইমেজ ডেটা অ্যারের উপর লুপ চালায়।

/* index.js */
Page({
  data: {
    array: [
      {
        mode: "scaleToFill",
        text: "scaleToFill",
      },
      {
        mode: "aspectFit",
        text: "aspectFit",
      },
    ],
    src: "https://images.example.com/sample.png",
  },
  imageError(e) {
    console.log("image", e.detail.errMsg);
  },
  onTap(e) {
    console.log("image tap", e);
  },
  imageLoad(e) {
    console.log("image", e);
  },
});

<!-- index.axml -->
<view class="page">
  <view class="page-section" a:for="{{array}}" a:for-item="item">
    <view class="page-section-demo" onTap="onTap">
      <image
        class="image"
        mode="{{item.mode}}"
        onTap="onTap"
        onError="imageError"
        onLoad="imageLoad"
        src="{{src}}"
        lazy-load="true"
        default-source="https://images.example.com/loading.png"
      />
    </view>
  </view>
</view>

লক্ষ্য করুন, item.mode কে mode অ্যাট্রিবিউটের সাথে, src কে src অ্যাট্রিবিউটের সাথে এবং onTap , onError ও onLoad এই তিনটি ইভেন্ট হ্যান্ডলারকে একই নামের ফাংশনগুলোর সাথে ডেটা বাইন্ডিং করা হয়েছে। পূর্বে যেমন দেখানো হয়েছে, <image> ট্যাগটি অভ্যন্তরীণভাবে একটি ` <div> এ রূপান্তরিত হয়, যেখানে ছবিটির চূড়ান্ত মাপের জন্য একটি প্লেসহোল্ডার, ঐচ্ছিক লেজি লোডিং, একটি ডিফল্ট সোর্স ইত্যাদি থাকে।

কম্পোনেন্টটির উপলব্ধ কনফিগারেশন অপশনগুলো সবই ডকুমেন্টেশনে তালিকাভুক্ত করা আছে। সিমুলেটরের সাহায্যে ডকুমেন্টেশনের মধ্যেই কম্পোনেন্টের প্রিভিউ কোডটিকে তাৎক্ষণিকভাবে বোধগম্য করে তোলে।

এমবেডেড কম্পোনেন্ট প্রিভিউ সহ আলিপে কম্পোনেন্ট ডকুমেন্টেশন, যেখানে একটি সিমুলেটর সহ কোড এডিটর দেখানো হয়, যা একটি সিমুলেটেড আইফোন ৬-এ কম্পোনেন্টটি রেন্ডার করে দেখায়।
এমবেডেড কম্পোনেন্ট প্রিভিউ সহ আলিপে কম্পোনেন্ট ডকুমেন্টেশন।
একটি আলাদা ব্রাউজার ট্যাবে আলিপে কম্পোনেন্টের প্রিভিউ চলছে, যেখানে একটি সিমুলেটরসহ কোড এডিটর দেখা যাচ্ছে এবং কম্পোনেন্টটি একটি সিমুলেটেড আইফোন ৬-এ রেন্ডার করা অবস্থায় প্রদর্শিত হচ্ছে।
Alipay কম্পোনেন্টের প্রিভিউটি একটি আলাদা ট্যাবে পপ-আপ হয়ে বেরিয়ে এলো।

প্রতিটি কম্পোনেন্টের সাথে একটি কিউআর কোডও রয়েছে, যা আলিপে অ্যাপ দিয়ে স্ক্যান করলে একটি স্বয়ংসম্পূর্ণ ও সংক্ষিপ্ত উদাহরণ হিসেবে কম্পোনেন্টটির নমুনাটি খুলে যায়।

ডকুমেন্টেশনে থাকা কিউআর কোড স্ক্যান করার পর একটি আসল ডিভাইসে আলিপের `ইমেজ` কম্পোনেন্টটির প্রিভিউ দেখা গেছে।
ডকুমেন্টেশন থেকে একটি কিউআর কোড লিঙ্ক অনুসরণ করার পর একটি আসল ডিভাইসে আলিপে <image> কম্পোনেন্টের প্রিভিউ।

ডেভেলপাররা antdevtool-tiny:// একটি নিজস্ব URI স্কিম ব্যবহার করে ডকুমেন্টেশন থেকে সরাসরি Alipay DevTools IDE-তে প্রবেশ করতে পারেন। এর ফলে ডকুমেন্টেশনটি সরাসরি একটি ইম্পোর্ট-যোগ্য মিনি অ্যাপ প্রজেক্টের সাথে লিঙ্ক হয়ে যায়, যার ফলে ডেভেলপাররা কম্পোনেন্টটি নিয়ে তাৎক্ষণিকভাবে কাজ শুরু করতে পারেন।

কাস্টম উপাদান

ভেন্ডর-প্রদত্ত কম্পোনেন্ট ব্যবহার করা ছাড়াও, ডেভেলপাররা কাস্টম কম্পোনেন্টও তৈরি করতে পারেন। WeChat , ByteDance , Alipay , এবং Baidu- এর পাশাপাশি Quick App-এর ক্ষেত্রেও এই ধারণাটি বিদ্যমান। উদাহরণস্বরূপ, একটি Baidu কাস্টম কম্পোনেন্ট চারটি ফাইল নিয়ে গঠিত, যেগুলো অবশ্যই একই ফোল্ডারে থাকতে হবে: custom.swan , custom.css , custom.js , এবং custom.json ।

custom.json ফাইলটি ফোল্ডারের বিষয়বস্তুকে একটি কাস্টম কম্পোনেন্ট হিসেবে চিহ্নিত করে।

{
  "component": true
}

custom.swan ফাইলে মার্কআপ এবং custom.css ফাইলে CSS রয়েছে।

<view class="name" bindtap="tap">{{name}} {{age}}</view>

.name {
  color: red;
}

custom.js ফাইলটিতে লজিকটি রয়েছে। কম্পোনেন্টের লাইফসাইকেল ফাংশনগুলো হলো attached() , detached() , created() , এবং ready() । এছাড়াও কম্পোনেন্টটি পেজের লাইফসাইকেল ইভেন্ট , যেমন show() এবং hide() -এর উপরও প্রতিক্রিয়া জানাতে পারে।

Component({
  properties: {
    name: {
      type: String,
      value: "swan",
    },
  },
  data: {
    age: 1,
  },
  methods: {
    tap: function () {},
  },
  lifetimes: {
    attached: function () {},
    detached: function () {},
    created: function () {},
    ready: function () {},
  },
  pageLifetimes: {
    show: function () {},
    hide: function () {},
  },
});

এরপর কাস্টম কম্পোনেন্টটি index.json এ ইম্পোর্ট করা যায়, ইম্পোর্টের কী-টি সেই নামটি (এখানে: "custom" ) নির্ধারণ করে দেয়, যে নামে কাস্টম কম্পোনেন্টটি পরবর্তীতে index.swan এ ব্যবহার করা যাবে।

{
  "usingComponents": {
    "custom": "/components/custom/custom"
  }
}

<view>
  <custom name="swanapp"></custom>
</view>

কৃতজ্ঞতা স্বীকার

এই নিবন্ধটি পর্যালোচনা করেছেন জো মেডলি , কেসি বাস্কস , মিলিকা মিহাজলিয়া , অ্যালান কেন্ট এবং কিথ গু।