الدرس الأول - الاتصال بخدمات الويب

الهدف

سنقوم في هذا الدرس بالاتصال بخدمة ويب خاصة بنا، بحيث نتمكن من إنشاء طلب GET لقراءة البيانات، وطلب اخر من نوع POST لكتابة البيانات على خدمة الويب.

تفاصيل التطبيق

لن نقوم بهذا الدرس بكتابة اي كود برمجي، ولكن سنقوم بتعلم الية الاتصال بخدمات الويب، بحيث نقوم بطلب GET يعرض لنا مجموعة المطورين الذي اكملوا هذا الدرس مسبقاً وقاموا بتسجيل انفسهم. وستتمكن انت ايضا بنهاية الدرس من ارسال طلب POST إلى خدمة الويب، لحفظ بياناتك مع قائمة المطورين السابقة، لكي يتمكن المطورين من مشاهدة اسمك  في القائمة لاحقاً.

ماذا بعد هذا الدرس؟

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

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

1. تطبيق سطح المكتب باستخدام WPF:

بحيث نقوم بإنشاء تطبيق ويندوز مصغر يمكن من خلاله قراءة بيانات المطورين المسجلين وعرضها ضمن List، ونقوم ايضاً بإنشاء نموذج اخر يمكننا من خلاله ارسال طلب post لتسجيل بياناتنا مرة اخرى، بأننا قمنا باجتياز هذا الدرس بنجاح.

2. تطبيق ويب باستخدام ASP.NET MVC:

بحيث نقوم بعرض بيانات المطورين المسجلين مسبقاً على صفحة html، ونقوم ايضاً بانشاء صفحة html اخرى، لارسال بياناتنا بأننا قمنا باجتياز هذا الدرس بنجاح.

3. تطبيق موبايل Android و iOS باستخدام #C و Xamarin:

بحيث نقوم بعرض بيانات المطورين المسجلين مسبقاً على شاشة الموبايل، ونقوم ايضا بإنشاء شاشة جديدة ضمن تطبيق الموبايل، لارسال بياناتنا مرة اخرى، بأننا قمنا باجتياز هذا الدرس بنجاح.

المتطلبات

نحتاج إلى تطبيق يساعدنا في انشاء وارسال طلبات الويب Http Requests، بإمكانك استخدام اي اداه تناسبك، او بامكانك المتابعة معنا في الدرس، وتنزيل تطبيق Postman من الرابط التالي:

https://www.getpostman.com/downloads/

لنبدأ بالدرس

بعد تثبيت اداة postman نقوم بتشغيلها، ويظهر لدينا واجهة التطبيق بالشكل التالي:

الأن نضغط على علامة الزائد، لفتح صفحة جديدة، ثم نقوم بتحديد نوع الطلب GET، وكتابة رابط خدمة الويب كالتالي:

http://api.parmajiat.org/api/developers

الآن تصبح لدينا شاشة تطبيق postman بالشكل التالي:

بعد التأكد من ملىء البيانات بشكل صحيح، يصبح لدينا طلب ويب Http Request جاهز للارسال، واستلام النتيجة. لذلك نضغط على زر ارسال SEND الأزرق وننتظر النتيجة في الأسفل كما هو موضح بالشكل التالي:

الآن عند اكتمال الطلب بنجاح، نحصل على الكود 200 والذي يعني اتمام الطلب بنجاح، ونشاهدة نتيجة الطلب كما في الصورة.

قد تختلف لديك البيانات في الوقت الذي تقوم به بالمتابعة مع هذا الدرس، والسبب أن العديد من المطورين قد يكونو سجلوا بياناتهم بنجاح، بالتالي قد تشاهد نتائج اكثر.

حان دورك!

الآن بعد ان قمنا بارسال طلب GET بنجاح، حان وقت ارسال طلب POST، وهذا النوع من الطلبات غالبا يحمل طابع الاضافة او التعديل، بالتالي نحتاج لمجموعة من البيانات بحيث نقوم ارسالها لخدمة الويب هذه، والتي ستقوم بدورها بحفظ البيانات إلى قاعدة البيانات. بحيث يمكنك بعدها مشاهدة اسمك في قائمة المطورين عند تنفيذ طلب GET مرة اخرى.

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

1. نقوم بتغيير نوع الطلب من GET إلى POST

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

http://api.parmajiat.org/api/developers

3. نقوم بتحديد محتوى الطلب وذلك بالضغط على خيار body

4. سنقوم بادخال البيانات بشكل يدوي، لذلك نحدد الخيار raw

5. نحدد نوع البيانات الذي سنقوم بارساله لخدمة الويب (السيرفر) وفي هذه الحالة نختار JSON

6. نقوم بادخال بيانات الطلب بشكل يدوي، (قم بادخال اسمك، وبريدك الالكتروني، ووصف مختصر عنك)

{
	"name": "YOUR_NAME",
	"email":"YOUR_EMAIL",
	"bio":"YOUR_BIO"
}

7. اضغط على زر ارسال SEND

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

بالتوفيق،،،