بناء اول مشروع لك بواسطة NativeScript

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

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

هذا الدرس سوف يشرح لك كيفية بناء مشروع في NativeScript وايضًا اضافة المنصة المستهدفة android او ios

وكذلك إستعراض التطبيق في الـEmulator والتعديل على تصميم التطبيق

بناء مشروع NativeScript Core

بعد الدخول للمجلد المراد اضافة ملفات المشروع اليه بواسطة الطرفية ( للينكس والماك تسمى terminal وللويندوز تسمى cmd )

تكتب الامر التالي

tns create HelloWorld

ماذا يقصد بهذا الامر ؟

tns هو اختصار لـ NativeScript اما t فهو للتفريق بينه وبين NS الخاص بنظام IOS

اما Create فتعني "بناء" او "انشاء"

و HelloWorld هو اسم التطبيق

اما اذا كنت تريد ان تستخدم NativeScript Core مع TypeScript فابإمكانك بان تضيف العلم --tsc للقيام بإستخدام القالب الافتراضي بواسطة typescript

tns create HelloWorld --tsc

بناء مشروع NativeScript with Angular

لبناء مشروع NativeScript مع اطار العمل Angular يكفي بان تظيف العلم --ng للأمر وسوف تجده قام ببناء مشروع angular

tns create HelloWorld --ng

سوف اكمل الشرح بمشروع NativeScript Core

ما الملفات اللتي سوف يقوم بإضافتها المشروع ؟

الملفات التي سوف يقوم NativeScript بتدوليدها هي الملفات التالية

├── app // مجلد التطبيق الاساسي
│   ├── app.css // ملف css خاص بالتصميم يعمل في كافة صفحات التطبيق
│   ├── app.js // ملف app المتحكم بكامل التطبيق ( n تحديد الصفحة الرائيسية للتطبيق وما الى ذلك n)
│   ├── bundle-config.js
│   ├── main-page.js // ملف جافاسكربت المتحكم بالصفحة main-page
│   ├── main-page.xml // ملف xml المخصص لتصميم الواجهه للصفحة main-page
│   ├── main-view-model.js
│   ├── references.d.ts
│   ├── package.json
│   ├── App_Resources // سوف تجد هنا الملفات شعار التطبيق و splashscreen وملفات strings والكثير الخاصة بنظام android و ios
│   │   ├── Android
│   │   │   ├── AndroidManifest.xml
│   │   │   ├── app.gradle
│   │   │   ├── drawable-hdpi
│   │   │   │   ├── background.png
│   │   │   │   ├── icon.png
│   │   │   │   └── logo.png
│   │   │   ├── drawable-ldpi
│   │   │   │   ├── background.png
│   │   │   │   ├── icon.png
│   │   │   │   └── logo.png
│   │   │   ├── drawable-mdpi
│   │   │   │   ├── background.png
│   │   │   │   ├── icon.png
│   │   │   │   └── logo.png
│   │   │   ├── drawable-nodpi
│   │   │   │   └── splash_screen.xml
│   │   │   ├── drawable-xhdpi
│   │   │   │   ├── background.png
│   │   │   │   ├── icon.png
│   │   │   │   └── logo.png
│   │   │   ├── drawable-xxhdpi
│   │   │   │   ├── background.png
│   │   │   │   ├── icon.png
│   │   │   │   └── logo.png
│   │   │   ├── drawable-xxxhdpi
│   │   │   │   ├── background.png
│   │   │   │   ├── icon.png
│   │   │   │   └── logo.png
│   │   │   ├── values
│   │   │   │   ├── colors.xml
│   │   │   │   └── styles.xml
│   │   │   └── values-v21
│   │   │       ├── colors.xml
│   │   │       └── styles.xml
│   │   └── iOS
│   │       ├── Assets.xcassets
│   │       │   ├── AppIcon.appiconset
│   │       │   │   ├── Contents.json
│   │       │   │   ├── [email protected]
│   │       │   │   ├── [email protected]
│   │       │   │   ├── icon-29.png
│   │       │   │   ├── [email protected]
│   │       │   │   ├── [email protected]
│   │       │   │   ├── icon-40.png
│   │       │   │   ├── [email protected]
│   │       │   │   ├── [email protected]
│   │       │   │   ├── [email protected]
│   │       │   │   ├── icon-76.png
│   │       │   │   └── [email protected]
│   │       │   ├── Contents.json
│   │       │   ├── LaunchImage.launchimage
│   │       │   │   ├── Contents.json
│   │       │   │   ├── [email protected]
│   │       │   │   ├── [email protected]
│   │       │   │   ├── [email protected]
│   │       │   │   ├── [email protected]
│   │       │   │   ├── [email protected]
│   │       │   │   ├── [email protected]
│   │       │   │   ├── Default-Landscape.png
│   │       │   │   ├── Default.png
│   │       │   │   ├── [email protected]
│   │       │   │   └── Default-Portrait.png
│   │       │   ├── LaunchScreen.AspectFill.imageset
│   │       │   │   ├── Contents.json
│   │       │   │   ├── [email protected]
│   │       │   │   └── LaunchScreen-AspectFill.png
│   │       │   └── LaunchScreen.Center.imageset
│   │       │       ├── Contents.json
│   │       │       ├── [email protected]
│   │       │       └── LaunchScreen-Center.png
│   │       ├── build.xcconfig
│   │       ├── Info.plist
│   └       └── LaunchScreen.storyboard
├── platforms // هنا المنصات
├── package.json
└── package-lock.json

اضافة منصة للمشروع

لإضافة منصة للمشروع كل ماعليك هو الدخول لمجلد المشورع

cd HelloWorld

من ثم كتابة الامر التالي لإضافة منصة Android

tns platfrom add android

او التالي لإضافة منصة iOS

tns platform add ios

بناء المشروع

لبناء المشروع لـ Android اكتب 

tns build android

او للبناء للـ iOS اكتب

tns build ios

وسوف يبدا بعملية البناء مباشرة

تعديل الصفحة الرائيسية

لتعديل الصفحة الرائيسية تقوم بالتعديل على الملف main-page.xml و main-page.js المتواجدة في المجلد app

<Page xmlns="http://schemas.nativescript.org/tns.xsd" navigatingTo="onNavigatingTo" class="page">
    <ActionBar title="تطبيقي" icon="" class="action-bar"></ActionBar> <!-- تعديل هنا -->
    <StackLayout class="p-20">
        <Label text="اضغط على الزر" class="h1 text-center"/> <!-- تعديل هنا -->
        <Button text="أضعط" tap="{{ onTap }}" class="btn btn-primary btn-active"/> <!-- تعديل هنا -->
        <Label text="{{ message }}" class="h2 text-center" textWrap="true"/>
    </StackLayout>
</Page>

var createViewModel = require("./main-view-model").createViewModel; // يستخدم الملف main-view-model للتحكم في binding الصفحة

function onNavigatingTo(args) {
    var page = args.object;
    page.bindingContext = createViewModel(); // الأدراج هنا
}
exports.onNavigatingTo = onNavigatingTo;

كما تلاحظ فهو يتسخدم الملف main-view-model للتحكم في الربط ( binding ) بالصفحة اذًا لنعدل عليه

var Observable = require("data/observable").Observable;

function getMessage(counter) {
    if (counter <= 0) {
        return "رائع! لقد حصلة على ميدالية الضاغط لـ nativescript!";
    } else {
        return counter + " ضغطه متبقية";
    }
}

function createViewModel() {
    var viewModel = new Observable();
    viewModel.counter = 42; // تعريف observable يحمل الأسم counter والحاق القيمة 42 به
    viewModel.message = getMessage(viewModel.counter); // تعريف obserbable يحمل الأسم message والحاق قيمة له من الدالة getMessage

    viewModel.onTap = function() {
        this.counter--; // انقاص قيمة الـ Observable Counter بمقدار واحد
        this.set("message", getMessage(this.counter)); // تحديث قيمة Obserbable Message
    }

    return viewModel;
}

exports.createViewModel = createViewModel;

التطبيق بعد التعديل

استعراض التطبيق في الـ Emulator او في هاتفك

للأستعراض في جهاز قم فقط بتوصيل هاتفك بالحاسوب

من ثم اكتب الامر التالي للأستعراض للـ Android

tns run android

ونفس الامر من دون توصيل هاتفك بالجهاز للأستعراض في الـ Emulator

ونفس الأمر للـ IOS فقط استبدل Android بـ IOS

سوف اقوم بشرح الامر tns run بالتفاصيل لاحقًا ان شاء الله