مدخل الى nativescript

بسم الله الرحمن الرحيم

السلام عليكم ورحمة الله وبركاته

مقدمة عن إطار العلم NativeScript

ماهو NativeScript ؟

nativescript إطار عمل مفتوحة المصدر لبناء تطبيقات الهواتف المحمولة بإستخدام واجهة المستخدم الأصلية ( Native UI ) للجهاز المستهدف بكود واحد لجميع المنصات

nativescript تم بناء من قبل شركة telerik المملوكة لشركة Progress ( الغنيتان عن التعريف )

ماهي المنصات التي تستطيع البناء لها بواسطة NativeScript ؟

nativescript يستطيع البناء للمنصات التالية IOS و ANDROID بكود واحد

ماهي المتطلبات الأساسية لإطار العمل NativeScript ؟

يفترض بتقدمك لهذة الدورة أن يكون لديك بعض المعرفة الأساسية بجافا سكريبت و CSS وموجه سطر الأوامر ( Terminal ) في الجهاز الذي سوف تقوم بالتطوير به.

1. جافاسكربت ( JavaScript ): يجب أن تعرف المفاهيم الأساسية لجافا سكريبت ، مثل كيفية عمل الدوال ( functions ) ، والشروط ( if statements ) ، وحلقات التكرار ( Loops ).
2. صفحات الطرز المتراصة ( سي إس إس او CSS ): يجب أن تعرف كيفية كتابة محددات ( Selectors ) صفحات الطرز المتراصة ( سي إس إس او CSS ) بسيطة ، وأن تعرف كيفية تطبيق قواعد CSS كإلحاق القيمة بالمعرف ( مثل `background-color: red;` ) .
3. موجه سطر الأوامر ( Terminal ): يجب أن تعرف كيفية فتح موجه سطر الأوامر ( Terminal أو الطرفية ) على جهاز التطوير الخاص بك ، وكيفية التنقل بين المجلدات والمسارات ، وكيفية تنفيذ الأوامر.
4. محرر نصوص ( text editor ) او بيئة تطوير متكاملة ( IDE ): يجب أن تعرف أساسيات استخدام محرر النصوص ( text editor ) او بيئة تطوير متكاملة ( IDE ) الذي تختارها. يمكنك استخدام أي محرر نصوص لإنشاء تطبيقات NativeScript.

ماهي المشاريع التي يمكن بنائها بإستخدام NativeScript ؟

هناك 3 انواع للمشاريع في NativeScript

الاول هو NativeScript Core:

ويستخدم XML للهيكلة و JavaScript أو Typescript للبرمجة و CSS أو SASS للتنسيق.

والثاني المفضل لي هو NativeScript with Angular:

ويستخدم اطار العمل angular ( الأصدار 4 و 5 ) و Typescript للبرمجة و CSS أو SASS للتنسيق.

وهناك اطار اخر اظيف حديثًا هو NativeScript with Vue:

يستخدم اطار العمل Vue و JavaScript أو Typescript للبرمجة و CSS أو SASS للتنسيق.

مالذي يميز NativeScript عن المنصات الأخرى مثل react native و cordova و ionic ؟

يختلف NativeScript عن ionic و cordova و phonegap 

بإنه تكنلوجيا مختلفة جدًا فهي تعمل في الوقت الحقيقي runtime

وهي ليست تقنية web ولا تعمل داخل اطار ويب webView مثل تطبيقات cordova

وايضًا NativeScript و React Native تستخدم واجهة المستخدم الأصلية ( Native UI )

هذا سوف يعطيك اداء افضل

مالذي يميز NativeScript عن React Native؟

ويمتاز اطار NativeScript عن React Native بالوصول الكامل native APIs

اي بإمكانك كتابة كود Java او objective c بإستخدام JavaScript فقط دون الحاجة الى بناء ملف jar وإضافته الى مشروعك

مثال لكود objective c

@interface NSObject
+ (instancetype)alloc;
- (instancetype)init;
@end

@interface BaseClass : NSObject
+ (void)baseStaticMethod;
- (void)baseInstanceMethod;
@end

@interface DerivedClass : BaseClass
+ (void)derivedStaticMethod;
- (void)derivedInstanceMethod;
@end

تحويلة الى JavaScript

function NSObject() { /* native call */ };
// Object.getPrototypeOf(NSObject) === Function.prototype
NSObject.alloc = function () { /* native call */ };

// Object.getPrototypeOf(NSObject.prototype) === Object.prototype
NSObject.prototype.init = function () { /* native call */ };

function BaseClass() { /* native call */ };
Object.setPrototypeOf(BaseClass, NSObject);
BaseClass.baseStaticMethod = function () { /* native call */ };

BaseClass.prototype = Object.create(NSObject.prototype, { constructor: BaseClass });
BaseClass.prototype.baseInstanceMethod = function () { /* native call */ };

function DerivedClass() { /* native call */ };
Object.setPrototypeOf(DerivedClass, BaseClass);
DerivedClass.derivedStaticMethod = function () { /* native call */ };

DerivedClass.prototype = Object.create(NSObject.prototype, { constructor: DerivedClass });
DerivedClass.prototype.derivedInstanceMethod = function () { /* native call */ };

هذا سوف يحل لك الكثير من المشاكل مثل إضافة لم تجدها ويريحك من بعض الإضافات الغير ضرورية

ان شاء الله سوف احاول شرح طريقة التحويل من كود java او objective c الى javascript

ما ميزات NativeScript ؟

1.  NativeScript من الاصدار 3 واعلى تستطيع إستخدام جميع الـ packages في npm داخل تطبيقك
2.  يستخدم JavaScript و CSS و XML ( لغات هيكله وتصميم وبرمجة مشهورة لمطوري الويب )
3.  الوصول الكامل لـ APIs للنظام المستهدف ( Native APIs )
4.  بناء المشروع لمنصتين بكود واحد
5.  يتوفر لديه مكتبة إضافات ضخمة plugins.nativescript.org
6.  يتوفر لديه توثيق سهل ومبسط جدًا مع الامثلة بالصور والكواد docs.nativescript.org مع API Reference
7.  التحديث التلقائي للتطبيق في المستعرض بعد التعديل على الكود والحفظ دون الحاجة الى إعادة بناء التطبيق من جديد

روابط خارجية:

موقع nativescript: www.nativescript.org

showcase لتطبقات تم إنشائها بواسطة nativescript: www.nativescript.org/showcases