Advertisements

إنشاء تطبيق متصفح بسيط بلغة سويفت – الجزء الأول

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

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

الجزء الأول:

  • تسمية مشروع جديد.
  • بدء المشروع على الإكس كود.
  • وضع حدود عمل المتصفح.
  • ربط المتصفح بملف البرمجة “UIViewController”.
  • كتابة النص البرمجي وتشغيل محاكي الآيفون لاختبار المتصفح.

الجزء الثاني:

  • إضافة خاصية البحث ووضع عنوان كصفحة رئيسية.
  • إضافة أزرار الرجوع للخلف، التقدم للأمام وإعادة التحميل.
  • إخفاء لوحة المفاتيح بعد الكتابة في خانة البحث.
  • إضافة مؤشر التحميل “UIActivityIndicator”.
  • تمكين المواقع الغير مشفرة أو الغير المحمية “http” باستخدام خاصية ATS.

 

الجزء الأول

الإكس كود المستخدم في هذا المثال هو Xcode 8 beta، ويلزم وجود نظام macos Sierra لتثبيت برنامج Xcode 8. لتنزيل نظام الماك سييرا توجه إلى موقع أبل لتنزيل النسخة التجريبية العامة على جهازك أو اتبع هذا الشرح المقدم من مدونة أبل للتقنية لتثبيت نسخة الماك سييرا على فلاش ميموري ومن ثم تنزيل برنامج الإكس كود من موقع المطورين.

  1. بعد الإنتهاء من التثبيت وفتح البرنامج، قم باختيار إنشاء مشروع جديد.

 

create a new project

 

2. عليك الآن باختيار مسار لحفظ الملف، ثم اضغط على “Create”

3. ستظهر نافذة تسأل عن قالب التطبيق، توجه إلى أعلى النافذة، اختر iOS ثم من قائمة Application اختر Single View Application ثم اضغط على  Next.

 

Choose App

 

4. لنقم الآن بتسمية المشروع، وليكن في المثال التالي “myWebBrowser”. أيضاً من المهم جداً اختيار لغة “Swift” كما يظهر أمامكم.

 

Project Name

 

5. جاء دور وضع المتصفح في التطبيق. نختار “Main.storyboard” من الشريط الأيسر “Navigator” ثم نتوجه إلى صندوق الأدوات . “Object Library” أسفل الشريط الأيمن، نبحث عن “Web View” ومن ثم نقوم بسحبه باستخدام زر الفأرة الأيسر وإفلاته داخل الـ “View”.

6. نضع الحدود ليشغل المتصفح كامل الشاشة.

 

constraints

 

7. نربط المتصفح بملف التحكم “UIViewController” من خلال إنشاء “IBOutlet” ليصبح المتصفح قادراً على تلقي التعليمات من هذا الملف وذلك بفتح المحرر المساعد “Assisstant Editor” ومن ثم الضغط على الزر cmd والجر من على المتصفح باستخدام زر الفأرة الأيسر المتصفح كما في الصورة.

 

connect

 

8. جاء دور كتابة النص البرمجي، لذلك نحن بحاجة إلى ثلاثة خطوات كلها تكتب داخل دالة “viewDidLoad” :

  • الخطوة الأولى: نعرف ثابت لرابط المتصفح من نوع “URL”.
  • الخطوة الثانية: ننشئ طلباً لتحميل صفحة الويب من نوع “URLRequest” استناداً إلى الثابت السابق “الكائن” من نوع “URL”.
  • الخطوة الثالثة: نقوم بإعطاء المتصفح أمر لتحميل صفحة الويب وذلك بتمرير طلب التحميل للـ “webView” .

والناتج هو هذا الكود ويمكنكم نسخه عن طريق النقر مرتين بزر الفأرة الأيسر!

 

 

هذا كل شيء!

الآن بالإمكان تشغيل التطبيق من خلال محاكي نظام iOS.

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

 

 

لتنزيل ملف الإكس كود كاملاً بعد نهاية التمرين اضغط على هذا الرابط.

شاركونا آراءكم في التعليقات أسفل الموضوع.

عدد المشاهدات: 64
Advertisements
10 ديسمبر، 2017

0 ردود على “إنشاء تطبيق متصفح بسيط بلغة سويفت - الجزء الأول"

اترك رسالة

لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *

top
جميع الحقوق محفوظة لفريق المطورين العرب © arabdevteam