الفريق العربي للبرمجةأرشيف المنتديات · 2000 – 2023
نسخة أرشيفية للقراءة فقط — التسجيل والمشاركة مغلقان، والمحتوى محفوظ كما كان.

نظرة أولية على NaCl: تطبيقات الويب المبنية على لغة Cpp

بدأه Abdullah.Alshammeri في 24 سبتمبر 2011 · 1 رد · 718 مشاهدة · في الأخبار والنقاشات التقنية
مشاركة: واتساب X فيسبوك تيليجرام
#1 صاحب الموضوع

السلام عليكم ،

NaCl هو اختصار لـ NativeClient وليس عنصر كيميائي آخر :-) . من أيام صدر تحديث للمتصفح chrome يحمل الرقم 14.0 ، والذي أتى بإطار العمل هذا ( تحت رعاية Google طبعاً ) . قمت بتجربة بعض الأمثلة و محاولة أخذ نظرة أولية ، و مراجعة سريعة لهذا الشيء ( مكتبة ؟ لغة ؟ إطار عمل ؟ لا أعرف ماذا سنسمّيه ) .

مشروع NativeClient

مشروع طموح من Google يهدف لإدخال اللغات الـ Native مثل C/Cpp و غيرها إلى تطبيقات الويب . ( لاحظ : وغيرها ، يعني سنشاهد مستقبلاً لغات Native أخرى إن شاء الله ) .

كيف أبدأ

تذهب إلى هذه الصفحة و تطبق الخطوات ، الخطوات سهلة وبسيطة ، و لن تواجه مشاكل بإذن الله ( استخدمت نظام Windows 7 ) ، باختصار :

- تحميل SDK و تثبيته .

- تثبيت ويب سيرفر ( لا تنصدم ) و من ثم تشغيله ، يأتي مع SDK ويب سيرفر مكتوب بإستخدام لغة python ، إذا أحببت استخدامه فلا بد من وجود python ( تحملها بشكل منفصل ) ، إذا تريد استخدام ويب سيرفر آخر ، لا إشكال .. ( أظن يكفي أي http server ، مثل apache http ) .

- اذهب إلى المجلد examples ، ستجد الأمثلة هناك .

- طبعاً إذا أردت تشغيل مثال ما ، فيجب أن تشغله كتطبيق على الويب سيرفر ، يبدو هكذا :

 http://localhost:5103/hello_world/hello_world.html

- يمكن تعدل على السورس كود .

- تترجم الملفات ، تستعين بملف batch ، اسمه scons ، طبعاً في الأخير يستخدم GNU compilers .. C/Cpp

- الملف الناتج هو ملف تطبيقي بإمتداد nexe ، نسخة Debug ونسخة release موجهتين لـ 64 و 32 .

طريقة عمله

ملاحظة : المثال ، في الأصل عبارة عن مثال لتطبيق صوتي مزعج لم يعمل معي ، قمت بتقليص الكود و اختصاره ليكون مثال أبسط ، لذلك ستجد تسميات غريبة مثل sound و نحوه ..

- تنشيء ملف html . وبالتحديد ستضيف embed tag ، من أجل إضافة كائن غريب في قلب html .

<div id="listener">
    <script type="text/javascript">
       document.getElementById('listener')
           .addEventListener('load', moduleDidLoad, true);
    </script>

    <embed name="nacl_module"
           id="sineSynth"
           width=0 height=0
           src="shammeri.nmf"
           type="application/x-nacl" />
  </div>

- تضيف javascript code ، يقوم هذا الكود بعمل init للمكتبة + يقوم بإرسال رسائل إلى السيرفر ( طبعاً سيرفر محلّي ، يحول المعلومات على كود Cpp ) :

    sineSynth = null;  // Global application object.

    // When the NaCl module has loaded, hook up an event listener to handle
    // messages coming from it.
    function moduleDidLoad() {
    sineSynth = document.getElementById('sineSynth');
    sineSynth.addEventListener('message', handleMessage, false);
    //updateStatus('SUCCESS');
    }

    // Handle a message coming from the NaCl module.  The message payload
    // contains the frequency value.  Update the frequency field with this
    // value.
    function handleMessage(message_event) {
    alert(message_event.data);
    }

    function changeFrequency(freq) {
    sineSynth.postMessage('setFrequency:' + freq);
    }

ستلاحظ هناك دالتين / الأولى ترسل رسائل postMessage ، و الأخرى handleMessage تستقبل هذه الرسائل القادمة من السيرفر ( طبعاً هنا نتحدث عن local server ) .

- أخيراً ، تعمل implementation ، في لغة Cpp ، طبعاً ستشعر بقشعريرة ، كونك أمام Cpp ، لا تخاف هذا شيء طبيعي ، أكمل فقط ...

class SineSynthInstance : public pp::Instance {
 public:
  explicit SineSynthInstance(PP_Instance instance)
	  : pp::Instance(instance){}
  virtual ~SineSynthInstance() {}



  // Called by the browser to handle the postMessage() call in Javascript.
  // |var_message| is expected to be a string that contains the name of the
  // method to call.  Note that the setFrequency method takes a single
  // parameter, the frequency.  The frequency parameter is encoded as a string
  // and appended to the 'setFrequency' method name after a ':'.  Examples
  // of possible message strings are:
  //     playSound
  //     stopSound
  //     setFrequency:880
  // If |var_message| is not a recognized method name, this method does nothing.
  virtual void HandleMessage(const pp::Var& var_message);

};

void SineSynthInstance::HandleMessage(const pp::Var& var_message) {

        PostMessage(pp::Var(var_message));

}

طبعاً ، هنا فقط أعدت الرسالة المرسلة من javascript ، يمكن تفعل ما تريد هنا ،

لماذا Client/Server

هذا أول سؤال يمكن يخطر ببالك ؟ لا بأس أن تستخدم معمارية Client/Server ، لكن ليس لدرجة فيزيائية بحيث تستعين بـ web server ؟ كنت أتوقع أن أرى server مدمج في Chrome نفسه ، و يستمع للرسائل المرسلة إلى المتصفح ، دون الحاجة للتنصت على بورت معين ، يعني كما أنك تستمع لطلب فتح ملف html عادي محلي على جهازك .

هذا بالنسبة للأمثلة التي تنفذها من على جهازك ، لكن الأمثلة التي تعمل من خلال الويب ، لن تحتاج طبعاً لـ web server ( حسب فهمي ، قد يكون هذا خطأ ) .

إلى أي مدى يمكن أن نصل ؟

المشروع لازال في بدايته ، لكن حالياً أرى مكتبة STL حاضرة ( لا أعلم إن كان دعم كامل ) ، أيضاً هناك Pepperوهي مجموعة من APIs التي يمكن استخدامها من قبل مبرمجي Cpp أو C ، من رسوميات إلى صوتيات ، وأمور أخرى ..

أيضاً هناك توجه لدعم مكتبات أخرى و نقلها إلى بيئة الـ NaCL ، و قد نجحوا في نقل مكتبة SDL . مكتبة SDL هي مكتبة برمجية لبرمجة و تطوير الألعاب ، وهي نار على علم ، و إمكاناتها جيدة جداً ،

حتى File I/O مدعوم ، يمكن الكتابة و القراءة إلى و من html 5 files ،

الخلاصة

هي الآن دون الطموحات ، لا زلنا بحاجة لوقت حتى نرى العديد من المكتبات البرمجية و قد تم دعمها ، أيضاً نحتاج لرؤية إطار العمل هذا من خلال eclipse ( أمنية فقط ) ، لأن notepad++ و Bash ليسا البيئة المفضلة لتطوير تطبيقات متقدمة ، أيضاً قصة web server ، أتمنى أن نراه وقد زال و أصبح جزءاً من Chrome نفسه ،

لكن أراها فرصة جيدة جداً لمناصري لغة C/Cpp ، أن يحاولوا أن يبدؤوا مع هذا المشروع ، فيكفي أن تطبيقات الويب و الموبايل أكلت الأخضر و اليابس ، و يجب على أحبائنا أن يلحقوا بالركب ، فإما الاستعانة بلغات أخرى لها سوقها ، أو محاولة استغلال Cpp في مجال تطوير تطبيقات الويب من خلال هذا المشروع ، أو الخيار الأخير أن تقشر بصل مع pointers :/ .

5

logo1.png تطبيق طمأنينة ، نسخة بيتا على أندرويد

عبدالله الشمّري - Al-Shammari

CodingAlone.com

twitter @abshammeri

abshammeri AT gmail.com

github : abshammeri

#2

موضوع جميل :) تسلم ايديك

والرابط ده هيعجبك اوى ان شاء الله :)

http://www.webupd8.org/2011/09/gtk-32-released-with-html5-allows.html

حيث يوضح امكانية تشغيل تطبيقات gtk الرسومية من داخل المتصفح

والله الموفق

1

مواضيع مشابهة

عدد الزوار حالياً

المتواجدون خلال آخر دقيقتين · يتحدّث كل ٣٠ ثانية

—الإجمالي—أعضاء مسجّلون—زوار بدون تسجيل

جارٍ التحقق من المتواجدين…