برمجة Native iPhone app بالجافاسكربت

السلام عليكم

يمكنك برمجة Native iPhone apps بإستخدام الجافاسكربت عن طريق Appcelerator Titanium  Mobile من بين خيارات أخرى عدة مثل PhoneGap ، تطبيقات يتم تثبيتها على الموبايل يمكننها الوصول لكل مميزاته مثل الكاميرا و تسجيل الصوت و إستخدام الحساسات مثل Accelerometer و التعامل مع الشبكة و الملفات و قواعد البيانات و التنبيهات و الاصوات … الخ ، ليست تطبيقات ويب تقليدية  لأنه إذا ذكرت الجافاسكربت ذكر الويب ، Titanium Mobile يعمل كل language translator يقوم بتحويل كود الجافاسكربت إلى كود Objective-C فى حالة الايفون و الايباد و الايبود تاتش و إلى JAVA فى حالة جوجل أندرويد لكنى فى هذه المقالة سوف أركز على تطبيقات الايفون ، لكن هذه الطريقة لا يعمل Ti بها حاليا لأن كود الجافاسكربت لايمكن تحويله لكود Objective-C يكون Semantically equivalent فى كل الاحوال ، لذلك حاليا يتم تحويل كود الجافاسكربت إلى Byte code ، و بذلك يمكنك إستخدام نفس ال code base لتوزيعه على منصتين مختلفتين ، يمكنك إستخدام مكاتب ال JAVA أو Objective-C من داخل كود الجافاسكربت للحصول على مميزات غير موجودة فى Titanium framework ، لكى نبدأ لابد ان يكون متوافر لديك MAC OS Snow Leopard ، قم بتحميل iPhone SDK من موقع Apple iPhone developers ، بعد تثبيت ال SDK قم بتحميل و تثبيت Titanium Developer .

بخصوص phoneGap عيبه الوحيد ان البرنامج يكون عبارة عن browser instance ، اى متصفح عادى لكنه لدية القدرة على الوصول ل interfaces غير موجودة فى المتصفح كالتى ذكرتها فى Titanium ، و كونة متصفح فهذا يؤثر على كفاءة التطبيق و ال controls غالبا ما تكون غير native أى انك تقوم بعمل ال control بال HTML و اعطاءه Style بال CSS و اعطاءه ال behaviour بالجافاسكربت ، لكن احدى نقاط قوته انه يمكنك تصدير تطبيق واحد ل iPhone و iPod و iPad و Android و Palm و Black berry و Nokia Symbian ، نصيحتى لك استخدم Appcelerator إذا كنت تريد ان تنتج تطبيق عالى الجودة و الكفاءة و ينافس التطبيقات التى برمجت ب Objective-C ، بالمناسبة انا اقوم ببرمجة برنامج ب Ti و أحاول جاهدا منافسة تطبيقات Best sellers فى نفس الفئة تعدت فى الارباح ملايين الدولارات .

إفتح Titanium developer و قم بإنشاء مشروع جديد كما توضح الصورة ، سيطلب منك إسمه و نوع المشروع -Mobile-و مكان حفظه :

بعد إنشاء المشروع ستجد ملفات المشروع بهذا الشكل :

يمكنك تجربة البرنامج على ال iPhone simulator من نافذة test and package ثم Run emulator كما توضح الصورة :

هيا بنا نقوم بتعديل البرنامج – هيا بنا نلعب ، هيييييييا بنا نلللللللعب ، قم بمسح محتويات ملف app.js و قم بكتبابة الكود التالى :

[code language="javascript"]
var ui = Ti.UI,
    win = ui.createWindow({
        title: "Catazine",
        url: "catazine.js",
        backgroundColor: "#FFF",
        modal: true,
        navBarHidden: false
    });
win.open();
[/code]

الكود السابق يقوم بإنشاء نافذة جديدة ، محتويات هذه النافذه فى ملف catazine.js ، هيا بنا نقوم بكتابة محتويات catazine.js :

[code language="JavaScript"]
//catazing.js file
var ui = Ti.UI,
    win = ui.currentWindow,
    label = ui.createLabel({
        text: "move the slider to change my value.",
        height: "auto",
        width: "auto",
        top: 10
    }),
    slider = ui.createSlider({
        top: 50,
        width: 200,
        min: 0,
        max: 100
    });</strong>

<strong>//*Eventlisteners*
slider.addEventListener("change", function(e){
    var val = e.value;
    label.text = Math.floor(val);
});

//*add UI widgets to the window*
win.add(label);
win.add(slider);

//*startup*
ui.createAlertDialog({
    title: "Catazine",
    message: "Hello World"
}).show();
[/code]

الكود السابق يقوم بإظهار alert برسالة Hello world و عنوان Catazine كما توضح الصورة :

و عند تحريك ال slider فإن قيمة ال label تتغير كما توضح الصورة :

المثال السابق بالطبع ليس برنامج حقيقى ، لكنه مثال لتوضيح كيفية العمل مع Ti ، كل ما يلزمك الان هو المعرفة ب Ti API هنا ستجد التوثيق الكامل ، و يمكنك دائما إذا تعثرت فى شىء ما السؤال على Ti developers Q&A ، إذا كنت تريد مثال لبرنامج كامل مفتوح المصدر فهناك Ti Kitchen sink عبارة عن برنامج للايفون و الايباد مفتوح المصدر يستخدم تقريبا كل ال Ti API المتوفرة يمكنك تحميله من GitHub و إنشاء مشروع جديد داخل Ti developer و التعلم منه .

من يستخدم Titnium Mobile ?

تم برمجة تطبيقات ب Ti Mobile يستخدمها الملايين لعل أشهرها eBay for iPhone و GetGlue و تطبيقات لشركة جاجوار و MTV و الكثير من البرامج ال bestSellers على متجر برامج ابل تم برمجتها ب Ti Mobile ، احصائيات Ti تقول انه ٩٠ الف مبرمج انضم لمجتمع Ti مؤخرا و تم انشاء  ٨ الاف مشروع و الان على متجر البرامج  أبل و اندرويد ، انا حاليا أقوم ببرمجة تطبيقين للايفون ، سأقوم بإصدار احدهم قريبا ان شاء الله ، يمكنك متابعتى على تويتر MostafaFarghaly@ لمعرفة اخر الاخبار .

Similar Posts:

• Developing applications for smart phones
• Corona SDK
• Playing with the User Interface in Android Part [1]!
• User Interface Design In Android
• HTML #BeBsata

MostafaFarghaly

More Posts

5 Comments to “برمجة Native iPhone app بالجافاسكربت”

• December 24, 2010 at 7:44 am
  Gamal says:

  Great topic, keep up the good work.

  I’ve a question, how can we develop application for the 2.x android SDKs??

  Reply
  • December 24, 2010 at 8:26 am
    Saad Talaat says:

    Please accept my humble answer .
    Android Development is way different than iPhone u can start developing by downloading the Android SDK on eclipse from it’s repository. although it is written in Java the Project build is way different.
    it consists of
    AndroidManifest.xml file describing the application being built and components supplied by application
    build.xml Ant script to build the project and install it.
    default.properties , local.properties are files used by ant
    assets folder have the static files you want to attach to the project
    bin holds the application once compiled
    gen where android build tool will place the source code they generate
    libs for the 3rd party Jars
    src quite talking for itself
    res folder holds resources that may be used like icon on images….
    tests..i guess u know that too

    Also the android code is really different here is a snippet it’s the default for any new project

    import android.app.Activity;
    import android.os.Bundle;

    public class Name extends Activity {
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.main);
    }
    }

    Reply
  • December 24, 2010 at 12:37 pm
    MostafaFarghaly says:

    i didn’t develop for android before for very simple reason, if i developer application *x* and it become best seller and make millions of dollers, i won’t be able to get my money because google pay developers by google checkout which depends on PayPal which isn’t supported in Egypt, regarding your Q, i think it’s as easy as downloading the android SDK and when creating the new project choose android instead of iPhone SDK, and your code compiled and shown in the android SDK.

    Reply
  • December 24, 2010 at 12:41 pm
    MostafaFarghaly says:

    check this out http://developer.appcelerator.com/guides/en/getting_started.html?__utma=1.674700984.1281103058.1292677329.1293194041.17&__utmb=1.5.10.1293194041&__utmc=1&__utmx=-&__utmz=1.1292677329.16.8.utmcsr=google|utmccn=%28organic%29|utmcmd=organic|utmctr=titanium%20appcelerator&__utmv=-&__utmk=186379689#preparing_for_android_development

    Reply
• December 30, 2010 at 1:49 pm
  Gamal says:

  @Saad: Thanks for your effort.
  I didn’t mean this type of Answer

  It’s already doing Andriod apps, what I meant is it’s only making apps up to 1.6 not 2.3 ..

  @Mostafa: I believe that there is another way to get your money from google.
  And commonly money doesn’t come from google..
  Most popular apps are free and they get money from advertisers or users directly

  Anyway, Thanks for you support guys

  Reply