استخدام Google App Engine مثل YourColor – CDN

الووردبريس wp

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

محرك تطبيقات جوجل (Google App Engine) هو نظام جوجل الأساسي لتطوير التطبيقات واستضافتها. وللمعرفة المزيد قم بزيارة الصفحة الرئيسية Google App Engine. ما يهمنا في الخدمة هو استعمالها مثل خدمة توصيل المحتوى CDN فكا تعلمون سيرفرات جوجل تكون قوية وسريعة فلماذا لا نقوم باستغلالها و ساتطرق الى خطوات تحويل هذه الخدمة الى CDN بالتفصيل

معلومة بسيطة الخدمة تسمح لك فقط بعرض 5 مليون صفحة في الشهر و 5GB مساحة. عند انتهاء هذا العدد من ظهور الصفحات سيتم ايقاف عرض صفحاتك هذه الخدمة ينصح بها لاصحاب المدونات الصغيرة فقط من وجهة نظري

انشاء حساب Google App Engine

بالنسبة لانشاء حساب في خدمة Google App Engine  كل ما تحتاجه هو حساب Gmail وقم بتسجيل من الصفحة التالية Google App Engine  ثلات خطوات فقط اتبع الصور التالية :

انشاء تطبيق في Google App Engine

بعد انشاء الحساب وذالك بتسجيل الدخول بواسطة حسابك gmail سيتم عرض عليك صفحة انشاء تطبيق جديد

عند الضغط على Create Application سيتم توجيهك الى صفحة لتحقق من حسابك بواسطة الرسائل القصيرة كل ما عليك فعله هو ادخال رقم جوالك وقم بارساله بعدها ستستلم رسالة قصيرة على جوالك خلال ثواني معدودة ولكن تاكد من استعمال الارقام الخاصة بالدول مثلا انا من المغرب لدينا 212 .

بعد التفعيل سيتم عرض الصفحة التالية :

كما نلاحظ في الصورة نقوم باختيار الاسم التعريفي للتطبيق والتحقق من توفره هذا الاسم يكون مثل النطاق الفرعي في الاستضافات المجانية مثلا

http://yourcolor.appspot.com

بالنسبة للعنوان اكتب ما تشاء ولا تنسى ان تقوم بالموافقة على شروط الخدمة بعد قرائتها هذا ان كان لديك وقت لقرائتها المهم اضغط على انشاء التطبيق لكي ننتهي من هذه الخطوة  بعد ذالك سننتقل الى المرحلة التالية

تحميل وتركيب Google App Engine SDK و Python 2.5

في هذه المرحلة سنحتاج اولا تركيب Python وبالتحديد النسخة 2.5 او ما فوقها, لانها من متطلبات تشغيل Google App Engine SDK وطريقة التركيب سهلة بطبيعة الحال next الى اخره

لتحميل النسخة 2.5.6 يرجى زيارة الصفحة التالية : Python Download Page

ثانيا نقوم بتركيب Google App Engine SDK والذي سنحتاجه فيما بعد لرفع احد المشاريع التي ستساعدنا في هذا الشرح المهم طريقة التركيب بسيطة كالعادة في ويندوز نقوم next الى اخره

لتحميل النسخة 1.5.3 يرجى زيارة الصفحة التالية : Download Google App Engine SDK for Python

قبل الانتقال الى المرحلة يجب تركيب اولا Python  وبعد ذالك قم بتركيب Google App Engine SDK هذه الخطوة مهمة لكي تضمن اعداد CDN بشكل جيد

اضافة اسم نطاق خاص بنا ل Google App Engine

هذه الطريقة فقط اذا كنت تريد ان يظهر اسم موقع في التطبيق عوضا عن الرابط المقدم من طرف الخدمة مثال بسيط :

الرابط في الحالة العادية يكون بالشكل التالي :

http://yourcolor.appspot.com 

سنقوم بتغيره الى :

           http://cdn.yourcolor.com

الطريقة طويلة تحتاج شوية وقت وتركيز لكي تقوم باضافة الدومين بشكل جيد صراحة ارهقتني قليلا في الاول بسبب اني اضفت النطاق الفرعي مباشرة وايضا اول مرة اجرب هذه الخدمة وايضا ما وجدت اي موقع عربي يتحدث عنها

عندما قمت بالتسجيل اول مرة كل الصفحة عرضت باللغة الفرنسية او الانجليزية لا ادكر المهم لان هذه المرة الثالت التي اقوم بها لتسجيل لعمل هذا الشرح لا ادري ما السبب الذي وقع حتى تغيرت لغة العرض في التسجيل  تبقى ملاحظة ليس الا المهم هي نفس الخطوات

الان بعد قمت بانشاء التطبيق قم بالضغط عليه كما في الصورة لننتقل الى لوحة تحكم التطبيق

من القائمة الموجودة على اليسار انزل الى الاسفل وبالتحديد من قائمة Administration قم بالضغط على Application settings

في الاسفل ستجد خيار Domain setup كما مبين في الصورة اضغط عليه اضغط عليه

الان يجب عليك ان تشترك في خدمة تطبقات جوجل. الخدمة الاولى كانت فقط الاشتراك في محرك التطبيقات وهناك فرق بينهما لان ادخل في شرح هذا الفرق لانه سيطول الشرح اكثر من اللازم . اضغط على Sign up For Google App

كما في الصورة قم بادخال اسم نطاقك الرئيسي ولا تقم باضافة النطاق الفرعي لكي تقع في مشاكل تغيير Cname كما حصل معي واضطررت الى حذف التطبيق واعادة الطريقة مرة اخرى من الاول المهم بعدها ستنقل الى الصفحة التالية :

املاء البيانات بما ينسبك بالنسبة للبريد استعمل الذي قمت بادخاله عند اشتراك في خدمة محرك تطبيقات جوجل Google App Engine بالنسبة لنوع قم بادخال غير ربحي . الان بعد اتمام البيانات سيتم نقل الى الصفحة التالية :

هنا يجب عليك الانتباه قليلا لانه سيتم انشاء حساب المشرف لتطبيقات جوجل ببريد جديد ستحتاجه لهذا لا تنسى ان تحفظ هذا الحساب في مفكرة مع الباسوورد . البريد يكون بالشكل التالي :

data@yourcolor.net

كل ما عليك الان هو ادخال اسم المستخدم مع كلمة مرور والموافقة على الشروط لكي ننتقل الى الصفحة التالية

هنا سنقوم بتغير الحساب الى الحساب الذي قمنا بانشاءه من جديد بعدها تنتقل تلقائيا  الى الصفحة التالية :

المهم هنا قم بالضغط على تنشيط Google App لكي ننتقل الى صفحة اثبات الملكية :

الان قم بتحميل الملف من جوجل كما في الصورة وارفعه بواسطة ال FTP او Cpanel الى مجلد موقعك الرئيسي و قم بتصفحه لكي ترى اذا تم رفعه ام لا وبعد ذالك قم بتاكيد الملكية

بعد التاكيد ستظهر لك رسالة نجاح اثبات الملكية كما في الصورة الان ننتقل الخطة التالية ركز معي قليلا قم بالظغط على متابعة وقم بتجيل الخروج من تطبيقات جوجل

الان سنقوم بالدخول الى لوحة تحكم محرك تطيقات جوجل الاول وليس تطبيقات جوجل لكي ابين لك فرق بسيط بينهما لكي لا تتوه بين الخدمتين

1. Google App Engine : نستعمل البريد Gmail العادي
2. Google Apps : نستعمل بريد باسم نطاقك webmaster@sitename.com

هذا فرق بسيط بين الخدمتين

المهم بعد تسجيلك الخروج من لوحة تكم تطبيقات جوجل قم بزيارة رابط تطبيقك على Google App Engine

http://%5Byour-application%5D.appspot.com

وسجل الدخول بالبريد العادي gmail ومن لوحة تحكم التطبيق من القائمة الموجودة باليسار توجه الى الاسفل Administration ثم Application Settings وبعدها Domain Setup كما فعلنا في الاول

الان قم باضافة النطاق بعدها سننتقل الى صفحة تسجيل دخول Google Apps

كما قلنا سابقا البريد الخاص بنطاقك الذي قمنا بانشائه في الخطوات السابقة عند التسجيل في خدمة Google Apps قم بتسجيل الدخول باسم المسخدم وستنتقل تلقائيا الى الصفحة التالية :

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

اضغط على اضافة عنوان URL جديد قم باضافة اسم نطاق فرعي مثلا cdn

بعد اضافة النطاق الفرعي ستظهر لك رسالة بالشكل التالي :

تغيير سجل CNAME

لاستخدام عنوان URL cdn.free-themes-wordpress-arabic.cz.cc المخصص، يجب عليك تغيير سجل CNAME بواسطة مضيف نطاقك.

تسجيل الدخول إلى خدمة استضافة نطاقك.

انتقل إلى صفحة إدارة خدمة اسم النطاق (DNS). يختلف موقع واسم هذه الصفحة حسب المضيف، ولكن يمكن العثور عليها بشكلٍ عام في إدارة النطاق أو الإعدادات المتقدمة.

ابحث عن إعدادات CNAME ثم أدخل الآتي كقيمة أو اسم مستعار CNAME:

cdn

قم بضبط جهة CNAME على العنوان التالي:

ghs.google.com

احفظ التغييرات مستعينًا بمضيف النطاق الخاص بك وانقر فوق “لقد أكملت هذه الخطوات” أدناه.

عند الانتهاء، انقر فوق” لقد أكملت هذه الخطوات” لكي تقوم Google بفحص سجل CNAME.

لا تقم بالضغط على ” لقد أكملت هذه الخطوات” حتى نقوم بالخطوة التالية :

هنا ساضع الطريقة من خلال Cpanel قم بتسجيل الدخول الى لوحة تحكم وبعدها اختر Simple DNS zone Editor كما في الصورة التالية

بعدها استعمل اسم النطاق الفرعي الذي قمت بادراجه في اعدادات التطبيق كما في الصورة السابقة الان بعد اختيارك Simple DNS zone Editor اضف النطاق الفرعي اخاص بك كما في الصورة التالية واضغط Add CNAME Record

الان ارجع الى صفحة الرسالة السابقة وقم بالضغط على ” لقد أكملت هذه الخطوات” لكي تقوم Google بفحص سجل CNAME.

الى هنا انتهينا من اضافة النطاق الفرعي الخاص بنا وكما تلاحظون الطريقة مرهقة نوعا ما وفي كل الاحوال ستستفيد منها ايضا في تطبيقات اخرى اذا كنت تود استعمالها

ملاحظة بالنسبة لنطاق الفرعي قد تستغرق مدة تحديث DNS مدة 24 ساعة

تركيب CirruxCache وشرح الاعدادات الازمة

الحمد لله لانه يوجد هذا المشروع CirruxCache للمبرمج Samuel Alba جزاه الله عن كل خير والمشروع يقوم بتوفير خدمة التخزين المؤقت للملفات الثابة على محرك تطبيق جوجل GAE وقد اختصر لنا بهذه الفكرة الكتير من العمل الشاق والتقليدي عندما تريد رفع ملفات ثابة الى Google App Engine في الحقيقة يوفر الكتير من العمل عن تجربتي الشخصية واعدادته سهلة ومن مميزاته انك تقوم بتركيبه وهو يقوم بالبحث في موقع عن الملفات التي تستعمل ويقوم باعادة توجيه الى التطبيق الخاص بك مثالا لو تم طلب الملف التالي :

http://yourcolor.net/wp-content/themes/themeNmae/style.css

سيتم عرض الملف (style.css) من التطبيق الخاص بنا في Google App Engine وليس فقط ملفات التنسيق بل كل الملفات الثابثة وحتى ملفات الفيديو

http://yourcolor.appspot.com/wp-content/themes/themeNmae/style.css

وبهذه الطريقة سيتم عرضه بسرعة من سيرفرات جوجل والتي تتميز بالمرونة والسرعة

واذا استعملت النطاق الفرعي ستعرض بهذه الطريقة :

http://cdn.yourcolor.net/wp-content/themes/themeNmae/style.css

وهذه بعض المعلومات عن ما يقوم به المشروع cirruxcache وهي كالتالي :

1. honor Cache-Control
2. cache TTL override
3. several POP (Point Of Presence) configuration mapped on custom base-url
4. ignore query string
5. POST forwarding
6. garbage collection of expired entries
7. extensibility (develops your own WebServices on top)
8. allow object flushing from restricted IP
9. configure a POP (Point of Presence) according to a virtual host
10. several behaviors (cache, redirect, forward)
11. storage WebService (store big files <=2GB in order to be delivered)
12. admin panel (flush objects, manage big files, statistics, config helper)
13. image transformation (before caching it)

تحميل و اعداد CirruxCache

لتحميل المشرع كل ما عليك هو زيارة هذه الصفحة CirruxCache Downloads وقم بتحميل اخر نسخة

بعد تحميل النسخة قم بفك الضغط عنها وانسخ المجلد بالكامل الى المجلد الخاص ب Google App Engine SDK الذي قمنا بتنصيبه من قبل انا قم بتنصيبه في مجلد Programe Files لاحظ الصورة التالية :

ولاحظ مسار ملفات ومجلدات المشروع كيف قمت بوضعها في مجلد CirruxCache لكي لا تقع في مشاكل كما صادفتني من قبل

افتح الان ملف app.yaml لتغيير اسم التطبيق بالنسبة لشرح في الصورة الاولى عندما قمنا باختيار اسم التعريف لتطبيق كان الاسم cdn-mwp وانا في اخر الشرح ستجدني اسعملت cdnmwp لا تنظر الى الاسماء التي استعملها انا لانني قمت بتجريب الطريقة مرتين واخدت الصور مختلفة لشرح في ما يخص اسم  التطبيق الذي انشئته المهم قم بتغير اسم التطبيق في الملف الى اول اسم استعملته كما في الصورة الاولى في الشرح

application: appname

قم بتغيير السطر 19 فقط الى اسم تطبيقك

المهم الان سننتقل الى اعداد ملف config.py ل CirruxCache الملف ستجده داخل المجلد قم بفتحه باي محرر نصوص مثلا notepadd++ وقم بتغير الكود التالي :

urls[´default´] = (
#´(/debug/.*)´, ´Debug´,
´(/data/.*)´, ´config.Static´,
´/www(/.*)´, ´config.Www´
)

الى

urls[´default´] = (
´(/wp-content/.*)´, ´config.Static´,
´(/wp-includes/.*)´, ´config.Static´,
´/(.*)´, ´config.Www´
)

في هذه الحالة سيتم عرض جميع الملفات الثابة المخزنة في Google App Engine وبالتحديد الموجودة في المجلدين اللذين قمنا بتغييرهما wp-content و wp-includes بالنسبة لمستعملي ووردبريس

وايضا سنقوم بتغيير الكود التالي الخاص باعادة التوجيه والتخزين من :

class Static(cache.Service):
origin = ´http://static.mydomain.tld´
maxTTL = 2592000 # 1 month
ignoreQueryString = True

class Www(cache.Service):
origin = ´http://www.mydomain.tld´
allowFlushFrom = [´127.0.0.1´]
forceTTL = 3600 # 1 hour
ignoreQueryString = True
forwardPost = False

الى الكود التالي :

class Static(cache.Service):
origin = ´http://sitename.com´
forceTTL = 2592000 # 1 month
allowFlushFrom = [´127.0.0.1´]
ignoreQueryString = True
forwardPost = False
headerBlacklist = [´Set-Cookie´]

class Www(redirect.Service):
origin = ´http://sitenam.com´

المهم هنا قم بتغير sitename.com الى اسم نطاقك الرئيسي وليس الفرعي لكي لا تقع في مشكلة. احفظ الملف وسننتقل الخطوة التالية وهي رفع المشروع CirruxCache بعد التعديل الذي قمنا به الى التطبيق الخاص بنا بواسطة Google App Engine Launcher

الان قم بتشغيل Google App Engine Launcher

يمكن تغيير رقم البورت اذا كان مشغولا او كنت تسعمل جهازك كبروكسي لشبكة او اي استعمال اخر المهم انه يمكنك تغييره

تصفح مكان تواجد تطبيق CirruxCache بواسطة Google App Engine Launcher وقم باضافته بعدها سنقوم بالتالي ضع الفأرة على اسم التطبيق واضغط على Deploy كما في الصورة التالية :

بعد الضغط على Deploy قم بادخال بريدك وكلمة المرور وستظهر لك نافديتين واحدة سوداء والاخرى بيضاء (التفاصيل هههههه احكي قصة)

المهم واحدة تجد في رسالة بهذه الشكل :

2011-08-21 00:18:55 Running command: “[‘C:\Python25\python.exe’, ‘-u’, ‘C:\Program Files\Google\google_appengine\appcfg.py’, ‘–no_cookies’, u’–email=xxxxx@gmail.com’, ‘–passin’, ‘update’, u’C:\Program Files\Google\google_appengine\CirruxCache’]”
Application: name-of-your-application; version: 1
Host: appengine.google.com

Starting update of app: name-of-your-application, version: 1
Scanning files on local disk.
2011-08-21 00:19:19,427 WARNING appengine_rpc.py:435 ssl module not found.
Without the ssl module, the identity of the remote host cannot be verified, and
connections may NOT be secure. To fix this, please install the ssl module from
http://pypi.python.org/pypi/ssl .
To learn more, see http://code.google.com/appengine/kb/general.html#rpcssl .
Password for xxxx@gmail.com: Cloning 4 static files.
Cloning 39 application files.
Compilation starting.
Compilation completed.
Starting deployment.
Checking if deployment succeeded.
Will check again in 1 seconds.
Checking if deployment succeeded.
Will check again in 2 seconds.
Checking if deployment succeeded.
Deployment successful.
Checking if updated app version is serving.
Completed update of app: cdnmwp, version: 1
Uploading index definitions.
Uploading cron entries.
2011-08-21 00:19:50 (Process exited with code 0)

You can close this window now.

الان انتهينا من رفع تطبيق المشروع CirruxCache ال Google App Engine لكي تتأكد من ان الخدمة اصبحت جاهزة قم تجربت اي ملف من موقعك مثلا لدينا الصورة التالية :

http://yourcolor.net/wp-content/themes/1biztheme/images/ajax-loader.gif

نقوم بتجربتها هكذا :

http://localhost:8080/wp-content/themes/1biztheme/images/ajax-loader.gif

اذا ظهرت الصورة فالاعدادات لديك سليمة اي سننتقل الى الخطوة الاخيرة

تغيير روابط القالب والاضافات

هذه الطريقة اذا اردت ان تعملها يدويا ستكون مرهقة جدا فهناك العديد من الروابط في القالب والاضافات ولحسن الحظ توجد اضافتين ستساعدك في هذه الطريقة

WP Super Cache

هذه الاضافة كنت قد شرحتها هنا في هذه التدوينة من هنا بطبيعة الحال الاضافة تحتوي على خاصية ال CDN لاعادة كتابة جميع الروابط في الموقع وتغيرها الى رابط اخر المهم هذه هي الطريقة بكل بساطة نقوم باضافة رابط التطبيق او النطاق الفرعي الذي اضفناه الى التطبيق الخاص بنا كما في الصورة التالية ونقوم بحفظ الاعدادات

CDN Linker lite

وتوجد ايضا هذه الاضافة في حالة لم تكن تستعمل WP super Cache تقوم ايضا بتغير رابط المدونة لجميع الملفات الموجودة في wp-content و wp-includes لم اجرب الاضاة من قبل وهذا رابط صفحتها على موقع WordPress.org

صفحة الاضافة CDN Linker lite

خاتمة

الى هنا  نكون قد انتهينا من الشرح التفصيلي لاستخدام استخدام Google App Engine مثل CDN . واتمنى ان تستفيدوا منه واذا كان هناك اي استفسار او نقص في الشرح يرجى وضع تعليق ؟

الاكاديمية العربية لفنون التصميم و الجرافيك

إعرض عدد متابعي الخلاصات كما تريد – yourcolor

إعرض عدد متابعي الخلاصات كما تريد

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

Feedburner Text Countإضافة ووردبريس تمكنك من عرض عدد متابعي الخلاصات بشكل نصي مما يتيح لك تخصيص طريقة عرضها كما تريد … كمثال على عمل الاضافة يمكنك رؤية عدد متابعي خلاصات المدونة في الهيدر

بعد تركيب الإضافة قم بإضافة إسم الخلاصات الخاصة بك كما هو على feedburner في صفحة خيارات الاضافة الموجودة في قائمة إعدادات .. بالطبع عليك تفعيل FeedCount من حسابك في feedburner حتى تعمل الإضافة .. بعد تسجيل دخولك في feedburner إضغط على Publicize ثم إختر من القائمة اليمنى FeedCount ثم إضغط على زر activate لتفعيلها ..

لعرض عدد متابعي الخلاصات اضف السطر التالي في المكان الذي تريد :

<?php fb_textcounter(); ?>

ملاحظة : الإضافة لا تعمل على السيرفر المحلي

طريقة عرض عدد متابعيك على تويتر في مدونتك – yourcolor

طريقة عرض عدد متابعيك على تويتر في مدونتك

من منا لم يعد يستخدم تويتر … بل أصبح يمثل للبعض منا إدماناُ … ومع إنتشار تويتر ظهرت الكثير من من الاضافات و الطرق التي تمكنك من إضافة اخر ” تويتراتك ” في مدونتك …. ربما أتناولها في تدوينة قادمة ان شاء الله .. لكن كيف يمكن عرض عدد المتابعين لحسابي في تويتر في مدونتي ؟

حسناً اليك بعض الطرق :

TwitterCounter.com

يتيح لك موقع TwitterCounter اضافة عدد متابعيك كصورة مثل هذا النموذج :

يمكنك الأختيار من بين أربع نماذج مختلفة ستجدها هنا بالاضافة إلى إمكانية إختيار الصورة الكبيرة كالتالية

لإضافة هذا العداد في موقعك بكل بساطة إستخدم هذا الكود في موقعك مع تغير mo3aser إلى إسم حسابك في تويتر ( هذا الكود للبادج الإفتراضي )

<script src="http://twittercounter.com/embed/?username=mo3aser" type="text/javascript"><!--mce:2--></script>

أو يمكنك إستخدام إضافة TwitterCounter للوردبريس و التي تعتمد على نفس الموقع لتوليد هذا العداد

عرض عدد المتابعية كنص :

مع أن الموقع السابق يُمكنك من الأختيار من بين أربع أشكال مختلفة إلا أن هذا يظل محدوداً فالألوان المتاحة ليست كثيرة و التحكم في اسلوب و طريقة العرض وحجم الخطوط و غيرها من الخيارات غير متاح … و حتى نتمكن من التحكم المطلق في طريقة عرض العداد عن طريق CSS يجب أن يتم عرض هذا العداد كنص …

إضافة Twounter للوردبريس توفر هذا الأمر .. كل ما عليك تفعيل الاضافة و إستخدام الكود التالي في المكان الذي تريد ان يظهر فيه العداد في القوالب مع تغيير username إلى إسم حسابك في تويتر …

<?php echo twounter('username') ?>

أما إذا أردت عرض العداد في تدوينة أو صفحة فأستخدم الكود التالي مع تغيير username إلى إسم حسابك في تويتر :

[twounter]username[/twounter]