سنرى في مقال اليوم كيفية إنشاء متصفح ويب بسيط من البداية بمساعدة برنامج Visual Studio. وهو عبارة عن بيئة تطوير من مايكروسوفت تساعدنا في انشاء تطبيقات للويندوز بكل بساطة، وعلى الرغم من أنه يتعين عليك كتابة بعض الأوامر البرمجية، الا انها ستكون بسيطة ويكفي أن تتبع بالتفصيل الخطوات التي سنشرحها لك ادناه بالتفصيل.
كيفية إنشاء متصفح ويب بسيط للكمبيوتر باستخدام Visual Studio
1 - للبدء، أول شيء يتعين علينا القيام به هو تنزيل تطبيق Visual Studio Community 2022. إنه مجاني ويمكن تنزيله مباشرة من موقع Microsoft الرسمي (ومتوفر لنظامي التشغيل Windows وMac). يعد هذا التثبيت ثقيلًا إلى حد ما (حوالي 17 جيجابايت)، لذا قد تستغرق العملية بضع دقائق.
2 - بمجرد تنزيل برنامج التثبيت وبدء تشغيله، سيتعين علينا تحديد بيئة العمل التي نريد تثبيتها. نحدد علامتي التبويب " .NET Desktop Development " و" Windows Application Development " وننقر على "تثبيت".
3 - بعد التثبيت، نفتح تطبيق Visual Studio. إذا كانت هذه هي المرة الأولى التي نقوم فيها بالوصول إليه، فسوف يطلب منا اسم مستخدم وكلمة مرور، لكن يمكننا تخطي هذه الخطوة من خلال النقر على "تخطي هذا في الوقت الحالي".بمجرد الدخول إلى الشاشة الرئيسية لبرنامج Visual Studio، نختار " إنشاء مشروع ".
4 - سنجد هنا العديد من قوالب المشاريع المحددة مسبقًا: نبحث عن خيار " Windows Forms Application (.NET Framework) " ثم نضغط على "التالي".
بعد ذلك سنعطي اسماً لمتصفح الويب الخاص بنا. في حالة هذا المثال، سوف نسمي متصفحنا "Tech View". ثم نضغط على Create.
5 - بعدها سيتم ادخالنا إلى بيئة تطوير البرنامج، حيث سننقر على قائمة " Toolbox " الموجودة على الجانب الأيسر من الواجهة. إذا كنت لا ترى صندوق الأدوات، فانقر فوق "عرض - " في الشريط العلوي من Visual Basic ثم انقر فوق "صندوق الأدوات - Toolbox ". بمجرد عرض المربع، نذهب إلى " Common Controls "، وحدد خيار " WebBrowser " واسحبه إلى النموذج "Form1" الذي سيكون ظاهراً على الشاشة بشكل تلقائي.
سنرى تلقائياً كيف يتم تحميل نافذة "الخصائص - properties" على الجانب. من هنا يمكننا ضبط بعض قيم المتصفح، مثل ارتفاع وعرض النافذة، الخط، اللون أو إذا أردنا أن يحتوي على شريط تمرير، بالإضافة إلى متغيرات أخرى. ملاحظة: إذا كنت لا ترى مربع الخصائص، فانقر بزر الماوس الأيمن فوق نافذة Form1 ثم انقر فوق "خصائص - properties".
سنعود الآن إلى Form1 مرة أخرى ونضغط على زر القائمة الصغير الذي يظهر في الجزء العلوي الأيمن من النافذة. نختار " Undock to parent container " كما موضح في الضورة ادناه.
بعد ذلك، سنقوم بإعادة ضبط شكل container لترك بعض المساحة للأزرار التي سنقوم بإنشائها في الجزء العلوي من النافذة.
6 - الآن بعد أن أنشأنا النافذة التي سيتم فيها عرض الصفحات التي نقوم بتحميلها، سنقوم بإضافة 5 أزرار للتحكم في التنقل. ستؤدي الأزرار وظائف الانتقال إلى الصفحة السابقة، والانتقال إلى الصفحة التالية، والتحديث، وتحميل الصفحة، والانتقال إلى الصفحة الرئيسية. وهي تعتبر أساسيات تصفح الإنترنت.
للقيام بذلك، سنعود إلى قائمة الأدوات. سنقوم بسحب أداة " الزر - Button" إلى الـ Form. سنضعه في الزاوية العليا ومن مربع "الخصائص - properties" سنغير الاسم إلى " رجوع - Back في حقل Text.
سنكرر هذه العملية نفسها وننشئ أيضاً أزرار " الأمام " و" الصفحة الرئيسية " و" التحديث " و" التحميل " .بعد ذلك، سنقوم أيضاً بإنشاء مكون جديد من " Common Controls -> Text Box ". سيكون هذا هو مربع النص الذي سندخل فيه عناوين URL.
في النهاية سيكون الشكل النهائي للأدوات على المتصفح بالشكل ادناه:
7 - الان يجب علينا ان نضيف الكود البرمجي فكل ما علينا فعله الآن هو النقر نقراً مزدوجاً على الازرار واحداً واحداً ونبدأ مع على زر " رجوع " حتى نتمكن من تخصيص وظيفة له. سيؤدي هذا إلى فتح نافذة التعليمات البرمجية، ووضع المؤشر على سطر فارغ. وبدون تحريك المؤشر من مكانه نكتب ما يلي:
;( )webBrowser1.GoBack
بعد ذلك، سنعود إلى النموذج وننقر نقرًا مزدوجًا على زر " Forward "، ونقوم بإدخال السطر التالي من التعليمات البرمجية:
;( )webBrowser1.GoForward
سنقوم بتعيين الوظيفة التالية لزر " الصفحة الرئيسية ":
;webBrowser1.Navigate(«https://www.google.com»)
في هذا المثال، قمنا بوضع عنوان URL الخاص بـ Google، ولكن بالطبع يمكنك استبداله بالصفحة الرئيسية المفضلة لديك.
فيما يتعلق بزر " التحديث "، سنطبق الوظيفة التالية:
;( )webBrowser1.Refresh
أخيراً، في زر " تحميل " سوف نقوم بإدخال هذا الكود الآخر:
;webBrowser1.Navigate(textBox1.Text)
8 - الآن، كل ما علينا فقط حفظ مشروعنا، والانتقال إلى قائمة "Compiler" والنقر على زر "Generate". يمكننا أيضاً الضغط على اختصار لوحة المفاتيح CONTROL+B.
لمعرفة كيفية عمل متصفحنا المنزلي، كل ما علينا فعله هو النقر على الزر الأخضر في البرنامج ليتم تشغيله.
كما ترون، اصبح لدينا متصفح جذاب للغاية. هذا العمل يعتبر بداية لتعلم البرمجة و كمقدمة لعالم Visual Studio فهو بداية بسيطة جداً ومثيرة للاهتمام. يمكننا تحسينه عن طريق إجراء المزيد من التعديلات وتصحيح الأخطاء، على الرغم من أن ذلك يعتمد على المدى الذي نريد أن نصل إليه في تطوير تطبيقنا ووقت الفراغ الذي نريد تخصيصه للمشروع.
اترك تعليقك هنا :