System

Usage of Justinmind Prototyper (Part-2)

မဂၤလာပါရွင္႔။
ကၽြန္မကေတာ႔ Spiceworks Myanmarတြင္ Web Developerအျဖစ္ ဝင္ေရာက္လုပ္ကိုင္လ်က္ရွိေသာ မခင္ပြင္႔ျဖဴခိုင္ ျဖစ္ပါတယ္။ ၿပီးခဲ႔ေသာ တစ္ပတ္မွာေတာ႔ Justinmind Prototyper အေၾကာင္းအရာေလးကို Introduction 1 အေနျဖင္႔ မိတ္ဆက္ေပးခဲ႔ၿပီး အခုတစ္ပတ္မွာေတာ႔ ထပ္မံၿပီး ၎၏ အသံုးျပဳပံုေလးကို ဆက္လက္ရွင္းျပေပးခ်င္ပါတယ္။ အသံုးျပဳမယ္႔သူေတြဟာ Justinmind Prototyper ေလးကို Install တင္ဖို႔ေတာ႔ လိုအပ္ပါတယ္။ Install တင္ရန္ ေအာက္ပါလင္ခ္႔တြင္ ဝင္ေရာက္ Download ႏိုင္ပါတယ္။
https://www.justinmind.com
ဒါဆိုရင္ အတူတူ Justinmind Prototyper ေလး၏ အသံုးျပဳနည္းကို ေလ့လာၾကည့္ၾကရေအာင္။

Justinmind Prototyper Software ေလးကို ဖြင္႔လိုက္မယ္ဆိုလွ်င္ New, Open, Learn ဆိုၿပီး စတင္ေတြ႔ရပါမည္။ New ကေတာ႔ မိမိကအသစ္ create လုပ္မယ္ဆိုရင္ ေရြးရတာပါ။ Openကေတာ႔ ရွိၿပီးသားဖိုင္ႏွင္႔ Share လုပ္ေပးထားေသာ ဖိုင္မ်ားအတြက္ပါ။ Learn ကေတာ႔ မိမိတို႔ ေလ႔လာလို႔ရေအာင္ ရွင္းျပေပးထားပါတယ္။

ပံု (၁) Home Page

ပထမဆံုး Prototype ေလးတစ္ခုကို စတင္ create လိုက္ၾကရေအာင္။ မိမိတို႔က ဘယ္Device အမ်ိဳးအစားကို ေရြးခ်င္လဲ။ Webလား။ iPhone လား။ iPadလား။ Android Phone အတြက္လား။ Android Tablet အတြက္လား။ ဒါမွမဟုတ္ Custom create လုပ္ခ်င္ရင္လည္းေရြးခ်ယ္လို႔ရတယ္။

ပံု (၂) Select Device

ေရြးခ်ယ္ၿပီးၿပီဆိုတာနဲ႔ ေနာက္တစ္ဆင္႔အေနနဲ႔ေတာ႔ မိမိေရြးခ်ယ္လိုက္ေသာ Device ေပၚမူတည္ၿပီး အနည္းငယ္ ကြာဟမွဳ ရွိတယ္။ မိမိက iPhone ႏွင္႔ iPad ကို ေရြးခ်ယ္ပါက Portrait (or) Landscape သတ္မွတ္လို႔ရတယ္။ Width and Height ကိုေတာ႔ သတ္မွတ္လို႔မရပါဘူး။ Web, Android Phone, Android Tablet ႏွင္႔ Custom ေတြကေတာ႔ Width and Height ကို မိမိလိုသေလာက္ သတ္မွတ္ေပးလို႔ရပါတယ္။ Background Image ကိုေတာ႔ Device အားလံုးမွာ အသံုးျပဳလို႔ ရပါတယ္။ Prototype တစ္ခုမွာ screen အမ်ားၾကီး Create လုပ္ေပးလို႔ရပါတယ္။ အဲScreenမွာ အသင္႔ရွိၿပီးသား Widgets Libraries ေတြကိုအသံုးျပဳလို႔ရတယ္။ Eventsေတြ Propertiesေတြ Data Masters စသည္႔တိို႔ကို အသံုးျပဳႏိုင္ပါတယ္။

ဆက္လက္ၿပီး Eventေတြနဲ႔ အသံုးျပဳပံုကို ေလ႔လာၾကည္႔ၾကရေအာင္။

ကၽြန္မအေနျဖင္႔ iPhone Device ကိုေရြးခ်ယ္ၿပီး သံုးျပခ်င္ပါတယ္။ ဥပမာေလးကေတာ႔ ရိုးရွင္းပါတယ္။ မိမိ၏ mailကိုဝင္ၾကည္႔တဲ႔ နမူနာေလးပါ။ ပထမဆံုးအေနျဖင္႔ Prototypeတစ္ခုကို create လုပ္လိုက္မယ္ဆိုရင္ ပံု(၃)ကဲ႔သို႔ Screen တစ္ခုထြက္လာပါတယ္။

ပံု (၃) Create Prototype

Widgets ေအာက္မွာရွိေသာ components တစ္ခုခ်င္းစီ ကို အသံုုးျပဳၿပီး Design ဆြဲႏိုင္ပါတယ္။ ကိုယ္လိုခ်င္ေသာ iconတစ္ခုကို ေတြ႔ပါက အဲဒီiconကို Dragဆြဲၿပီး Screenေပၚတြင္ မိမိထားခ်င္ေသာေနရာတြင္ Mouse ကို လႊတ္လိုက္ပါ။ ထို႔အျပင္ အသင္႔ဖန္တီးေပးထားေသာ screen examplesေတြလည္း ရွိပါတယ္။ အဲဒါေတြကေတာ႔ အနည္းငယ္ပဲရွိပါတယ္။ မိမိအတြက္ ကိုက္ညီမယ္ဆို အသံုးျပဳလို႔ရပါတယ္။ ကၽြန္မကေတာ႔ emailကို Sign in ဝင္မွာျဖစ္တဲ႔အတြက္ အသင္႔ရွိၿပီးသားကုိပဲ ယူသံုးပါမည္။ Screen 1တြင္ Sign In ဝင္ရန္အတြက္ page ကို ေရးဆြဲထားပါသည္။

ပံု (၄) Sign In Page

အဲ႔ဒီေနာက္ Sign In ဝင္လွ်င္ ေရာက္မည္႔ page ကို Createလုပ္ေပးရန္ လိုအပ္ပါတယ္။ ထို႔အတြက္ေၾကာင္႔ File->New->Screen ကိုေရြးခ်ယ္ၿပီး Screen 2 ဆိုတဲ႔ Page အသစ္တစ္ခု တည္ေဆာက္လုိက္ပါတယ္။ အဲဒီScreen 2မွာ ေရာက္ေနေသာ Mailေတြအတြက္ Design တစ္ခု ဆြဲလိုက္ပါတယ္။

ပံု (၅) Mail List Page

screen 1 ႏွင္႔ 2 ကို ဖန္တီးၿပီးၿပီဆိုေတာ႔ Eventsေတြကို အသံုးျပဳပါမည္။ မိမိလုပ္ေဆာင္ေစခ်င္ေသာ button ဒါမွမဟုတ္ input boxကို ပထမဆံုးႏွိပ္ၿပီး အသံုးျပဳသူ၏ ညာဘက္အေပၚမွာရွိေသာ Events ေခါင္းစဥ္ေအာက္က Add Event ေလးကို နွိပ္လိုက္ပါ။ နွိပ္လိုက္လွ်င္ ပံု(၆)လိုမ်ိဳးေပၚလာလိမ္႔မည္။

ပံု (၆) After Clicking Add Event

Event တြင္ မိမိအသံုးျပဳလို႔ေသာ function ေတြကို ေရြးခ်ယ္ၿပီး လိုသလိုအသံုးျပဳႏိုင္ပါတယ္။ မိမိအသံုးျပဳမည္႔ function အလိုက္ အဆင္႔ဆင္႔ ကြာျခားသြားပါမည္။ ပံု၏ပထမ Selectbox ေလးကေတာ႔ မိမိျပဳလုပ္မယ္႔ Action ျဖစ္ၿပီး ဒုတိယ Select Box ေလးကေတာ႔ ေျပာင္းလဲသြားမယ္ Action ျဖစ္ပါတယ္။ Event ေတြကို ထည္႔ၿပီးၿပီဆိုရင္ မိမိျမင္သာေအာင္ Run ၾကည္႔လို႔ရပါတယ္။ ဘယ္လို Run မလဲဆိုရင္ ညာဘက္အေပၚထိပ္ေလးတြင္ အစိမ္းေရာင္ေလးေထာင္႔ကြက္ေလးနဲ႔ Simulateဆိုေသာ စာသားေလးကို ႏွိပ္လိုက္လွ်င္ မိမိလုပ္ထားေသာ Project၏ အေျဖကို ျမင္ႏိုင္ပါတယ္။ ပံု(၇) ကေန email ႏွင္႔ password ကိုထည္႔ၿပီး Sign In ဝင္လိုက္ပါက ပံု(၈) သို႔ေရာက္ရွိသြားပါမည္။ အေျဖမ်ားကိုေတာ႔ ေအာက္ေဖာ္ျပပါ ပံုတြင္တစ္ဆင္႔ ၾကည္႔ရႈေပးပါေနာ္။

ပံု (၇) Result 1
ပံု (၈) Result 2

အထက္တြင္ လုပ္ျပခဲ႔ေသာ နမူနာသည္ Justinmind Prototyper၏ Event ကိုသံုးၿပီး ေျပာျပျခင္းသာ ျဖစ္ပါတယ္။ ေနာက္တစ္ပတ္မွာေတာ႔ ၎၏ Event မ်ားတည္းက တစ္ခုျဖစ္သည္႔ Data Master အေၾကာင္းကို နမူနာနဲ႔တကြ ဆက္လက္ရွင္းျပေပးမည္ ျဖစ္ပါသျဖင္႔ ဆက္လက္ ေစာင္႔ေမွ်ာ္ဖတ္ရႈေပးပါဦးေနာ္။ အခုလို အခ်ိန္အနည္းငယ္ေပးၿပီး ဖတ္ရႈေပးတဲ႔အတြက္ ေက်းဇူးတင္ပါတယ္။ ေနာက္တစ္ပတ္မွ ျပန္လည္ဆံုေတြ႔ၾကမယ္ေနာ္၊၊ သာယာေသာေန႔ေလး ျဖစ္ပါေစ။

Hello

Leave a Reply

Your email address will not be published. Required fields are marked *