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

Buat Apl iMessage dalam iOS 10

by
Difficulty:IntermediateLength:LongLanguages:

Malay (Melayu) translation by Ilham Saputra (you can also view the original English article)

Mukadimah

Dengan iOS 10, Apple telah membuka aplikasi Mesej kepada pemaju pihak ketiga melalui ciri baru yang dipanggil aplikasi iMessage. Pemaju kini boleh membuat pelbagai jenis aplikasi mereka sendiri, mulai dari pek pelekat ke antara muka interaktif sepenuhnya, yang mencipta kandungan iMessage dalam talian.

Dalam tutorial ini, saya akan memperkenalkan anda kepada kerangka Mesej baru dan menunjukkan kepada anda cara membuat aplikasi iMessage anda sendiri.

Tutorial ini memerlukan anda menjalankan Xcode 8 pada OS X El Capitan atau kemudian dan mengandaikan bahawa anda selesa dengan membuat aplikasi iOS berasaskan UIKit. Jika anda masih memulakan pembangunan iOS, lihat siri tutorial iOS Dari Scratch Dengan Swift. Sepanjang siri itu, anda akan belajar bagaimana untuk mula membangunkan platform iOS dengan artikel dan tutorial yang mendalam.

1. Ecosystem

Ekosistem aplikasi iMessage bermula dengan App Store penuh yang boleh diakses oleh pengguna melalui aplikasi Mesej. Kedai ini benar-benar berasingan dari kedai aplikasi iOS biasa dan akan memaparkan hanya aplikasi yang berkaitan dengan iMessage.

Aplikasi iMessage wujud sebagai sambungan kepada aplikasi iOS biasa, sama seperti perkara seperti sambungan Foto dan papan kekunci tersuai. Perbezaan utama adalah, kerana iMessage App Store wujud sendiri di dalam aplikasi Mesej, anda boleh membuat aplikasi iMessage tanpa perlu membuat aplikasi iOS yang berjalan di skrin utama pengguna; aplikasi iMessage dicipta sebagai pelanjutan aplikasi iOS yang berkesan dan kosong. Perlu diingat, bagaimanapun, jika anda ingin membangunkan aplikasi iOS dan iMessage, anda boleh membuat sambungan iMessage seperti jenis pelanjutan yang lain.

Akhir sekali, sementara aplikasi iMessage hanya akan tersedia di iOS, kandungannya masih dapat dilihat pada peranti macOS dan watchOS. Di samping itu, pengguna watchOS 3 dapat melihat pelekat mereka yang baru digunakan dan menghantarnya ke kenalan mereka terus dari Apple Watch.

2. Basic Sticker Packs

Bagi orang yang hanya mahu membuat pek pelekat iMessage yang cepat dan mudah, Xcode menyediakan templat untuk melakukannya tanpa perlu menulis apa-apa kod! Ini akan menjadi alat yang hebat untuk membolehkan artis grafik tanpa pengetahuan pengaturcaraan sama sekali untuk membuat pek pelekat.

Menggunakan rangka Mesej Mesej baru untuk membuat pek pelekat, anda boleh membuat pelekat kecil, sederhana atau besar. Walau bagaimanapun, saiz ini digunakan untuk semua pelekat dalam pek anda. Anda hanya perlu memberikan saiz imej terbesar untuk setiap pelekat dalam pek anda, dan sistem akan menurunkan imej anda apabila dipaparkan pada peranti lain.

Walaupun tidak dikuatkuasakan dengan ketat, berikut adalah saiz fail yang Apple mengesyorkan untuk pek pelekat 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)

Walau bagaimanapun, terdapat beberapa batasan pada imej yang boleh anda gunakan dalam pek pelekat anda:

  • Imej tidak boleh melebihi 500 KB dalam saiz fail.
  • Imej tidak boleh lebih kecil daripada 100 x 100 pt (300 x 300 piksel).
  • Imej boleh tidak lebih daripada 206 x 206 pt (618 x 618 piksel).
  • Fail imej mesti format PNG, APNG, JPEG, atau GIF; PNG untuk pelekat statik dan APNG untuk animasi disyorkan kerana mereka mengendalikan latar belakang bersisik dan telus jauh lebih baik daripada JPEG dan GIF.

Buka Xcode dan buat projek baru. Di bawah bahagian iOS > Application, anda akan melihat sekarang terdapat pilihan project untuk iMessage Application dan Sticker Pack Application. Untuk contoh pertama ini, pilih templat Sticker Pack Application:

Sticker Pack Application Template

Jika anda mengikuti dan mahu beberapa aset pelekat untuk digunakan dalam aplikasi anda, anda boleh memuat turunnya dari folder iMessage Aplication Stickers tutorial GitHub repo.

Anda akan melihat di bar sisi sebelah kiri Xcode yang kini anda mempunyai katalog aset Stickers.xcstickers dalam projek anda. Folder ini akan mengandungi ikon aplikasi iMessage anda dan semua pelekat dalam pek anda. Menambah pelekat pada aplikasi anda semudah menyeretnya ke dalam folder Sticker Pack katalog aset anda.

Sticker Pack Folder

Sila ambil perhatian bahawa jika anda ingin menambah pelekat animasi menggunakan satu siri imej, anda boleh klik kanan dalam folder Sticker Pack anda dan pilih Add Assets > New Sticker Sequence. Dengan ini dalam pek pelekat anda, anda kemudian boleh seret untuk menyusun semula bingkai individu.

Sticker Sequence Creation

Akhir sekali, dengan katalog aset anda terbuka, jika anda pergi ke Attributes inspector di bar sisi sebelah kanan Xcode, anda boleh menukar nama pek pelekat anda dan juga saiz pelekat yang anda gunakan.

Sticker Pack Configuration

Menguji Pek Pelekat Anda

Untuk menguji pek pelekat anda, cukup tekan butang main di sudut kiri atas Xcode atau tekan Command-R pada papan kekunci anda. Sekali simulator telah dimulakan, Xcode harus membentangkan anda dengan menu berikut.

Choose App Menu

Pilih Messages dan kemudian klik butang Run. Setelah simulator telah melancarkan aplikasi Messages, tekan butang kedai aplikasi di bahagian bawah skrin untuk mengakses aplikasi iMessage anda.

Accessing iMessage Apps

Pek pelekat anda harus muncul pada mulanya, tetapi jika tidak, leret merentas sampai anda mencapainya. Sebaik sahaja aplikasi anda telah dimuatkan, anda harus melihat kedua-dua pelekat yang kami tambah tersedia untuk digunakan dan dihantar.

Sticker Pack Interface

Mengetik pada salah satu pelekat ini akan menambahnya pada mesej semasa, dan dari sini anda boleh tekan hantar.

Sent Sticker

Seperti yang anda lihat, ia sangat cepat dan mudah untuk membuat pek pelekat untuk iMessage dalam iOS 10 tanpa perlu menggunakan sebarang kod sama sekali.

3. Custom Sticker Applications

Untuk beberapa kes penggunaan, fungsi yang sangat asas yang disediakan oleh templat aplikasi pelekat asas mungkin tidak mencukupi. Oleh kerana itu, Apple juga menyediakan cara bagi Anda untuk membuat aplikasi pek stiker yang lebih khusus. Sekiranya anda ingin mengikuti, buat projek baru bernama CustomStickerPack seperti yang ditunjukkan pada permulaan tutorial ini, tetapi kali ini memilih templat iMessage Application.

Setelah Xcode telah mencipta projek anda, anda akan melihat bahawa anda kini mempunyai folder yang serupa dengan aplikasi iOS dengan tambahan folder MessagesExtension. Folder CustomStickerPack teratas hanya mengandungi katalog aset dan fail Info.plist untuk aplikasi "kosong" iOS anda. Adalah penting bahawa anda menyediakan semua ikon aplikasi bersaiz betul dalam katalog aset ini kerana iOS masih akan menggunakannya untuk perkara-perkara seperti tetapan penggunaan storan pengguna.

Folder yang akan kita fokuskan ialah folder MessageExtension, yang pada masa ini mengandungi fail berikut:

  • MessagesViewController.swift yang merupakan pengawal pandangan root untuk UI aplikasi iMessage anda
  • MainInterface.storyboard di mana anda boleh reka bentuk antara muka aplikasi anda dengan mudah
  • Assets.xcassets yang mengandungi fail ikon aplikasi iMessage anda serta aset imej lain yang anda perlukan untuk digunakan dalam antara muka anda
  • Info.plist untuk nilai konfigurasi pelanjutan anda

Untuk contoh aplikasi pelekat peribadi kami, kami hanya akan mencipta antara muka kami menggunakan pemrograman menggunakan kelas MSStickerBrowserViewController baru.

Buka fail MessagesViewController.swift anda, dan pertama-tama anda akan melihat bahawa kelas MessagesViewController anda adalah subclass dari MSMessagesAppViewController, yang sendiri adalah subclass dari UIViewController. Ini bermakna bahawa semua UIKit tersedia untuk digunakan dalam aplikasi iMessage anda.

Kelas MSMessagesAppViewController menyediakan banyak kaedah panggilan balik yang boleh diterbangkan untuk selanjutnya menyesuaikan fungsi aplikasi anda, tetapi kami tidak perlu risau mengenai perkara ini dalam tutorial ini. Buat masa ini, hanya edit takrif kelas anda supaya kelas anda mematuhi protokol MSStickerBrowserViewDataSource:

Sebelum kita dapat memaparkan pelekat kami, kami perlu menambah fail ke projek kami dan memuatkannya. Seret fail imej yang kami gunakan sebelum ini dalam tutorial ini ke projek anda, dan pastikan bahawa ia ditambah ke sasaran MessagesExtension. Fail-fail perlu ditambah ke sasaran dan bukan kepada katalog aset kerana cara itu kita dapat memuatkannya dari URL, yang lebih mudah ketika bekerja dengan pelekat adat.

Sebaik sahaja anda telah menambah fail ini, tambah kod berikut untuk kelas MessagesViewController anda:

Dengan kod ini kita hanya membuat array MSSticker untuk menyimpan pelekat kami dan fungsi untuk memuatkannya dari storan tempatan.

Seterusnya, tambahkan kaedah berikut ke kelas anda:

Dengan kod ini, kami membuat contoh kelas MSStickerBrowserViewController dan menambah ini sebagai kanak-kanak pengawal pandangan root selain menghalangnya untuk ketinggian dan lebar yang tersedia sepenuhnya.

Seterusnya, kami perlu melaksanakan kaedah MSStickerBrowserViewViewSataSource yang diperlukan untuk memberikan maklumat pelekat yang diperlukan. Untuk berbuat demikian, tambahkan kaedah berikut ke kod anda:

Terakhir, supaya semua kod kami sebenarnya dilaksanakan, gantikan kaedah viewDidLoad anda dengan yang berikut:

Jalankan aplikasi anda seperti yang kita lakukan sebelum ini (mengingati bahawa anda mungkin perlu sapu untuk masuk ke aplikasi yang betul), dan sebaik sahaja semuanya selesai dimuat, anda harus melihat skrin yang sama sebelum ini kecuali sekarang dengan latar belakang biru:

Custom Sticker Pack

Dalam tutorial ini, kami hanya memuatkan imej pelekat tempatan ke dalam aplikasi tersuai kami untuk kesederhanaan. Walau bagaimanapun, salah satu kelebihan utama untuk menggunakan aplikasi pelekat peribadi ialah anda boleh memuatkan imej pelekat dari pelayan jauh dan bahkan menggunakan pengawal pandangan lain sebelum menunjukkan MSStickerBrowserViewController anda, biarkan pengguna membuat pelekat mereka sendiri.

4. Custom Applications

Di bahagian akhir tutorial ini, kami akan membuat aplikasi iMessage yang sangat asas untuk membuat mesej yang unik.

Sekiranya anda mahu mengikuti, buka Xcode dan buat iMessage Application lain yang dipanggil MessageApp. Buka fail MainInterface.storyboard anda dan pada pengawal pandangan yang ditunjukkan, tanggalkan label lalai dan tambahkan stepper dan butang seperti yang ditunjukkan:

App Interface

Sila ambil perhatian bahawa untuk aplikasi iMessage anda muncul dengan betul pada semua saiz peranti, anda perlu melaksanakan susunatur automatik di antara muka anda. Dalam contoh ini, saya telah mengekang stepper ke pusat pengawal pandangan dan butang ke bawah.

Seterusnya, buka Attributes inspector dengan stepper anda dipilih dan ubah nilai minimum dan maksimum kepada 0 dan 10 masing-masing:

Stepper Values

Seterusnya, buka Assistant editor dengan fail MessagesViewController.swift anda untuk membuat dan menyambungkan saluran keluar untuk stepper anda dan sentuhan di dalam tindakan untuk butang anda:

Kini sudah tiba masanya untuk kita menulis beberapa kod. Pertama, saya perlu memperkenalkan anda kepada beberapa kelas yang penting ketika membuat aplikasi iMessage:

  • MSConversation: mewakili perbualan yang sedang dibuka. Anda boleh menggunakan kelas ini untuk memanipulasi transkrip perbualan, contohnya dengan memasukkan mesej atau mendapatkan mesej yang sedang dipilih.
  • MSMessage: mewakili satu mesej, sama ada anda cipta untuk memasukkan ke dalam perbualan atau sudah sedia ada dalam perbualan.
  • MSMessageTemplateLayout: membuat gelembung mesej untuk anda memaparkan mesej tersuai anda. Seperti yang ditunjukkan dalam imej di bawah, susun atur templat ini mempunyai banyak sifat dan tempat bagi anda untuk meletakkan kandungan anda sendiri untuk menyesuaikan mesej anda.
Template Message Layout

Adalah penting untuk diperhatikan bahawa ruang di bahagian atas sebelah kiri susun atur ini akan diisi oleh ikon aplikasi iMessage anda. Selain itu, semua sifat ini adalah pilihan, dan tidak memberikan rentetan keterangan sama sekali akan menghilangkan bahagian bawah susun atur.

Masih dalam fail MessagesViewController.swift anda, tambah kaedah berikut untuk kelas MessagesViewController anda:

Dengan kaedah ini, kita mengambil nilai semasa slider dan meletakkannya dalam label bulat. Kami kemudian menjadikan label ini (dan paparan ibu bapa yang mengandunginya) menjadi objek UIImage yang boleh dilampirkan pada mesej kami.

Seterusnya, gantikan butang didPress(button:) anda dengan kod berikut:

Anda akan melihatnya dengan kod ini, pertama kami buat susun atur mesej dan tetapkan sifat image dan caption. Seterusnya, kami buat objek MSMessage kami untuk memasukkan ke dalam perbualan.

Sila ambil perhatian bahawa untuk iMessage memproses pesanan khas anda dengan betul, anda mesti menetapkan layout dan url untuk mesej anda. Url ini bertujuan untuk memaut ke laman web sejenis di mana pengguna macOS juga boleh melihat kandungan iMessage tersuai anda. Namun, untuk contoh mudah ini, kami hanya membuat url asas dari rentetan.

Akhir sekali, kami memasukkan mesej ke dalam perbualan aktif semasa. Memanggil kaedah ini sebenarnya tidak menghantar mesej, walaupun—tetapi meletakkan mesej anda dalam medan kemasukan pengguna supaya mereka boleh terus menghantar sendiri.

Bina dan jalankan aplikasi baharu anda sekali lagi, dan anda akan melihat antara muka yang serupa dengan yang berikut:

Running App Interface

Sebaik sahaja anda menekan butang Create Message, anda juga harus melihat gelembung susun atur mesej yang ditunjukkan dalam medan entri dan tersedia untuk dihantar:

Completed Message

Kesimpulannya

Dalam tutorial ini, saya memperkenalkan anda kepada rangka Mesej Mesej baru dalam iOS 10, yang membolehkan anda membuat pek dan aplikasi pelekat untuk mengintegrasikan dengan iMessage. Kami meliputi kelas asas yang perlu anda ketahui, termasuk MSStickerBrowserViewController, MSConversation, MSMessage, dan MSTemplateMessageLayout.

Kerangka Mesej menyediakan API untuk memberi anda sejumlah besar kawalan ke atas aplikasi iMessage anda. Untuk bacaan selanjutnya, saya akan mengesyorkan menyemak Rujukan Kerangka Mesej Apple.

Seperti biasa, pastikan anda meninggalkan komen dan maklum balas anda di bahagian komen di bawah.

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.