⌚ Lite Wearable Cihazlar İçin QR Kod Uygulaması Geliştirme

Merve Yönetci
Huawei Developers - Türkiye
2 min readJul 2, 2024
Lite Wearable

Giriş

Herkese merhaba! 🌼

Bugünkü yazımda Lite Wearable’ın ne olduğu ve DevEco Studio üzerinden Lite Wearable cihazlar için QR kod uygulamasını nasıl yapabileceğimizden bahsedeceğim.

Eğer DevEco Studio’yu indirmediyseniz, bu linkten nasıl indireceğinizi öğrenebilirsiniz.

Hadi başlayalım!

https://giphy.com/gifs/Atlassian-XROOE9NApITmCgF6dZ

Lite Wearable Nedir?

Lite Wearable ve Wearable olarak saat uygulamasını 2 farklı şekilde geliştirebiliriz.

  • Lite Wearable’da JavaScript programlama dili kullanılarak saat uygulaması geliştirilmektedir.
  • Lite Wearable saat uygulaması geliştirilirken JS, CSS ve HML kullanılmaktadır. HML (HarmonyOS Markup Language), Huawei’in geliştirdiği bir Markup dilidir. Mobil uygulamalar ve cihazlar için kullanıcı arayüzleri oluşturmamızı sağlar.
  • Lite wearable cihazlar HarmonyOS’u temel alır.

Lite Wearable (GT series) ve Wearable (Watch series) saatler arasindaki farklar icin bu linkteki makaleyi okuyabilirsiniz.

✨ İlk olarak DevEco Studio’da Lite Wearable projesi oluşturalım.

✨ Şimdi gerekli bağımlılıkları ve pluginleri ekleyelim.

build.gradle (project level)

build.gradle (app level)

✨ Şimdi Home ekranımızın kodlarını yazmaya başlayalım.

Ekranda ‘Welcome’ yazısı ve bir tane showQrCode butonu çıkacak.

Şimdi bu ekranda yer alan metin ve butonun görünümünü CSS ile düzenleyelim.

Şimdi ise JS ile showQrCode() fonksiyonu yazıp butona tıklayınca kullanıcıyı QR kodun olduğu sayfaya yönlendirelim.

✨ qr adında bir paket oluşturalım ve QR ile ilgili kodlarımızı bu paketin altında yazalım.

<qrcode> etiketi bize bir tane QR kod oluşturacak ve ekranda gösterecek. Back butonumuz sayesinde de geri gidebileceğiz.

Design’ları ayarlayalım

QR kodunu tarattığımızda karşımıza gelecek olan sayfanın linkini ekleyelim ve backHome() fonksiyonuyla birlikte Home ekranımıza geri yönlendirelim.

Output:

Home Page
QR page

Sonuç

Bu makalemizde Lite Wearable için demo bir proje oluşturduk. HML, CSS, JS kullanarak DevEco Studio üzerinden kodlarımızı yazdık.

--

--