NativeScript چیست و چگونه آن را پیاده‌سازی کنیم؟

گردآوری و تالیف : ارسطو عباسی
تاریخ انتشار : 03 تیر 1397
دسته بندی ها : جاوا اسکریپت

در این آموزش از وبسایت راکت قصد داریم شما را با NativeScript آشنا کنیم. فناوری که با استفاده از آن می‌توانید با بهره‌گیری از تکنولوژی‌های مبتنی بر وب، اپلیکیشن‌های محلی آندروید و آی‌او‌اس را ایجاد کنید. 

NativeScript چیست؟

NativeScript یک فریمورک متن‌باز است که با استفاده از آن با بهره‌گیری از تکنولوژی‌های مبتنی بر وب می‌توانید اپلیکیشن‌های محلی آندروید و آی‌او‌اس را ایجاد کنید. این بدان معناست که می‌توانیم اپلیکیشن‌های موبایل را با استفاده از جاوااسکریپت، تایپ‌اسکریپت و/یا انگولار ایجاد نمایید. مبنای این فریمورک براساس تفکر یک بار بنویسید و همه جا اجرا کنید است.

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

برای کار کردن با NativeScript نیاز ندارید که یک زبان جدید یاد بگیرید. شما می‌توانید تنها با استفاده از تکنولوژی‌های مبتنی بر وبی که قبلا اشاره کردم اپلیکیشن‌های مورد نظرتان را ایجاد کنید.

سیستم طراحی در NativeScript

NativeScript یک ران‌تایم است که روی سیستم عامل‌های محلی موبایل قرار دارد. در سیستم عامل آندروید این ران‌تایم از JVM و در آی‌او‌اس از JavascriptCore استفاده می‌کند. دسترسی داشتن به این پلتفرم‌ها اجازه می‌دهد که NativeScript از سیستم APIهای متحد استفاده کند که باعث می‌شود APIها در سطح ران‌تایم ترجمه/تبدیل شوند.

این تبدیل کردن بین APIهای جاوااسکریپت و APIهای پلتفرم اصلی از طریق reflection انجام می‌شود. از این مورد در NativeScript برای ایجاد مجموعه‌ای از رابط‌ها استفاده می‌شود. یکی دیگر از مزیت‌های استفاده از NativeScript این است که شما می‌توانید با ادیتوری که دوست دارید کار کنید و اپلیکیشن بنویسید. پس دیگر نیاز ندارید که برای داشتن دسترسی کامل حتما از Xcode یا Android Studio استفاده کنید.

معماری

در زیر می‌توانید دیاگرام سطح بالایی از چگونگی کار NativeScript با پلتفرم‌های موبایل را مشاهده کنید:

معماری

همانطور که می‌بینید، قسمت ران‌تایم وظیفه تبدیل کردن کدهای جاوااسکریپتی به پلتفرم محلی موبایل را دارد. در خود ران‌تایم کامپوننت‌های مختلفی وجود دارد که با همدیگر کار می‌کنند و سبب می‌شوند که تمام APIهای محلی تبدیل شوند. به این دلیل که NativeScript از JVM‌ و JavascriptCore استفاده می‌کند، بنابراین به آخرین ویژگی های زبان اکماسکریپت دسترسی دارد و این موضوع به توسعه‌دهندگان نیز می‌تواند کمک بسیاری کند. 

یکی از کامپوننت‌های اصلی که برای درک کردن طراحی NativeScript نیاز داریم ماژول‌ها است. 

ماژول‌ها

تیم توسعه دهنده NativeScript از این موضوع که پلتفرم‌شان کاملا ماژولار باشد و بتوان در آن از کامپوننت‌های مختلف مورد نیاز توسعه دهندگان استفاده کرد مطمئن شده‌اند.

این ماژول‌ها برداشتی از APIهای محلی را در بر می‌گیرند و به ما اجازه می‌دهند که بتوانیم آن‌ها روی هر دو پلتفرم اجرا کنیم. برای هر کارایی منطقی در این ابزار APIهای جداگانه‌ای در نظر گرفته شده است. برای مثال وقتی که بخواهید با استفاده از SQLite اطلاعات‌تان را ذخیره کنید، پکیج مربوطه را اضافه می‌کنید، وقتی بخواهید با فایل سیستم کار کنید، پکیج دیگری را امتحان می‌کنید.

بیایید نمونه‌ای از حالتی را که با استفاده از ماژول‌ها می‌توانید کدهای سازگاری را برای محیط‌های متفاوت اجرا کنیم را مشاهده نماییم. اگر می‌خواهید به یک فایل سیستم در پلتفرم native با استفاده از NativeScript دسترسی داشته باشید، شما به شکل زیر عمل می‌کنید:

var filesystem = require("file-system");
new filesystem.file(path)

این کد با استفاده از جاوااسکریپت نوشته شده و در آن در خط ابتدایی سعی می‌شود که یک ماژول سیستم فایل را دریافت کرده و بعد از آن با استفاده از APIهای موجود یک متد از ماژول را فراخوانی کنیم. وقتی این کد بخواهد اجرا شود ابتدا پلتفرم اصلی بررسی شده و سپس کدها به همان صورت تبدیل می‌شوند.

در سیستم عامل آندروید کدها به صورت زیر خواهند بود:

new java.io.file(path)

در نسخه IOS کدها به شکل زیر خواهند بود:

nsFileManager.defaultManager();
fileManager.createFileAtPathContentsAttributes(path);

اگر تا به حال در پلتفرم‌های موبایل قبلا کار کرده‌اید، مطمئن می‌توانید این کدها را به عنوان APIهایی برای دسترسی داشتن به فایل‌سیستم تشخیص دهید.

NativeScript در مقابل اپلیکیشن‌های وب

تا به حال ما به این موضوع اشاره کردیم که می‌توانیم اپلیکیشن‌های‌مان را با استفاده از تکنولوژی‌های موجود در دنیای وب با استفاده از NativeScript ایجاد کنیم. اما حال یک سوال! آیا می‌توانیم از NativeScript برای ایجاد اپلیکیشن‌های وب نیز استفاده کنیم؟

جواب سوال بله و خیر است. بله از این جهت که می‌شود اپلیکیشن‌ها را با همان پایه‌های کدنویسی در NativeScript ایجاد کرد. نه، به این دلیل که نمی‌شود به صورت مستقیم از تمام کامپوننت‌های وب استفاده کرد. 

NativeScript به ما اجازه می‌دهد که بتوانیم با استفاده دانش جاوااسکریپت/تایپ‌سکریپت لایه Business را توسعه و یا اپلیکیشن‌مان را طراحی کنیم. اما به این دلیل که پلتفرم اصلی سیستم مبتنی بر وب نیست و از DOM پشتیبانی نمی‌کند ما نمی‌توانیم برای قالب‌بندی کلی سیستم از HTML استفاده کنیم. اما در نهایت فرمت فایل‌ها به صورت HTML است و در حقیقت المان‌ها همان حالت قبلی را دارند با این تفاوت که به صورت متفاوت‌تری استفاده می‌شوند. 

برای اینکه بهتر با این حالت آشنا شوید باید بگویم که ما در این پلتفرم المان‌هایی مانند <div> و <span> را نداریم، بجای آن ما از <StackLayout> و <DockLayout> استفاده می‌کنیم که برای چیدن کامپوننت‌های رابط کاربری استفاده می‌شود. 

یکی دیگر از موضوعاتی که باید به آن اشاره کنم این است که المان‌های رابط کاربری در NativeScript براساس معادل‌شان در پلتفرم اصلی تبدیل می‌شوند. بنابراین ما از کنترل <button> در NativeScript استفاده می‌کنیم اما در آندروید به android.widget.Button و در آی‌او‌اس به UIButton تبدیل می‌شود.

پیاده‌سازی محیط توسعه NativeScript

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

NativeScript CLI

بهترین راه برای استفاده از این فریمورک NativeScript CLI است. می‌توانید این مورد را از طریق دستور زیر با استفاده از npm نصب کنید:

npm install -g nativescript

این دستور کتابخانه NativeScript را به صورت همگانی نصب می‌کند. برای اینکه مطمئن شوید دستور به درستی نصب شده است می‌توانید دستور زیر را وارد کنید:

tns

دستور tns مختصر شده Telerik NativeScript است و با استفاده از آن می‌توانید آرایه‌ای از دستورات مربوطه را مشاهده کنید. 

NativeScript CLI همراه با دستوراتی ارائه می‌شوند که ما را در روند توسعه بسیار کمک می‌کنند. مواردی مانند Create که به ما در ایجاد پروژه در ابتدای کار کمک می‌کند، deploy که پروژه را به یک دستگاه یا شبیه ساز وصل می‌کند و موارد دیگر. می‌توانید تمام این دستورات را از طریق دستور tns با آرگومان --help مشاهده کنید:

tns --help

نصب  کردن موارد مربوط به پلتفرم موبایل

برای ایجاد اپلیکیشن‌های محلی ما نیاز داریم که مستقلات مربوط به پلتفرم موبایل را نصب کنیم. نکته‌ای که نیاز است آن را بدانید این است که برای ایجاد اپلیکیشن‌های IOS باید سیستم عامل مک داشته باشید ولی برای Android خبری از این وابستگی‌ها نیست. 

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

اسکریپت مربوط به ویندوز به صورت زیر است:

@powershell -NoProfile -ExecutionPolicy Bypass -Command "iex ((new-object net.webclient).DownloadString('https://www.nativescript.org/setup/win'))"

اسکریپت آی‌او‌اس نیز برای اجرا در مک به صورت زیر است:

ruby -e "$(curl -fsSL https://www.nativescript.org/setup/mac)"

برای اجرای این اسکریپت‌ها مهم است بدانید که به دسترسی سطح مدیر نیازمند هستید. بنابراین باید با حساب مدیر این موارد را اجرا کنید. در کنار این اسکریپت‌ها یک آموزش قدم به قدم وجود دارد که با استفاده از آن می‌توانید به صورت دستی مستقلات مربوطه را ایجاد کنید. برای اینکار می‌توانید به این لینک مراجعه کنید. 

بعد از اینکه این پکیج‌ها را نصب کردید برای مطمئن شدن از درست نصب کردن می‌توانید دستور زیر را اجرا کنید:

tns doctor

این دستور تمام موارد مورد نیاز برای ایجاد اپلیکیشن در NativeScript را بررسی می‌کند و بعد از آن اگر مشکلی تشخیص داده نشد، دستور خروجی همراه با پیام موفقیت را برای شما ارسال می‌کند. 

نصب دستگاه مجازی آندروید

بعد از اینکه تمام موارد لازم NativeScript را نصب کردید، قدم بعدی نصب کردن شبیه ساز آندروید است. برای اینکه بتوانید اپلیکیشن‌های‌تان را روی سیستم عامل اجرا کنید نیاز است که شبیه‌ساز را اجرا نمایید. برای اینکار راه‌های متفاوتی وجود دارد. اما یکی از حالات با نصب کردن آندروید استدیو روی سیستم‌تان انجام می‌شود. می‌توانید SDK مربوط به آندروید را با استفاده از این لینک دانلود نمایید. شما باید نسخه درست آن را که نسخه ۲۵ و موارد بالاتر است را نصب کنید. اگر نسخه‌ای درست از SDK را ندارید می‌توانید با استفاده از دستور زیر یا از طریق آندروید استدیو این کار را انجام دهید:

"%ANDROID_HOME%\tools\bin\sdkmanager" "tools" "platform-tools" "platforms;android-25" "build-tools;25.0.2" "extras;android;m2repository" "extras;google;m2repository"

برای پیدا کردن اطلاعات بیشتر در زمینه نصب شبیه‌ساز آندروید می‌توانید این لینک را مطالعه کنید. 

روی سیستم عامل مک نیاز است که از نصب hXcodeCode روی سیستم‌تان مطمئن شوید. در غیر اینصورت شما قابلیت نصب اپلیکیشن‌های مبتنی بر آی‌او‌اس را ندارید. 

بعد از این کارها می‌توانید برای بررسی درست بودن موارد دستور tns doctor را اجرا کنید.

در آخر برای مطالعه بیشتر در رابطه با این فریمورک به شما پیشنهاد می‌کنم که به مستندات وبسایت به این لینک مراجعه کنید. 

منبع

مقالات پیشنهادی

چگونه ترافیک وبسایت را بعد از طراحی مجدد آن کنترل کنیم؟

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

حمله DDOS چیست و چگونه می توان از آن جلوگیری کرد ؟

مقوله امنیت و شاخه های آن در فضای وب به امری حیاتی و همه گیر تبدیل شده است، مخصوصا برای صاحبان سایت ها و مهم تر از آن برای مدیران سرورهای وب، چرا که آ...

چگونه به صورت شئ‌گرا در CSS کدنویسی کنیم؟

به نظر می‌رسد که چنین موضوعی (کدنویسی به صورت شئ گرا) در زبانی مانند سی‌اس‌اس غیر ممکن باشد، اما می توان با ایده شئ گرایی در سی‌اس‌اس کدها را پیاده سا...

GrapesJS - ویرایشگر آنلاین ساخت قالب بدون برنامه نویسی

GrapesJS یک ویرایشگر آنلاین ، رایگان ، منبع باز برای نوشتن و ویرایش کردن کدهای HTML داخل مرورگرها است . شما میتواین هر چیزی که با HTML مرتبط باشد را ب...