Harmony OS (Lite Wearables)için uygulama Geliştirmeye Genel Bakış
Selamlar,
İsmini son zamanlarda çok daha fazla duymaya başladığımız Harmony OS’in yakın zamanda geliştirici dökümantasyonu yayınlanmıştı:
Bu durumdan kısa bir süre sonra da dökümantasyonlar olanca hızıyla güncellenerek artık gerçek anlamda ürünler ortaya çıkarmak mümkün oldu. Bu makalede kullanılabilir özelliklere şöyle bir göz atıp, lite-wearable cihazlar için örnek bir uygulama yapacağız.
Harmony OS uygulamaları geliştirmek için şu an (22.01.2021) 2 dil mevcut. Java ya da Javascript . Bu gün mobil dünyanın bilindik yolu olan Java’yı kullanmayacağız. Javascript ile HTML-CSS-JS üçlüsünün özelliklerinden faydalanarak bir ürün dizayn edeceğiz.
Yapacağımız uygulama bittiğinde şöyle bir görünümde olacak:
Böyle bir uygulama için kullanacağımız yapılara göz atarak başlayalım:
- Swiper
- Geolocation
- Battery
- Data Binding
- Button Events
- Progress
İlk olarak çoklu sayfa yapısını oluşturarak başlıyoruz.
Swiper Kullanımı
Swiper birden fazla sayfa yerine, uygulamanızı bir htm dosyası içerisinde kaydırılabilir sayfalara bölebilmenizi sağlayan işlevsel bir yapı. (Detaylı bilgi için tık)
4 sayfa arasında geçiş yaparken, başlangıç sayfasını belirlemek için index değerini js tarafından çağırıyoruz:
Cihaz Konumu ve Bilgilerini Görüntüleme
Uygulama içerisinde cihaza ait konum için geolocation kütüphanesini kulanarak, cihazın o anda bulunduğu konumu, bu konumun doğruluk bilgisini, konum bilgisine ne zaman erişildiğini görüntüleyebilmekteyiz(Detaylı bilgi için Tık):
Bu bilgilerin arayüzde gösterilmesini sağlamak için önyüz ile js kısmını birbirine bağlamaya imkan veren data binding özelliğini kullanacağız.
data kısmındaki verileri, JS tarafında güncellediğimizde otomatik olarak ön-yüze de yansımasını sağlamak için JS tarafında data altına yazdığımız değişkeni önyüz de “{{DEGISKEN_ADI}}” şeklinde çağırıyoruz.
Bu sayede biz JS kısmında event ya da fonksiyon ile bir veriyi güncellediğimizde HarmonyOS ön yüzdeki ilgili verinin güncellenmesini sağlıyor.
Genel yapımız artık şu hali geldi:
Progress Kullanımı
Uygulama içerisinde yükleme pencereleri ya da bir yapının ilerleyişini kullanıcıya göstermek için progress yapısına ihtiyaç duymaktayız. Burada nasıl çalıştığını göstermek için 2. sayfayı bir yükleyici olarak tasarlayacağız. (Detaylı Bilgi İçin Tık)
2. sayfamızın hml kısmına progress’i, type olarak da arc tipini, son olarak percent değerini de yine js kısmıyla kontrol edebilmek için data binding yapısını kullanarak oluşturuyoruz. 2 buton koyarak bu yapıları nasıl tetikleyebileceğimizi daha net görebiliriz:
Şimdi JS kısmına geçip startProgressBar ve StopProgressBar fonksiyonlarını oluşturup, percentage değişkenini timer ile güncelleyelim: (Timer ile alakalı detaylı bilgi için tık)
List ve Image Kullanımı
Uygulamamızın 3. sayfasına yapılacak işleri bir API üzerinden çektiğimizi düşünelim. Ya da kişinin takvimi üzerinden alınan etkinlikleri gösterebilmek için List kullanmaktayız. Android tarafında ListView benzeri yapının Harmony OS için karşılığından bahsediyorum aslında. Image ise uygulama içerisinde fotoğraf gösterimini nasıl yapacağımızı gösterecek. Hareketli fotoğraflar için ImageAnimator kullanımı ise başka bir makalenin konusu :)
Öncelikle verinin JS tarafında hali hazırda çekildiğini kabul ettiğimiz için verinin içini varsayılan olarak mock data ile dolduruyoruz:
Arayüzde ise list içerisinde todoList’imizi çağırıp for ile gövdeyi ön yüze aktarıyoruz:
Images
Son olarak fotoğraf eklemek için Pages dizinin altında “common” isimli bir dizin oluşturup, örnek fotoğrafımı buraya aktarıyorum:
Uygulama içerisinden bunu çağırmak için şöyle bir kod bloğu yeterli:
Final
Şimdi uygulamamızın son haline kod bazında bir göz atalım.
index.hml:
index.js:
Bir miktar makyaj için index.css:
Uygulamamız:
Görüldüğü üzere Harmony OS üzerinde uygulama geliştirmek hayli keyifli ve gayet kullanışlı araçlar mevcut. Uygulama geliştirirken aşağıdaki kaynaklardan (benim gibi) faydalanabilirsiniz.
Soru ve sorunlarınız için forum kanalımızdan ya da bana https://sezerbozkir.com adresinden ulaşabilirsiniz.
Görüşmek üzere.
