এই পৃষ্ঠাটি Cloud Translation API অনুবাদ করেছে।

মিনি অ্যাপ ওপেন সোর্স প্রকল্প

Thomas Steiner

কেবোন

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

kbone-cli টুল দিয়ে একটি নতুন প্রজেক্ট তৈরি করা যায়। একটি উইজার্ড জিজ্ঞাসা করে যে কোন ফ্রেমওয়ার্ক দিয়ে প্রজেক্টটি শুরু করা হবে। নিচের কোড স্নিপেটটিতে Preact ডেমো দেখানো হয়েছে। নিচের কোড স্নিপেটটিতে, mp কমান্ডটি মিনি অ্যাপ বিল্ড করে, web কমান্ডটি ওয়েব অ্যাপ বিল্ড করে, এবং build প্রোডাকশন ওয়েব অ্যাপ তৈরি করে।

npx kbone-cli init my-app
cd my-app
npm run mp
npm run web
npm run build

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

import { h, Component } from "preact";
import "./index.css";

class Counter extends Component {
  state = { count: 1 };

  sub = () => {
    this.setState((prevState) => {
      return { count: --prevState.count };
    });
  };

  add = () => {
    this.setState((prevState) => {
      return { count: ++prevState.count };
    });
  };

  clickHandle = () => {
    if ("undefined" != typeof wx && wx.getSystemInfoSync) {
      wx.navigateTo({
        url: "../log/index?id=1",
      });
    } else {
      location.href = "log.html";
    }
  };

  render({}, { count }) {
    return (
      <div>
        <button onClick={this.sub}>-</button>
        <span>{count}</span>
        <button onClick={this.add}>+</button>
        <div onClick={this.clickHandle}>跳转</div>
      </div>
    );
  }
}

export default Counter;

উইচ্যাট ডেভটুলস-এ প্রিয়েক্ট কেবোন টেমপ্লেট ডেমো অ্যাপটি খোলা হলো। এর DOM কাঠামো পরীক্ষা করলে ওয়েব অ্যাপের তুলনায় একটি উল্লেখযোগ্য ওভারহেড দেখা যায়। — WeChat DevTools-এ Preact kbone টেমপ্লেট ডেমো অ্যাপটি খোলা হলো। এর জটিল DOM কাঠামোটি লক্ষ্য করুন এবং দেখুন কীভাবে প্লাস ও মাইনাস বাটনগুলো আসলে `<button>` এলিমেন্ট নয়।

ওয়েব ব্রাউজারে Preact kbone টেমপ্লেট ডেমো অ্যাপটি খোলা হলো। DOM কাঠামোটি পরীক্ষা করলে Preact কম্পোনেন্ট কোডের উপর ভিত্তি করে প্রত্যাশিত মার্কআপটি দেখা যায়। — ওয়েব ব্রাউজারে Preact kbone টেমপ্লেট ডেমো অ্যাপটি খোলা হলো। DOM কাঠামোটি লক্ষ্য করুন।

kbone-ui

kbone-ui প্রজেক্টটি ( গিটহাবে ওপেন সোর্স ) একটি UI ফ্রেমওয়ার্ক যা kbone ব্যবহার করে মিনি অ্যাপ ডেভেলপমেন্ট এবং Vue.js ডেভেলপমেন্ট উভয়কেই সহজ করে তোলে। kbone-ui কম্পোনেন্টগুলো WeChat-এর বিল্ট-ইন মিনি অ্যাপ কম্পোনেন্টগুলোর চেহারা ও অনুভূতিকে অনুকরণ করে (উপরে কম্পোনেন্ট অংশটিও দেখুন)। সরাসরি ব্রাউজারে চালানো যায় এমন একটি ডেমো আপনাকে উপলব্ধ কম্পোনেন্টগুলো অন্বেষণ করার সুযোগ দেয়।

WeUI

WeUI হলো কিছু মৌলিক স্টাইল লাইব্রেরির একটি সেট যা WeChat-এর ডিফল্ট ভিজ্যুয়াল অভিজ্ঞতার সাথে সামঞ্জস্যপূর্ণ। WeChat-এর অফিসিয়াল ডিজাইন টিম, WeChat-এর অভ্যন্তরীণ ওয়েব পেজ এবং WeChat মিনি অ্যাপগুলোর জন্য বিশেষভাবে ডিজাইন তৈরি করেছে, যাতে ব্যবহারকারীদের ব্যবহারের অভিজ্ঞতা আরও সামঞ্জস্যপূর্ণ হয়। এর মধ্যে button , cell , dialog , progress , toast , article , actionsheet এবং icon মতো কম্পোনেন্ট অন্তর্ভুক্ত রয়েছে। WeUI-এর বিভিন্ন সংস্করণ পাওয়া যায়, যেমন WXSS দিয়ে স্টাইল করা WeChat মিনি অ্যাপের জন্য weui-wxss (উপরে স্টাইলিং দেখুন), ওয়েব অ্যাপের জন্য weui.js এবং WeChat React কম্পোনেন্টের জন্য react-weui ।

ওমি

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

import { render, WeElement, define } from "omi";

define("my-counter", class extends WeElement {
  data = {
    count: 1,
  };

  static css = `
    span{
        color: red;
    }`;

  sub = () => {
    this.data.count--;
    this.update();
  };

  add = () => {
    this.data.count++;
    this.update();
  };

  render() {
    return (
      <div>
        <button onClick={this.sub}>-</button>
        <span>{this.data.count}</span>
        <button onClick={this.add}>+</button>
      </div>
    );
  }
});

render(<my-counter />, "body");

ওমিউ

Omiu হলো Omi-এর উপর ভিত্তি করে তৈরি একটি ক্রস-ফ্রেমওয়ার্ক UI কম্পোনেন্ট লাইব্রেরি ( GitHub-এ ওপেন সোর্স ), যা স্ট্যান্ডার্ড ওয়েব কম্পোনেন্টগুলোর কাস্টম এলিমেন্ট আউটপুট করে।

Omiu ফ্রেমওয়ার্কের একটি ডেমো, যেখানে ফর্ম-সম্পর্কিত উপাদান, বিশেষত সুইচগুলো দেখানো হচ্ছে। — Omiu ডেমো অ্যাপটিতে সুইচগুলো দেখানো হচ্ছে।

WePY

WePY একটি ফ্রেমওয়ার্ক যা মিনি অ্যাপগুলোকে কম্পোনেন্টাইজড ডেভেলপমেন্ট সমর্থন করতে সাহায্য করে। প্রি-কম্পাইলেশনের মাধ্যমে, ডেভেলপাররা মিনি অ্যাপ তৈরি করার জন্য তাদের পছন্দের ডেভেলপমেন্ট স্টাইল বেছে নিতে পারেন। ফ্রেমওয়ার্কটির বিস্তারিত অপটিমাইজেশন এবং প্রমিসেস ও অ্যাসিঙ্ক ফাংশনের সংযোজন মিনি অ্যাপ প্রজেক্টের ডেভেলপমেন্টকে আরও সহজ ও কার্যকর করে তোলে। একই সাথে, WePY একটি ক্রমবর্ধমান ফ্রেমওয়ার্ক, যা মূলত Vue.js থেকে কিছু অপটিমাইজড ফ্রন্টএন্ড টুল এবং ফ্রেমওয়ার্ক ডিজাইনের ধারণা ও আইডিয়া ব্যাপকভাবে গ্রহণ করেছে।

<style lang="less">
  @color: #4d926f;
  .num {
    color: @color;
  }
</style>

<template>
  <div class="container">
    <div class="num" @tap="num++">{{num}}</div>
    <custom-component></custom-component>
    <vendor-component></vendor-component>
    <div>{{text}}</div>
    <input v-model="text" />
  </div>
</template>

<config>
  { usingComponents: { customComponent: '@/components/customComponent', vendorComponent:
  'module:vendorComponent' } }
</config>

<script>
  import wepy from "@wepy/core";

  wepy.page({
    data: {
      num: 0,
      text: "Hello World",
    },
  });
</script>

WePY-এর 'শুরু করার নির্দেশিকা' পৃষ্ঠাটি কাজ শুরু করার প্রাথমিক ধাপগুলো দেখাচ্ছে। — WePY "শুরু করার নির্দেশিকা" ডকুমেন্টেশন।

vConsole

vConsole প্রজেক্টটি মোবাইল ওয়েব পেজের জন্য একটি হালকা ও সম্প্রসারণযোগ্য ফ্রন্টএন্ড ডেভেলপার টুল প্রদান করে। এটি DevTools-এর মতো একটি ডিবাগার দেয়, যা সরাসরি ওয়েব অ্যাপ এবং মিনি অ্যাপে যুক্ত করা যায়। একটি ডেমোতে এর সুযোগগুলো তুলে ধরা হয়েছে। vConsole-এ লগ, সিস্টেম, নেটওয়ার্ক, এলিমেন্টস এবং স্টোরেজের জন্য ট্যাব রয়েছে।

ওয়েবওয়েব

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

হেরা মিনি অ্যাপ ফ্রেমওয়ার্কের ডকুমেন্টেশনে এর সমর্থিত WeChat API-গুলোর তালিকা দেওয়া আছে, যেমন `wx.request`, `wx.uploadFile`, ইত্যাদি। — হেরা মিনি অ্যাপ ফ্রেমওয়ার্কের ডকুমেন্টেশনে সমর্থিত WeChat API-গুলোর তালিকা দেখানো হচ্ছে।

weweb দিয়ে কম্পাইল করা weweb ডেমো মিনি অ্যাপটি ব্রাউজারে ফর্ম এলিমেন্টগুলো দেখানোর জন্য চালানো হয়। — weweb ডেমো মিনি অ্যাপটি ব্রাউজারে চালানোর জন্য weweb দিয়ে কম্পাইল করা হয়েছে।

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

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