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

Buat Aplikasi iMessage di iOS 10

by
Difficulty:IntermediateLength:LongLanguages:

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

Pengantar

Dengan iOS 10, Apple telah membuka aplikasi Pesan kepada pengembang pihak ketiga melalui fitur baru yang disebut aplikasi iMessage. Pengembang sekarang dapat membuat berbagai jenis aplikasi mereka sendiri, mulai dari paket stiker hingga antarmuka sepenuhnya interaktif, yang membuat konten iMessage sebaris.

Dalam tutorial ini saya akan memperkenalkan Anda ke kerangka Pesan baru dan menunjukkan kepada Anda bagaimana membuat aplikasi iMessage Anda sendiri.

Tutorial ini mengharuskan Anda menjalankan Xcode 8 pada OS X El Capitan atau lebih baru dan mengasumsikan bahwa Anda merasa nyaman dengan membuat aplikasi iOS berbasis UIKit. Jika Anda masih memulai pengembangan iOS, lihat seri tutorial iOS Dari Awal Dengan Swift. Selama seri itu, Anda akan belajar bagaimana mulai mengembangkan platform iOS dengan artikel dan tutorial yang mendalam.

1. Ekosistem

Ekosistem aplikasi iMessage dimulai dengan App Store lengkap yang dapat diakses oleh pengguna melalui aplikasi Pesan. Toko ini benar-benar terpisah dari toko aplikasi iOS biasa dan hanya akan menampilkan aplikasi terkait iMessage.

Aplikasi iMessage ada sebagai ekstensi untuk aplikasi iOS biasa, mirip dengan hal-hal seperti ekstensi Foto dan keyboard khusus. Perbedaan utama adalah bahwa, karena App Store iMessage ada dengan sendirinya di dalam aplikasi Pesan, Anda dapat membuat aplikasi iMessage tanpa harus membuat aplikasi iOS yang masuk di layar beranda pengguna; aplikasi iMessage dibuat sebagai perpanjangan dari aplikasi iOS yang kosong dan tidak terlihat. Penting untuk dicatat, bahwa tentu saja jika Anda ingin mengembangkan aplikasi iOS dan iMessage, Anda dapat membuat ekstensi iMessage sama seperti jenis ekstensi lainnya.

Terakhir, walaupun aplikasi iMessage hanya akan tersedia di iOS, kontennya masih dapat dilihat di perangkat macOS dan watchOS. Selain itu, pengguna watchOS 3 akan dapat melihat stiker mereka yang baru saja digunakan dan mengirimkannya ke kontak mereka langsung dari Apple Watch.

2. Paket Stiker Dasar

Untuk orang yang hanya ingin membuat paket stiker iMessage yang cepat dan mudah, Xcode menyediakan templat untuk melakukannya tanpa harus menulis kode apa pun! Ini akan menjadi alat yang hebat untuk memungkinkan seniman grafis tanpa pengetahuan pemrograman sama sekali untuk membuat paket stiker.

Menggunakan kerangka Pesan baru untuk membuat paket stiker, Anda dapat membuat stiker kecil, sedang atau besar. Namun, ukuran ini berlaku untuk semua stiker dalam kemasan Anda. Anda hanya perlu memberikan ukuran gambar terbesar untuk setiap stiker dalam kemasan Anda, dan sistem akan menurunkan skala gambar Anda ketika ditampilkan di perangkat lain.

Meskipun tidak dipaksakan dengan ketat, berikut adalah ukuran file yang Apple rekomendasikan untuk paket stiker Anda:

  • Small: 100 x 100 pt @3x scale (300 x 300 pixel image)
  • Medium: 136 x 136 pt @3x scale (378 x 378 pixel image)
  • Large: 206 x 206 pt @3x scale (618 x 618 pixel image)

Namun, ada beberapa batasan pada gambar yang dapat Anda gunakan dalam paket stiker Anda:

  • Ukuran gambar tidak boleh lebih dari 500 KB.
  • Gambar tidak boleh lebih kecil dari 100 x 100 pt (300 x 300 piksel).
  • Gambar tidak boleh lebih besar dari 206 x 206 pt (618 x 618 piksel).
  • File gambar harus dalam format PNG, APNG, JPEG, atau GIF; Disarankan PNG untuk stiker statis dan APNG untuk stiker animasi karena mereka menangani penskalaan dan latar belakang transparan yang jauh lebih baik daripada JPEG dan GIF.

Buka Xcode dan buat proyek baru. Di bawah bagian Aplikasi iOS > Application Anda akan melihat bahwa sekarang ada opsi untuk proyek iMessage Application dan Sticker Pack Application. Untuk contoh pertama ini, pilih templat Sticker Pack Application:

Sticker Pack Application Template

Jika Anda mengikuti dan ingin beberapa aset stiker untuk digunakan dalam aplikasi Anda, Anda dapat mengunduhnya dari folder iMessage Application Stickers dari tutorial GitHub repo.

Anda akan melihat di sidebar kiri Xcode bahwa Anda sekarang memiliki katalog aset Stickers.xcstickers di proyek Anda. Folder ini akan berisi ikon aplikasi iMessage Anda dan semua stiker di paket Anda. Menambahkan stiker ke aplikasi Anda semudah menyeretnya ke folder Sticker Pack katalog aset Anda.

Sticker Pack Folder

Harap dicatat bahwa jika Anda ingin menambahkan stiker animasi menggunakan serangkaian gambar, Anda dapat mengklik kanan di folder Sticker Pack Anda dan memilih opsi Add Assets > New Sticker Sequence. Dengan ini di paket stiker Anda, Anda kemudian dapat menyeret untuk menyusun ulang setiap frame.

Sticker Sequence Creation

Terakhir, dengan katalog aset Anda terbuka, jika Anda pergi ke Attributes inspector di sidebar kanan Xcode, Anda dapat mengubah nama paket stiker Anda dan juga ukuran stiker yang Anda gunakan.

Sticker Pack Configuration

Menguji Paket Stiker Anda

Untuk menguji paket stiker Anda, cukup tekan tombol putar di sudut kiri atas Xcode atau tekan Command-R pada keyboard Anda. Setelah simulator di-boot, Xcode akan memberi Anda menu berikut.

Choose App Menu

Pilih Messages dan kemudian klik tombol Run. Setelah simulator meluncurkan aplikasi Messages, tekan tombol app store di bagian bawah layar untuk mengakses aplikasi iMessage Anda.

Accessing iMessage Apps

Paket stiker Anda seharusnya muncul pada awalnya, tetapi jika tidak, geser melintasi sampai Anda mencapainya. Setelah aplikasi Anda dimuat, Anda akan melihat dua stiker yang kami tambahkan tersedia untuk digunakan dan dikirim.

Sticker Pack Interface

Mengetuk salah satu stiker ini akan menambahkannya ke pesan saat ini, dan dari sini Anda dapat menekan kirim.

Sent Sticker

Seperti yang Anda lihat, sangat cepat dan mudah untuk membuat paket stiker untuk iMessage di iOS 10 tanpa perlu menggunakan kode apa pun.

3. Aplikasi Stiker Kustom

Untuk beberapa kasus penggunaan, fungsi yang sangat mendasar yang disediakan oleh templat aplikasi stiker dasar mungkin tidak cukup. Karena itu, Apple juga menyediakan cara bagi Anda untuk membuat aplikasi paket stiker yang lebih disesuaikan. Jika Anda ingin mengikuti, buat proyek baru bernama CustomStickerPack seperti yang diperlihatkan di awal tutorial ini, tetapi kali ini pilih templat iMessage Application.

Setelah Xcode membuat proyek Anda, Anda akan melihat bahwa Anda sekarang memiliki folder yang mirip dengan aplikasi iOS dengan folder MessagesExtension tambahan. Folder CustomStickerPack atas hanya berisi katalog aset dan file Info.plist untuk aplikasi iOS 'kosong' Anda. Penting bahwa Anda memberikan semua ikon aplikasi berukuran benar di katalog aset ini karena iOS masih akan menggunakannya untuk hal-hal seperti pengaturan penggunaan penyimpanan pengguna.

Folder yang akan kita fokuskan adalah folder MessageExtension, yang saat ini berisi file-file berikut:

  • MessagesViewController.swift yang merupakan pengendali tampilan root untuk UI aplikasi iMessage Anda
  • MainInterface.storyboard tempat Anda dapat mendesain antarmuka aplikasi dengan mudah
  • Assets.xcassets yang berisi file ikon aplikasi iMessage Anda serta aset gambar lain yang perlu Anda gunakan di antarmuka Anda
  • Info.plist untuk nilai konfigurasi ekstensi Anda

Untuk contoh aplikasi stiker kustom kami, kami hanya akan membuat antarmuka kami secara terprogram menggunakan kelas MSStickerBrowserViewController baru.

Buka file MessagesViewController.swift Anda, dan Anda akan terlebih dahulu melihat bahwa kelas MessagesViewController Anda adalah subkelas dari MSMessagesAppViewController, yang itu sendiri adalah subkelas dari UIViewController. Ini berarti bahwa semua UIKit tersedia untuk Anda gunakan dalam aplikasi iMessage Anda.

Kelas MSMessagesAppViewController menyediakan banyak metode panggilan balik yang dapat Anda timpa untuk lebih lanjut menyesuaikan fungsionalitas aplikasi Anda, tetapi kami tidak perlu khawatir tentang ini dalam tutorial ini. Untuk saat ini, cukup edit definisi kelas Anda sehingga kelas Anda sesuai dengan protokol MSStickerBrowserViewDataSource:

Sebelum kami dapat menampilkan stiker kami, kami perlu menambahkan file ke proyek kami dan memuatnya. Seret file gambar yang kami gunakan sebelumnya dalam tutorial ini ke proyek Anda, dan pastikan bahwa mereka ditambahkan ke target MessagesExtension. File perlu ditambahkan ke target daripada ke katalog aset karena dengan begitu kita dapat memuatnya dari URL, yang jauh lebih mudah saat bekerja dengan stiker khusus.

Setelah Anda menambahkan file-file ini, tambahkan kode berikut ke kelas MessagesViewController Anda:

Dengan kode ini kami cukup membuat array MSSticker untuk menyimpan stiker kami dan fungsi untuk memuatnya dari penyimpanan lokal.

Selanjutnya, tambahkan metode berikut ke kelas Anda:

Dengan kode ini, kita membuat turunan kelas MSStickerBrowserViewController dan menambahkan ini sebagai anak dari pengendali tampilan root selain membatasi ke ketinggian dan lebar penuh yang tersedia.

Selanjutnya, kita perlu mengimplementasikan metode MSStickerBrowserViewDataSource yang diperlukan untuk memberikan informasi stiker yang diperlukan. Untuk melakukannya, tambahkan metode berikut ke kode Anda:

Terakhir, agar semua kode kami benar-benar dieksekusi, ganti metode viewDidLoad Anda dengan yang berikut:

Jalankan aplikasi Anda seperti yang kami lakukan sebelumnya (mengingat bahwa Anda mungkin harus menggeser ke sana untuk sampai ke aplikasi yang tepat), dan setelah semuanya selesai memuat Anda akan melihat layar yang sama dengan sebelumnya kecuali sekarang dengan latar belakang biru:

Custom Sticker Pack

Dalam tutorial ini, kami hanya memuat gambar stiker lokal ke dalam aplikasi kustom kami untuk kesederhanaan. Namun, salah satu keuntungan utama menggunakan aplikasi stiker khusus adalah Anda dapat memuat gambar stiker dari server jarak jauh dan bahkan, melalui penggunaan pengontrol tampilan lainnya sebelum menunjukkan MSStickerBrowserViewController Anda, biarkan pengguna Anda membuat stiker sendiri.

4. Aplikasi Kustom

Di bagian terakhir tutorial ini, kita akan membuat aplikasi iMessage yang sangat mendasar untuk membuat pesan unik.

Jika Anda ingin mengikuti, buka Xcode dan buat iMessage Application lain yang disebut MessageApp. Buka file MainInterface.storyboard Anda dan di controller tampilan yang ditampilkan, hapus label default dan tambahkan stepper dan tombol seperti yang ditunjukkan:

App Interface

Harap perhatikan bahwa agar aplikasi iMessage Anda muncul dengan benar di semua ukuran perangkat, Anda perlu menerapkan tata letak otomatis di antarmuka Anda. Dalam contoh ini, saya membatasi stepper ke pusat view controller dan tombol ke bawah.

Selanjutnya, buka Attributes inspector dengan stepper Anda yang dipilih dan ubah nilainya minimum dan maksimum menjadi 0 dan 10 masing-masing:

Stepper Values

Selanjutnya, buka Assistant editor dengan file MessagesViewController.swift Anda untuk membuat dan menghubungkan outlet untuk stepper Anda dan sentuhan dalam aksi untuk tombol Anda:

Sekarang saatnya bagi kita untuk menulis beberapa kode. Pertama, saya perlu memperkenalkan Anda ke beberapa kelas yang penting saat membuat aplikasi iMessage:

  • MSConversation: mewakili percakapan yang sedang terbuka. Anda dapat menggunakan kelas ini untuk memanipulasi transkrip percakapan, misalnya dengan memasukkan pesan atau mendapatkan pesan yang saat ini dipilih.
  • MSMessage: mewakili satu pesan, baik dibuat oleh Anda untuk dimasukkan ke dalam percakapan atau sudah ada dalam percakapan.
  • MSMessageTemplateLayout: membuat gelembung pesan untuk Anda tampilkan pesan khusus Anda. Seperti yang ditunjukkan pada gambar di bawah, tata letak template ini memiliki banyak properti dan tempat bagi Anda untuk meletakkan konten Anda sendiri untuk menyesuaikan pesan Anda.
Template Message Layout

Penting untuk dicatat bahwa ruang di kiri atas tata letak ini akan diisi oleh ikon aplikasi iMessage Anda. Selain itu, semua properti ini bersifat opsional, dan tidak menyediakan string teks sama sekali akan menghilangkan bagian bawah tata letak.

Masih di file MessagesViewController.swift Anda, tambahkan metode berikut ke kelas MessagesViewController Anda:

Dengan metode ini, kami mengambil nilai slider saat ini dan meletakkannya dalam label melingkar. Kami kemudian merender label ini (dan tampilan induknya) menjadi objek UIImage yang dapat kami lampirkan ke pesan kami.

Selanjutnya, ganti metode didPress(button:) Anda dengan kode berikut:

Anda akan melihat bahwa dengan kode ini, pertama-tama kita membuat tata letak pesan dan mengatur properti image dan caption. Selanjutnya, kita membuat objek MSMessage untuk dimasukkan ke dalam percakapan.

Harap perhatikan bahwa agar iMessage memproses pesan khusus Anda dengan benar, Anda harus mengatur layout dan url untuk pesan Anda. URL ini dimaksudkan untuk menautkan ke halaman web semacam tempat pengguna macOS juga dapat melihat konten iMessage khusus Anda. Namun, untuk contoh sederhana ini, kami baru saja membuat url dasar dari sebuah string.

Terakhir, kami menyisipkan pesan ke dalam percakapan aktif saat ini. Memanggil metode ini tidak benar-benar mengirim pesan, melainkan—malah menempatkan pesan Anda di kolom entri pengguna sehingga mereka dapat menekan send send.

Bangun dan jalankan aplikasi baru Anda sekali lagi, dan Anda akan melihat antarmuka yang mirip dengan berikut:

Running App Interface

Setelah Anda menekan tombol Create Message, Anda juga akan melihat gelembung tata letak pesan yang ditampilkan di kolom entri dan tersedia untuk dikirim:

Completed Message

Kesimpulan

Dalam tutorial ini, saya memperkenalkan Anda pada kerangka Pesan baru di iOS 10, yang memungkinkan Anda membuat paket stiker dan aplikasi untuk diintegrasikan dengan iMessage. Kami membahas kelas dasar yang perlu Anda perhatikan, termasuk MSStickerBrowserViewController, MSConversation, MSMessage, dan MSTemplateMessageLayout.

Kerangka kerja Pesan menyediakan API untuk memberi Anda banyak kontrol atas aplikasi iMessage Anda. Untuk bacaan lebih lanjut, saya akan merekomendasikan memeriksa Referensi Kerangka Pesan Apple.

Seperti biasa, pastikan untuk meninggalkan komentar dan umpan balik Anda di bagian komentar di bawah ini.

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.