- Bu proje için ihtiyacınız olacak
- Raspberry Pico W Web Sunucusu için HTML
- kullanarak başka bir başlık ekleyin ve bölüme bir ad verin. Örneğimizde, “Son Haberler”. etiketi ‘den daha küçüktür ancak yine de bunun yeni bir bölüm olduğunu vurgular. <h2>The Latest News</h2> 7. etiketini kullanarak uzak bir CDN’den bağlantılı bir görüntü ekleyin. Görseli kullanma iznimiz olduğundan emin olmak için kullanmak istediğimiz görselin tam URL’sine ihtiyacımız var. Örneğimizde bir görüntü kullanıyoruz Pexels.com, ücretsiz bir lisans görüntü hizmeti. Resimler etiketi kullanılarak yeniden boyutlandırılabilir. Boyutu, orijinal boyutunun yüzdesi olarak belirleyebiliriz veya boyutu piksel cinsinden sabit kodlayabiliriz. <img src="https://images.pexels.com/photos/1779487/pexels-photo-1779487.jpeg?cs=srgb&dl=pexels-designecologist-1779487.jpg", width=640px height=427px> 8. Bir metin paragrafı oluşturmak için etiketini kullanın. Demomuz için iki paragraf Lorem Ipsum kullandık. Lorem Ipsum üreteci. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit…..</p> (İmaj kredisi: Tom’un Donanımı) 9. Son olarak gövdeyi ve ardından HTML belgesini kapatın. </body> </html> 10. Dosyayı index.html olarak kaydedin. Şimdilik kodu bu dosyada saklayın, daha sonra kullanacağız. Raspberry Pi Pico W Web Sunucusu için Python Kodu
- MicroPython Kod Listesini Tamamlayın
- index.html dosyasını Raspberry Pi Pico W’ye kopyalama
- HTML’mizi geliştirmek
- Raspberry Pi Pico W Web Sunucumuza İstek Yönlendirme
Bir barındırma hizmetinde büyük bir web sitesi kurmak istemiyorsanız, evinizde kolayca bir web sunucusu çalıştırabilirsiniz. Daha önce nasıl yapılacağını açıkladık bir Raspberry Pi web sunucusu kurun normal bir Pi 3, 4 veya Zero kullanarak, ancak işi halletmek için tam bir Pi’ye bile ihtiyacınız yok. Yalnızca 6 ABD dolarına mal olan Wi-Fi özellikli bir mikro denetleyici olan Raspberry Pi PIco W ile bazı temel web hizmetleri yapabilirsiniz.
bu Ahududu Pi Pico W en bariz seçenek değil, ancak küçük bir MicroPython kodu ve biraz HTML ile bir Pico W’dan temel, statik web sayfaları sunabiliriz. Bu projenin iki bölümü var. HTML ve MicroPython kodu. HTML, tarayıcımızın göreceği şeydir ve MicroPython, kodu sunma aracı olarak hareket eder.
Bu proje için Raspberry Pi Pico W’dan temel bir web sayfası barındıracağız. Ayrıca CSS ve JavaScript ile sayfalarınıza nasıl biraz daha ışıltı katabileceğinizi göstereceğiz. Son olarak, Raspberry Pi Pico W ürünümüze harici istekleri nasıl ileteceğimizi öğrenerek içeriği dünyaya sunacağız.
Bu proje için ihtiyacınız olacak
Raspberry Pico W Web Sunucusu için HTML
Köprü Metni İşaretleme Dili (HTML), web için temel yapı taşıdır. Dil, daha modern siteler için güncellenen ve geliştirilen bir çerçeve olan web sayfaları oluşturmak için bir çerçevedir.
Pico W web sunucumuzun HTML’si istediğiniz kadar basit veya karmaşık olabilir, ancak dikkate alınması gereken birkaç uyarı var. Sitenin HTML’si bir Python değişkenine yüklenir, bu nedenle Pico W’nin yalnızca 264KB SRAM’ı olduğu için özelliklerde fazla aşırıya kaçamayız. İkinci olarak, yine HTML’yi dosya sistemine erişemeyen bir Python değişkenine yüklediğimiz için Pico W üzerinde resim veya referans dosyaları (CSS/JavaScript) sunamayız.
Bu, herhangi bir görüntüye veya CSS/JavaScript’e uzak bir siteden erişilmesi gerekeceği anlamına gelir. HTML kodundaki CSS ve JavaScript çalışır, ancak CDN’si aracılığıyla Bootstrap CSS ve JavaScript’e başvurmayı tercih ederiz.
Temel bir HTML sayfası oluşturmak için
1. Seçtiğiniz bir metin düzenleyiciyi açın. Not defteri yeterli ama bizim tercihimiz Notepad++.
2. Belge türünü HTML olarak ayarlayın ve ardından bir html etiketi oluşturun. Bu, tarayıcıya sayfanın HTML ile yazıldığını söyler ve etiket, HTML belgesinin başlangıcını belirtir.
<!DOCTYPE html>
<html>
3. Yeni bir etiket oluşturun, ve başlığı kapatmadan önce tarayıcı penceresinin başlığını ayarlamak için
<head>
<title>Tom's Hardware Pico W Web Server</title>
</head>
4. Bir bölümü oluşturun. Kullanıcı tarafından görülebilen içeriğin görüntülendiği bölümdür.
<body>5.
etiketini kullanarak bir başlık oluşturun ve sayfanıza bir başlık / başlık verin. Bu en büyük başlık etiketidir.<h1>Tom's Hardware Pico W Web Server</title>
<h1>Tom's Hardware Pico W Web Server</title>
6.
Raspberry Pi Pico W Web Sunucusu için Python Kodu
Hevesli okuyucularımız için bir sayfa oluşturduk ve şimdi onlara hizmet etmek için bir araç yaratmamız gerekiyor. Bunun için index.html dosyamızın içeriğini okuyacak ve onu bir web sayfası olarak sunacak kısa bir MicroPython uygulaması oluşturacağız.
1. Raspberry Pi Pico W’nizi kurmak için bu kılavuzu izleyin. “Bir LED nasıl yanıp söner”e kadar olan adımları izleyin.
2. Yeni bir boş dosya oluşturun.
3. İki modülü içe aktarın. Birincisi, düşük seviyeli bir ağ arabirimi olan sokettir. İkincisi, Wi-Fi erişim noktamıza bağlanmak için kullanacağımız ağdır.
import socket
import network
4. Bir nesne, sayfa oluşturun ve bunu Pico W’daki HTML dosyasına başvurmak için kullanın. Bu, dosyayı salt okunur modda açacaktır.
page = open("index.html", "r")5. Dosyanın içeriğini yeni bir nesneye (html) okuyun ve ardından dosyayı kapatın. Bu, tüm HTML’yi html nesnesine okuyacaktır.
html = page.read()
page.close()
6. Bir nesne oluşturun, wlan ve kodumuzdan Pico W’daki Wi-Fi çipine bir bağlantı oluşturmak için kullanın.
wlan = network.WLAN(network.STA_IF)
7. Wi-Fi’yi açın ve ardından şifrenizle erişim noktanıza bağlanın.
wlan.active(True)
wlan.connect("ACCESS POINT","PASSWORD")
8. Pico W ile Wi-Fi erişim noktası arasında arabirimimiz olarak hizmet edecek bir nesne, sta_if oluşturun.
sta_if = network.WLAN(network.STA_IF)
9. Pico W’nin IP adresini yazdırın, daha sonra ihtiyaç duyacağımız için IP adresini not edin. Döndürülen veriler, IP adresimizi, ağ maskemizi ve DHCP sunucu adresimizi içeren bir liste nesnesidir. IP adresi listedeki ilk öğedir, bu nedenle [0] başka bir bilgi olmadan listeden iade edebiliriz.
print(sta_if.ifconfig()[0])
10. Pico W’yi herhangi bir IP adresinden 80 numaralı bağlantı noktasındaki bağlantıları dinleyecek şekilde ayarlayın. Aynı IP adresinin bir sıfırlamadan sonra kullanılmasını sağlamak için socket.SO_REUSEADDR kullanıyoruz. Bu, IP adresini yeniden kullanmak için Pico W’nin tamamen kapanması gereken bir sorunu giderir.
addr = socket.getaddrinfo('0.0.0.0', 80)[0][-1]
s = socket.socket()
s.setsockopt(socket.SOL_SOCKET, socket.SO_REUSEADDR, 1)
s.bind(addr)
s.listen(1)11. Kodun sonraki bölümünü sürekli olarak çalıştırmak için bir döngü oluşturun.
while True:
12. Pico W’yi bir bağlantıyı kabul edecek şekilde ayarlayın ve web sayfamız olacak bir dosya oluşturmak için.
cl, addr = s.accept()
cl_file = cl.makefile('rwb', 0)
13. Başka bir döngü oluşturun ve döngünün içinde web sayfamızın içeriğini satır satır okumak için bir nesne, satır oluşturun.
while True:
line = cl_file.readline()
14. Satır başı varsa içeriği okumayı durdurmak için koşullu bir ifade kullanın veya satır sonları.
if not line or line == b'\r\n':
break
15. HTML’yi depoladığımız bir nesne, yanıt oluşturun web sayfası için.
response = html 16. Tarayıcıya HTTP durum kodunu ve içerik türünü gönderen bir istemci yanıtı ayarlayın, sonra HTML ile yanıt verir tarayıcılarında işlenecek. Ardından bağlantı kesilir.
cl.send('HTTP/1.0 200 OK\r\nContent-type: text/html\r\n\r\n')
cl.send(response)
cl.close()
17. Dosyayı Raspberry Pi Pico W’ye main.py olarak kaydedin. Bunu yaparak, Pico W önyüklendiğinde kod otomatik olarak çalışacaktır.
MicroPython Kod Listesini Tamamlayın
import socket
import network
page = open("index.html", "r")
html = page.read()
page.close()
wlan = network.WLAN(network.STA_IF)
wlan.active(True)
wlan.connect("ACCESS POINT","PASSWORD")
sta_if = network.WLAN(network.STA_IF)
print(sta_if.ifconfig()[0])
addr = socket.getaddrinfo('0.0.0.0', 80)[0][-1]
s = socket.socket()
s.setsockopt(socket.SOL_SOCKET, socket.SO_REUSEADDR, 1)
s.bind(addr)
s.listen(1)
while True:
cl, addr = s.accept()
cl_file = cl.makefile('rwb', 0)
while True:
line = cl_file.readline()
if not line or line == b'\r\n':
break
response = html
cl.send('HTTP/1.0 200 OK\r\nContent-type: text/html\r\n\r\n')
cl.send(response)
cl.close()
index.html dosyasını Raspberry Pi Pico W’ye kopyalama
1. Thonny’de Görünüm >> Dosyalar’a tıklayın. Bu bir dosya yöneticisi açacaktır. Üst pencere kaynaktır, bu durumda bilgisayarımızın ana sürücüsüdür. Alt pencere hedef, Raspberry Pi Pico W.
2. Üst pencerede index.html dosyanızın konumuna gidin.
3. index.html’ye sağ tıklayın ve dosyayı Pico W’nize kopyalamak için “Yükle /” öğesini seçin.
4. Pico W’yi bilgisayarınızdan çıkarın, ardından Pico W’yi yeniden başlatmak ve web sunucusunu başlatmak için yeniden takın.
5. Bilgisayarınızda, yeni bir tarayıcı penceresi / sekmesi açın ve Pico W’nizin IP adresine gidin. Birkaç dakika sonra sayfanın pencerede göründüğünü göreceksiniz.
HTML’mizi geliştirmek
Bootstrap ve CDN’sini kullanarak çok daha profesyonel görünümlü bir sayfa oluşturduk. Temelde bu, aynı temel
,
ve öğelerini kullanır, ancak bölücüler ve özel CSS gibi ekstra özellikler içerir.
Önyükleme hızlı bir şekilde profesyonel görünümlü siteler üreten HTML, CSS ve JavaScript için bir çerçevedir. Müşteriler veya kendi projeleriniz için hızlı bir demo sitesi oluşturmak istiyorsanız, Bootstrap başlamak için iyi bir yerdir.
uyarladık Kahramanlar şablonu demomuz için, CSS ve JavaScript bağlantılarını değiştirerek BootstrapCDN bağlantıları.
Kodumuzu kullanmak isterseniz, buradan indirildi.
Raspberry Pi Pico W Web Sunucumuza İstek Yönlendirme
Şu anda sunucumuza yalnızca aynı ağdaki cihazlar tarafından erişilebilir. Raspberry Pi Pico W web sunucumuzu dünya ile paylaşmak için harici IP adresimizi belirlemeli ve Pico W’ya harici istekler göndermek için port yönlendirmeyi ayarlamalıyız.
Her yönlendiricinin bu görevleri yapmak için çok farklı bir yolu vardır, adımlarımız, ISP tarafından sağlanan yönlendiricimizin bunu nasıl ele aldığını gösterir.
1. Harici IP adresinizi alın. Google’ın arama motorunu kullanarak “IP adresim nedir?” diye arama yapın. ve IP adresini not edin.
2. Yönlendiricinizin Gelişmiş Ayarlarında oturum açın ve DHCP Rezervasyonunu seçin. Pico W’mizin LAN üzerinde statik bir IP adresine sahip olduğundan emin olmamız gerekiyor ve DHCP rezervasyonu bunu yapmanın bir yolu.
3. Bağlı cihazlar listesinden Pico W’nizi seçin.
4. Rezervasyonu IP Kira Tablosuna ekleyin, ardından Uygula’ya tıklayın. Bu, Pico W’nizin evinizde aynı IP adresini almasını garanti eder.
5. Yönlendiricinizdeki Bağlantı Noktası Yönlendirme menüsüne gidin. Bizim durumumuzda Gelişmiş Ayarlar >> Port Yönlendirme altındaydı.
6. Hizmeti HTTP’ye ayarlayın (port 80) ve HTTP trafiği için bir kural oluşturun. Başlangıç ve bitiş bağlantı noktasını 80’e, protokolü TCP’ye ve IP adresini ayarlayın Pico W’nizinkine. Kaydetmek sonra kuralı uygulayın.
7. Farklı bir ağ (hücresel) üzerinden bağlanan başka bir cihazda tarayıcıyı açın ve harici IP adresinize gidin. Artık Pico W’niz aracılığıyla sunulan web sayfasını göreceksiniz.
