nativescript #2: بناء اول مشروع لك بواسطة nativescript

xlmnxpمنذ 9 أشهر

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

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

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

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

 

بناء مشروع nativescript core

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

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


tns create HelloWorld

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

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

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

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

Screenshot_20170722_094245.png.2eb622e5d5d459f31a97630baddb7a23.png

 

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


tns create HelloWorld --tsc

 

بناء مشروع nativescript with angular

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


tns create HelloWorld --ng

 

سوف اكمل الشرح بمشروع nativescript core

 

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


├── 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
                ├── icon-29@2x.png
                ├── icon-29@3x.png
                ├── icon-29.png
                ├── icon-40@2x.png
                ├── icon-40@3x.png
                ├── icon-40.png
                ├── icon-60@2x.png
                ├── icon-60@3x.png
                ├── icon-76@2x.png
                ├── icon-76.png
                └── icon-83.5@2x.png
             ├── Contents.json
             ├── LaunchImage.launchimage
                ├── Contents.json
                ├── [email protected].png
                ├── Default-568h@2x.png
                ├── Default-667h@2x.png
                ├── Default-736h@3x.png
                ├── Default-[email protected].png
                ├── Default-[email protected].png
                ├── Default-Landscape.png
                ├── Default.png
                ├── Default-[email protected].png
                └── Default-Portrait.png
             ├── LaunchScreen.AspectFill.imageset
                ├── Contents.json
                ├── LaunchScreen-[email protected].png
                └── LaunchScreen-AspectFill.png
             └── LaunchScreen.Center.imageset
                 ├── Contents.json
                 ├── LaunchScreen-[email protected].png
                 └── 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">
    <Page.actionBar>
        <ActionBar title="تطبيقي" icon="" class="action-bar"> <!-- تعديل هنا -->
        </ActionBar>
    </Page.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;
    viewModel.message = getMessage(viewModel.counter);

    viewModel.onTap = function() {
        this.counter--;
        this.set("message", getMessage(this.counter));
    }

    return viewModel;
}

exports.createViewModel = createViewModel;

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

Screenshot_1500745624.thumb.png.6a629d968952842124bdbad15bdf5891.png Screenshot_1500745631.thumb.png.fe000bb853752e3b44282eb66adeb08c.png Screenshot_1500745637.thumb.png.1eef76de99f22a32b0184406dd0d5366.png  

 

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

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

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


tns run android

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

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

Screenshot_20170722_101625.thumb.png.47e70bfd03930cb868ffe893733a3f75.png

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

كلمات دليلية:
0
إعجاب
127
مشاهدات
0
مشاركة
0
متابع
متميز
محتوى رهيب

التعليقات (0)

لايوجد لديك حساب في عالم البرمجة؟

تحب تنضم لعالم البرمجة؟ وتنشئ عالمك الخاص، تنشر المقالات، الدورات، تشارك المبرمجين وتساعد الآخرين، اشترك الآن بخطوات يسيرة !