DEV Community: Arkar Min Tun

Database ACID Compliance

Arkar Min Tun — Tue, 18 Jan 2022 15:06:47 +0000

Database တွေမှာ ACID Compliance ဆိုတာရှိတယ်။ သူက database တွေရဲ့ integrity (ယုံကြည်စိတ်ချရမှု)ကို တိုင်းတာတဲ့ standard တခုဖြစ်တယ်။ Data integrity ဆိုတာဟာ အရမ်းကို အရေးပါတဲ့အရာဖြစ်တယ်။ အကယ်၍သာ user တွေအတွက် အရေးကြီးတာတွေ ပျက်သွားတာဖြစ်ဖြစ်၊ မှားသွားတာဖြစ်ဖြစ် ဖြစ်လာခဲ့ရင် လုပ်ငန်းအတွက် အဆုံးအရှုံးအများကြီး ဖြစ်သွားနိုင်တယ်။

Atomicity

Database transaction တခုကို molecule တခုလိုမျိုး atom တွေနဲ့ ဖွဲ့စည်းထားတယ်လို့မြင်ကြည့်တာနဲ့တူမယ်။ atom တခုခု အဆင်မပြေဖြစ်တာနဲ့ molecule တခုလုံး invalid ဖြစ်သွားတာမျိုးပေါ့။ All or Nothing Rule လို့လဲ ခေါ်ကြတယ်။ Transaction ရဲ့ အစိတ်အပိုင်းတခုမှာ Error ဖြစ်တာနဲ့ transaction တခုလုံး Fail ဖြစ်သွားတာမျိုးပေါ့။ Database အနေနဲ့ အဲ့လိုမျိုး လုပ်ဆောင်ချက်ကို support လုပ်ပေးတယ်ဆို အဲ့ဒီ့ database မှာ atomicity ရှိတယ်လို့ ပြောလို့ရတယ်။

Consistency

ဒါကျတော့ database တခုရဲ့ သတ်မှတ်ချက်တွေအတိုင်း လုပ်ဆောင်မှုကို ပြောတာဖြစ်တယ်။ ဥပမာ - database အနေနဲ့ data type မတူတာကို ထည့်ဖို့ကြိုးစားတဲ့အခါ ထည့်ခွင့်ပြုသလား၊ သတ်မှတ်ထားတဲ့ constraints တွေကို အတိအကျလိုက်နာသလား အဲ့ဒါကို တိုင်းတာခြင်း ဖြစ်တယ်။ တကယ်လို့ သတ်မှတ်ချက်မညီတာမျိုး ပါလာရင် ထည့်ခွင့်မပြုပဲ အရင် state အတိုင်း ထားထားပေးနိုင်တယ်ဆို consistency ရှိတယ်လို့ ပြောလို့ရတယ်။

Isolation

ဒါကျတော့ database အနေနဲ့ ဝင်လာတဲ့ transactions တွေကို ခွဲခြားပြီး ဘယ်လောက် တိတိကျကျ ကိုင်တွယ်နိုင်သလဲဆိုတာ တိုင်းတာခြင်း ဖြစ်တယ်။ User အများကြီးက တပြိုင်ထဲ အသုံးပြုတဲ့အခါ database မှာ ပြောင်းလဲတာတွေက အချိန်နဲ့အမျှဖြစ်နေမှာ ဖြစ်တယ်။ အဲ့ပြောင်းလဲမှုတွေကို အမှားအယွင်းမပါပဲ သီးသန့်စီ ဆောင်ရွက်နိုင်နေရမှာ ဖြစ်တယ်။ ဥပမာ - ၅ခုပဲကျန်တဲ့ ပစ္စည်းတခုကို user ၂ယောက်က တစ်ပြိုင်ထဲ ဝယ်ယူဖို့ ကြိုးစားတယ်ဆိုပါစို့။ အဲ့လိုအခြေအနေဆို စက္ကန့်အနည်းငယ်ဖြစ်ဖြစ် စောတဲ့ user က မှာယူလို့ ရသွားပြီး နောက် user ကို ပစ္စည်း မကျန်တော့ဘူးဆိုတာ ပြသနိုင်ရမှာဖြစ်တယ်။ အဲ့လို ဆောင်ရွက်နိုင်တယ်ဆိုရင်တော့ isolation ရှိတယ်လို့ ပြောလို့ရတယ်။

Durability

ဒါကတော့ အောင်မြင်စွာလုပ်ဆောင်ပြီးတဲ့ transactions တွေက database ထဲမှာ လုံးဝရောက်ရှိသွားရမှာဖြစ်တယ်။ အကယ်၍ system က တခုခုဖြစ်လို့ database နဲ့ connection ပြတ်သွားခဲ့ရင်တောင် ပြန်ပြီး system တက်လာချိန်မှာ data state တွေက နဂိုအတိုင်း ရှိနေရမှာဖြစ်တယ်။ transaction success လို့ user ဆီကို အကြောင်းပြန်ပြီးတော့မှ system failure ကြောင့် user ရဲ့ data ပျောက်သွားခဲ့တယ်ဆို ဒါဟာ ပြဿနာအများကြီး ဖြစ်လာနိုင်တယ်။ Database အနေနဲ့ အဲ့လို situation မှာ ကောင်းကောင်း ကိုင်တယ်နိုင်တယ်ဆို durability ရှိတယ်လို့ ပြောလို့ရတယ်။

Flutter Fall Event

Arkar Min Tun — Sat, 09 Oct 2021 12:35:26 +0000

Original Post From raywenderlich

Google နဲ့ Raywenderlinch တို့ကစီစဥ်တဲ့ Flutter Fall Event ဆိုတာ Flutter လေ့လာရလွယ်ကူအောင် စီစဥ်ပေးထားတာပါ။ Information အပြည့်အစုံကို ဒီမှာ သွားကြည့်လို့ရပါတယ်။ ဒီ event မှာပါဝင်ချင်ရင် ဒီ post မှာဖော်ပြထားသလိုပါဝင်လို့ရပါတယ်။ ကိုယ်တိုင်တစ်ယောက်ထဲလုပ်ချင်ရင်လဲရသလို Google Developer Group - Yangon (GDG Yangon) မှာ တခြားသူတွေနဲ့အတူပါဝင်လို့လဲရပါတယ်။

အရင်ဆုံးအနေနဲ့ ဒီ event က Flutter Apprentice ဆိုတဲ့စာအုပ်ပေါ် အခြေခံပြီး ပြုလုပ်သွားမှာဖြစ်ပါတယ်။

ဒီစာအုပ်ကို ၃လတာ အတွင်း free access ရနေမှာဖြစ်တယ်။ ဒီထဲမှာ အခြေခံ ကနေပြီး နောက်ဆုံး app release လုပ်တဲ့ထိ ပါသွားမှာဖြစ်တယ်။

www.raywenderlich.com ကိုသွားပြီး register လုပ်ဖို့လိုပါမယ်။
ပြီးရင်တော့ Book ကိုစပြီးဖတ်ပြီး tutorials တွေစလုပ်လို့ရပါပြီ။

အပတ်စဥ်လဲ Google Flutter Team က Youtube ကနေ Q&A sessions တွေကို လုပ်သွားပေးဖို့ရှိပါတယ်။ ဒီမှာ သွားကြည့်လို့ရပါတယ်။ မြန်မာစံတော်ချိန်နဲ့ဆို ဗုဒ္ဓဟူးနေ့ ည ၁၀ခွဲတိုင်းမှာဖြစ်ပါမယ်။

Date	Homework	Live stream topic
October 6+	Sign up for free access! Check out the first live stream for details.
October 13	Read chapters 1, 2	Getting started
October 20	Read chapters 3, 4	Widgets
October 27	Read chapters 5, 6	More widgets
November 3	Read chapters 7, 8	Navigation
November 10	Read chapters 9, 15 (1st half)	Data persistence
November 17	Read chapters 10, 11	Networking & serialization
November 24	Read chapters 12, 13	State management
December 1	Read chapters 14, 15 (2nd half)	Streams
December 8	Read chapters 16, 17, 18	Deployment
December 15	Read chapter 19	Firebase

Flutter Localization

Arkar Min Tun — Tue, 12 Jan 2021 07:46:21 +0000

Flutter application မှာ language တခုထက်ပိုပြီး support လုပ်ပေးချင်တဲ့အခါ localization ဆိုတာ လုပ်ရလေ့ရှိပါတယ်။ ခု ဒီ tutorial မှာတော့ localization setup ဘယ်လိုလုပ်ရသလဲဆိုတာတွေကို sharing လုပ်ပေးသွားမှာ ဖြစ်ပါတယ်။ Flutter documentation မှာလဲ အပြည့်အစုံ ရေးထားပေးတာရှိပါတယ်။

အရင်ဆုံး pubspec.yaml ထဲမှာ flutter_localizations dependency ကို သွားထည့်ရပါမယ်။

dependencies:
  flutter:
    sdk: flutter
  flutter_localizations: # Add this line
    sdk: flutter         # Add this line

Localization တွေမလုပ်ခင် package တခုကို သွင်းထားဖို့လိုပါမယ်။ ဒါကတော့ internalization အတွက် အသုံးပြုတဲ့ intl ဆိုတဲ့ package ပဲဖြစ်ပါတယ်။ ကျွန်တော်ကတော့ vscode plugin ဖြစ်တဲ့ Pubspec Assist ကို သုံးတာဖြစ်တဲ့အတွက် အဲ့ဒီကနေ intl package ကို သွင်းပါမယ်။

Command+Shift+P ကိုနှိပ်ပြီး command တွေကျလာပါမယ်။ အဲ့ထဲကမှ Pubspec Assist: Add/update dependencies ဆိုတာကို ရွေးပါမယ်။

အဲ့ဒါပြီးရင်တော့ intl လို့ရိုက်လိုက်ပါမယ်။

အဲ့ဒါဆိုရင်တော့ pubspec.yaml ရဲ့ dependencies အောက်မှာ intl package ထည့်သွင်းပြီး ဖြစ်သွားပါလိမ့်မယ်။ တကယ်လို့ manually လုပ်ချင်တယ်ဆို pub.dev ကိုသွားပြီး intl package ကိုရှာလို့လဲရပါတယ်။

နောက်ဆုံးတခုအနေနဲ့ကတော့ dependencies တို့၊ dev-dependencies တို့ရဲ့ အောက်မှာရှိတဲ့ flutter namespace အောက်ထဲမှာ generate: true ဆိုတာကို ထည့်ပါမယ်။

flutter:
  uses-material-design: true
  generate: true

အခုဆိုရင်တော့ pubspec.yaml file ထဲမှာ လိုအပ်တာတွေ ပြင်ဆင်လို့ ပြီးပါပြီ။

Project based folder ထဲမှာ l10n.yaml ဆိုတဲ့ file တခုကို ဆောက်ပြီး အောက်မှာပြထားတဲ့ configuration တွေထည့်ပါမယ်။

arb-dir: lib/l10n
template-arb-file: app_en.arb
output-localization-file: app_localizations.dart

ဒါကတော့ ကိုယ် translation လုပ်မယ့် file ဘယ်မှာရှိမယ်၊ Generate လုပ်လိုက်တဲ့အခါ ဘယ်နာမည်နဲ့ class ဆောက်မယ်၊ အဲ့ဒါတွေကို သတ်မှတ်ပေးထားတာပဲ ဖြစ်ပါတယ်။ အခု ဒီ configuration အတိုင်းဆိုရင် ကျွန်တော်တို့ app ရဲ့ base language keywords တွေကို app_en.arb ဆိုတဲ့ file ထဲမှာ သိမ်းထားမယ်။ အဲ့ file က lib/l10n ဆိုတဲ့ ပတ်လမ်းကြောင်းမှာ ရှိမယ်။ Generate လုပ်လိုက်တဲ့ class ကို app_localizations.dart ဆိုတဲ့နာမည်နဲ့ သိမ်းမယ်လို့ သတ်မှတ်ပေးလိုက်တာပဲ ဖြစ်ပါတယ်။

ခုဆိုရင် app_en.arb ဆိုတဲ့ file ကိုဖွင့်ပြီး စာကြောင်းတခုလောက်နဲ့ စစမ်းကြည့်ရအောင်ပါ။

{
  "helloWorld": "Hello World!",
  "@helloWorld": {
    "description": "The conventional newborn programmer greeting"
  }
}

ဒါနဲ့အတူ မြန်မာလိုပါ ထည့်ကြည့်လိုက်ရအောင်ပါ။ app_my.arb ဆိုတဲ့ file တခုကို l10n folder ထဲမှာပဲ ဆောက်လိုက်ပြီး အောက်မှာပြထားတဲ့စာတွေ ထည့်လိုက်ပါ့မယ်။

{
  "helloWorld": "မင်္ဂလာပါ"
}

ဘယ် language အတွက် ဘယ် keyword ကို suffix ထားသလဲဆိုတာ သိချင်ရင် ဒီ link မှာ သွားကြည့်လို့ရပါတယ်။

ခုလိုတာတွေ ပြင်ဆင်ပြီးပြီဆိုတော့ command run ဖွင့် terminal ဖွင့်ပါမယ်။ vs code ထဲမှာဆိုရင်တော့ Terminal > New Terminal ဆိုတာ ဖွင့်လိုက်ပါမယ်။ Terminal path က project base folder မှာ ရှိနေရမှာဖြစ်ပါတယ်။ အခု terminal ထဲမှာ flutter gen-l10n ဆိုတာ ရီုက်လိုက်ပါမယ်။ ဒီ command ကတော့ l10n.yaml ကိုကြည့်ပြီး ရှိနေတဲ့ arb files တွေကနေပြီးတော့ app ထဲမှာ ပြန်သုံးလို့ရမယ့် translation files တွေ ထုတ်ပေးဖို့ ရိုက်ရတဲ့ command ဖြစ်ပါတယ်။

ခုလိုပေါ်လာပြီဆိုရင်တော့ generate လုပ်တာ success ဖြစ်သွားပါပြီ။ project base folder ထဲက .dart_tool ဆိုတဲ့ folder ထဲမှာ flutter_gen/gen_l10n ဆိုပြီး ထွက်လာမှာဖြစ်ပါတယ်။ အဲ့ထဲမှာတော့ ကိုယ် arb အနေနဲ့သတ်မှတ်ထားတဲ့ files တွေ (app_localizations_en.dart, app_localizations_my.dart) အပြင် application နဲ့ အဓိက ချိတ်ဆက်မယ့် app_localizations.dart file လဲ ထွက်လာမှာဖြစ်ပါတယ်။

ကဲ.. ပြီးခါနီးပါပြီ။ main.dart ကိုဖွင့်လိုက်မယ်။ အဲ့ထဲမှာ MaterialApp widget ကို ခုလိုမျိုး update လုပ်လိုက်ပါမယ်။

import 'package:flutter/material.dart';
// Import generated app_localizations.dart
import 'package:flutter_gen/gen_l10n/app_localizations.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      localizationsDelegates: AppLocalizations.localizationsDelegates,
      supportedLocales: AppLocalizations.supportedLocales,
      locale: Locale('en'),
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

ဒါနဲ့အတူ default Text Widget ကိုလဲ localization အတွက် ပြုလုပ်ထားတဲ့ helloWorld ပြအောင် အခုလို ပြုလုပ်လို့ရပါတယ်။

Text(
  AppLocalizations.of(context).helloWorld,
),

ခုလို သတ်မှတ်ပြီးသွားရင် locale: Locale('en') ဒါမှမဟုတ် locale: Locale('my') စသဖြင့် ပြောင်းပြီးစမ်းကြည့်လို့ရပါပြီ။ တကယ်လို့ ကိုယ့် app setting ထဲကနေ ပြောင်းစေချင်တယ်ဆိုလဲ state management mechanism နဲ့ချိတ်ပြီး locale ကို update လုပ်ပေးပြီး ပြောင်းသွားလို့ရပါတယ်။

iOS အတွက်တော့ xcode ထဲမှာ ခုဖော်ပြမယ့် steps လေးတွေ ဖြည့်ပြီးလုပ်ပေးဖို့ လိုအပ်ပါတယ်။

# BLoC Pattern ဆိုတာဘာလဲ?

Arkar Min Tun — Mon, 23 Nov 2020 16:39:42 +0000

BLoC ဆိုတာ Business Logic Component ကိုအတိုချုံ့ ပြောထားတာဖြစ်တယ်။

သူရဲ့ အဓိက ရည်ရွယ်ချက်ကတော့ Application မှာပါတဲ့ Business Logic ကို

တခု (သို့) တခုထက်ပိုတဲ့ BLoC တွေဆီ ရွှေ့ထားဖို့
Presentation Layer (UI) မှာ ပါမနေစေဖို့
Stream အသုံးပြုပြီး input(sink), output(stream) တွေနဲ့သုံးဖို့
platform ပေါ်မှာ မှီခိုမှု မရှိအောင်
environment ပေါ်မှာ မှီခိုမှု မရှိအောင် လုပ်ထားတာဖြစ်တယ်

Widget တွေက event တွေကို sinks တွေကနေ BLoC ဆီပို့ပေးတယ်
Widget တွေက BLoC ရဲ့ stream ကနေတဆင့် notification ကို လက်ခံရရှိတယ်
Business Logic ကို UI က ဘာမှ သိနေဖို့ မလိုအပ်တော့ဘူး

Business Logic နဲ့ UI သပ်သပ်ဆီ ဖြစ်နေခြင်းအားဖြင့်

Business Logic မှာ ပြောင်းလဲမှုတွေ လုပ်ခြင်းက UI မှာ သက်ရောက်မှု တော်တော်လေး နည်းသွားမယ်
UI အပြောင်းအလဲလုပ်မယ်ဆို Business Logic တွေကို ထိိဖို့မလိုတော့ဘူး
Business Logic ကို test လုပ်ရတာ တော်တော်လေး လွယ်ကူသွားမယ်

Counter Application ကိုပဲ Bloc Pattern သုံးပြီး bloc_pattern: ^2.5.1 နဲ့ ရေးကြည့်မယ်ဆိုရင် ခုလိုမျိုး ထွက်လာမယ်။

import 'dart:async';
import 'package:bloc_pattern/bloc_pattern.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: BlocProvider(
        blocs: [Bloc((i) => IncrementBloc())],
        child: CounterPage(),
      ),
    );
  }
}

class CounterPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final bloc = BlocProvider.getBloc<IncrementBloc>();

    return Scaffold(
      appBar: AppBar(
        title: Text('Counter with Stream'),
      ),
      body: Center(
        child: StreamBuilder(
          stream: bloc.outCounter,
          initialData: 0,
          builder: (BuildContext context, AsyncSnapshot<int> snapshot) {
            return Text('You pressed me ${snapshot.data} times');
          },
        ),
      ),
      floatingActionButton: FloatingActionButton(
        child: Icon(Icons.add),
        onPressed: () {
          bloc.incrementCounter.add(null);
        },
      ),
    );
  }
}

class IncrementBloc extends BlocBase {
  int _counter;

  //
  // Stream to handle the counter
  //
  StreamController<int> _counterController = StreamController<int>();
  StreamSink<int> get _inAdd => _counterController.sink;
  Stream<int> get outCounter => _counterController.stream;

  //
  // Stream to handle the action on the counter
  //
  StreamController _actionController = StreamController();
  StreamSink get incrementCounter => _actionController.sink;

  //
  // Constructor
  //
  IncrementBloc() {
    _counter = 0;
    _actionController.stream.listen(_handleLogic);
  }

  void dispose() {
    _actionController.close();
    _counterController.close();
  }

  void _handleLogic(data) {
    _counter = _counter + 1;
    _inAdd.add(_counter);
  }
}

Seperation of Responsibilities

ကြည့်မယ်ဆို CounterPage ထဲမှာ business logic လုံးဝ ပါမနေတာ တွေ့ရမယ်။ သူ့မှာ ရှိတဲ့တာဝန်က counter ကိုပြဖို့၊ value အသစ်ပြောင်းတဲ့အခါ refresh လုပ်ပေးဖို့နဲ့ button ကို နှိပ်တဲ့အခါ action ကိုပို့ပေးဖို့ပဲ ရှိတော့တယ်။

Business Logic အကုန်ကလဲ IncrementBloc ထဲမှာ တစုတစည်းထဲဖြစ်သွားတယ်။ Business Logic ပြောင်းဖို့လိုမယ်ဆို တနေရာထဲမှာ ပြောင်းပေးလိုက်ရုံပဲ ဖြစ်သွားမယ်။

Testability

Business logic ကို test လုပ်ရတာလဲ ပိုမို လွယ်ကူသွားမယ်။ UI ကနေတဆင့် လုပ်နေစရာမလိုတော့ဘဲ IncrementBloc တခုကို test လုပ်ရုံနဲ့တင် ရသွားမယ်။

Freedom to organize the layout

Stream ကို အသုံးပြုထားတာ ဖြစ်တဲ့အတွက် layout တွေကို ကြိုက်သလိုအပြောင်းအလဲလုပ်ရင်တောင် business logic ကို ထိမှာမျိုး မပူရတော့ဘူး။ Application ရဲ့ ကြိုက်တဲ့နေရာကနေ action ကိုခေါ်ချင်ရင် incrementCounter သုံးပြီး ခေါ်လို့ရတယ်။ ပြချင်တယ်ဆိုရင်လဲ ကြိုက်တဲ့နေရာမှာ outCounter နဲ့ ပြလို့ရတယ်။

Reduction of the number of "build"s

setState() ကိုမသုံးဘဲ StreamBuilder ကိုသုံးခြင်းအားဖြင့် build လုပ်ရတဲ့ အကြိမ်အရေအတွက်ကို အများကြီး လျှော့ချပြီးသား ဖြစ်သွားတယ်။ တကယ်လိုအပ်တဲ့အချိန်မှပဲ ပြန်ပြီး build လုပ်ဖို့ လိုအပ်တယ်။ Performance ဘက်က ကြည့်မယ်ဆို ဒါဟာ ကြီးမားတဲ့ တိုးတက်မှုဖြစ်တယ်။

ဒါတွေအကုန် အလုပ်လုပ်ဖို့ဆို BLoC ကို နေရာတိုင်းက အသုံးပြုလို့ရနေဖို့လိုအပ်တယ်။ ဒီလိုလုပ်ထားဖို့ နည်းလမ်း (၃)ခုရှိတယ်။

global Singleton

ဒီနည်းလမ်းက သုံးလို့ရတယ်ဆိုပေမယ့် အသုံးပြုဖို့ မတိုက်တွန်းချင်ဘူး။ Dart မှာ class destructor မရှိတဲ့အတွက် resource ထဲကနေ သူ့ကို ပြန်ထုတ်လို့ ရမှာမဟုတ်ဘူး။

local instance

BLoC ကို local instance အနေနဲ့ လုပ်ပြီး သုံးလို့ရတယ်။ တချို့အခြေအနေမှာဆို ဒီလိုလုပ်ပေးတာ အသင့်တော်ဆုံးပဲ။ local instance အနေနဲ့သုံးမယ်ဆို StatefulWidget နဲ့သုံးဖို့ စဥ်းစားသင့်တယ်။ ဒီတော့မှ dispose() ထဲမှာ local instance ကို ပြန်ပြီး ဖျက်ပစ်လို့ရမယ်။

provided by an ancestor

အသုံးအများဆုံးနည်းလမ်းကတော့ ကိုယ်သုံးချင်တဲ့ Widget အထက်မှာရှိတဲ့ တခုခုကနေပြီးတော့ အသုံးပြုလို့ရအောင် လုပ်ပေးထားတာမျိုးဖြစ်တယ်။

import 'package:flutter/material.dart';

// Generic Interface for all BLoCs
abstract class BlocBase {
  void dispose();
}

// Generic BLoC Provider
class BlocProvider<T extends BlocBase> extends StatefulWidget {
  final T bloc;
  final Widget child;

  BlocProvider({
    Key key,
    @required this.child,
    @required this.bloc,
  }) : super(key: key);

  @override
  State<StatefulWidget> createState() => _BlocProviderState<T>();

  static T of<T extends BlocBase>(BuildContext context) {
    BlocProvider<T> provider =
        context.findAncestorWidgetOfExactType<BlocProvider<T>>();
    return provider.bloc;
  }
}

class _BlocProviderState<T> extends State<BlocProvider<BlocBase>> {
  @override
  void dispose() {
    widget.bloc.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return widget.child;
  }
}

bloc_pattern library သုံးထားတဲ့နေရာမှာ ခု bloc pattern ကို သုံးလို့ရပြီ။ ခုလိုရေးတာက ancestor ကနေတဆင့် ပို့ပေးတဲ့ နည်းလမ်းကို အသုံးပြုထားခြင်းဖြစ်တယ်။

import 'dart:async';
import 'package:flutter/material.dart';

import 'bloc.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: BlocProvider(
        bloc: IncrementBloc(),
        child: CounterPage(),
      ),
    );
  }
}

class CounterPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final bloc = BlocProvider.of<IncrementBloc>(context);

    return Scaffold(
      appBar: AppBar(
        title: Text('Counter with Stream'),
      ),
      body: Center(
        child: StreamBuilder(
          stream: bloc.outCounter,
          initialData: 0,
          builder: (BuildContext context, AsyncSnapshot<int> snapshot) {
            return Text('You pressed me ${snapshot.data} times');
          },
        ),
      ),
      floatingActionButton: FloatingActionButton(
        child: Icon(Icons.add),
        onPressed: () {
          bloc.incrementCounter.add(null);
        },
      ),
    );
  }
}

class IncrementBloc implements BlocBase {
  int _counter;

  //
  // Stream to handle the counter
  //
  StreamController<int> _counterController = StreamController<int>();
  StreamSink<int> get _inAdd => _counterController.sink;
  Stream<int> get outCounter => _counterController.stream;

  //
  // Stream to handle the action on the counter
  //
  StreamController _actionController = StreamController();
  StreamSink get incrementCounter => _actionController.sink;

  //
  // Constructor
  //
  IncrementBloc() {
    _counter = 0;
    _actionController.stream.listen(_handleLogic);
  }

  void dispose() {
    _actionController.close();
    _counterController.close();
  }

  void _handleLogic(data) {
    _counter = _counter + 1;
    _inAdd.add(_counter);
  }
}

BlocProvider ကို ဘယ်လို လုပ်သလဲဆို

home: BlocProvider(
  bloc: IncrementBloc(),
  child: CounterPage(),
),

ဒီနေရာမှာ provider တခုကို တည်ဆောက်ပြီး အဲ့ဒီ့ provider ကနေ ပို့ပေးမယ့် bloc (IncrementBloc) ကို တည်ဆောက်တယ်။ IncrementBloc() ကို သုံးမယ့် CounterPage() ကိုလဲ child ထဲမှာ တခါထဲ ကြေငြာသွားတယ်။

ဒီလို ကြေငြာပြီးတာနဲ့ BlocProvider အောက်မှာ ရှိတဲ့ sub-tree အကုန်လုံးကနေ ကြိုက်တဲ့နေရာမှာ IncrementBloc ကို ယူသုံးလို့ရပြီ။

BLoC တွေအများကြီးကို သုံးလို့ရသလားဆိုရင်တော့ ရတယ်လို့ပဲ ဖြေပေးရမယ်။ အသုံးပြုဖို့ တိုက်တွန်းချင်တဲ့ နေရာတွေကတော့

Business logic ရှိတယ်ဆိုတဲ့ page တိုင်းရဲ့ ထိပ်ဆုံးမှာ
Application State ကို handle လုပ်ဖို့ ApplicationBloc ဆိုပြီး သုံးတဲ့နေရာမှာ
Component တခုအနေနဲ့ အတိုင်းအတာတခုထိ ရှုပ်ထွေးလာပြီဆို သက်ဆိုင်ရာ BLoC သုံးပြီး လုပ်တဲ့နေရာတွေမှာ အသုံးပြုပေးပါ။

Stream ဆိုတာဘာလဲ?

Arkar Min Tun — Sun, 22 Nov 2020 18:45:22 +0000

Original Post: https://www.didierboelens.com/2018/08/reactive-programming-streams-bloc/

Stream ဆိုတာ အစွန်း၂ဖက်ပါတဲ့ ပိုက်လိုပဲ၊ တဖက်ကနေ ထည့်ပေးပြီး တဖက်က ပြန်ထွက်လာတာမျိုးပေါ့။ ပိုက်ကို ထိန်းချုပ်ပေးတာကကျတော့ StreamController လို့ခေါ်တယ်။ ဝင်ပေါက်ကို sink လို့သတ်မှတ်ပြီး ထွက်ပေါက်ကိုတော့ stream (S အသေး) နဲ့သတ်မှတ်တယ်။

Stream ထဲကနေ ကိုယ်ကြိုက်တာကို လက်ဆင့်ကမ်းပေးလို့ရတယ်။ value, event, object, collection, map, error ဒါမှမဟုတ် နောက်ထပ် Stream တခုကိုပါ လက်ဆင့်ကမ်းလို့ရတယ်။

Stream ထဲထည့်ပေးလိုက်တာကို သိချင်တယ်ဆို StreamController ကို listen လုပ်ပေးထားဖို့တော့လိုတယ်။

listener သတ်မှတ်လိုက်တဲ့အခါ StreamSubscription ဆိုတဲ့ object ကိုရလာတယ်။ ဒီ StreamSubscription object ကနေပဲ Stream ထဲမှာ တခုခုထည့်ပေးလိုက်တဲ့အခါ သိရမှာဖြစ်တယ်။

နားထောင်နေတဲ့ active listener တခုရှိပြီဆိုတာနဲ့ Stream ကနေပြီး event တွေစပြီး လွှင့်ပေးတယ်။ ဘယ်အချိန်တွေမှာ event ထုတ်လွှင့်သလဲဆို
၁ - stream ကနေပြီး data ထွက်ဖို့ရှိတဲ့အခါ
၂ - stream ကို error လှမ်းပို့လိုက်တဲ့အခါ
၃ - stream ပိတ်သွားတဲ့အခါ
အဲ့လိုအချိန်တွေမှာ event တွေကို ထုတ်လွှင့်ပေးတယ်။

StreamSubscription object ကိုသုံးပြီးတော့ Stream ကို နားထောင်တာ လုံးဝရပ်ဖို့၊ ခဏရပ်ဖို့၊ ဆက်နားထောင်ဖို့ ဒါတွေကို သတ်မှတ်ပေးလို့ရတယ်။

Stream ကို ပိုက်လိုမျိုးဆိုပြီး ပြောလို့ တဖက်ကဝင်လာတာ တစ်ဖက်က ထွက်သွားရုံပဲတော့ မဟုတ်ဘူး။ ဝင်လာတာတွေကို ပုံစံပြောင်းတာတွေလဲ လုပ်ပေးလို့ရတယ်။ ဒီလိုလုပ်ဖို့ဆိုရင်တော့ StreamTransformer ဆိုတာလိုအပ်လာပြီ။ StreamTransformer ရဲ့အလုပ်လုပ်ပုံက ရိုးရိုး function လိုမျိုးပဲ ဒါပေမယ့်သူက Stream ထဲဝင်လာတဲ့ data တွေကို ရယူပြီး အလုပ်လုပ်သွားတာဖြစ်တယ်။ သူထဲမှာ လိုအပ်တာတွေ ပြုလုပ်ပြီးရင် Stream အနေနဲ့ ပြန်ထွက်လာတယ်။ ဒါကြောင့် StreamTransformer တွေအများကြီးကို တခုပြီးတခု ဆင့်သုံးသွားလို့လဲ ရတယ်။ StreamTransformer တွေကို filtering, regrouping, modification, injection, buffering, processing တွေအပြင် အသုံးပြုလို့ရတာတွေ အများကြီး ရှိတယ်။

Stream အမျိုးအစား ၂ခုရှိတယ်။

Single-subscription Streams - ဒီအမျိုးအစားကတော့ Stream စတာကနေ ဆုံးတဲ့အချိန်ထိ listener တခုပဲ နားထောင်လို့ရတယ်။ ပထမနားထောင်နေတဲ့ listener ကိုရပ်ပြီး ပြန်နားထောင်မယ်ဆိုရင်တောင် မရတော့ဘူး။

Broadcast Streams - ဒီအမျိုးအစားကတော့ listener ကြိုက်သလောက် နားထောင်လို့ရတယ်။ listener စပြီးနားထောင်လိုက်တဲ့အချိန်ကစပြီး Stream ထဲမှာဖြစ်လာသမျှ event တွေကို လက်ခံရရှိမှာဖြစ်တယ်။

// Single-Subscription Stream
import 'dart:async';

void main() {
  final StreamController ctrl = new StreamController();
  final StreamSubscription subscription = ctrl.stream.listen((data) {
    print(data);
  });

  ctrl.sink.add('my name');
  ctrl.sink.add(1234);
  ctrl.sink.add({'a': 'Element A', 'b': 'Element B'});
  ctrl.sink.add(3.142);

  ctrl.close();
}

// Broadcast Stream with StreamTransformer
import 'dart:async';

void main() {
  final StreamController<int> ctrl = new StreamController<int>.broadcast();
  final StreamSubscription subscription = ctrl.stream
      .where((value) => value % 2 == 0)
      .listen((value) => print(value));

  for (var i = 0; i < 11; i++) {
    ctrl.sink.add(i);
  }

  ctrl.close();
}

React Introduction

Arkar Min Tun — Wed, 23 Sep 2020 04:26:11 +0000

React ဆိုတာ Frontend framework တွေထဲမှာ နာမည်အကြီးဆုံးတခုဖြစ်ပြီး Angular နဲ့ Vue တို့လိုမျိုး Component တွေနဲ့ frontend ကိုတည်ဆောက်တဲ့ နည်းပညာတစ်ခုပဲဖြစ်ပါတယ်။ ပုံမှန်နည်းလမ်းအရ web development လုပ်တယ်ဆို user က request လုပ်တဲ့အချိန် html, css, javascript files တွေကို response ပြန်ပေးပြီး browser က ရလာတဲ့ file တွေကို ပြပေးတာပဲ ဖြစ်ပါတယ်။ အဲ့လိုလုပ်တဲ့အခါ ဘာဖြစ်သလဲဆို အသစ်တခုခေါ်တိုင်း server ကို request ပို့၊ server ကနေ အဲ့ဒါကို html, css, javascript တွေနဲ့ပေါင်းပြီး response ပြန်ပေး၊ ပြီးရင် ရလာတဲ့ page တစ်ခုလုံးကို ပြန်ပြဖို့လုပ် အဲ့လိုမျိုး အကြိမ်တိုင်း လုပ်ပေးရပါတယ်။ react ကို သုံးခြင်းအားဖြင့် အဲ့လို server ကို အကြိမ်ကြိမ်ခေါ်၊ page ကို အကြိမ်ကြိမ်ပြန်ပြတာမျိုး လုပ်စရာမလိုတော့ပဲ website ရဲ့ လိုအပ်တဲ့နေရာတွေကိုပဲ ပြောင်းနိုင် ပြင်နိုင်တာမျိုး လုပ်သွားနိုင်တယ်။ Single Page Application လို့လဲ ခေါ်ကြတယ်။ ဘာလို့လဲဆိုတော့ website ပေါ်မှာဖြစ်နေတာတွေအားလုံးဟာ ထပ်ပြီး refresh လုပ်တာမျိုးမရှိဘဲ single page အတွင်းမှာပဲ အပြောင်းအလဲတွေ ဖြစ်နေတာမျိုးကြောင့်ပါ။

အဲ့ဒါဆို react ကို စပြီးလေ့လာကြည့်ရအောင်ပါ။ React ကိုလေ့လာမယ်ဆို သူနဲ့ဆက်စပ်ပြီး သိထားသင့်တဲ့ နည်းပညာတွေကတော့ Node, NPM နဲ့ Terminal တွေပါ။

Node ဆိုတာ JavaScript Runtime ဖြစ်ပြီး ဆိုလိုတာက JavaScript ကို browser ထဲမှာတင်မဟုတ်ဘဲ တခြားနေရာတွေမှာပါ အသုံးချလို့ရအောင် ပြုလုပ်ထားတဲ့ နည်းပညာပဲ ဖြစ်ပါတယ်။
npm ဆိုတာ Node Package Manager ဖြစ်ပြီး application တွေ development လုပ်တဲ့အချိန်မှာ လိုအပ်တဲ့ library တွေ၊ Package တွေကို စုစည်းထားပေးတဲ့ source ကြီးပဲဖြစ်ပါတယ်။ Node installation ပြီးတဲ့အခါ npm command ကိုပါ သုံးနိုင်ပါပြီ။ သပ်သပ် install လုပ်ပေးဖို့ မလိုပါဘူး။
Terminal ကတော့ code တွေရေးပြီး run ဖို့လိုအပ်ပါတယ်။ Visual Studio Code အသုံးပြုတယ်ဆိုရင်တော့ code editor ထဲမှာ အသင့်ပါပြီးသား terminal ကိုလဲ အသုံးပြုနိုင်ပါတယ်။

စက်ထဲမှာ node နဲ့ npm သွင်းပြီးမပြီးနဲ့ လက်ရှိ version ကို ဖော်ပြထားတဲ့ command တွေနဲ့ စစ်ကြည့်လို့ရပါတယ်။

node --version

npm --version

React Project တခု စလုပ်တော့မယ်ဆို ကိုယ်တိုင် file တွေကို နေရာချတာ၊ configuration တွေလုပ်တာတို့ လုပ်နိုင်သလို create-react-app ဆိုတဲ့ command နဲ့လဲ အဆင့်သင့် development စလုပ်နိုင်တဲ့၊ လိုအပ်တဲ့ configuration တွေပြင်ဆင်ပြီးသားဖြစ်တဲ့ project တခုကို ပြုလုပ်နိုင်ပါတယ်။

npx create-react-app sample-app

npx ဆိုတာ Node install လုပ်တဲ့အခါ အတူပါလာတဲ့ npm ရဲ့ အစိတ်အပိုင်းတခုပဲဖြစ်ပါတယ်။ တခုသတိပြုရမှာက npx က npm version 5.2 နောက်ပိုင်းမှာမှ ပါလာတဲ့အတွက် အဲ့ထက်ဟောင်းတဲ့ version သုံးနေတယ်ဆိုရင်တော့ npx command ကိုအသုံးပြုနိုင်မှာမဟုတ်ပါဘူး။

Command ကို terminal မှာ run ပြီးရင် နည်းနည်းတော့ စောင့်ရတယ်။ Happy Hacking! ဆိုတာပေါ်လာပြီး terminal prompt ပြန်ပြောင်းသွားပြီဆိုရင်တော့ react project တခုကို initialize ပြုလုပ်ပြီးပါပြီ။

npm run start

react project ကို စပြီး run ပေးတဲ့ command ဖြစ်ပါတယ်။ ဒီ command ကို run လိုက်တဲ့အခါ localhost:3000 မှာ ခုလိုပေါ်လာရင် react setup အောင်မြင်ပြီပဲဖြစ်ပါတယ်။

SafeArea Widget (Widget of the week)

Arkar Min Tun — Fri, 29 May 2020 21:03:42 +0000

SafeArea Widget ဆိုတာဘာလဲ?

ခုနောက်ပိုင်းထွက်လာတဲ့ ဖုန်းတွေမှာ အရင်ကလိုမျိုး screen က လေးထောင့်ကျမနေတော့ဘူး။ ဘောင်တွေက အကွေးတွေဖြစ်လာပြီး အပေါ်အောက် notch တွေပါလာတယ်။ တကယ်လို့ app ရေးတဲ့အခါ အဲ့လိုမျိုးတွေကို သတိမထားတဲ့အခါ ကိုယ့်ပြချင်တဲ့ content တွေ၊ user action တွေအတွက် button တွေဟာ ကြည့်မရ၊ နှိပ်မရနဲ့ user experience ကို အများကြီး အနှောင့်အယှက်ဖြစ်လာနိုင်တယ်။

အဲ့အတွက် flutter မှာ SafeArea ဆိုတဲ့ widget ကိုသုံးပြီး အလွယ်တကူ အဲ့လိုပြဿနာတွေကို ရှောင်ရှားနိုင်ပါတယ်။

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: RaisedButton(
        child: Text("Click me"),
        onPressed: (){},
      ),
    );
  }
}

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: RaisedButton(
          child: Text("Click me"),
          onPressed: (){},
        ),
      ),
    );
  }
}

တကယ်လို့ကိုယ်က default ပေးထားသလို အပေါ်အောက် သူ့ဘာသာ detact လုပ်တာမျိုးမဟုတ်ဘဲ အပေါ်ကိုပဲ သတ်မှတ်ချင်တယ် အောက်ကိုပဲသတ်မှတ်ချင်တယ်ဆိုရင် top, bottom စတဲ့ သက်ဆိုင်ရာ ဘက်အခြမ်းကိုပဲ သတ်မှတ်ပေးလို့ရတယ်။ သူ့ minimum value တွေကို မကြိုက်ဘူးဆိုလဲ ကိုယ့်ဘာသာ minimum ဆိုပြီး သတ်မှတ်လို့ရပါတယ်။

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        top: true,
        bottom: false,
        minimum: EdgeInsets.all(32),
        child: RaisedButton(
          child: Text("Click me"),
          onPressed: (){},
        ),
      ),
    );
  }
}

Oculus Quest Not showing up on PC

Arkar Min Tun — Mon, 24 Feb 2020 15:51:53 +0000

If your Oculus Quest not showing up on your PC or Mac, don't worry. It's not a big deal. Just type adb devices and permission panel will show up in your Headset. Press Allow Button inside headset. That's it.

You don't have to turn off developer option for accessing the files on your quest. Some people might say to turn this option off, but you don't have to do that.

How to make the label Panel scrollable for Addressables (Unity)

Arkar Min Tun — Thu, 20 Feb 2020 01:37:37 +0000

When it comes to asset management in unity with addressable, labels play quite an important role. You can load assets from remote server using the label as a handle. But in current version of addressable (1.6 at the time of writing), labels can't be managed well due to the limitations of panel size and lack of scrolling. In this tutorial I will show simple steps to make the label panel scrollable.

Step 1

Find the LabelWindow.cs in the addressable package

Step 2

Add Vector2 scroll position to given places

And that's it. It's that simple.

Unity UI System ဆိုတာဘာလဲ

Arkar Min Tun — Sun, 29 Dec 2019 04:39:28 +0000

အခုတခါမှာတော့ Unity မှာ User Interface (UI) ကို ဘယ်လိုဆောက်သလဲ ကြည့်ရအောင်။

UI တစ်ခုဆောက်တော့မယ်ဆို အရင်ဆုံး Canvas တခုလိုအပ်တယ်။ ပုံဆွဲသလိုပဲပေါ့။ Canvas ပေါ်မှာ ကိုယ်လိုချင်တာတွေကို တခုပြီးတခု ဆွဲသွားရတာ။ တကယ်လို့ Button ဖြစ်စေ၊ Text ဖြစ်စေ UI Component တခုခုက Canvas ရဲ့ child အနေနဲ့ ရှိမနေရင် UI ပေါ်မှာ ပေါ်လာမှာ မဟုတ်ပါဘူး။

စစချင်း Unity ကိုလုပ်မယ့်သူတွေအတွက်ဆို UI အောက်မှာပါတဲ့ Text တို့၊ Button တို့၊ Dropdown တို့၊ TextInput တို့မှာ နှစ်ခုစီဖြစ်နေတာ နည်းနည်း confusing ဖြစ်တတ်တယ်။ ဘယ်နေရာမှာ ဘယ်ဟာသုံးမလဲပေါ့။

နောက်မှာ ဘာမှမပါတဲ့ Text တို့၊ Button တို့ဆိုတာ အရင်ထဲကပါတဲ့ဟာတွေဖြစ်ပြီး TextMeshPro ဆိုတဲ့စာပါတာတွေက နောက်ပိုင်းမှာ အသစ်ထည့်လိုက်တဲ့ဟာတွေပါ။ ဘာကွာသလဲဆိုတော့ TextMeshPro ပါတဲ့ Components တွေကပိုပြီး Customize လုပ်လို့ရလာတယ်၊ Screen မှာပေါ်တဲ့အခါလဲ ဝါးတာမှုန်တာတွေ မဖြစ်အောင် ပိုပြီး လုပ်ရလွယ်သွားတယ်။

UI အောက်မှာ ပါတဲ့ Component တွေကို အကြမ်းဖျင်း ကြည့်ကြည့်ရအောင်...

Text

စာတွေဖော်ပြချင်တဲ့အခါသုံးတယ်။

Text - TextMeshPro

စာတွေဖော်ပြချင်တဲ့အခါသုံးတယ်။ ရိုးရိုး Text ထက်ပိုပြီး Customize လုပ်လို့ရတယ်။

Image

Sprite ပုံတွေ ပြချင်တဲ့အခါသုံးတယ်။ ပြတဲ့အခါ ပုံစံအမျိုးမျိုး လိုအပ်သလို customize လုပ်လို့ရတယ်။

RawImage

Texture ပုံတွေ ပြချင်တဲ့အခါသုံးတယ်။

Button

User နှိပ်ဖို့ Button တွေအတွက်သုံးတယ်။

Button - TextMeshPro

Button မှာပေါ်တဲ့စာကို ပိုပြီး Customize လုပ်နိုင်တယ်။

Toggle

On/Off အနေနဲ့ သတ်မှတ်တာတွေ လုပ်ချင်တဲ့အခါသုံးတယ်။

Slider

Value တွေကို Maximum နဲ့ Minimum နှစ်ခုကြားမှာ ရွေးစေချင်တဲ့အခါ သုံးတယ်။

Scrollbar

တခုထဲသုံးတာထက် ScrollView ထဲမှာ ထည့်သုံးလေ့ရှိတယ်။ ဘယ်ညာ အပေါ်အောက် Scroll လုပ်တာလုပ်ဖို့သုံးတယ်။

Dropdown

နာမည်မှာပြထားတဲ့အတိုင်းပဲ User တွေကို ရွေးချယ်ဖို့ Option တွေပြချင်တဲ့အခါသုံးတယ်။

Dropdown - TextMeshPro

InputField

User ဆီက နာမည်တို့၊ emailတို့ စသဖြင့် သူတို့ကို ရိုက်ထည့်စေချင်တဲ့အခါ သုံးတယ်။

InputField - TextMeshPro

Canvas

UI Components တွေပြဖို့ မရှိမဖြစ်လိုအပ်တဲ့ Component တခုဖြစ်တယ်။

Panel

UI Components တွေကို သပ်သပ်စီ စုထားချင်တဲ့အခါ သုံးတယ်။ ဥပမာ Button တခုကိုနှိပ်လိုက်ရင် alert box တပ်လာသလိုပေါ့။

ScrollView

Contents ပြစရာများတဲ့အခါ Scroll လို့ရတဲ့ View တခုအနေနဲ့ ပြချင်တဲ့အခါသုံးတယ်။

EventSystem

UI တွေကို နှိပ်လို့ ရွှေ့လို့ရအောင်လုပ်ဖို့ နောက်ကွယ်ကနေ handle လုပ်ပေးနေတဲ့ EventSystem ဖြစ်တယ်။

Unity ဖြင့် Game Development စတင်ခြင်း

Arkar Min Tun — Fri, 27 Dec 2019 18:12:58 +0000

Installation

Unity Game Development စလုပ်တော့မယ်ဆို ပထမဆုံး Unity Engine ကို သွင်းထားဖို့ လိုပါလိမ့်မယ်။ Unity Engine ကို Download ဆွဲဖို့အတွက် Link ကိုသွားပါ။

Unity Home Page က မကြာခဏ Design ပြောင်းတာဖြစ်တဲ့အတွက် အခုပြထားတဲ့ပုံ မဟုတ်တော့တာလဲ ဖြစ်နိုင်ပါတယ်။

ညာဘက် အပေါ်ဒေါင့်မှာ ရှိတဲ့ Profile ပုံကိုနှိပ်ပြီး Create a Unity ID ကိုရွေးပြီး Account အသစ် Create လုပ်ပါ။ အခုမလုပ်လဲ Unity Hub သွင်းပြီးရင် လုပ်ရမှာဖြစ်တဲ့အတွက် အခုတခါထဲ လုပ်ထားလိုက်ပါ။

Account Create လုပ်ပြီး Login လုပ်ပြီးသွားတဲ့အခါ Get Start ကိုနှိပ်ပါ။ အခုဖော်ပြထားတဲ့ Page ကိုရောက်သွားပါလိမ့်မယ်။

တစ်ကိုယ်ရည်သုံးမှာဖြစ်တဲ့အတွက် Individual Tab ကိုရွေးလိုက်ပြီး Free ကိုနှိပ်လိုက်ပါ။ အကယ်၍ကိုယ့်မှာ team ရှိပြီး Commercially အရ သတ်မှတ်ချက်ပြည့်မှီရင် Plus License, Pro License စသဖြင့် ဝယ်ပြီး သုံးရမှာ ဖြစ်ပါတယ်။

ကိုယ်က Unity ကိုအရင်ကသုံးဖူးလားမေးတာဖြစ်ပါတယ်။ ဘယ် Option ရွေးရွေး Unity Hub Installer ကို Download လုပ်လို့ရမှာဖြစ်ပါတယ်။

Unity Hub ဆိုတာ Unity Engine Version တွေကို အလွယ်တကူ စီမံနိုင်ဖို့၊ လေ့လာလို့ရမယ့် resource တွေကို တစုတစည်းထဲ ကြည့်လို့ရအောင် စုထားပေးဖို့၊ ကိုယ့် project တွေကို အလွယ်တကူ တနေရာထဲမှာ ကြည့်လို့ရအောင် လုပ်ထားပေးတာပဲ ဖြစ်ပါတယ်။ ဒါမရှိခင် အရင်ကဆို Unity Project တွေ စက်ထဲမှာ ပြန့်ကျဲနေပြီး project တွေဖွင့်တဲအခါလဲ အဆင်မပြေ အရမ်းဖြစ်ခဲ့ရတယ်။

Installation ပြီးတဲ့အခါ Unity Hub ကိုဖွင့်လိုက်ပါ။ ရှေ့မှာ create လုပ်ထားတဲ့ Account နဲ့ login ဝင်လိုက်ပါ။ ပြီးရင် Profile Icon ဘေးက Gear Icon ကိုနှိပ်ပြီး License Management ကို နှိပ်လိုက်ပါ။ Free သုံးရင်တောင် Unity Personal License ရှိမှ အဆင်ပြေမှာဖြစ်တဲ့အတွက် License ကို activate လုပ်လိုက်ပါ။

License Activation ပြီးပြီဆိုရင် ရှေ့ကို ပြန်သွားပြီး Unity မှာ ပါတဲ့ Tab တွေကို ကြည့်ရအောင်။

Projects - လက်ရှိ ကိုယ်လုပ်နေတဲ့ Projects တွေကို တစုတစည်းထဲ ကြည့်ဖို့
Learn - Unity လေ့လာရာမှာ လွယ်ကူအောင် လုပ်ထားပေးတဲ့ Sample Projects တွေကြည့်ဖို့
Install - မတူညီတဲ့ Unity Engine Version တွေကို အလွယ်တကူ Install/Uninstall လုပ်နိုင်ဖို့

Unity ရဲ့ Development Cycle ကိုပြောရမယ်ဆို သူ့မှာ Alpha, Beta, Final နဲ့ LTS (Long Term Support) ဆိုပြီး ခွဲကြည့်လို့ရပါတယ်။ နှစ်အလိုက်ထုတ်တဲ့ Version တွေကို ခွဲခြားသိနိုင်ဖို့ ခုနှစ်ကို ရှေ့ဆုံးမှာ ထည့်ထားလေ့ရှိတယ်။ ဥပမာ - 2020.1.0a17 ဆိုရင် 2020 Unity Version ရဲ့ ပထမဆုံး ဖြစ်မယ့် 1.0 ကို alpha version အနေနဲ့ 17 ကြိမ်မြောက်ထုတ်ထားတာပဲ ဖြစ်ပါတယ်။

Unity 2019.3 မှာတော့ Unity က UI System တခုလုံးကို ပြန်လည်ပြင်ဆင်ထားတာဖြစ်တဲ့အတွက် အရင် Unity Version တွေနဲ့မတူတော့ပါဘူး။ ပြီးတော့ ပြောင်းလဲမှုတွေလဲ များစွာ ပြုလုပ်ထားတာဖြစ်တဲ့အတွက် ယခုလက်ရှိမှာတော့ Final Version ထွက်ပေမယ့် Bug အနည်းနဲ့အများ ရှိသေးတာဖြစ်တဲ့အတွက် 2019.3 မတိုင်ခင် ထွက်တဲ့ 2019.2 နောက်ဆုံး Version ကိုသွင်းလိုက်ပါမယ်။ အကယ်၍ပိုပြီး stable ဖြစ်တဲ့ version သုံးချင်ရင်တော့ LTS Version တွေသုံးနိုင်ပါတယ်။ တခြား Unity Version တွေတခုပြီးတခု အသစ်ထွက်ရင်တောင် LTS Version ကိုတော့ Unity က ၂နှစ်တိတိ support ပေးပါတယ်။

Unity Engine သွင်းတဲ့အခါ အောက်မှာပြထားသလို panel ပေါ်လာတဲ့အခါ အကုန်လုံး လိုက်သွင်းဖို့ မလိုပါဘူး။ ကိုယ်က Android အတွက် Application လုပ်မယ်ဆို Android နဲ့ဆိုင်တဲ့ Module တွေပဲ သွင်းပေးဖို့လိုပါမယ်။ အကယ်၍ ကိုယ်က iOS အတွက်လုပ်မယ်ဆို iOS Module သွင်းဖို့လိုပါမယ်။ Unity Engine နဲ့လုပ်ထားတဲ့ app တွေကို Android, iOS စတဲ့ platform မျိုးစုံမှာ Run လို့ရပါတယ်။

Android Module သွင်းတဲ့အခါ သတိပြုဖို့ တချက်က Android Build Support ကို Check လုပ်ထားရင်တောင် သူ့အောက်မှာရှိတဲ့ Android JDK & NDK Tools နဲ့ OpenJDK တို့ကို Check လုပ်ထားတာ ဖြစ်မှာမဟုတ်ပါဘူး။ Expand လုပ်ပြီး manually check လုပ်ပေးမှ Install လုပ်တဲ့အချိန် ပါလာမှာဖြစ်ပါတယ်။

Installation လုပ်တဲ့အချိိန်ဟာ Connection ပေါ်မူတည်ပြီး နှေးတာမြန်တာ ရှိသလို အကယ်၍ down နေတုန်း လိုင်းပြတ်သွားခဲ့ရင် သွင်းတာတွေအကုန် အစကပြန်စမှာဖြစ်တဲ့အတွက် တခုချင်းဆီ သွင်းသွားတာက ပိုပြီး စိတ်ချရပါတယ်။ အကယ်၍ လိုင်းပြတ်သွားခဲ့ရင်တောင် အစက ပြန်ပြီး သွင်းစရာလိုမှာ မဟုတ်တော့ဘူးပေါ့။

Unity Version တခု Install လုပ်ပြီးရင်တော့ Unity Development စတင်လို့ရပါပြီ။