Dart dilini flutter geliştirmelerimde aktif olarak kullanıyorum ve istersek web kodlamasını da dart dili üzerinden yapabilmekteyiz. Normalde javascript’in compile time bir dil olmaması dolayısıyla üzerine bir katman konularak Typescript kullanıyorum böylelikle type-safe ve OOP olarak geliştirme yapabiliyorum ama Typescript’i geliştirici tecrübemin tamamında kullanıyor olsam da mağlesef developer’ı üzen noktaları da mevcut
Dart Dili Nedir ve Web Programlamaya Giriş Eğitimi
Giriş metninde Typescript kullanarak web geliştirmelerimi yaptığımı söylemiştim hatta mobil geliştirme geçmişimde cordova ve react-native ile cross-platform mobil uygulama geliştirdiğim zamanlarda(react-native ile halen geliştirmekteyim) tamamında Typescript kullanmaya özen gösterdim ama dediğim gibi mağlesef Typescript’inde kendine özgü sorunları mevcut özellikle her javascript paketi için @types dosyaları aramak zorunda kalmanız hele birde javascript dosyasının içeriğiyle @type içeriği uyuşmuyorsa o zaman gelde birde bu @type içeriğine el at ve javascript dosyasındaki yapı ile uyumlu hale getirmeye çalış bu durum az bilindik javascript kütüphanelerinde karşılaşılan bir senaryo eğer çok yüksek kitle tarafından kullanılan js paketlerini tercih ediyorsanız büyük ihtimalle pek bu sorunu yaşamayacaksınızdır. Çünkü katkıta bulunan topluluk tarafından hızlıca js ile @type senkron olarak güncelleniyor(çoğu zaman).
İşte tamda bu noktada artık web’de OOP geliştirme yapabilecek ve type-safe çalışabileceğim alternatif bir yardımcı araç ararken dart2js compiler aracını kullanarak ortaya javascript çıktısı veren ve Flutter ile cross platform mobil geliştirmede gücüne tanık olduğum Dart dili üzerinden bu geliştirmeleri yapabiliyor olmak gerkçekten beni çok mutlu etti.
Bu kadar ballandıra ballandıra anlattık peki Dart ile web geliştirmesi nasıl yapabiliriz. Öncelikle eğer makinenize daha önce Dart kurulmadıysa https://dart.dev/get-dart adresinden alternatif kurulum yöntemlerinden birini tercih edip makinenize kurabilirsiniz.
Eğer sizde Flutter ile halihazırda geliştirme yapıyorsanız Flutter sdk dizinin altında yer alan <Flutter SDK Path>\bin\cache\dart-sdk\bin yolunu Ortam değişkenlerinde yer alan Path’e eklemelisiniz.
Dart kurulumunun yapıldığı varsayılarak Web geliştirmesi yapabilmek için global olarak kurulması gereken 2 paketi alttaki gibi komut satırından kurmalısınız.
Not: pub… ile başlayan komutlarınızın çalışması için 2 paragraf üsste Ortam değişkenleri path’ine Dart sdk yolunu girmeniz gerekmektedir. Eğer komut satırı açık iken Path’e sdk yolunu girdiyseniz komut satırını kapatıp tekrar açmalısınız yada yeni bir komut satırı başlatıp pub… komutlarını çalıştırabilirsiniz.
Üstteki komutlar başarıyla çalıştıktan sonra Ortam değişkenlerinden yer alan Path değişkenine alttaki path’de yer alan <Username> bilgisini kendi bilgisayar kullanıcı adınıza göre revize edip eklemeniz gerekmektedir yoksa alttaki adımlara devam edemeyeceksiniz.
1 | C:\Users\<Username>\AppData\Roaming\Pub\Cache\bin |
Makinemde 2 path’in eklenmiş hali alttaki görselde mevcuttur.
Yeni bir web projesi oluşturma
Alttaki komutları çalıştırarak quickstart adında bir klasör oluşturup ardından bu klasör içerisine giriş yapıp stagehand komut satırı aracı ile web-simple template’i ile web projesi oluşturulmuş olacaktır.
Bu adımda başarıyla gerçekleştiyse alttaki komut ile hemen web ortamında uygulamamızı görelim.
8080 portu üzerinden localhost’umuzda uygulamamız yayınlandı http://127.0.0.1:8080 yada http://localhost:8080 adresinden uygulamaya ulaşabilirsiniz.
Kendi kodumuzu ekleyelim projeye
Varsayılan olarak oluşturulan Dart Web projesinde alttaki örnek kodda görebileceğiniz gibi web klasörü altında yer alan app.dart dosyası projenin ayağa kalktığı dosyadır bu arada Dart projeleri main fonksiyonuna ihtiyaç duymaktadır proje ilk olarak bu fonksiyon üzerinden ayağa kalkmaktadır o yüzden adını değiştirmeyiniz.
1 2 3 4 5 | import 'dart:html'; void main() { querySelector('#output').text = 'Your Dart app is running.'; } |
Sonuç olarak alttaki gibi bir web çıktısı olacaktır.
See the Pen
NWKZOzL by Murat ÖNER (@muratoner-the-typescripter)
on CodePen.
Bu kısmı alttaki gibi değiştirirsek sayfaya 4 li elementli bir liste oluşturmuş olacağız. Üstteki tek satırlık kod olan ve sayfaya sadece “Your Dart app is running.” yazan kısmı alttaki gibi değiştirin.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | import 'dart:html'; void main() { Element output = querySelector('#output'); output.children.addAll(thingsTodo().map(newLI)); } LIElement newLI(String itemText) => LIElement()..text = itemText; List<String> thingsTodo() { return [ "Walk the dogs", "Wash the dogs", "Feed the cats", "Feed the dogs" ]; } |
Üstteki kodun web çıktısı ise tam olarak şu şekildedir.
See the Pen
pozXxOB by Murat ÖNER (@muratoner-the-typescripter)
on CodePen.
Dart ile type-safe kod yazıp OOP, SOLID, Patterns gibi prensiplere uyarak kodlama yapmak gerçekten oldukça keyifli Typescript’in eksiğinin olduğu birçok nokta gerçekten giderilmiş Dart dili ile.
Makalede kullanılan örneğe ve Dart ile ilgili diğer tüm örneklere github hesabımdan erişebilirsiniz. Buraya tıklayıp github hesabıma erişebilirsiniz.
✍ Lütfen olumlu-olumsuz tüm görüşlerinizi bana yorum yada mail yolu ile iletmeyi ihmal etmeyin.
🔗 Sosyal medya kanallarından makaleyi paylaşarak destek olursanız çok sevinirim.
👋 Bir sonraki makalede görüşmek dileğiyle.
Sözdizimi olarak C#, Java, Javascript(ES++) sözdizimlerine benzediğinden bu dillerden birini kullananlar için kolaylıkla anlaşılabilir syntax’ı ve özellikleri mevcuttur.
Merhabalar dart dili ile php dilini karşılaştırır isek ne gibi farklar var arasında?
Aslında çok bir fark yok php dilinde meyve elma diye tanımlanıyorsa dartta armut diye tanımlanıyor.Sadece kelimelerin ismi değişiyor.Bende C# diliyle çalışıyorum dart dilini öğrenmeye çalışıyorum,iki dilin arasında çok bir fark yok