توسعه اپلیکیشن های هیبریدی

توسعه اپلیکیشن های هیبریدی با استفاده از رابط کاربری Onsen و کمک Monaca IDE

امروزه استفاده از یک اپلیکیشن تلفن همراه برای شرکتهایی که میخواهند از حضور قدرتمند در یک بازار پر چالش مطمئن باشن، بسیار ضروری می‌باشد. سیستم‌عاملهای گوناگون زیادی برای تلفن‌های همراه با ویژگی‌های کاربری خاص خود در بازار وجود دارند. توسعه برنامه‌های کاربردی بصورت جداگانه برای هریک از این سیستم‌عامل‌ها، به مقدار زیادی منابع هم از نظر وقت و هم از نظر هزینه نیاز دارد.

از این رو بسیاری از شرکتها بسمت پلت‌فرم‌های چندسکویی یا cross-platform(برنامه‌هایی که قابلیت اجرا در چندین پلت‌فرم را دارند) برای توسعه برنامه‌های موبایل کشیده شدند. رابط کاربری Onsen عبارت از فریم‌ورکی است که امکان توسعه چنین برنامه‌هایی را فراهم مینماید.برنامه‌های موبایل تحت پلت‌فرم‌های چندسکویی، می‌توانند با داشتن یک کد پایه یکسان، روی چندین سیستم‌عامل کارکنند.

دو نوع برنامه‌ تحت پلتفرم چندسکویی وجود دارد:

– برنامه های پلت فرم چندسکویی بومی یا Native:
اکثر سیستم عاملهای موبایل‌ها SDKهای (کیت توسعه نرم افزار) مربوط به خودشان را دارند. این‌ها روی زبان‌های برنامه نویسی خاصی کار می‌کنند برای مثال طراحان اندروید زبان جاوا را ترجیح می دهند در حالیکه طراحانی که روی IOS کار میکنند زبانهای Objective C وSwift را ترجیح می‌دهند. در توسعه برنامه‌ها تحت پلتفرم چندسکویی ما از API‌های ارائه شده native SDK در زبان‌های برنامه نویسی دیگر استفاده می‌کنیم که توسط تامین‌کنندگان دیگر پشتیبانی نشده‌اند. با کد apiی یکدست، کدی که به زبان برنامه نویسی خاصی نوشته شده می‌تواند روی چندین پلتفرم چندسکویی کار کند و بدین شکل نحوه کارکرد کدهای محلی برروی پلتفرم‌های چندسکویی را نشان می‌دهند.
در این روش app‌های نهایی هنوز از همان api‌های محلی استفاده می‌کند و تقریبا کارشان را با راندمان app‌های محلی انجام میدهند.
امروزه GUI نقش مهمی در توسعه برنامه‌های موبایل دارد تا حدودی پیاده سازی GUI‌های سرشار از ویژگی‌ها با استفاده از APP‌های یکدست(UNIFIED)در برنامه‌های پلتفرم چندسکویی کار پیچیده و سختی است.
به این دلیل طراحان برنامه‌های پلتفرم چندسکویی هیبریدی HTML5 را ترجیح می‌دهند.

 

– برنامه‌های پلتفرم چندسکویی هیبریدی HTML5:
حدود ۶۰ درصد کد هر برنامه موبایلی با GUI(رابط کاربر گرافیکی) سروکار دارد. اندروید، IOS و ویندوز تماما اجزای مرورگری را در SDK خود دارند.
با استفاده از این اجزاء، توسعه دهندگان می توانند از HTML5 برای طراحی برنامه های موبایل استفاده کنند. بنابراین برنامه نهایی با استفاده از فریم‌ورک محلی و HTML/JavaScript در یک نمایه وب ساخته می‌شوند.
بدین دلیل به این برنامه‌ها پلتفرم چندسکویی هیبریدی گفته میشود.(hybrid cross-platform app)
شکل ۱ مقایسه ای میان اپلیکیشن‌های محلی(Native App) و اپلیکیشن‌های هیبریدی(Hybrid App) را نشان می‌دهد.
یکی از محدودیتهای برنامه‌های هیبریدی در این است که ظاهر و جلوه‌های آن به اندازه برنامه‌های محلی، خوب نیست.
رابط کاربر Onsen یک فریم‌ورک UI است که این مشکل را با فراهم کردن UI‌های غنی که از نظر ظاهری شبیه APPهای محلی هستند حل نموده است. رابط کاربر Onsen یک فریم‌ورک مبتنی بر وب است که برای برنامه‌های CORDOVA/PHONEGAP طراحی شده است.
این برنامه می‌تواند از انواع فریم‌ورک‌های JS پشتیبانی و با AngularJS 1 و ۲ نیز کار کند.

 

فریم‌ورک‌های هیبریدی محبوب
تعداد زیادی از فریم‌ورک‌های هیبریدی در بازار وجود دارند اما تمام آنها نمی‌توانند جلوه و احساسی را که می‌توان با برنامه‌های محلی مشاهده نمود، ارائه بدهند و همه چیز را بر اساس الزامات انجام می‌دهند، بنابراین توسعه‌دهندگان می‌توانند این فریم‌ورک‌ها را انتخاب و مورد استفاده قرار دهند.
در اینجا نگاهی به چند فریم‌ورک‌ هیبریدی محبوب می‌اندازیم و آن‌ها را با هم مقایسه می‌کنیم:

آیونیک(IONIC): آیونیک یک فریم‌ورک جدید است که بسیار سریع و قابل اطمینان می‌باشد و مبتنی بر فریم‌ورکAngularJS است. از آن فقط می‌توان برای برنامه‌های موبایل هیبریدی استفاده نمود. اما قابلیت‌هایی نیز دارد که برای برنامه‌های معمولی تحت وب نیز مورد استفاده قرار بگیرد.
انجمن بزرگی برای پشتیبانی از آن وجود ندارد اما با این وجود تاحدودی فریم‌ورک پایداری است.
با این حال، برپایه Angular JS2 به بازار عرضه شده است و طراحان به طور مداوم در حال پیشرفت و افزودن ویژگی‌های جدید به آن هستند.

Onsen UI: تا حدود زیادی، بسیار شبیه آیونیک است هر چیزی که در مورد آیونیک گفتیم در مورد این فریم‌ورک هم صادق است. یکی از نکات مثبت آن امکان افزودن امکاناتی برای توسعه وب کلاسیک در آن است. در حال حاضر انجمن کوچکی از آن پشتیبانی می‌کند که به آرامی در حال رشد کردن است.

Kendo UI: رابط کاربری Kendo بر اساس فریم‌ورک JQuery ساخته شده است. همچنین از آن همراه با Angular JS نیز می‌توان استفاده کرد. دو نسخه از آن موجود است که یکی نسخه رایگان و دیگری نسخه تجاری می‌باشد. در آن امکان ساخت تم نیز گنجانده شده تم‌های فراوانی در آن است که مشابه با تم‌های محلی است و از آن برای توسعه وب کلاسیک و موبایل استفاده می‌شود.

Sencha Touch : از جاوااسکریپتvanilla بعنوان هسته مرکزی اش استفاده میکند(EXTJS). به دلیل سریع بودن از آن استفاده می‌کندريال اما تغییرات EXTJS اخیر باعث کندتر شدنش شده است. این یک محصول تجاری با یک IDE بسیار خوب است.

JQuery Mobile: این فریم‌ورک مبتنی بر زبان نشانه‌گذاری HTML5 می‌باشد.جی‌کوئری لایه اضافه شده با جاوا اسکریپت می‌باشد. از نظر پیاده سازی و یادگیری بسیار راحت می‌باشد. در مقایسه با دیگر فریم‌ورک‌ها کندتر است اما انجمن بزرگی از آن حمایت می‌کند.

Famo.US: خیلی مشابه Angular JS ساخته شده اما از روش‌های متفاوت برای توسعه اپلیکیشن‌های موبایل استفاده می‌کند.
این فریم‌ورک برای توسعه بازی‌ها در خودش موتورهای دوبعدی و سه بعدی را تعبیه کرده و در حال حاضر یکی از فریم‌ورک‌های سریع در این زمینه است.
اما نمونه‌های اندکی از آن در دسترس است و انجمن‌های کوچکی از ان پشتیبانی می کنند. Angular JS درمقایسه با JQuery از نظر درک، خیلی مشکل است.
بسیاری از مردم فریم‌ورک JQuery را ترجیح می‌دهند اما در مقایسه با دیگر فریم‌ورک‌ها، کندتر است.

 

Monaca IDE یک ابزار عالی برای Onsen UI
موناکا یک پلت‌فرم توسعه برای APP‌های موبایل هیبریدی با PhoneGap/Cordova است.
برای استفاده خیلی راحت است و با جریان کارها خوب جفت می‌شود. این فریم‌ورک همچنین از Cloud IDE، ساخت آنلاین از راه دور و اشکال زدایی CLI پشتیبانی می‌کند.

 

نصب Onsen UI
روشهای مختلفی برای کار با Onsen UI وجود دارد. اجازه دهید اول CLI موناکا را آماده‌سازی نماییم.
– ابتدا باید Node.js را از آدرس

https://nodejs.org/en/

نصب کنیم.
– قدم بعدی نصب Monaca CLI با استفاده از دستور NPM است

npm install -g monaca

با نصب Monaca CLI، یک رابط خط فرمان برای توسعه Onsen UI را مشاهده خواهید کرد. برای استفاده از حالت گرافیکی جعبه ابزار موناکا را از آدرس زیر نصب کنید:

https://monaca.io/localkit.html

حالا، اجازه دهید یک پروژه مبتنی بر Onsen UI ایجاد کنیم:

monaca create helloonsenUI

هر فریم‌ورکی را که برای توسعه نیاز دارید، انتخاب نمائید. وقتی یکی را انتخاب کردید قالب مناسب آن را دانلود کرده و یک پروژه ایجاد نمایید.
حالا این پروژه با دستورات زیر اجرا می‌کنیم:

cd helloonsenUI
monaca preview # preview in the browser

monaca debug # Run on the device in debugger
monaca remote build # Build the app
monaca remote build android # Build the android app (Choose any OS, which you want to build)

 

همانطور که می‌بینید پروژه با موفقیت در کلاد به‌روز شد و ما یک فایل APK ایجاد کردیم که می‌توانیم آن‌را روی یک موبایل اندرویدی نصب نماییم. بعلاوه می‌توانیم آنرا برای سیستم‌عامل‌های دیگر هم درست کنیم.
اکنون ما به Monaca Cloud وارد می شویم تا بررسی کنیم آیا برنامه به‌درستی مستقر شده‌است یا خیر.
در شکل ۶ می‌توانیم ببینیم که برنامه بدرستی در ابر قرار گرفته است. این امکان برایمان وجود دارد که که توسعه را بصورت آنلاین در Monaca Cloud انجام دهیم وآن ‌را آماده اجرا سازیم، این قدرت موناکا را نشان می‌دهد.
ما نسخه «helloworld» از onesenui را با استفاده از cli موناکا دیده ایم نمونه‌های زیادی را میتوانید از آدرس زیر پیدا کنید :

https//nodejs.org/en/

ما شاهد اجرای برنامه ساده «hello world» در رابط کاربری Onsen با استفاده از CLI موناکا هستیم. نمونه‌های بسیاری در لینک زیر آمده، که می‌توانید آن‌ها را دریافت کرده و استفاده کنید.

https://onsen.io/samples/

 

با مراجعه به آدرس‌های مرجع زیر نمونه‌های بیشتری را برای یادگیری شما فراهم میسازد:

[۱] https://onsen.io/v2/docs/guide/js/
[۲] https://onsen.io/
[۳] https://monaca.io/