بيئة تطوير ويب 2.0 متكاملة Aptana 1.1

نشره زايد في
منذ سنة وأكثر ، كنت أبحث عن برنامج لتطوير المواقع بعد أن قضيت مدة لا بأس بها مع >FrontPage ثم انتقلت إلى Dreamweaver، في ذلك الوقت لا زلت أستخدم نظام تشغيل Windows XP وجدت عدة برامج لم أستعملها ، ومن ضمن ما وجدت هو Aptana IDE 0.2 في ذلك الوقت كانت تحوي على مساوئ جعلتني أتركها، لقد كانت في بدايتها.

 

بعد انتقالي لنظام Ubuntu Linux. ؛ استخدمت لتطوير المواقع برامج عدة أولها المحرر النصي البسيط الخاص بالنظام ، ثم وجدت برنامج Quanta Plus. كان رائعاً ولكنه لم يحدث منذ أشهر فكانت الواجهة مزعجة في الاستخدام. وبدأت أبحث من جديد عن بديل أفضل.

تذكرت Aptana IDE ، ورجعت لها فوجدت أن الإصدار قد وصل إلى 1.1 مضيفة تحسينات رائعة و كثيرة، مع إضافة دعم لعدة لغات برمجة لم تكن تدعمها من قبل مثل Ruby و >Python. حسناً سنأتي على ذكر ميزات هذا البرنامج أو بيئة التطوير المتكاملة ، و لكن قبل ذلك أحببت أن أذكر أن بيئة التطوير المتكاملة هي quot; عائلة من برامج الحاسوب تساعد المبرمجين في تطوير البرامج وبناءها، وتتكون بيئة التطوير عادة من أداة حرير نصوص لكتابة شيفرة المصدر للبرامج، و المترجم Compiler أو قد يكون مفسر (Interpreter) ،و أدوات لأتممت بناء البرامج، كما تحوي عادة برنامج تتبع للبحث عن الأخطاء والمشاكل(Debugger). وأحيانا قد يحوي على نظام متابعة الإصدارات أو تتبع الفروقات (CVS). وأدوات أخرى تتنوع من بيئة لأخرى."

Aptana IDE 1.1

تُعدّ بيئة التطوير هذه من البيئات الرائدة في مجال تطوير الويب 2.0 لتطوير المواقع التفاعلية والغنية التقنيات الحديثة. مع أنها أساساً موجه لعمل تطبيقات الويب بتقنية Ajax. لكنها توفر لك كل ما هو جديد متقن من المميزات والتسهيلات اللازمة للتطوير باستخدام لغات الويب النصية (Scripting Language) مثل:

  1. PHP
  2. Javascript
  3. Ruby
  4. AJAX: مكتبة أجاكس مخصصة. JQuery و Prototype.
  5. وكذلك لا ننسى الأصل وهما:
    • CSS
    • XHTML

محرر اللغات في أبتانا

بما أن هذه البرنامج مبني على بيئة تطوير Eclipse لذلك فهو يوفر لك محرر نصي رائع لم أر محرراً أفضل منه على الإطلاق وهذه هي ميزاته:

  1. إكمال النص التلقائي بمجرد بدأك بكتابة كلمة أو أمر ما.
    التجاوب مع المتغيرات والنصوص التي تكتبها دعما لهذه الخاصية. حيث يستطيع التغلغل في أدق تفاصيل الأكواد ليجلب لك الكلمات المقترحة في هذا المكان.
  2. احتوائه على كافة الدوال وعناصر وصفوف اللغات التي يحررها. مما يدعم خاصية إكمال النص (في CSS, XHTML, Javascript).
  3. تلوين النص للغات المذكورة أعلاه.
  4. اهتمام كبير بمسألة تنسيق النص وترتيب ظهوره (أنظر الصورة). من ناحية طول الفراغ قبل السطر والترتيب الشجري لأكواد HTML.
    Image removed.
  5. تصحيح رائع لن تجده في مكان آخر. للغة HTML, Javascript وعلى فور ارتكابك خطأ ينبهك عليه!!. وبعد أكثر! حتى لغة PHP لها مصحح خاص وبهذا لن تضطر لاختبار فشلك على الخادم المحلي! فقط أختبر برامجك الناجحة والخالية من الأخطاء!.
    Image removed.
    هذه الميزة لن تجدها حتى في Dreamweaver. فهو ستطيع معالجة جميع اللغات التي تعرفها، في صفحة واحدة ادمج CSS وجافاسكربت و HTML وphp وسيصححها كلها يلونها.
  6. التجاوب مع المتغيرات والنصوص التي تكتبها دعما لهذه الخاصية. حيث يستطيع التغلغل في أدق تفاصيل الشفرات ليجلب لك الكلمات المقترحة في هذا المكان.

إضافات أبتانا

مع أنها في الأصل يأتي على شكل إضافة لبيئة تطوير Eclipse لكنها أيضاً قابل للتمديد فهي تأتي إضافة للمحرر الأصلي بعدة إضافات سأسردها هنا، بعضها يأتي معها والأخريات يجب تحمليهم يدوياً:

  1. محرر PHP. تضيف هذه الإضافة أمكانية تحرير ملفات PHP وتلوينها بمحرر أبتانا الرائع. كما يوفر لك دليل توافقية الدوال والصفوف (Classes) الموجودة مع إصدارات لغة PHP الرابع والخامس (الصورة).

    2. Image removed.

  2. محرر لغة Python. لست من مبرمجي بايثون لكن تجربتي مع PHP تؤكد لي أن هذه الإضافة ستكون رائعة :).
  3. محرر لغة Ruby. وكذلك هذه اللغة فلم أستخدمها. ولكن أبقى واثقاً من Aptana وروعتها!
  4. حزمة تطوير المواقع الموجهة لجهاز آيفون. لم أجربها :). فأنا لا أحب الآيفون أصلا ^^.

Aptana Jaxer

هل أنت من محبي الجافاسكربت؟ ولا تعرف لغة غيرها؟ وتريد أن تبرمج مواقع تستطيع الوصول لقاعدة البيانات وانتهى بك الأمر إلى لغة غريبة عليك مثل PHP أو ASP؟ ولم تستطع التأقلم؟ حسناً هنا الحل :). فهذه التقنية وللمرة الأولى تستخدم فيها Ajax للعمل كلغة برمجة تنفذ على الخادم Server! أجرينا عليها قليلا من التجارب والأمر كان ناجحا فهي تستطيع الوصول إلى قواعد البيانات وإن لم تقتنع بالأمر فأنصحك بتحميل Aptana ومحاولة اللعب بها عسى أن يعجبك :).

فهي تجعل Javascript تقوم بوظيفتين في آن واحد الأولى كلغة برمجة نصية في المتصفح وقد أثبتت نفسها. والثانية كلغة برمجة على الخادم لتحل محل PHP ومثيلاتها!. هذا الأمر يختصر على المبرمجين الكثير من الوقت في تعلم أكثر من لغة برمجة. وبالتأكيد سيلقى إعجاب مبرمجين جافاسكربت العرب :).

خطوات تشغيل Aptana Jaxer: (في موضوع منفصل مستقبلاً).

أبتانا والأجاكس

تتميز أبتانا عن غيرها من بيئات التطوير بتركيزها على الأجاكس فهو توفر لك 11 مكتبة أجاكس أو أمثلة أجاكس إضافة إلى جزء خاص بـ JQuery يسمى Visual JQuery ولم أسبر أغوار هذه التقنية بعد. المكتبات المتوفرة في أبتانا بشكل افتراضي ( ربما تستطيع أن تزيدها! Image removed. ) هي (وللعلم، تحدث هذه المكتبات بشكل تلقائي حال صدور نسخة جديدة، من خلال برنامج التحديث الخاص بأبتانا، والذي يحث البرنامج بين فترة وأخرى):

Image removed.

  1. Aptana Jaxer Samples : أمثلة بسيطة حول أساسيات استخدام Aptana Jaxer.
  2. Aptana Studio Samples : أمثلة تفتحك على طرق جديدة لاستخدام الجافاسكربت.
  3. Adobe Spry : مكتبة وأمثلة عن أدوبي سبراي. في الأجاكس. تستخدم هذه المكتبة بشكل أساسي في Dreamweaver.
  4. Aflax : مكتبة وأمثلة عنها. هذه المكتبة تستخدم Ajax. في التحكم بملفات الفلاش! حيث تعالج قصور هذه اللغة من الناحية الرسومية :).
  5. Ext 3.0: مكتبة أجاكس رائعة. وأمثلة عن استخداماتها. تتميز هذه المكتبة بروعة رسوماتها كما أنها متخصصة في بناء واجهات المستخدم على الأنترنت.
  6. JQuery 1.2: مكتبة الأجاكس السهلة. والرائعة توفر لك أدوات للتحكم بHTML بسهولة وإضافة الحركة لها. والتحكم بالأحداث (Events) الحاصلة فيها.
  7. Microsoft Ajax 3.5: مكتبة الأجاكس الخاصة بمايكروسوفت. وتستخدم مع ASP. عادةً.
  8. MochiKit: مكتبة أجاكس تهتم بالجداول وإضافة الحيوية لها. إضافة إلى إنشاء صناديق (مربعات) قابلة للسحب والإفلات وغيره. تمتاز بتوثيقها الغني.
  9. Mootools: إطار عمل أجاكس خفيف جداً :).
  10. Scriptaculous: إطار عمل Javascript. يهتم بالتأثيرات البصرية على ملفات HTML. وتكوين واجهات المستخدم. مكون بلغتي جافاسكربت بشكل أساسي وروبي.
  11. Yahoo! 2.0 user interface: مكتبة css, ajax, dom المقدمة من ياهو. تهتم بصنع واجهات المستخدم.

تثبيت بيئة التطوير أبتانا (لينوكس)


إن تنفيذك الخطوات بشكل حرفي يقلل من المشاكل، لأنك وبطبيعة الحال ستسأل الآخرين عن المشاكل التي ستواجهك. من هذه الناحية :) فاحفظ وقتك!.

  1. حمل الملفات التالية:
    • بيئة تطوير إكلبس، من هذا الرابط:
      Eclipse Classic 3.4, روابط احتياطية إن عطل الرئيسي: 1, 2.
    • أبتانا، البرنامج الأساسي المقصود هنا:
      Aptana Eclipse Plugin 1.1
    • إضافة جميلة للإكلبس تساعدك في اختيار الألوان.
      Colors Eclipse Plugin 0.0.1
    • برنامج تنسيق الألوان [خارجي]
      لن أتكلم عنه، إلا أنه جميل وينفعك في التنسيق. أدخل Add/Remove وأكتب: Agave
  2. ستحتاج لتركيب لامب (بالإنجليزية: XAMPP on Linux)، وهو خادم محلي يوفر لك بيئة تشغل ملفات php وخادم أباتشي، إضافة لخادم MYSQL، والكثير من الميزات الأخرى.
    هذه العملية مشروحة في هذا الرابط:
    تركيب XAMPP on Linux. على Ubnuntu 8.04.
  3. تثبيت إكلبس:
    في حقيقة الأمر لن تحتاج لتثبيته فهو جاهز للعمل ولكن سأعطيك بعض النصائح لخطوات جيدة لإعداده:
    • إفتح من القائمة العلوية Image removed. وأختر Add/Remove وأكتب “JRE” ومن نتائج البحث ضع علامة الصح على “Sun Java 6 Runtime” وأضغط على Apply Changes، ليتم تثبيت دعم برامج الجافا!
    • بعد دعم الجافا وتحميل ملف برنامج Eclipse sdk إضغط "Alt+F2"، وأكتب التالي، وبعدها أكتب كلمة السر للحساب الرئيسي.
      gksudo nautilus
    • ثم أنشئ مجلداً وأسمه ‘opt‘ وربما يكون موجوداً فهذا أفضل، وبعدها فك ضغط الملف ‘eclipse-*-3.4-linux-*.tar.gz‘ (النجمة * تعني أي قيمة موجودة لا يهم) في هذا المجلد ‘opt‘ وعن فك الضغط سيتكون مجلد اسمه ‘eclipse’ غير اسم هذا المجلد إلى ‘eclipse-aptana‘.
    • لإنشاء اختصار سريع للبرنامج اذهب لسطح المكتب وأضغط يمين، ثم Create Luncher. سيظهر لك مربع حواري مثل هذا (كما في الصورة):
    • Image removed.
      أملأ المربع كما في الصورة (انتبه على الملاحظات فهي مهمة)، وضع بالمربع الثاني:
      /opt/eclipse-aptana/eclipse
  4. تثبيت أبتانا:
    بعد تحميل الملف Aptana_update. (تذكر مكانه فقط!). واتبع الخطوات التالية:
    • أنت الآن فاتحٌ برنامج Eclipse، اتبع الخطوات التالية:
      1. Help ->Sofware Updates -> Find and Install
      2. Search for new features to install
      3. Next -> New Archived Site
      4. وأختر الملف aptana_update_*.zip
      5. ضع علامة صح على المربع: aptana_update_*.zip
      6. Next -> Accept -> Next
      7. Finish
      8. أغلق إكلبس وأفتحه من جديد.
      9. ثم إختر:
      10. New -> Project -> Default Web Project
      11. لكن لهذه اللحظة لا يزال الشكل الخارجي صفحة الترحيب أخرج منها (< style="color: #bf9000">× صغير فوقها) وأعمل التالي.
      12. Windows -> Open Perspective -> Aptana
      13. لتركيب الدعم للغة البرمجة php أو اللغات الأخرى. ستجد في وسط البرنامج واجهة الترحيب (Aptana Start Page)، وفي داخلها خانة (Plugins) إختر (PHP -> Install). وسيضاف الدعم لها، بعد معالج التركيب.

      ملاحظة: الآن اكتملت عندك بيئة تطوير Aptana. وستلاحظ أن لها قدرة كبيرة على تعديل الواجهة فتستطيع أن تغير ترتيبها كما تحب أن تكون!.

    • أحياناً: تحتاج لجعل ملفات غير قياسية تفتح كملفات HTML أو PHP. لمن يستعملون Smarty. فهناك طريقة لجعل هذه الملفات والتي هي من إمتداد ctp. عادة أو tpl. أو أي كان. إتبع الخطوات التالية:
      1. Window -> Preference -> General -> File Association
      2. ستجد زر Add (بالأعلى) إضغط عليه.
      3. أكتب مثلا: "*.ctp" أو "*.tpl" أو "*.inc".
      4. ثم أضغط على زر Add الآخر (سفلي).
      5. وأختر من القائمة Aptana PHP Editor (يدعم كل من: php, css, html, js).
      6. أو Aptana HTML Editor في حال لا تريده أن يدعم لغة php، داخل هذا الملف. (غير مستحسن).
  5. تثبيت إضافة إكلبس للألوان، الآن هذه الخطوة حاول أن تفعلها بنفسك فهي ليست بالمهمة جداً:
    فك ضغط الملف zip في المجلد الرئيسي للإكلبس وأغلقه ثم أعد فتحه.

عن المستند

الكاتب: عمر الدليمي, http://www.omardo.com
للإتصال: أرحب بكافة الملاحظات والنصائح حول ما أكتب: إتصل بي
الترخيص: Creative Commons 3.0 - by-sa
تطبيقات الويب
disqus