TMDB API ve HMS Kullanımı ile Film Uygulaması Geliştirme
Bu dönem okulum Bahçeşehir Üniversitesi’nde bölüm içi seçmeli ders olarak ilk kez bu dönem açılan “Mobile Application Development with HMS” dersini seçtim. Her hafta aynı zamanda Huawei’de yazılım geliştiricisi olarak çalışan hocalarımız tarafından birçok konuyu öğrenme fırsatı elde ettim. Bu yazımda ise derste proje ödevi olarak verilen Account Kit, Push Kit, ML Kit entegrasyonu yapılmış bir film uygulamasının nasıl yapılacağını anlatacağım. Aynı zamanda projeyi test etmek için Huawei Cloud Debugging hizmetini kullanacağız.
Film uygulamasını BAU-COOP4423 Github deposundan klonlayalım
Bu proje ödevini yapmadan önce ilk olarak TMDB API’yı kullanarak basit bir film uygulaması geliştirmiştik. O projeye bu linkten ulaşarak bilgisayarınıza klonlayabilirsiniz.
git clone https://github.com/BAU-COOP4423/P2-Movie-App-Base-Project.gitHMS Account Kit ile giriş sayfası oluşturalım
İlk sayfa olarak bir giriş ekranı tasarlayacağız. HUAWEI ID ile oturum açmak için HMS Account Kit’i kullanmamız gerekecek. Giriş sayfamızda yer alacaklar şu şekilde olacak:
- TextView ile yazılmış bir başlık (Örneğin: “Please sign-in with Huawei ID”)
- Huawei ID oturum açma butonu
- Oturum açma işlemi için silent sign-in with ID Token metodunu kullanacağız.
- getIdToken() metoduyla ID Token alındıktan sonra, ID Token boş değilse kullanıcıyı film uygulamamızın ilk sayfası olan MovieSearchActivity’e yönlendireceğiz. Ayrıca, ID Token boş değilse ID Token’ı Toast mesajı ile ekranda göstereceğiz. Eğer boş ise, Toast mesajı ile ekrana “ID Token is not found!” yazdıracağız.
- Exception handling uygulayacağız.
Huawei Account Kit’i projemize entegre etmek için bazı işlemleri entegrasyondan önce yapmamız gerekiyor. Bunun için bu linkteki adımları takip ederek başarılı şekilde HMS Core entegrasyonunuzu yapabilirsiniz. 6. adımda Huawei Account Kit’i hatta bir sonraki adımlara hazırlık olması için Push Kit ve ML Kit’i aktifleştirmeyi unutmayın.
Account Kit’i projemize ekleyelim
- Yapılandırma dosyası için AppGallery Connect’te oturum açalım ve My Projects > Project Settings > General Information altından “Data processing location” alanına ulaşalım. Buradan verilerin depolanacağı bölgeyi seçelim örneğin ben bütün bölgeleri seçtim.
Bundan sonraki adımda ise App Information alanındaki agconnect-services.json dosyasını indirelim.
İndirdiğimiz agconnect-services.json dosyasını app klasörünün içine kopyalayalım.
2. Bağımlılıkları eklemek için app klasörünün içindeki build.gradle dosyasını açalım ve dependencies bölümüne aşağıdaki satırı ekleyelim. Account Kit’in son versiyonuna bu linkten ulaşarak kullandığımız versiyon eskiyse güncelleyebilirsiniz.
// Account Kitimplementation ‘com.huawei.hms:hwid:6.1.0.303’
Yaptığımız bu değişiklikten sonra Android Studio’da sağ üst köşede bulunan “Sync Now” linkine tıklayarak projemizi senkronize edelim.
Tebrikler, Account Kit’i projemize başarılı bir şekilde ekledik! 🥳 Artık eklediğimiz Account Kit’i projemize entegre edebiliriz.
Account Kit’i projemize entegre edelim
- ui klasörünün içinde yeni bir Empty Activity oluşturalım ve adını LoginActivity koyalım. Oluşturduğumuz bu activity ile beraber res klasörünün içindeki layout klasöründe aynı zamanda activity_login.xml adında yeni bir xml dosyası oluşacak. Öncelikle bu xml dosyasına giriş sayfamızda görmek istediğimiz başlık ve butonu ekleyelim.
HuaweiIdAuthButton, belirli bir buton türüdür. Account Kit bağımlılığını ekledikten sonra, .xml dosyanızda standart Button sınıfı yerine bu özel buton tipini kullanabiliriz. Ayrıca fark ettiyseniz butonun id bilgisine “challenge_silent_signin” değerini girdik.
Giriş sayfasına görünmesini istediğimiz başlık ve butonu ekledikten sonra Huawei ID oturum açma butonuna tıklandığında oturum açma işlemi tetiklenmesi için LoginActivity classımızı düzenlememiz gerekiyor.
2. HUAWEI ID oturum açma işlevini uygulamak için R.id.challenge_silent_signin’a tıklandıktan sonra tetiklenen onClick callback metoduna silentSignInByHwId() metodunu ekleyelim. Böylece, HUAWEI ID oturum açma butonuna bir kez tıklandığında, uygulamamız oturum açma ekranını gösterecek.
3. silentSignInByHwId() metodunda AccountAuthParams (kullanıcı yetkilendirmesinden sonra alınacak kullanıcı bilgileri) ve AccountAuthService (HUAWEI ID oturum açma yetkilendirme hizmeti) oluşturalım. Ardından silent sign in için silentSignIn API’sini çağıralım. Silent sign in başarılı olursa, uygulamamız doğrudan yetkilendirme kodunu alacaktır. Eğer silent sign in başarısız olursa uygulamamız, yetkilendirme veya oturum açma ekranını göstermek için getSignInIntent API’sini çağıracaktır.
dealWithResultOfSignIn metodunda ID Token başarılı bir şekilde alındıysa ID Token’ı Toast mesajı ile ekranda gösterdik ve uygulamamızın ilk sayfası olan MovieSearchActivity’e yönlendirilmesini sağladık.
4. getSignInIntent API aracılığıyla başarılı bir oturum açtıktan sonra, yetkilendirme kodunu almak için oturum açma sonucunu işleyelim ve ardından bunu uygulama sunucusuna gönderelim.
LoginActivity.java dosyasının son haline buradan ulaşabilirsiniz.
Ayrıca bundan sonra giriş sayfamızın LoginActivity olması için AndroidManifest dosyamızı düzenlemeyi unutmayalım.
Yay!! Projemize başarıyla Account Kit’i kurduk ve entegre ettik bundan sonra başarılı bir şekilde silence sign in metoduyla uygulamamıza giriş yapılabilir. Sıra geldi bir sonraki adımımız olan Push Kit ile uygulamadan bildirim göndermeye.
HMS Push Kit ile uygulamadan bildirim gönderelim
Şimdi, HMS Push Kit’i kullanarak anında bildirim göndereceğiz. Server tarafı için (bildirim göndermek için) App Gallery’i kullanacağız. Bunu yapmak için, client tarafı için projemize bazı kod blokları da eklememiz gerekiyor.
- app klasörünün içindeki build.gradle dosyamıza Push Kit bağımlılığını ekleyelim.
// Push Kitimplementation ‘com.huawei.hms:push:5.1.1.301’
2. service klasörünün içinde DemoHmsMessageService adında bir class oluşturalım. Bu sınıf, Huawei’nin HmsMessageService classından miras alır.
3. AndroidManifest dosyasına DemoHmsMessageService sınıfını ve gerekli meta veri etiketini ekleyelim.
4. Push Kit’in çalışıp çalışmadığını Huawei Cloud Debugging ile test edelim. Tarayıcınızda bir sekmede AppGallery Connect > My Projects > Quality > Cloud Debugging açık olsun. Başka bir sekmede ise AppGallery Connect > My Projects > Grow > Push Kit açık olsun. Cloud Debugging’te uygulamamızı çalıştırmak için Android Studio üzerinden projemizi önce build edip daha sonra ise APK oluşturmalıyız. Oluşturduğumuz APK’yı Cloud Debugging üzerinden seçtiğimiz cihaza yükleyelim. Push Kit üzerinden bildirim gönderebilmemiz için cihazımızdan gelen Token’a ihtiyacımız var bunun için Cloud Debugging’te uygulamamızı açtıktan sonra Logcat paneline tıklayarak “PushDemoLog” anahtar kelimesini aratalım. Log’ta gözüken Token’ı kopyalayalım. Diğer sekmede açık olan Push Kit’e geri dönebiliriz. Add Notification dedikten sonra gerekli alanları örneğin şu şekilde doldurabilirsiniz:
Title: Welcome to Movie App
Content: Start checking movies!
Buttons: CANCEL
Action: Clear notification
Gönderilen bildirime dokunulduğunda projemizin giriş sayfasını açmak istiyorsak action olarak Open app değerini seçmeliyiz.
Push scope alanında “Specified device” seçeneğine tıklayalım ve Device token alanına Cloud Debugging’te kopyaladığımız token’ı girelim. Bildirimi istediğiniz zamana ayarladıktan sonra Cloud Debugging sekmesinde çalıştırdığınız cihaza bildirimin geleceğini görecekseniz.
HMS ML Kit ile statik resim sınıflandırma özelliğini kullanalım
HMS ML Kit ile statik resim sınıflandırma özelliğini MovieDetailScreen ekranında kullanacağız. Bu ekranda gözükecekler şu şekildedir:
- “CLASSIFY IMAGE” yazılı bir buton
- Butona tıklandığında TMDB API’dan gelen filmin poster görseli sınıflandırılacak.
- ML Kit tarafından oluşturulan sonuçta birden fazla label olursa tüm labellar listelenecek. Bu labellar TextView şeklinde “CLASSIFY IMAGE” butonunun altında gözükecek.
- MLLocalClassificationAnalyzerSetting değişkeninin MinAcceptablePossibility değeri 0,8 olarak ayarlanacaktır.
- Eğer sınıflandırma başarılı olur ama hiçbir label bulunamazsa ekranda TextView ile “[0] Others” yazısı görünecek.
- Exception handling uygulanacak.
- Bazen TMDB API’dan filmin poster görseli boş dönebiliyor bu yüzden eğer poster image bitmap boş olursa Toast mesaj ile ekrana “Image could not be found” yazılacak.
ML Kit’i projemize ekleyelim
Account Kit ve Push Kit’te olduğu gibi ML Kit için olan bağımlılıkları da projemize ekleyelim.
//Image Classificationimplementation ‘com.huawei.hms:ml-computer-vision-classification:3.2.0.300’// Base SDK implementation‘com.huawei.hms:ml-computer-vision-image-classification-model:3.2.0.300’
ML Kit’i projemize entegre edelim
- res klasörünün içindeki layout klasöründe yer alan activity_movie_detail.xml dosyamıza “CLASSIFY IMAGE” yazılı butonumuzu ve labelların listeleneceği TextView’i ekleyelim.
2. CLASSIFY IMAGE butonuna tıklandığında resim sınıflandırma işleminin tetiklenmesi için MovieDetailActivity sınıfımızı düzenleyelim.
prepareComponents metodunda yer alan TODO yorum satırını yapmakla başlamadan önce butonumuzu ve TextView’imizi çağıralım ve ML Kit ile image analyzer’ımızı oluşturalım.
Button imageClassificationButton = findViewById(R.id.image_classification_btn);TextView detectedClassesTv = findViewById(R.id.detected_image_class_tv); // Create the image analyzer:analyzer = createImageAnalyzer();
TODO yorum satırında ise bizden bitmap formatındaki görüntü verileri olan bitmap’i kullanarak bir MLFrame objesi oluşturulması isteniliyor.
MLFrame frame = MLFrame.fromBitmap(posterBitmap);frame adında MLFrame objesi oluşturduktan sonra aşağıdaki adımları uygulayabilirsiniz.
Eğer TMDB API’dan filmin poster görseli boş gelirse Toast mesajı ile ekrana “Image could not be found” yazdıralım demiştik bunu // Overview yorum satırının altında şu şekilde yapalım:
MLLocalClassificationAnalyzerSetting değişkeninin MinAcceptablePossibility değerini 0,8 olarak ayarlamak için createImageAnalyzer metodunu oluşturalım.
Yay!! ML Kit’i başarılı bir şekilde projemize entegre ettik. MovieDetailActivity sınıfımızın son haline buradan ulaşabilirsiniz.
Böylece Android projemize HMS Core, Account Kit, Push Kit ve ML Kit hizmetlerinin nasıl entegre edilebileceğini öğrendik ve Push Kit’i Cloud Debugging’te test ettik. Umarım herkes için faydalı bir yazı olmuştur. Görüşmek üzere! 👋🏻
