Rehber Kendi internet tarayıcımızı nasıl yaparız?

Merhaba,
Bugün sizlere nasıl kendi tarayıcınızı yapabileceğinizi anlatacağım.
Öncelikle belirtmeliyim ki yazılım bilginiz hiç yok ise mükemmel bir tarayıcı beklemeyin. Bu makalede tarayıcı alt yapısı kurmayı ve 1-2 detay ekleyeceğiz. (Arama motoru, ayarlar sekmesi ve benzeri.)
Gereken uygulamalar ve paketler şunlardır.
- Visual Studio 2019 16.10
- Visual Studio projemiz için NuGet paketi olan "CefSharp"
Önemli not:
Visual Studio ilk defa kuracaklar için, kurulum ekranlarından birinde karşınıza gelen dil ve proje yükleme kısmında "Masaüstü Uygulama Geliştirme (.NET Framework) seçmeniz gerekli. Daha sonrasında proje açarken Windows Forms (.NET Framework) projesini açın. (C# Dili olmasına dikkat edin.)

1623625443681.png


Proje > NuGet Paketlerini Yönet > Göz At Yolunu takip ettikten sonra arama kısmına "CefSharp" yazıp CefSharp. WinForms yüklüyoruz.

1623626935900.png


Peki bu NuGet paketi ne işe yarıyor?
Size tarayıcı sunuyor. Kendisine özel olan Tool'u kullanarak tarayıcınızı bağlayabiliyorsunuz.

Daha sonrasında Form1[Design].CS sekmesine gelip Araç Kutusu kısmından istediğiniz araçları ekleyerek ekranınızı özelleştirin.
Sırasıyla:
Label = Metin
TextBox = Yazı Kutusu
PictureBox = Resim Kutusu
MenuStrip = Özel Menü (Yeni başladıysanız çok karışık gelecektir, Kullanmamanızı tavsiye ederim. (Tabii tamamen sizin isteğinize bağlı.)
Button = Buton
Form ile ilgili ayarları sağda bulunan özellikler sekmesinden ayarlayabilirsiniz.

1623627183092.png


Aynı benim gibi yapabilirsiniz. NuGet paketini yüklediyseniz ChromiumWebBrowser'i Araç Kutusundan Form'a sürüklemeyi unutmayın! Yoksa tarayıcınız çalışmaz. ChromiumWebBrowser tarayıcınızın gözükeceği alandır.
Buton olarak (Geri tuşu, ileri tuşu, ayarlar sekmesi vb.) PictureBox kullanıyorum. Siz isterseniz Button kullanabilirsiniz.
Resimdeki gibi ayrıntılı bir şey yapmayacağız. Dediğim gibi internetten kısa bir şekilde araştırarak farklı Tool'lar ile özelleştirebilirsiniz.
Şimdi ayarlayacağımız şey uygulama başlatılınca bizi https:/www.google.com adresine yönlendirmesi. Siz farklı siteye yönlendirebilirsiniz tabii.
Form'a çift tıklıyoruz ve bizi "Form1_Load" olayının olduğu kod satırına atıyor. En üstte bulunan kütüphane kısmına
Using CefSharp;
Using CefSharp. WinForms;
Using CefSharp. Event;
Using CefSharp. JavascriptBinding;
Using CefSharp. Web;
Using CefSharp. WinForms. Internals;
Kodlarını ekleyin.
Daha sonrasında Form1_Load olayının içine şu kodları yapıştırın:
Browser = New CefSharp. WinForms. ChromiumWebBrowser("https:/www.google.com")
{
Dock = DockStyle. Fill,
Size = New Size(949, 569),
Location = New Point(200, 200),
};
This. Panel1.Controls. Add(browser);
En sonunda ise hiçbir yere bağlı olmayan public alana şu kodu yapıştırın.
Public CefSharp. WinForms. ChromiumWebBrowser browser;
En sonunda şu şekilde bir görünüm alacaktır:

1623627762940.png


1623627787410.png


1623627807592.png


Hepsini doğru yaptığınızdan eminseniz,
Uygulamayı başlatın. Başlattığınızda 1 - 2 dakika bekleyince tarayıcı açılacaktır. (Visual Studio içinde başlattığınız için ve ilk başlatışınız olduğu için aynı Google gibi başta kasması doğaldır. Sonrasında 2 - 3 saniyelere düşecektir süre.)
Eğer hatanız yok ise detaylara geçelim. Hata alıyorsanız SS'ler ile buraya bildirin :)
Yapacağımız şey TextBox'a yazılan şey Enter basılınca aratılsın.
Bunun için TextBox eklemeyi unutmayın.
TextBox1 events sekmesine gelin. (Özellikler kısımlarında yıldırım işaretli.)

1623628000234.png


Bende neden MetroTextBox diye soracak olursanız ayrı bir görünüm paketi kullanıyorum. İleride değineceğim.
O kısma tıklayınca önümüzü bu şekilde bir ekran karşılayacaktır:

1623628071688.png


"KeyDown" çift tıklayarak kod satırlarına geçiş yapın. Daha sonrasında bu kodları yapıştırın.
İf (e. KeyCode == Keys. Enter)
{
Browser = New CefSharp. WinForms. ChromiumWebBrowser(metroTextBox1.Text)
{
Dock = DockStyle. Fill,
Size = New Size(949, 569),
Location = New Point(200, 200),
};
chromiumWebBrowser1.Controls.Clear();
ChromiumWebBrowser1.Controls. Add(browser);
}
Burada Enter tuşuna basılınca neler yapılacağını belirledik.
Önemli Not: Parantez içindeki "metroTextBox1.Text" kısmını normal TextBox kullanıyorsanız "TextBox1.Text" olarak değiştirin.

1623628186986.png


Daha sonrasında Form yüklenince TextBox'a youtube.com tarzı bir link girip test edin. Çalışmaması zor ancak yine de sorun çıkarsa kesinlikle bana bildirin.
Şimdi Ayarlar sekmesini yapacağız. Ayarları yapmayacağız sadece sekmeyi yapacağız çünkü içeriğini yaparsak makale aşırı derecede uzar konudan sapar. Proje > Form Ekle (Windows Forms)... Tıklayın ve Form ekleyin. Peki nasıl yeni Form'a geçeceğiz? Şu alandaki 3 bar Icon'u ile.

1623628412983.png


Bu pictureBox ile yapıldı. İnternetten 5 dakikalık araştırma ile pictureBox uzmanı olmanız mümkün zaten. Şimdi PictureBox'a çift tıklıyoruz ve gelen kod satırına şu kodları giriyoruz.
Ayarlar ayar = New Ayarlar();
ayar.Show();

1623628488205.png


Unutmayın! Buradaki "Ayarlar" 2. Formumun ismi. Sizde Form2 şeklinde ise "Ayarlar" yerine "Form2" yazın!
Bu sayede Ayarlar sekmesini açacaktır. Ayarlar sekmesi açılınca Tarayıcı sekmesi kapansın istiyorsanız:
this.Hide();
Komutunu ekleyebilirsiniz.
Şimdi Formlarımın tasarım SS'leri:

1623628690910.png


1623628701851.png


Tarayıcı yapmak bu kadar basit. Geri tuşu - İleri tuşu için ise:
Geri tuşu pictureBox kodlarına

browser.Back();

İleri tuşu pictureBox kodlarına

browser.Forward();

Yazabilirsiniz. İleride daha detaylı makaleler yazacağım. Umarım faydam dokunmuştur :) Benim bu makaleden herhangi bir kâr amacım yok. Tek istediğim insanların Yazılıma ve sanal dünyaya daha fazla merak ve ilgi göstermeleri. Geleceğin mesleği diye boşuna demiyorlar. Eskiden uygulama yapmak sadece dev yazılım şirketlerinin elinde iken şimdi elimizdeki laptoptan, bilgisayardan veya herhangi bir aletten her şeyi yapabiliyoruz. Bu şansımızı değerlendirmemiz lazım değil mi? İyi günler dilerim.
 
Elinize sağlık. Güzel anlatım olmuş.
 
Böyle şeyleri rehber olarak nitelerseniz insanlara ulaşması daha kolay olur. Çoğu kişi bunu soru sanıp tıklamıyor bile "tarayıcı yapma" işinden anlamadığı için.

Konu oluştur kısmında göremedim nasıl rehber olarak nitelendiriliyor?

Düzeltme: Sanırsam moderatör arkadaşlar konumu rehber konusu yaptı. Teşekkür ederim :)
 
Son düzenleyen: Moderatör:
Merhaba,
Bugün sizlere nasıl kendi tarayıcınızı yapabileceğinizi anlatacağım.
Öncelikle belirtmeliyim ki yazılım bilginiz hiç yok ise mükemmel bir tarayıcı beklemeyin. Bu makalede tarayıcı alt yapısı kurmayı ve 1-2 detay ekleyeceğiz. (Arama motoru, ayarlar sekmesi ve benzeri.)
Gereken uygulamalar ve paketler şunlardır.
- Visual Studio 2019 16.10
- Visual Studio projemiz için NuGet paketi olan "CefSharp"
Önemli not:
Visual Studio ilk defa kuracaklar için, kurulum ekranlarından birinde karşınıza gelen dil ve proje yükleme kısmında "Masaüstü Uygulama Geliştirme (.NET Framework) seçmeniz gerekli. Daha sonrasında proje açarken Windows Forms (.NET Framework) projesini açın. (C# Dili olmasına dikkat edin.)

Eki Görüntüle 1067510

Proje > NuGet Paketlerini Yönet > Göz At Yolunu takip ettikten sonra arama kısmına "CefSharp" yazıp CefSharp. WinForms yüklüyoruz.

Eki Görüntüle 1067522

Peki bu NuGet paketi ne işe yarıyor?
Size tarayıcı sunuyor. Kendisine özel olan Tool'u kullanarak tarayıcınızı bağlayabiliyorsunuz.

Daha sonrasında Form1[Design].CS sekmesine gelip Araç Kutusu kısmından istediğiniz araçları ekleyerek ekranınızı özelleştirin.
Sırasıyla:
Label = Metin
TextBox = Yazı Kutusu
PictureBox = Resim Kutusu
MenuStrip = Özel Menü (Yeni başladıysanız çok karışık gelecektir, Kullanmamanızı tavsiye ederim. (Tabii tamamen sizin isteğinize bağlı.)
Button = Buton
Form ile ilgili ayarları sağda bulunan özellikler sekmesinden ayarlayabilirsiniz.

Eki Görüntüle 1067523

Aynı benim gibi yapabilirsiniz. NuGet paketini yüklediyseniz ChromiumWebBrowser'i Araç Kutusundan Form'a sürüklemeyi unutmayın! Yoksa tarayıcınız çalışmaz. ChromiumWebBrowser tarayıcınızın gözükeceği alandır.
Buton olarak (Geri tuşu, ileri tuşu, ayarlar sekmesi vb.) PictureBox kullanıyorum. Siz isterseniz Button kullanabilirsiniz.
Resimdeki gibi ayrıntılı bir şey yapmayacağız. Dediğim gibi internetten kısa bir şekilde araştırarak farklı Tool'lar ile özelleştirebilirsiniz.
Şimdi ayarlayacağımız şey uygulama başlatılınca bizi https:/www.google.com adresine yönlendirmesi. Siz farklı siteye yönlendirebilirsiniz tabii.
Form'a çift tıklıyoruz ve bizi "Form1_Load" olayının olduğu kod satırına atıyor. En üstte bulunan kütüphane kısmına
Using CefSharp;
Using CefSharp. WinForms;
Using CefSharp. Event;
Using CefSharp. JavascriptBinding;
Using CefSharp. Web;
Using CefSharp. WinForms. Internals;
Kodlarını ekleyin.
Daha sonrasında Form1_Load olayının içine şu kodları yapıştırın:
Browser = New CefSharp. WinForms. ChromiumWebBrowser("https:/www.google.com")
{
Dock = DockStyle. Fill,
Size = New Size(949, 569),
Location = New Point(200, 200),
};
This. Panel1.Controls. Add(browser);
En sonunda ise hiçbir yere bağlı olmayan public alana şu kodu yapıştırın.
Public CefSharp. WinForms. ChromiumWebBrowser browser;
En sonunda şu şekilde bir görünüm alacaktır:

Eki Görüntüle 1067524

Eki Görüntüle 1067525

Eki Görüntüle 1067526

Hepsini doğru yaptığınızdan eminseniz,
Uygulamayı başlatın. Başlattığınızda 1 - 2 dakika bekleyince tarayıcı açılacaktır. (Visual Studio içinde başlattığınız için ve ilk başlatışınız olduğu için aynı Google gibi başta kasması doğaldır. Sonrasında 2 - 3 saniyelere düşecektir süre.)
Eğer hatanız yok ise detaylara geçelim. Hata alıyorsanız SS'ler ile buraya bildirin :)
Yapacağımız şey TextBox'a yazılan şey Enter basılınca aratılsın.
Bunun için TextBox eklemeyi unutmayın.
TextBox1 events sekmesine gelin. (Özellikler kısımlarında yıldırım işaretli.)

Eki Görüntüle 1067529

Bende neden MetroTextBox diye soracak olursanız ayrı bir görünüm paketi kullanıyorum. İleride değineceğim.
O kısma tıklayınca önümüzü bu şekilde bir ekran karşılayacaktır:

Eki Görüntüle 1067530

"KeyDown" çift tıklayarak kod satırlarına geçiş yapın. Daha sonrasında bu kodları yapıştırın.
İf (e. KeyCode == Keys. Enter)
{
Browser = New CefSharp. WinForms. ChromiumWebBrowser(metroTextBox1.Text)
{
Dock = DockStyle. Fill,
Size = New Size(949, 569),
Location = New Point(200, 200),
};
chromiumWebBrowser1.Controls.Clear();
ChromiumWebBrowser1.Controls. Add(browser);
}
Burada Enter tuşuna basılınca neler yapılacağını belirledik.
Önemli Not: Parantez içindeki "metroTextBox1.Text" kısmını normal TextBox kullanıyorsanız "TextBox1.Text" olarak değiştirin.

Eki Görüntüle 1067531

Daha sonrasında Form yüklenince TextBox'a youtube.com tarzı bir link girip test edin. Çalışmaması zor ancak yine de sorun çıkarsa kesinlikle bana bildirin.
Şimdi Ayarlar sekmesini yapacağız. Ayarları yapmayacağız sadece sekmeyi yapacağız çünkü içeriğini yaparsak makale aşırı derecede uzar konudan sapar. Proje > Form Ekle (Windows Forms)... Tıklayın ve Form ekleyin. Peki nasıl yeni Form'a geçeceğiz? Şu alandaki 3 bar Icon'u ile.

Eki Görüntüle 1067532

Bu pictureBox ile yapıldı. İnternetten 5 dakikalık araştırma ile pictureBox uzmanı olmanız mümkün zaten. Şimdi PictureBox'a çift tıklıyoruz ve gelen kod satırına şu kodları giriyoruz.
Ayarlar ayar = New Ayarlar();
ayar.Show();

Eki Görüntüle 1067533

Unutmayın! Buradaki "Ayarlar" 2. Formumun ismi. Sizde Form2 şeklinde ise "Ayarlar" yerine "Form2" yazın!
Bu sayede Ayarlar sekmesini açacaktır. Ayarlar sekmesi açılınca Tarayıcı sekmesi kapansın istiyorsanız:
this.Hide();
Komutunu ekleyebilirsiniz.
Şimdi Formlarımın tasarım SS'leri:

Eki Görüntüle 1067534

Eki Görüntüle 1067535

Tarayıcı yapmak bu kadar basit. Geri tuşu - İleri tuşu için ise:
Geri tuşu pictureBox kodlarına

browser.Back();

İleri tuşu pictureBox kodlarına

browser.Forward();

Yazabilirsiniz. İleride daha detaylı makaleler yazacağım. Umarım faydam dokunmuştur :) Benim bu makaleden herhangi bir kâr amacım yok. Tek istediğim insanların Yazılıma ve sanal dünyaya daha fazla merak ve ilgi göstermeleri. Geleceğin mesleği diye boşuna demiyorlar. Eskiden uygulama yapmak sadece dev yazılım şirketlerinin elinde iken şimdi elimizdeki laptoptan, bilgisayardan veya herhangi bir aletten her şeyi yapabiliyoruz. Bu şansımızı değerlendirmemiz lazım değil mi? İyi günler dilerim.
Böyle birşey mümkün olduğunu yeni öğrendim. Ellerinize sağlık efenim.
 

Geri
Yukarı