মিনি অ্যাপ মার্কআপ, স্টাইলিং, স্ক্রিপ্টিং এবং আপডেট করা

Thomas Steiner

মার্কআপ ভাষা

যেমনটি আগে উল্লেখ করা হয়েছে, সাধারণ HTML-এর পরিবর্তে, মিনি অ্যাপগুলি HTML-এর উপভাষায় লেখা হয়। আপনি যদি কখনও Vue.js টেক্সট ইন্টারপোলেশন এবং নির্দেশাবলী নিয়ে কাজ করে থাকেন, তাহলে আপনি অবিলম্বে ঘরে বসেই অনুভব করবেন, তবে XML Transformations ( XSLT ) তে এর অনেক আগে থেকেই একই ধারণা বিদ্যমান ছিল। নীচে, আপনি WeChat-এর WXML থেকে কোড নমুনা দেখতে পারেন, তবে ধারণাটি সমস্ত মিনি অ্যাপ প্ল্যাটফর্মের জন্য একই, যেমন Alipay-এর AXML , Baidu-এর Swan Element , ByteDance-এর TTML (যদিও DevTools এটিকে Bxml বলে), এবং Quick App-এর HTML । Vue.js-এর মতোই, অন্তর্নিহিত মিনি অ্যাপ প্রোগ্রামিং ধারণা হল model-view-viewmodel (MVVM)।

ডেটা বাইন্ডিং

ডেটা বাইন্ডিং Vue.js এর টেক্সট ইন্টারপোলেশনের সাথে সম্পর্কিত।

<!-- wxml -->
<view>{{message}}</view>

// page.js
Page({
  data: {
    message: "Hello World!",
  },
});

তালিকা রেন্ডারিং

তালিকা রেন্ডারিং Vue.js v-for directive এর মতো কাজ করে।

<!-- wxml -->
<view wx:for="{{array}}">{{item}}</view>

// page.js
Page({
  data: {
    array: [1, 2, 3, 4, 5],
  },
});

শর্তসাপেক্ষ রেন্ডারিং

শর্তসাপেক্ষ রেন্ডারিং Vue.js এর v-if নির্দেশিকার মতো কাজ করে।

<!-- wxml -->
<view wx:if="{{view == 'one'}}">One</view>
<view wx:elif="{{view == 'two'}}">Two</view>
<view wx:else="{{view == 'three'}}">Three</view>

// page.js
Page({
  data: {
    view: "three",
  },
});

টেমপ্লেট

HTML টেমপ্লেটের content আবশ্যিক ক্লোনিং করার পরিবর্তে, WXML টেমপ্লেটগুলিকে একটি টেমপ্লেট সংজ্ঞার সাথে লিঙ্ক করে is বৈশিষ্ট্যের মাধ্যমে ঘোষণামূলকভাবে ব্যবহার করা যেতে পারে।

<!-- wxml -->
<template name="person">
  <view>
    First Name: {{firstName}}, Last Name: {{lastName}}
  </view>
</template>

<template is="person" data="{{...personA}}"></template>
<template is="person" data="{{...personB}}"></template>
<template is="person" data="{{...personC}}"></template>

// page.js
Page({
  data: {
    personA: { firstName: "Alice", lastName: "Foo" },
    personB: { firstName: "Bob", lastName: "Bar" },
    personC: { firstName: "Charly", lastName: "Baz" },
  },
});

স্টাইলিং

স্টাইলিং CSS এর উপভাষাগুলির সাথে ঘটে। WeChat এর নাম WXSS । Alipay এর ক্ষেত্রে, তাদের উপভাষাকে ACSS , Baidu এর ক্ষেত্রে সহজ CSS এবং ByteDance এর ক্ষেত্রে, তাদের উপভাষাকে TTSS বলা হয়। তাদের মধ্যে মিল হল তারা প্রতিক্রিয়াশীল পিক্সেলের সাথে CSS প্রসারিত করে। নিয়মিত CSS লেখার সময়, ডেভেলপারদের বিভিন্ন প্রস্থ এবং পিক্সেল অনুপাত সহ বিভিন্ন মোবাইল ডিভাইস স্ক্রিনের সাথে খাপ খাইয়ে নিতে সমস্ত পিক্সেল ইউনিট রূপান্তর করতে হয়। TTSS তার অন্তর্নিহিত স্তর হিসাবে rpx ইউনিটকে সমর্থন করে, যার অর্থ মিনি অ্যাপটি ডেভেলপারের কাছ থেকে কাজটি গ্রহণ করে এবং 750rpx এর একটি নির্দিষ্ট স্ক্রিন প্রস্থের উপর ভিত্তি করে তাদের পক্ষে ইউনিটগুলিকে রূপান্তর করে। উদাহরণস্বরূপ, 393px এর স্ক্রিন প্রস্থ (এবং 2.75 এর একটি ডিভাইস পিক্সেল অনুপাত) সহ একটি Pixel 3a ফোনে, Chrome DevTools (393px / 750rpx * 200rpx ≈ 104px) দিয়ে পরীক্ষা করলে আসল ডিভাইসে প্রতিক্রিয়াশীল 200rpx 104px হয়ে যায়। অ্যান্ড্রয়েডে, একই ধারণাটিকে ঘনত্ব-স্বাধীন পিক্সেল বলা হয়।

/* app.wxss */
.container {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 200rpx 0; /* ← responsive pixels */
  box-sizing: border-box;
}

যেহেতু কম্পোনেন্টগুলি ( পরে দেখুন) শ্যাডো DOM ব্যবহার করে না, তাই একটি পৃষ্ঠায় ঘোষিত স্টাইলগুলি সমস্ত কম্পোনেন্টে পৌঁছায়। সাধারণ স্টাইলশিট ফাইল সংগঠন হল গ্লোবাল স্টাইলের জন্য একটি রুট স্টাইলশিট এবং মিনি অ্যাপের প্রতিটি পৃষ্ঠার জন্য নির্দিষ্ট প্রতি-পৃষ্ঠা স্টাইলশিট থাকা। স্টাইলগুলি @import নিয়মের মাধ্যমে আমদানি করা যেতে পারে যা @import CSS at-rule এর মতো আচরণ করে। HTML এর মতো, স্টাইলগুলিকেও ইনলাইন ঘোষণা করা যেতে পারে, যার মধ্যে ডায়নামিক টেক্সট ইন্টারপোলেশন ( আগে দেখুন) অন্তর্ভুক্ত রয়েছে।

<view style="color:{{color}};" />

স্ক্রিপ্টিং

মিনি অ্যাপগুলি জাভাস্ক্রিপ্টের একটি "নিরাপদ উপসেট" সমর্থন করে যার মধ্যে বিভিন্ন সিনট্যাক্স ব্যবহার করে মডিউলগুলির জন্য সমর্থন অন্তর্ভুক্ত থাকে যা CommonJS বা RequireJS এর ​​কথা মনে করিয়ে দেয়। জাভাস্ক্রিপ্ট কোড eval() এর মাধ্যমে কার্যকর করা যায় না এবং new Function() দিয়ে কোনও ফাংশন তৈরি করা যায় না। ডিভাইসগুলিতে স্ক্রিপ্টিং এক্সিকিউশন প্রসঙ্গ V8 বা JavaScriptCore এবং সিমুলেটরে V8 বা NW.js। ES6 বা নতুন সিনট্যাক্সের সাথে কোডিং সাধারণত সম্ভব, কারণ নির্দিষ্ট DevTools স্বয়ংক্রিয়ভাবে কোডটিকে ES5 এ স্থানান্তর করে যদি বিল্ড টার্গেটটি একটি পুরানো WebView বাস্তবায়ন সহ একটি অপারেটিং সিস্টেম হয় ( পরে দেখুন)। সুপার অ্যাপ সরবরাহকারীদের ডকুমেন্টেশন স্পষ্টভাবে উল্লেখ করে যে তাদের স্ক্রিপ্টিং ভাষাগুলির সাথে বিভ্রান্ত হওয়া উচিত নয় এবং জাভাস্ক্রিপ্ট থেকে আলাদা। তবে, এই বিবৃতিটি মূলত মডিউলগুলি কীভাবে কাজ করে তা বোঝায়, অর্থাৎ, তারা এখনও স্ট্যান্ডার্ড ES মডিউল সমর্থন করে না।

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

WeChat-এর স্ক্রিপ্টিং ভাষাকে WXS , Alipay-এর SJS , ByteDance-এর অনুরূপ SJS বলা হয়। Baidu তাদের স্ক্রিপ্টগুলি উল্লেখ করার সময় JS- এর কথা বলে। এই স্ক্রিপ্টগুলিকে একটি বিশেষ ধরণের ট্যাগ ব্যবহার করে অন্তর্ভুক্ত করা প্রয়োজন, উদাহরণস্বরূপ, WeChat-এ <wxs> । বিপরীতে, Quick App নিয়মিত <script> ট্যাগ এবং ES6 JS সিনট্যাক্স ব্যবহার করে।

<wxs module="m1">
  var msg = "hello world";
  module.exports.message = msg;
</wxs>

<view>{{m1.message}}</view>

মডিউলগুলি src অ্যাট্রিবিউটের মাধ্যমেও লোড করা যেতে পারে, অথবা require() এর মাধ্যমে আমদানি করা যেতে পারে।

// /pages/tools.wxs
var foo = "'hello world' from tools.wxs";
var bar = function (d) {
  return d;
};
module.exports = {
  FOO: foo,
  bar: bar,
};
module.exports.msg = "some msg";

<!-- page/index/index.wxml -->
<wxs src="./../tools.wxs" module="tools" />
<view>{{tools.msg}}</view>
<view>{{tools.bar(tools.FOO)}}</view>

// /pages/logic.wxs
var tools = require("./tools.wxs");

console.log(tools.FOO);
console.log(tools.bar("logic.wxs"));
console.log(tools.msg);

জাভাস্ক্রিপ্ট ব্রিজ এপিআই

অপারেটিং সিস্টেমের সাথে মিনি অ্যাপগুলিকে সংযুক্ত করে এমন জাভাস্ক্রিপ্ট ব্রিজটি OS ক্ষমতা ব্যবহার করা সম্ভব করে তোলে ( শক্তিশালী বৈশিষ্ট্যগুলিতে অ্যাক্সেস দেখুন। এটি বেশ কয়েকটি সুবিধাজনক পদ্ধতিও অফার করে। একটি সংক্ষিপ্তসারের জন্য, আপনি WeChat , Alipay , Baidu , ByteDance এবং Quick App এর বিভিন্ন API গুলি পরীক্ষা করে দেখতে পারেন।)

বৈশিষ্ট্য সনাক্তকরণ সহজ, কারণ সমস্ত প্ল্যাটফর্ম একটি (আক্ষরিক অর্থে এই নামে পরিচিত) canIUse() পদ্ধতি প্রদান করে যার নাম caniuse.com ওয়েবসাইট থেকে অনুপ্রাণিত বলে মনে হয়। উদাহরণস্বরূপ, ByteDance এর tt.canIUse() API, পদ্ধতি, পরামিতি, বিকল্প, উপাদান এবং বৈশিষ্ট্যগুলির জন্য সমর্থন পরীক্ষা করার অনুমতি দেয়।

// Testing if the `<swiper>` component is supported.
tt.canIUse("swiper");
// Testing if a particular field is supported.
tt.canIUse("request.success.data");

আপডেট

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

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

1. WeChat যতক্ষণ পর্যন্ত চালু থাকবে, ততক্ষণ WeChat নিয়মিতভাবে সাম্প্রতিক ব্যবহৃত মিনি অ্যাপগুলির আপডেট পরীক্ষা করবে। যদি কোনও আপডেট পাওয়া যায়, তাহলে আপডেটটি ডাউনলোড করা হবে এবং পরের বার ব্যবহারকারী যখন মিনি অ্যাপটি কোল্ড-স্টার্ট করবেন তখন সিঙ্ক্রোনাসভাবে প্রয়োগ করা হবে। ব্যবহারকারী যখন মিনি অ্যাপটি খুলবেন তখন মিনি অ্যাপটি কোল্ড-স্টার্ট করা হবে (৫ মিনিট ব্যাকগ্রাউন্ডে থাকার পরে WeChat মিনি অ্যাপগুলিকে জোর করে বন্ধ করে দেবে)।
2. মিনি অ্যাপটি কোল্ড-স্টার্ট করা হলে WeChat আপডেটগুলি পরীক্ষা করে। যেসব মিনি অ্যাপ ব্যবহারকারী দীর্ঘদিন ধরে খোলেননি, সেগুলির জন্য আপডেটটি পরীক্ষা করা হয় এবং সিঙ্ক্রোনাসভাবে ডাউনলোড করা হয়। আপডেটটি ডাউনলোড হওয়ার সময়, ব্যবহারকারীকে অপেক্ষা করতে হয়। ডাউনলোড শেষ হয়ে গেলে, আপডেটটি প্রয়োগ করা হয় এবং মিনি অ্যাপটি খোলে। যদি ডাউনলোড ব্যর্থ হয়, যেমন, খারাপ নেটওয়ার্ক সংযোগের কারণে, মিনি অ্যাপটি খোলে না কেন। ব্যবহারকারী সম্প্রতি যে মিনি অ্যাপগুলি খুলেছেন, সেগুলির জন্য যেকোনো সম্ভাব্য আপডেট ব্যাকগ্রাউন্ডে অ্যাসিঙ্ক্রোনাসভাবে ডাউনলোড করা হয় এবং পরের বার ব্যবহারকারী মিনি অ্যাপটি কোল্ড-স্টার্ট করার সময় প্রয়োগ করা হবে।

মিনি অ্যাপগুলি UpdateManager API ব্যবহার করে পূর্ববর্তী আপডেটগুলিতে অপ্ট-ইন করতে পারে। এটি নিম্নলিখিত কার্যকারিতা প্রদান করে:

• আপডেটের জন্য চেক করা হলে মিনি অ্যাপটিকে অবহিত করে। ( onCheckForUpdate )
• যখন কোনও আপডেট ডাউনলোড হয়ে যায় এবং উপলব্ধ হয় তখন মিনি অ্যাপটিকে অবহিত করে। ( onUpdateReady )
• যখন কোনও আপডেট ডাউনলোড করা সম্ভব না হয় তখন মিনি অ্যাপটিকে অবহিত করে। ( onUpdateFailed )
• মিনি অ্যাপটিকে একটি উপলব্ধ আপডেট জোর করে ইনস্টল করার অনুমতি দেয়, যা অ্যাপটিকে পুনরায় চালু করবে। ( applyUpdate )

WeChat তার ব্যাকএন্ড সিস্টেমে মিনি অ্যাপ ডেভেলপারদের জন্য অতিরিক্ত আপডেট কাস্টমাইজেশন বিকল্পও প্রদান করে: ১. একটি বিকল্প ডেভেলপারদের তাদের মিনি অ্যাপের একটি নির্দিষ্ট ন্যূনতম সংস্করণ ইনস্টল করা ব্যবহারকারীদের জন্য সিঙ্ক্রোনাস আপডেট থেকে অপ্ট-আউট করার অনুমতি দেয় এবং পরিবর্তে আপডেটগুলিকে অ্যাসিঙ্ক্রোনাস হতে বাধ্য করে। ২. আরেকটি বিকল্প ডেভেলপারদের তাদের মিনি অ্যাপের একটি ন্যূনতম প্রয়োজনীয় সংস্করণ সেট করার অনুমতি দেয়। এটি আপডেট প্রয়োগ করার পরে ন্যূনতম প্রয়োজনীয় সংস্করণের চেয়ে কম সংস্করণ থেকে অ্যাসিঙ্ক্রোনাস আপডেটগুলিকে মিনি অ্যাপটিকে জোর করে পুনরায় লোড করবে। আপডেট ডাউনলোড ব্যর্থ হলে এটি মিনি অ্যাপের একটি পুরানো সংস্করণ খোলার বিষয়টিও ব্লক করবে।

স্বীকৃতি

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