Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Android SDK
Code

Kode Slice Android Pertama Anda dan Pertahankan Pengguna Terlibat

by
Difficulty:AdvancedLength:LongLanguages:

Indonesian (Bahasa Indonesia) translation by Ilham Saputra (you can also view the original English article)

Kerja keras tidak akan berakhir hanya karena aplikasi Anda telah mengumpulkan banyak unduhan dan ulasan positif di Google Play store. Pengguna seluler biasa Anda memiliki puluhan aplikasi yang terpasang di perangkat mereka, dan dengan aplikasi baru yang dirilis setiap saat, Anda harus bekerja keras untuk mempertahankan minat pemirsa Anda!

Membuat pengguna kembali ke aplikasi Anda sangat penting untuk menciptakan basis pengguna yang stabil dan setia. Plus, jika Anda telah memonetisasi aplikasi Anda, maka jumlah waktu yang dihabiskan orang dalam aplikasi Anda secara langsung memengaruhi berapa banyak uang yang Anda hasilkan—pikirkan setiap detik tambahan sebagai kesempatan lain untuk menampilkan iklan atau menggoda pengguna untuk memuntahkan pada pembelian aplikasi!

Pada I/O tahun ini, Google memperkenalkan slices, fitur baru yang menjanjikan untuk mendorong pengguna kembali ke aplikasi Anda dengan mendapatkan fitur dan konten aplikasi Anda di depannya pada saat yang tepat ketika mereka sangat membutuhkannya.

Dengan slices yang membentuk menjadi alat penting untuk mempertahankan pemirsa Anda, sekarang adalah waktu yang tepat untuk mendapatkan pengalaman langsung dengan fitur Android yang akan datang ini. Pada bagian akhir artikel ini, Anda akan membuat berbagai slices, dari slice sederhana yang meluncurkan Aktivitas saat disadap melalui slices yang lebih kompleks yang terdiri dari ikon, gambar, kisi, dan beberapa SliceActions.

Slices: Lebih Banyak Cara untuk Pengguna Menikmati Aplikasi Anda

Mirip dengan widget, slices adalah cuplikan konten yang muncul di luar konteks aplikasi, meningkatkan keterlihatan aplikasi Anda, dan memberi Anda lebih banyak peluang untuk melibatkan pemirsa Anda.

Slices memiliki potensi untuk sangat meningkatkan visibilitas aplikasi Anda, dengan Google menjanjikan untuk menambahkan dukungan untuk slices ke area di mana banyak pengguna Android menghabiskan banyak waktu, termasuk pencarian Google dan Asisten Google. Karena mereka adalah bagian dari Android Jetpack, slices kompatibel dengan Android 4.4 dan lebih tinggi, yang berarti slices Anda berpotensi mencapai 95% dari semua pengguna Android.

Jadi slices memiliki banyak hal yang ditawarkan—tetapi bagaimana cara kerjanya?

Saat ini, jika Anda melakukan penelusuran di aplikasi Google, Google mungkin menyarankan aplikasi relevan yang terpasang di perangkat Anda. Misalnya, jika Anda memasang Facebook untuk Seluler, maka mengetik facebook akan memunculkan tautan langsung ke aplikasi Facebook.

Androids predictive apps suggest the application users might want to interact with next

Slices mengambil aplikasi ini yang menghubungkan satu langkah lebih jauh, dengan berfokus pada tugas-tugas khusus yang mungkin ingin dilakukan oleh pengguna dalam aplikasi yang telah mereka instal.

Mari kita lihat contoh: bayangkan Anda telah menginstal aplikasi Book A Hotel yang memungkinkan Anda mencari hotel dan memesan kamar. Ketika Anda mengetik hotel London ke Google, Anda menemukan hasil pencarian yang biasa, ditambah sepotong dari aplikasi Book A Hotel. Slice ini merekomendasikan hotel di London dan menampilkan informasi seperti nama dan alamat hotel, ditambah SliceAction, dalam bentuk tombol yang memungkinkan Anda memesan ruangan langsung dari antarmuka pengguna slice (UI).

Bagi pengguna, slice ini telah menyediakan akses mudah ke informasi dan fitur yang mereka butuhkan pada saat itu. Untuk pengembang, potongan ini telah memungkinkan mereka untuk mendapatkan aplikasi mereka di depan pengguna pada titik yang tepat ketika mereka memiliki peluang terbesar untuk berhasil melibatkan kembali mereka.

Bagaimana cara saya membuat slice pertama saya?

Mari mulai dengan membuat slice sederhana yang saat disentuh, akan meluncurkan MainActivity aplikasi kami.

Teknik sederhana ini memungkinkan untuk memulai tugas apa pun, langsung dari UI slice. Dalam contoh Buku A Hotel kami, kami hanya dapat menautkan tombol ke BookRoomActivity aplikasi terkait, yang akan menjadi cara sederhana namun efektif untuk mengurangi jumlah layar yang harus dinavigasi untuk menyelesaikan tugas khusus ini.

Untuk memulai, buat proyek Android baru. Anda dapat menggunakan pengaturan apa pun yang Anda inginkan, tetapi pastikan Anda memilih kotak centang Sertakan dukungan Kotlin ketika diminta.

Setelah Anda membuat proyek, buka file build.gradle dan tambahkan dependensi slice-core dan slice-builder:

Menampilkan Konten Aplikasi Anda di Google Search, Dengan Penyedia Slice

Selanjutnya, kita perlu membuat penyedia slice, yang merupakan komponen yang bertanggung jawab untuk menampilkan konten aplikasi Anda di luar konteks aplikasi.

Anda membuat penyedia slice dengan menggunakan template penyedia slice Android Studio:

  • Pilih New > Other > Slice Provider dari toolbar Android Studio.
  • Masukkan nama MySliceProvider.
  • Atur Source language ke Kotlin.
  • Klik Finish.
  • Buka kelas MySliceProvider, dan Anda akan melihat kode yang dihasilkan secara otomatis berikut ini:

Jika Anda membuat penyedia slice menggunakan New > Other > Slice Provider, maka Android Studio juga akan menambahkan penyedia yang diperlukan ke Manifest Anda:

Entri ini memastikan bahwa slice Anda dapat ditemukan oleh aplikasi lain.

Apakah Sinkronisasi Proyek Gradle Anda Gagal?

Sejauh ini, kami hanya menggunakan kode yang Android Studio hasilkan secara otomatis, tetapi proyek Anda mungkin sudah menolak untuk dikompilasi!

Bug, fungsionalitas yang hilang, dan perilaku aneh yang semuanya hanyalah bagian dari kesenangan bekerja dengan rilis awal. Pada saat penulisan, membuat penyedia slice terkadang menambahkan set dependensi baru ke file build.gradle proyek Anda.

Tidak hanya dependensi ini tidak perlu—mereka salah. Meskipun mudah dilewatkan, bandingkan:

Dengan benar:

Satu s dapat berarti perbedaan antara aplikasi yang berfungsi dan proyek yang menolak untuk dikompilasi. Kemungkinannya adalah bug ini akan diatasi sebelum rilis resmi slice, tetapi jika Android Studio mulai mengeluh tentang dependensi yang belum terselesaikan, periksa file build.gradle Anda untuk melihat apakah ini telah terjadi dalam proyek Anda.

Membuat Slice: URI, SliceActions, dan Slice Layouts

Untuk mengubah kode boilerplate penyedia slice menjadi slice yang berfungsi, kita perlu melakukan beberapa perubahan:

1. Tentukan URI

Setiap slice memiliki URI yang unik, dan itu adalah tugas penyedia slice untuk menyediakan pemetaan antara URI ini dan potongan yang sesuai.

Aplikasi yang mampu menampilkan sebuah slice dikenal sebagai aplikasi host. Setiap kali host perlu menampilkan sepotong, ia mengirimkan permintaan yang mengikat ke penyedia slice dengan URI dari slice yang dicari. Penyedia slice Anda akan memeriksa URI dan mengembalikan slice yang sesuai.

Dalam cuplikan berikut, metode onBindSlice sedang memeriksa jalur /myURI dan mengembalikan slice yang menampilkan pesan Hello World.

2. Buat Slice Anda Interaktif

Meskipun Anda dapat membuat slice yang hanya menampilkan beberapa informasi, jika Anda ingin slice Anda menjadi interaktif maka Anda harus membuat satu atau lebih SliceActions.

SliceAction dapat terdiri dari judul, ikon, dan PendingIntent. Anda juga dapat menandai SliceActions sebagai tindakan utama, yang memicu kapan pun pengguna mengetuk di mana saja pada baris slice itu.

3. Bangun UI Slice

Anda menentukan tata letak slice dengan menerapkan ListBuilder, menambahkan baris, dan kemudian menambahkan item ke baris itu. Misalnya, di sini saya menggunakan ListBuilder dan addRow untuk membuat slice yang terdiri dari judul dan subtitle:

Anda dapat menampilkan campuran berbagai jenis konten di baris yang sama, seperti teks, tindakan, dan ikon.

Bangun Android Slice Anda yang Sepenuhnya Berfungsi

Sekarang mari kita menerapkan semua ini ke proyek kami dan membuat slice yang meluncurkan MainActivity aplikasi kami ketika disadap.

Buka kelas MySliceProvider, dan tambahkan yang berikut:

Menguji Slices Anda: Memasang Slice Viewer

Jika Anda akan memasukkan tes Anda ke dalam tes, maka Anda akan membutuhkan setidaknya satu aplikasi yang mampu menampilkan slice.

Slices dilaporkan akan membuat debut mereka di pencarian Google akhir tahun ini, tetapi pada saat penulisan, fitur ini belum diluncurkan. Saat ini, satu-satunya cara untuk menguji slice adalah menginstal aplikasi Google Slice Viewer, yang dirancang untuk meniru bagaimana slice akhirnya akan muncul di pencarian Google.

Untuk menginstal Slice Viewer pada Android Virtual Device (AVD):

Untuk menginstal Slice Viewer pada smartphone atau tablet fisik:

  • Unduh Slice Viewer.
  • Pastikan ponsel cerdas atau tablet Anda terpasang ke mesin pengembangan Anda.
  • Pindahkan APK Slice Viewer ke folder Android/SDK/platform-tools komputer Anda.
  • Buka jendela Command Prompt (Windows) atau Terminal (Mac).
  • Ubah direktori (cd) sehingga Command Prompt atau Terminal mengarah ke folder Android/sdk/platform-tools Anda—misalnya, inilah perintah saya:
  • Jalankan perintah, dengan menekan tombol Enter pada keyboard Anda.
  • Gunakan perintah adb install untuk mendorong APK ke perangkat Android Anda:

Membuat Konfigurasi Jalankan URI

Selanjutnya, Anda harus membuat konfigurasi run yang meneruskan URI unik slice Anda ke perangkat AVD atau Android Anda.

  • Pilih Run > Edit Configurations… dari toolbar Android Studio.
  • Klik tombol + dan kemudian pilih Android App.
Create a run configuration by navigating to Run Edit configurations Android App
  • Berikan konfigurasi run Anda nama. Saya menggunakan sliceConfig.
  • Buka dropdown Module, lalu pilih app.
  • Buka dropdown Launch, lalu pilih URL.
  • Masukkan URL slice Anda, dalam format slice-content://package-name/slice-URL. Misalnya, URL slice saya adalah: slice-content://com.jessicathornsby.kotlinslices/launchMainActivity.
  • Klik OK.
  • Pilih Run > Run sliceConfig dari toolbar Android Studio, lalu pilih perangkat Android Anda.

Saat pertama kali Slice Viewer mencoba menampilkan slice Anda, Slice akan meminta izin untuk mengakses URI unik slice Anda. Ketuk Allow dan navigasi dialog izin, dan slice Anda akan muncul di layar.

The first time you try to display your slice Slice Viewer will request permission to display your applications slices

Untuk berinteraksi dengan SliceAction, klik tombol Open MainActivity, dan slice akan merespon dengan meluncurkan MainActivity aplikasi Anda.

Mendapatkan Lebih Banyak dari Slices Anda: Menambahkan SliceAction Kedua

Mengapa membatasi diri Anda untuk satu SliceAction, ketika Anda dapat memiliki beberapa SliceActions? Di bagian ini, kami akan menerapkan dua SliceActions, di mana setiap tindakan meluncurkan Activity yang berbeda. Saya juga akan memperkenalkan beberapa elemen UI baru, dengan menambahkan subtitle dan beberapa item akhir ke slice kami.

Buat SecondActivity

Mari dapatkan penyiapan dari jalan dan buat Activity kedua yang dapat terhubung ke Tautan SliceAction kedua kami.

Pertama, pilih New > Kotlin File / Class dari toolbar Android Studio. Dalam dialog file baru, buka dropdown Kind dan pilih Class. Beri nama kelas ini SecondActivity, lalu klik OK.

Sekarang buka kelas SecondActivity Anda dan tambahkan yang berikut:

Selanjutnya, pilih New > Android Resource File dari toolbar Android Studio. Di jendela berikutnya, buka tarik-turun Jenis Resource, dan pilih Layout. Beri nama file ini activity_second, dan klik OK.

Sekarang buka file layout ini dan tambahkan kode berikut:

Buka Manifest proyek Anda, dan deklarasikan SecondActivity ini:

Membangun UI yang Lebih Kompleks: Item Akhir Slice

Item akhir dapat berupa stempel waktu, gambar, atau SliceAction, tetapi seperti namanya, mereka selalu muncul di akhir baris. Anda dapat menambahkan beberapa item akhir ke satu baris, meskipun bergantung pada ruang yang tersedia, tidak ada jaminan bahwa semua item akhir Anda akan ditampilkan kepada pengguna.

Kami akan membuat SliceActions kami sebagai ikon, jadi Anda perlu menambahkan dua gambar layar baru ke proyek Anda:

  • Pilih New > Image Asset dari toolbar Android Studio.
  • Klik tombol Clip art kecil (ini menampilkan gambar Android secara default).
  • Pilih ikon yang ingin Anda gunakan untuk item akhir Launch MainActivity Anda. Saya menggunakan ikon Home.
  • Berikan ikon ini nama ic_home, lalu klik Next.
  • Baca informasi di layar, dan jika Anda senang untuk melanjutkan, kemudian klik Finish.

Ulangi langkah-langkah di atas untuk membuat ikon untuk tindakan slice Launch SecondActivity Anda. Untuk item kedua saya, saya menggunakan ikon call dan memberi nama ic_call.

Membuat SliceAction kedua

Kami sekarang siap menambahkan SliceAction kedua ke kelas MySliceProvider:

Karena kami belum mengubah URI, kami tidak perlu membuat konfigurasi run baru, yang berarti bahwa menguji slice ini semudah memilih Run > sliceConfig dari toolbar Android Studio.

Our slice consists of two end items which are linked to separate SliceActions

Anda dapat mengunduh proyek ini dari tutorial GitHub repo.

Multimedia Slice: Membuat Grid Layouts

Hingga saat ini, kami telah menyusun semua slice kami menggunakan baris saja, tetapi Anda juga dapat membuat slice menggunakan baris dan sel grid.

Di bagian akhir ini, kita akan membuat potongan yang terdiri dari judul, subjudul, dan satu baris yang dibagi menjadi tiga sel. Setiap sel akan memiliki judulnya sendiri, beberapa teks tubuh, dan gambar, dan masing-masing akan melakukan tindakan unik ketika disadap.

Well be creating a grid-based slice consisting of three unique SliceActions

Untuk meletakkan slice Anda dalam kotak, Anda perlu:

  • Menerapkan ListBuilder.
  • Tambahkan baris grid untuk ListBuilder, menggunakan addGridRow.
  • Menambah sel baris, menggunakan addCell. Setiap baris dapat menampilkan maksimum lima sel.

Anda kemudian dapat menambahkan konten ke setiap sel, seperti:

  • Judul, yang Anda tambahkan menggunakan addTitleText.
  • Teks Body, menggunakan addText.
  • Gambar, yang Anda buat menggunakan addImage. Setiap gambar sel harus memiliki salah satu dari atribut berikut: LARGE_IMAGE, SMALL_IMAGE, atau ICON_IMAGE.
  • Maksud konten, yang kira-kira setara dengan SliceAction. Untuk membantu menjaga agar contoh ini terus terang, mengetuk setiap sel hanya akan memuat artikel di peramban bawaan perangkat, tetapi jika Anda lebih suka pengalaman potongan yang lebih otentik, maka Anda dapat mengubah kode setContentIntent.

Saya akan menyertakan beberapa gambar di grid saya, jadi Anda harus menambahkan setidaknya satu gambar untuk proyek Anda. Saya menggunakan logo Kotlin, tetapi Anda dapat mengambil gambar apa saja dan menjatuhkannya ke dalam folder Drawable proyek Anda.

Sekarang, Anda siap membuka kelas MySliceProvider dan membangun jaringan Anda:

Anda dapat menemukan kode lengkap untuk proyek ini di repo GitHub kami.

Jalankan aplikasi ini di AVD atau perangkat Android fisik Anda, dan cobalah berinteraksi dengan setiap item di grid. Setiap sel harus ditautkan ke artikel yang berbeda.

Pastikan Slice Anda Terlihat Baik, Terlepas dari Aplikasi Host

Cara konten slice Anda ditampilkan dapat bervariasi, tergantung pada mode yang dikonfigurasi untuk aplikasi host. Untuk memastikan slice Anda terlihat bagus dan berfungsi dengan benar terlepas dari aplikasi hosting, Anda harus menguji slice Anda di semua mode slice yang berbeda.

Karena slice grid kami memiliki konten yang jauh lebih banyak daripada slice sebelumnya, itu adalah kandidat terbaik untuk mengilustrasikan perbedaan antara berbagai mode slice ini.

Untuk memasukkan potongan Anda ke tes, klik ikon kecil di sudut kanan-atas Slice Viewer, dan kemudian putar melalui mode berikut:

1. Large

Dalam format ini, Android menampilkan sebanyak mungkin baris di ruang yang tersedia. Ini adalah mode yang digunakan Slice Viewer secara default.

2. Shortcut

Dalam mode ini, slice Anda diwakili oleh ikon dan label.

In shortcut mode our slice is represented by the Kotlin drawable

Jika ada tajuk utama yang dikaitkan dengan SliceAction Anda, maka ini akan digunakan sebagai ikon slice Anda. Jika tidak ada ikon yang tersedia, maka Android akan menampilkan tindakan utama yang terkait dengan baris pertama slice Anda, yang dalam hal ini adalah drawable Kotlin kami.

Untuk mengubah ikon yang ditampilkan dalam mode pintasan, tambahkan gambar menarik kedua ke proyek Anda, lalu perbarui bagian berikut dari penyedia slice:

3. Small

Small mode memiliki ketinggian terbatas dan akan menampilkan SliceItem tunggal atau koleksi terbatas item sebagai satu baris konten. Jika slice Anda memiliki header, maka ini akan ditampilkan, persisnya apa yang terjadi dengan slice kami.

In small mode our slice is represented by a title and a subtitle

Mengubah judul atau subtitle akan memengaruhi konten yang ditampilkan dalam mode kecil.

Jika slice Anda tidak berisi header, maka baris pertama slice akan ditampilkan.

Mengurangi Kode, dengan Slice Builders KTX

Setelah Anda mempelajari cara menerapkan fitur baru, langkah selanjutnya adalah mempelajari cara mengirimkan hasil yang sama, dengan lebih sedikit kode!

Android KTX adalah kumpulan modul yang terdiri dari ekstensi yang mengoptimalkan platform Android untuk Kotlin. Modul KTX Slice Builder Android KTX membungkus pola builder dalam DSL ramah Kotlin yang membantu Anda membuat slice Anda dengan cara yang lebih ringkas dan dapat dibaca manusia. Untuk memulai dengan Slice Builders KTX, ganti dependensi berikut:

Dengan:

Anda kemudian dapat memodifikasi metode createSlice Anda untuk menggunakan DSL ini. Misalnya, ini slice sederhana yang menampilkan judul dan subjudul:

Menggunakan DSL, ini menjadi:

Kesimpulan

Dalam artikel ini, kami mendapat beberapa pengalaman langsung dengan fitur slice terbaru Android. Kami melihat cara membuat slice sederhana yang dapat memberikan akses langsung ke bagian mana pun dari aplikasi Anda, sebelum beralih ke pembuatan slice yang lebih rumit yang terdiri dari item akhir, gambar, teks tambahan, dan beberapa SliceActions.

Anda dapat mempelajari lebih lanjut tentang slices di dokumen Android resmi.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.