📁 آخر الأخبار

كيف تقوم بإنشاء متصفح انترنت خاص بك من الصفر

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

سنرى في مقال اليوم كيفية إنشاء متصفح ويب بسيط من البداية بمساعدة برنامج 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" الذي سيكون ظاهراً على الشاشة بشكل تلقائي.

إضافة أداة WebBrowser

سنرى تلقائياً كيف يتم تحميل نافذة "الخصائص - properties" على الجانب. من هنا يمكننا ضبط بعض قيم المتصفح، مثل ارتفاع وعرض النافذة، الخط، اللون أو إذا أردنا أن يحتوي على شريط تمرير، بالإضافة إلى متغيرات أخرى. ملاحظة: إذا كنت لا ترى مربع الخصائص، فانقر بزر الماوس الأيمن فوق نافذة Form1 ثم انقر فوق "خصائص - properties".

الدخول الى الخصائص

سنعود الآن إلى Form1 مرة أخرى ونضغط على زر القائمة الصغير الذي يظهر في الجزء العلوي الأيمن من النافذة. نختار " Undock to parent container " كما موضح في الضورة ادناه.

Undock to parent container

بعد ذلك، سنقوم بإعادة ضبط شكل 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.

عمل Compiler للمتصفح

لمعرفة كيفية عمل متصفحنا المنزلي، كل ما علينا فعله هو النقر على الزر الأخضر في البرنامج ليتم تشغيله.

تشغيل المتصفح

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

ختاماً لا تنسى متابعة صفحاتنا وحساباتنا على Facebook أو WhatsApp أو Twitter (X) أو زيارة قناة Telegram الخاصة بنا للبقاء على اطلاع بأحدث أخبار التكنولوجيا.

تيك فيو - Tech View
تيك فيو - Tech View
انطلق موقعنا في العام 2017 ومنذ ذلك اليوم الى يومنا هذا، نقدم دروس ومحتوى تقني ، يهدف إلى إثراء المحتوى التقني العربي ، وتعزيزه بمحتوى هادف ومفيد.
تعليقات