Gemini Canvas Kullanımı: Tek HTML ile Kodsuz Araç Yapımı
- Barış Tüfekçi
- 24 Şub
- 2 dakikada okunur
Dijital dünyada kendi işinizi kolaylaştıracak küçük araçlara (örneğin bir kelime sayacı, renk paleti seçici veya basit bir hesap makinesi) ihtiyaç duyduğunuz oldu mu? Artık bunları yapmak için yazılımcı olmanıza gerek yok. Bu yazımızda, Gemini Canvas kullanımı ile tüm kodları tek bir HTML dosyasında toplayarak kendi pratik web araçlarınızı nasıl saniyeler içinde üretebileceğinizi anlatıyoruz.
Neden Gemini Canvas Kullanımı Bu Kadar Popüler?
Gemini'nin Canvas özelliği, yazdığınız komutların sonucunu sadece metin olarak değil, canlı ve etkileşimli bir çalışma alanı olarak sunar. Ekranın bir tarafında üretilen kodu görürken, diğer tarafında bu kodun nasıl çalıştığını anlık olarak test edebilirsiniz. Gemini Canvas kullanımı sayesinde hataları anında düzeltmek, renkleri değiştirmek ve arayüzü kişiselleştirmek sadece birkaç saniyenizi alır.
Tek HTML Dosyası (Single-File) Nedir ve Neden Pratik?
Geleneksel web geliştirmede yapı (HTML), tasarım (CSS) ve işlevsellik (JavaScript) ayrı dosyalarda tutulur. Ancak günlük pratik kullanım için yapay zekadan bunları tek bir dosyada birleştirmesini isteyebiliriz. Böylece, oluşturduğunuz aracı hiçbir sunucuya veya kuruluma ihtiyaç duymadan, doğrudan bilgisayarınızdaki tarayıcıda (Chrome, Safari vb.) çift tıklayarak çalıştırabilirsiniz.
Örnek Proje: Dijital Okuryazarlık Hazırlık Listesi Kendi öğrencilerim için hazırladığım interaktif "Dijital Okuryazarlık Hazırlık Listesi" tam da bu mantıkla üretilmiş harika bir örnektir. Bu tek sayfalık HTML dosyası şunları yapabiliyor:
Şık bir arayüzle hesap açılacak araçları (ChatGPT, Grok, CapCut vb.) listeliyor.
İşaretlenen kutucuklara göre üst kısımda bir "İlerleme Çubuğu" doluyor.
Öğrenci işini bitirdiğinde, "Resim Olarak İndir" butonuna basıp tüm listenin ekran görüntüsünü cihazına kaydedebiliyor.
Tüm bu sistem internetteki bir sunucuda değil, doğrudan kişinin kendi bilgisayarında/telefonunda çalışıyor!
Örnek HTML Buradan deneyin:
Adım Adım Gemini Canvas Kullanımı
Siz de benim örneğimdeki gibi kendi aracınızı yapmak için şu adımları izleyin:
İhtiyacınızı Belirleyin ve Komut Verin: Gemini'ye ne istediğinizi net bir şekilde söyleyin. Örneğin: "Bana öğrencilerim için şık bir 'Yapılacaklar Listesi' yaz. İşaretledikçe ilerleme çubuğu dolsun. HTML, CSS (Tailwind) ve JavaScript kodlarının tamamı tek bir HTML dosyasının içinde olsun."
Canvas Üzerinde Düzenleme Yapın: Gemini kodu ürettiğinde, Canvas arayüzü açılacaktır. Sağ tarafta uygulamanızın canlı halini görebilir, sol taraftan kodda ufak değişiklikler isteyebilirsiniz.
Dışa Aktarın ve Kullanın: Uygulamanız hazır olduğunda, sağ üstteki seçeneklerden kodu doğrudan kopyalayın veya bir not defterine yapıştırıp .html uzantısı ile bilgisayarınıza kaydedin.
Artık internet bağlantınız olmasa bile çalışan, tamamen size özel bir dijital aracınız var!
Yorumlar