نستكمل سوياً الجزء الثاني من مكتبة Alamofire وقد تعلمنا سابقاً على كيفية إستقبال البيانات من السيرفر بصيغة JSON والتعامل معاها داخل تطبيقنا مكتبات Swift #1.1 : الإتصال بالسيرفر والتعامل مع بيانات JSON بإستخدام Alamofire واليوم سوف نتعلم سوياً كيفية إرسال البيانات من تطبيقنا إلى السيرفر لتخزين البيانات على السيرفر أو معالجتها ومن ثم إستقبال الرد .
هل فعلاً أحتاج أرسال البيانات للسيرفر ؟
بكل تأكيد هذا يعتمد على فكرة وألية عمل تطبيقك ونظامة إذا كان تطبيقك يحتوي مثلا على عملية تسجيل حساب للمستخدم أو تسجيل دخول أو بشكل أبسط إذا كان تطبيقك يحتوي على نموذج أتصل بنا مثلا أوغيرها فلابد من إرسال البيانات التي أدخلها المستخدم إلى السيرفر ليتم معالجتها أو تخزينها بالسحاب ، أما إذا كان تطبيقك عبارة تحويل التاريخ من هجري إلى ميلادي مثل تطبيق صديقي أبو يزن للأندرويد 😄 ف بكل تأكيد لن تحتاج إلى تخزين البيانات بالسيرفر .
ألية الإرسال :
لابد أن نفهم أولا ماهي الأليه لإرسال البيانات من تطبيقنا إلى السيرفر وكيف تتم ، ولكي نعلم ذلك لابد ان نعرف أولا ان السيرفر نستطيع التخاطب معه بعدة طرق ( وما أقصده هنا بالسيرفر اي نظام الباك اند الذي يوفر لك API التواصل الخاص بك ) والطرق متعددة ومختلفة من أهمها GET و POST وهذه التي تهمنا الأن، ولو نرجع للمقال السابق مكتبات Swift #1.1 : الإتصال بالسيرفر والتعامل مع بيانات JSON بإستخدام Alamofire سوف نجد إننا قد إستخدمنا GET وببساطة الفرق بين GET و POST هو أن الأولى نستخدمها عند إستدعاء البيانات من السيرفر والثانية POST نستخدمها عند إرسال البيانات إلى السيرفر .
واليوم بكل تأكيد سوف نتعلم على إستخدام POST وسوف نقوم بشرح مثال على نموذج أتصل بنا من التطبيق ونقوم بإرساله إلى بريد صاحب التطبيق ولهذا قمت بإنشاء API خاص لهذا الدرس ويستطيع الجميع تجربته وإستخدامه للتطبيق .
فكرة المشروع :
سوف نعمل سوياً على تطبيق يقوم بعرض نموذج مبسط لإتصل بنا بتطبيقنا ومن ثم إرساله إلى السيرفر عن طريق API الذي قمت بإنشائه لهذا الدرس وبدوره سوف يقوم السيرفر بإرسال بريد إلكتروني إلى المستقبل بمحتوى النموذج ،
أي سوف يكون لدينا هذه البيانات والتي نحتاج تعبئتها وإرسالها إلى السيرفر
المستقبل – to : وهنا سوف نضع بريد المستقبل الذي نود إرسال الرساله له ( اي المفترض يكون بريدك ) .
المرسل – from : وهنا نرسل بريد الذي قام بتعبئة النموذج .
عنوان الرساله – Subject : عنوان الرساله المعبأ من النموذج .
الرسالة – msg : وهنا محتوى الرسالة من النموذج ايضا .
معلومات عن API :
بالطبع لن نشرح في هذا الدرس عن طريقة إنشاء API ولقد تطرقت لهذا الموضوع سابقا ماذا قبل أغلاق خدمة Parse السحابية وماهي أفضل الخدمات الأخرى ، الجزء الأول و هنا ايضا بالجزء الثاني ماذا قبل أغلاق خدمة Parse السحابية وماهي أفضل الخدمات الأخرى ، الجزء الثاني .
الفريم ورك المستخدم Laravel .
تفاصيل API :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
Method : POST; URL :http://abdualrhman.com/xd7/api/v1/TestCase/sendEmail Parameters : to : string - email from : string - email Subject : string msg : string Response Type : JSON { "send": "success" } OR Send Errors |
تجهيز التطبيق :
بداية قمت بتجهيز هذا نموذج المراسلة البسيط داخل Xcode
من ثم لا ننسى تضمين مكتبة Alamofire داخل مشروعنا عن طريق إستخدام cocoapods وقمت بشرح طريقة التضمين وإستخدام المكتبة في دروسنا السابقة COCOAPODS ماهي وما فائدتها وكيف تستخدمها وهنا قمنا بشرح تضمين المكتبة نفسها مكتبات Swift #1.1 : الإتصال بالسيرفر والتعامل مع بيانات JSON بإستخدام Alamofire ،
والأن نقوم بربط عناصر الواجهه داخل تطبيقنا بالمتحكم (Controller) الخاص به .
حتى يصبح الكود لدينا بهذا الشكل
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
import UIKit import Alamofire class ViewController: UIViewController { @IBOutlet weak var fromEmail: UITextField! override func viewDidLoad() { super.viewDidLoad() // Do any additional setup after loading the view, typically from a nib. } override func didReceiveMemoryWarning() { super.didReceiveMemoryWarning() // Dispose of any resources that can be recreated. } } |
ونقوم بربط باقي العناصر
1 2 3 |
@IBOutlet weak var fromEmail: UITextField! @IBOutlet weak var subject: UITextField! @IBOutlet weak var msg: UITextView! |
ونقوم بوضع action للزر الخاص بالإرسال
1 2 3 4 |
@IBAction func sendEmail(sender: AnyObject) { } |
حتى يصبح الكود بشكل كامل
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
import UIKit import Alamofire class ViewController: UIViewController { @IBOutlet weak var fromEmail: UITextField! @IBOutlet weak var subject: UITextField! @IBOutlet weak var msg: UITextView! override func viewDidLoad() { super.viewDidLoad() // Do any additional setup after loading the view, typically from a nib. } @IBAction func sendEmail(sender: AnyObject) { } override func didReceiveMemoryWarning() { super.didReceiveMemoryWarning() // Dispose of any resources that can be recreated. } } |
الأن عند الضغط على زر الإرسال نريد أن يقوم التطبيق بالحصول على قيم المدخلات وتجهيزها للإرسال
ويتم ذلك عن طريق الحصول على قيمة text للحقل عند الضغط على زر أرسل والذي قمنا بإنشاء action له سابقاً .
1 2 3 4 5 |
@IBAction func sendEmail(sender: AnyObject) { let from = fromEmail.text let formSubject = subject.text let formMsg = msg.text } |
الأن نقوم بإستخدام Alamofire وتجهيزها داخل دالة الإرسال الخاصه بزر الإرسال sendEmail .
وبداية علينا تجهيز متغير يحتوي على متطلبات API والقيم الخاصه بها والتي جلبناها من النموذج
ولذلك سوف نقوم بإنشاء متغتير نسميه مثلا params وعبارة عن array وتحتوي على key و value بحيث قيمة key تكون متطلب API الذي نود تعبئته بالقيمة التي جلبناها من النموذج و قيمة value تكون البيانات من النموذج ويصبح لدينا الشكل النهائي لهذا المتغير داخل action الخاص بزر الإرسال .
1 2 3 4 5 6 |
let params = [ "to": "YourEmail", // هنا تضع بريدك الذي تود إستقبال الرساله به "from" : from , "Subject" : formSubject , "msg" : formMsg ] |
والأن نقوم بتجهيز الإرسال بإستخدام Alamofire
1 |
Alamofire.request(.POST, "URL" , parameters: params ) |
قمنا بإستخدام طريقة التواصل POST وسوف نضع رابط API الخاص بالإرسال والتي وضحناها بالآعلى بقيمة URL وفي الخير وضعنا قيمة لـ parameters بقيمة المتغير الذي قمنا بإنشائه params .
1 |
Alamofire.request(.POST, "http://abdualrhman.com/xd7/api/v1/TestCase/sendEmail" , parameters: params ) |
وسوف نعرض رسالة تنبيه في حال تم الإرسال بنجاح الأمر
1 2 3 |
let aletMessage = UIAlertController(title: "تم بنجاح", message: "تم إستقبال رسالتك بنجاح", preferredStyle: .Alert) aletMessage.addAction(UIAlertAction(title: "حسناً", style: UIAlertActionStyle.Default, handler: nil)) self.presentViewController(aletMessage, animated: true, completion: nil) |
حتى يصبح شكل الكود بشكل كامل
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 |
import UIKit import Alamofire class ViewController: UIViewController { @IBOutlet weak var fromEmail: UITextField! @IBOutlet weak var subject: UITextField! @IBOutlet weak var msg: UITextView! override func viewDidLoad() { super.viewDidLoad() // Do any additional setup after loading the view, typically from a nib. } @IBAction func sendEmail(sender: AnyObject) { let from = fromEmail.text let formSubject = subject.text let formMsg = msg.text let params = [ "to": "YourEmail", "from" : from , "Subject" : formSubject , "msg" : formMsg ] Alamofire.request(.POST, "http://abdualrhman.com/xd7/api/v1/TestCase/sendEmail" , parameters: params ) let aletMessage = UIAlertController(title: "تم بنجاح", message: "تم إستقبال رسالتك بنجاح", preferredStyle: .Alert) aletMessage.addAction(UIAlertAction(title: "حسناً", style: UIAlertActionStyle.Default, handler: nil)) self.presentViewController(aletMessage, animated: true, completion: nil) } override func didReceiveMemoryWarning() { super.didReceiveMemoryWarning() // Dispose of any resources that can be recreated. } } |
والأن لنجرب التطبيق
وهذه الرسالة قد وصلت
ملاحظة قد تصل الرسالة إلى بريدك المهمل
وإلى هنا وصلنا لنهاية هذه الجزئية والتي كان الهدف منها هو توضيح فكرة إرسال البيانات من التطبيق إلى السيرفر عن طريق API وبإستخدام مكتبة Alamofire .
ما رأيك بتمرين ؟
سوف أكلفك بمهمه قمت بشرحها سابقا وهي كالتالي
عندما قمنا بإرسال البيانات إلى السيرفر
لم نقم فعليا بالتحقق من رد السيرفر بحيث إذا قمنا بوضع إيميل خاطيء أو لم نقم بتعبئة البيانات الـ API سوف يرد علينا بالأخطاء وإذا تم بنجاح إرسال البريد أيضاً السيرفر يقوم بالرد علينا وإخبارانا بنجاح العميلة
المطلوب منك هو إستقبال الرد من السيرفر وعرضه للمستخدم
تلميحة عملك سوف يكون بهذه الجزئية :
1 |
Alamofire.request(.POST, "http://abdualrhman.com/xd7/api/v1/TestCase/sendEmail" , parameters: params ) |
إستقبل الرد وأعرضه للمستخدم ولا تنسى مراجعة الموضوع التي أشرت عليه راح يفيدك جداً
ضع تعليق بالكود الخاص بك لنرى مستوى تقدمك
وإلى هنا يا أحبتي بالله وصلنا لنهاية هذا الدرس وأتمنى من الله إني وفقت بتقديم هذه المعلومة لكم بأبسط ما يكون وبإذن الله يوجد العديد من الشروحات والدروس لعدة مكاتب ومواضيع أخرى ،
أتمنى منك دعمي بنشر رابط هذا المقال ولكي تفيد غيرك ويعلم الله وحده الجهد والوقت الذي يتطلبه مني إنشاء هذه المقالات وقد سهلت لك أمر النشر فقط إختر الشبكة التي تود النشر فيها من الأسفل وسوف يتكفل الموقع بكل شيء ، تأكد دعمك لي بالنشر يحمسني أكثر وأكثر للمزيد .
سبحانك اللهم وبحمدك , أشهد أن لا إله إلا أنت , أستغفرك وأتوب إليك ..
الرابط المختصر للموضوع : xd7.me/19
3 September، 2016 at 3:25 pm
شكرا لك على هذا الدرس الجميل 3>
ولكن ألا يجب علينا أن نغير ترميز الرسالة إلى UTF-8 OR UTF-16 قبل إرسالها للسيرفر لنتجنب الوقوع في مشكلة الاستفهامات والرموز الغريبة؟
4 September، 2016 at 12:36 am
حياك الله أخ عاصم
لم تواجهني هذه المشكلة
ولكن على الأغلب تعتمد على ترمير المبرمج به API
فإذا كان UTF-8 على الأغلب لن تحصل أي مشاكل
6 September، 2016 at 4:03 am
السلام عليكم
اخي عبدالرحمن
محتوى لغة سويفت العربي ضعيف جداً
اشكر لك جهدك ونفخر بك
واتمنى ان تفعل قناتك على يوتيوب 😄
6 September، 2016 at 7:36 am
وعليكم السلام ورحمة الله وبركاته
شاكر لك كلامك
وبإذن الله سوف يكون هناك المزيد
🌹
25 September، 2016 at 3:11 pm
اخوي عبدالرحمن انت ما حطيت لنا ملفات الphp الي بتستقبل الرسالة اول شي
14 October، 2016 at 7:10 pm
نعم صحيح
توجهه الدرس كان لإستخدام المكتبة وطرقها
ولم يمكن للسيرفر سايد نفسه
وتستطيع التجربة على نفس api الذي أستخدمته
وبإذن الله بدروس قادمة راح نلتفت لل apis
شكر ا لك