این روزها بازار توسعه اپلیکیشن های Cross Platform به شدت داغه. از زبان های مختلف تا فریم‌ورک ها و شرکت هایی که از آن ها پشتیبانی می کنند. اگر بخواهیم مثال‌هایی رو در زمینه بزنیم:

React Native از کمپانی بزرگ فیسبوک که با جاوااسکریپت توسعه داده شده، Flutter با زبان Dart که هر دو توسط گوگل پشتیبانی میشن و Xamarin با زبان C#. همه و همه تقریبا در هدف بدست آوردن یک چیز بزرگ هستند و آن توسعه اپلیکیشن های Cross Platform به صورت "نیتیو" هستند. اینکه میگویم "نیتیو" یعنی توسعه به صورت Hybrid (پلتفرم های Cordova ، ionic  و ...) خارج از بحث این مقاله هست.

ولی در این میان شرکت نرم افزاری Telerik پلتفرمی رو راه اندازی کرده به نام NativeScript که باهاش می تونین با جاوااسکریپت (یا تایپ‌اسکریپت) اپلیکیشن های اندروید و iOS خود را توسعه دهید.  برای اینکه بیشتر با این تکنولوژی آشنا بیشیم، بد نیست به تعریف خود وب سایت NativeScript رجوع کنیم:

NativeScript is an open source framework for building truly native mobile apps with JavaScript. Use web skills, like Angular and Vue.js, FlexBox and CSS, and get native UI and performance on iOS and Android

همانطور که می بینید، NativeScript رو می تونین با فریم ورک هایی مثل Angular و اخیرا Vuejs استفاده کنین. ولی بزرگترین مزیت استفاده از NativeScript چیز دیگری‌ست و آن نحوه‌ی دسترسی به API های نیتیو می باشد. با استفاده از ران‌تایم NativeScript شما می توانید به راحتی به API های نیتیو(بدون نیاز به پل، یا به اصطلاح bridge) هر پلتفرم در جاواسکریپت  دسترسی پیدا کنید. برای مثال برای اندروید:

var min = java.lang.Math.min(3, 4);

و برای iOS :

var result = pow(2.5, 3);

و یا مثلا در کار با کلاس ها و آبجکت ها برای اندروید داریم:

let button = new android.widget.Button(context);
button.setText("My Button");

در واقع شما به تمامی پکیج های android و کلاس های آن دسترسی مستقیم دارید. نکته ای که قابل توجه است، این است که عبارت “My Button” یک string در جاوااسکریپت می باشد که ران‌تایم NativeScript آن را به نوع داده java.lang.String تبدیل می کند.

سوال: اگر ما به تمامی پکیج های اندروید دسترسی داریم، پس طبیعتا می توانیم از کتابخانه های کامیونیتی اندروید هم استفاده کنیم؟ جواب، بله هست!

برای مثال، یک کتابخانه برای اندروید به نام Sneaker در گیتهاب وجود دارد که یک Alert باکس را به صورت کشویی از بالا به پایین به کاربر نشان می دهد. با این استدلال باید بتوانیم همچین چیزی داشته باشیم: (صد البته بعد از دانلود و فراخوانی لایبرری)

let Sneaker = com.irozon.sneaker.Sneaker;

تا همینجا بحث رو نگه داریم و برگردیم سر عنوان مقاله. قبل از اینکه ادامه بدیم باید به این نکته اشاره کنیم که پلاگین های NativeScript چند دسته هستند. پلاگین های core که وظایف اصلی رو به عهده میگیرند مثل: Routing و پلاگین هایی که توسط افراد کامیونیتی توسعه داده شده اند، مثل پلاگین firebase  یا cardview  و یا مثلا lottie. با توجه به اینکه اکثرا چیزهایی که بهش فکر می کنیم از قبل وجود دارد، ولی در مواردی نیاز هست که ما پلاگین کاستوم خودمان را پیاده کنیم.

حال بر میگردیم به مثال خودمان، گفتیم که ابتدا باید لایبرری مورد نظر رو دانلود و فراخوانی کنیم. به سراغ داکیومنت لایبرری در گیتهاب می رویم. در بخش دانلود به همچین چیزی می رسیم که توسعه دهندگان اندروید با آن بهتر آشنا هستند:

Grab via Gradle:

implementation 'com.irozon.sneaker:sneaker:1.0.0'

 

خوب! حالا این رو قراره کجا قرار بدیم؟ اگر قبلا توسعه دهنده اندروید باشید حتما می دانید که این باید در فایل include.gradle به عنوان dependency قرار بگیرد. مشابه این مورد در توسعه وب، با فایل package.json سر و کار داریم. در واقع همانطوری که npm یک مدیریت پکیج برای وب هست، gradle هم یک پکیج منجیر برای اکوسیستم اندروید می باشد.

سوال اصلی اینکه، این فایل include.gradle دقیقا کجاست؟ قبل از پاسخ ابتدا پروژه توسعه پلاگین مان را راه اندازی می کنیم. برای شروع می توانیم از nativescript plugin seed استفاده کنیم. یک ریپوزیتوری که چیزایی که برای توسعه یک پلاگین نیاز هست را در اختیارمان قرار می دهد. بنابراین دستور زیر را در cli اجرا می کنیم:

git clone https://github.com/NativeScript/nativescript-plugin-seed nativescript-sneaker

 

با توجه به اینکه اسم پلاگین نیتیو sneaker می باشد، ما هم اسم پلاگین را nativescript-sneaker میگذاریم. سپس دستورات زیر را در ادامه اجرا می کنیم:

cd nativescript-sneaker/src
npm run postclone
npm run demo.android

دستور نهایی به صورت پیش فرض پروژه دمو را در emulator باز می کند. اگر می خواهید در موبایل تان اجرا شود، فایل package.json  واقع در پوشه src را باز کرده و –emulator را پاک کنید.

می توانید دمو را در پروژه Angular نیز تست کنید، به جای دستور نهایی، دستور زیر را اجرا کنین:

npm run demo-angular.android

سوالی که پیش می آید این است که دستور فوق دقیقا چکار می کند؟ شاید خیلی از شماها که با NativeScript کار کرده اید، می دانید که برای اجرای اپ باید از دستور tns run android  استفاده کنیم که با دستور فوق فرق دارد. نکته مهم این است که هر دستوری که با عبارت npm run شروع می شود، به دستورات npm مربوط می شود. به این صورت که اگر مجددا فایل package.json رو باز کنید، در بخش scripts شما هر دستوری به صورت mycommand اضافه کنید می توانید توسط npm run mycommand اجرا کنید. هدف این است که با یک دستور بتوانید چندین دستور را یکجا اجرا کنید. پس npm run demo.android یک تگ demo.android در بخش scripts هست که چندین دستور را کنار هم اجرا می کند و شامل tns run android نیز هم هست.

 

حال همه چیز برای توسعه پلاگین نیتیو آماده است. در مرحله قبل گفتیم باید لایبرری را در فایل include.gradle فراخوانی کنیم. به مسیر زیر می رویم:

nativescript-sneaker\src\platforms\android

و تغییرات را در این فایل انجام می دهیم. نهایتا فایل مان به این شکل خواهد بود:

android {
}
dependencies {
    implementation 'com.irozon.sneaker:sneaker:1.0.0'
}

 

در دایرکتوری src که در واقع سورس پلاگین مان قرار دارد، چندین فایل با پسوند common، android و ios وجود دارد. در فایل با پسوند common  بخشی از برنامه که منطقش در اندروید و iOS یکی هست نوشته می شود. برای پلتفرم اندروید و iOS هم به صورت جداگانه نوشته می شود. فایل با پسوند .android را باز می کنیم و کدهای خود را قرار می دهیم:

let Sneaker = com.irozon.sneaker.Sneaker;
Sneaker.with(application.android.foregroundActivity)
	.setTitle("Welcome")
	.setMessage("This is the success message")
	.setDuration(4000)
	.sneakSuccess()

با توجه به API توسعه دهنده، می توان از متدهای sneakError ، sneakWarning و یا متد sneak استفاده کرد.

سوال: این پلاگین فقط برای پلتفرم اندروید کار میکند، پس برای iOS چه کار باید کرد؟ پاسخ واضح است، شما باید یک پلاگین نیتیو نیز برای iOS پیدا کنید و به اصطلاح wrapper برای آن بنویسید. مشابه کاری که در اندروید کردیم برای iOS نیز می توان انجام داد، با این تفاوت که اولا پلاگین را در فایل pod قرار می دهیم (مشابه کاری که در gradle برای اندروید کردیم) و دوما در اینجا ما با API نیتیو iOS سروکار داریم.

پیاده سازی نهایی:

 

اگر همچنان سوالی داشتید می توانید با ایمیل من به آدرس این آدرس ایمیل توسط spambots حفاظت می شود. برای دیدن شما نیاز به جاوا اسکریپت دارید در ارتباط باشید.