Search and Hit Enter

Membuat Aplikasi Chat untuk iOS

Pengembang sekarang tinggal menggunakan blender untuk menjadikannya secara instan



Ini salah satu bagian eksperimen aku dalam membuat aplikasi iOS. Pengembangan aplikasi kategori ini memiliki langkah berbeda dan kita sebenarnya harus mengerti bagaimana kedudukan layer dan proses. Termasuk bagian User Interface. Halaman aplikasi obrolan diberikan konfigurasi yang unik dan pintar menanggap data, karena setiap konten memiliki ukuran variasi berbeda. Itu salah satu tantangannya.

Kita akan pelajari konsepnya terlebih dahulu dan memilah setiap komponen, apa bahan yang akan kita pakai.

Pertama, kita menggunakan UICollectionView sebagai komponen untuk halaman utama pengguna membaca obrolan mereka, UITableView juga bisa pilihannya, seperti aplikasi Slack. Setelah itu, ditambah dengan pasangannya yaitu UICollectionViewCell sebagai komponen yang akan menampilkan gelembung obrolan beserta isi teksnya. Collection View tersebut akan kita tambahkan di UIViewController.


Kedua, salah satu komponen penting untuk menuliskan teks dan beberapa tombol yang berkaitan. Kita akan menambahkan UIInputToolbar di atas kedudukan CollectionView. Input Toolbar akan diisi beberapa tool yang akan tergantung dengan fungsi dan kondisi para pengembang menerapkannya. Dalam hal wajibnya, ada dua komponen yang akan kita pasang. Pertama, UITextView yang akan dikonfigurasikan sebagai tempat menulis obrolan, kedua, UIButton dengan fungsi sebagai aksi untuk mengirim obrolan tersebut. Jika ingin menambahkan fitur untuk mengambil gambar atau video, kita bisa menambah UIButton berjudul ‘Attachment’ atau berikan sebuah logo.


Demikian adalah dasar dari User Interface untuk tampilan obrolan singkat. Sekarang, kita harus fokus terhadap Collection View. Ini titik awal aku melakukan banyak kesalahan dan mengulang terus — menerus tanpa membuahkan hasil, apalagi aku menggunakan bahasa pemograman Swift, dari Apple. Akan tetapi, itu tidak selamanya terjadi berkat Open Source. Aku coba mencari sebuah referensi atau kode yang bisa menjadi bahan inspirasi nanti. Faktanya, aku menemukan solusi lebih dari yang aku inginkan. Aku langsung berpikir, ini seperti memasukkan semua bumbu masakan dalam blender dan memiliki hasil sempurna, tanpa prihatin terhadap waktu.


Tahan dulu sebentar, aku ingin menyampaikan sesuatu bagaimana internet sekarang menjadi bahan utama berbisnis dan perang bersama waktu. Mungkin, orang berpikir jika kita ingin membuat aplikasi chatting, setelah banyak aplikasi lainnya telah menguasai pasar mereka akan merasa tertinggal jika kita tidak memiliki daya tarik inovasi ataupun tidak berkorban banyak waktu. Dasarnya, semua aplikasi chatting itu sama, memiliki obrolan antara sisi kiri dan kanan, desain yang tidak asing bagi kita dan cara kerja mereka. Hanya saja, daya tarik mereka. Yahoo Messenger telah meredup, mereka tidak menjaga pasar dan memperhatikannya. Walaupun, secara rumusan, mereka memiliki fitur lengkap dan sekarang mereka tidak fokus untuk menjalankannya.

Kamu tidak akan menyadari betapa banyaknya aplikasi chatting sekarang, dari yang masih mengambil langkah pertama sampai mesin uang mereka sudah jalan. Aku yakin, mereka memiliki visi berbeda, tetapi penyampaian yang sama.

Jika kamu ingin membangun aplikasi obrolan, jangan membandingkan apa yang besar sudah punya dan pikirkan bagaimana manyamai kualitas mereka. Itu bisa menunda pengembangan ini dan akan menimbulkan banyak penundaan serta rasa takut gagal. Kita harus menikmatinya terlebih dahulu. Artikel ini bertujuan untuk memudahkan pengembang tidak terbawa tekanan dalam pengembangannya. Karena aku akan memberikan cara yang instan agar tidak mengulur waktu dalam menjalankan bisnis internet kamu.


Kita balik ke prosesnya lagi. Kita sudah mengerti apa itu AsyncDisplayKit, ini memang framework penyempurnaan dari UIKit dan sudah tahu bagaimana Facebook melakukan inovasi aplikasi mereka. Kedua, paket open source ini yang akan kita pakai sebagai bahan. JSQMessagesViewController, ini memang diperuntukkan untuk halaman chatting.

Persiapan Proyek Aplikasi Chatting

Aku membuat proyek terlebih dahulu di Xcode dengan nama ‘ChatMen’, agar kelihatan tidak asing. Setelah itu, aku pasang Cocoapods untuk memasukkan JSQMessagesViewController dalam kategori Frameworks nantinya atau ambil open source kode mereka dari Github dan pindahkan ke dalam proyek folder kamu.

xcodeproj 'ChatMen.xcodeproj'
platform: ios, '9.0'
use_frameworks!
pod 'JSQMessagesViewController'

Setelah melakukan konfigurasi ini. Aku akan menggunakan bahasa Swift sebagai alat utamanya. Bahasa ini harus dilatih, Apple telah memberikan banyak keringanan dan performa sempurna untuk Swift. Walaupun JSQMessagesViewController menggunakan bahasa Objective-C, kita masih bisa menghubungkannya dengan ‘use_framework’ dari Cocoapods.

MainChatViewController dan Struktur Data JSQMessages


Saatnya membuat Swift class baru bernama ‘MainChatViewController’ dengan subclass JSQMessageViewController dan jangan lupa untuk memberitahu Storyboard, bahwa View Controller tersebut diberi class ‘MainChatViewController’. Coba menjalankannya langsung di Simulator, kita akan melihat Input Toolbar dan Collection View yang telah tersedia.

Sisanya sekarang bagian tugas kita adalah mengembangkan struktur data untuk obrolannya.

Aku akan menerapkan secara sederhana. Namun sebelumnya, kita harus memperhatikan salah satu class dari JSQMessagesViewController, JSQMessages. Class ini adalah kunci untuk membuat struktur data setiap obrolannya. JSQMessages akan mendeteksi identitas pengirim dan memilah pesan mana yang masuk dan keluar, selain itu, class ini juga mengatur file media (gambar dan video).

BaseChatData Class

Sekarang saatnya membuat class bernama ‘BaseChatData’ dengan subclass NSObject ,langkah selanjutnya aku menuliskan property tipe Array ‘messagesData untuk menampung setiap ‘JSQMessages’. BaseChatData hanya bakal menjadi kendaraan untuk mengantarkan data setiap pesan di ‘MainChatViewController’ nantinya.

Awal Pengembangan MainChatViewController

Pertama kita membuat properti demoData dengan class BaseChatData, ini hanya sekedar contoh untuk sebagai masukan data.

Kemudian, Berikan reaksi setelah pengguna menyentuh tombol ‘Send’, dengan menuliskan kembali fungsi ‘didPressSendButton’. Di dalam fungsi tersebut, berikan properti ‘message’ dengan memasang objek JSQMessage dan sesuaikan pasangan dari fungsi respon tombol kirim. Sesudah itu, panggil properti array dari demoData dan tambahkan elemen ‘message’ tersebut ke dalamnya. Dan hal terakhir untuk bagian ini, panggil ‘finishSendingAnimated()’ untuk mengulang kembali Input Toolbar dari awal. Kita bisa mencobanya sekarang, dan perkembangannya akan kelihatan di Input Toolbar tersebut.

didPressSendButton

Sekarang kita menuju langkah utama. Kita akan memanggil beberapa fungsi dari ‘JSQMessages Collection View Data Source’. Panggil dan tulis kembali ‘collectionView — messageDataForItemAtIndexPath’ dan ‘collectionView — messageBubbleImageDataForItemAtIndeXPath’.

Untuk fungsi messageData, kita akan menampilkan datanya sesuai apa yang diperhitungkan dari indexPath.row

Fungsi messageBubble akan membedakan data pesan antara keluar dan masuk. Itu ditandai dengan memberikan warna background yang berbeda. Untuk pesan keluar, aku berikan warna sesuai dengan navigasi bar dan untuk pesan masuk, aku berikan warna hitam atau abu — abu, agar kelihatan natural. Untuk memberikan perintah tersebut, aku membuat fungsi konfigurasi warna di BaseChatData class.


Setelah langkah ini, kita akan memanggil kembali sebagian fungsi dari UICollectionView Data Source. Tulis kembali ‘collectionView — numberOfItemsInSection’ dan ‘collectionView — cellForItemAtIndexPath’. Di sini kita tinggal menyesuaikan saja, untuk fungsi ‘numberOfItems’ kita memasukkan berapa elemen Array dari messageData dan untuk fungsi ‘cellForItem’, kita tinggal memanggil JSQMessagesCollectionViewCell kembali dari JSQMessagesViewController class dan melakukan sedikit modifikasi.


Hasil yang didapatkan sudah memuaskan untuk percobaan saja. Akan tetapi akan lebih kelihatan sempurna jika kita menambah beberapa pesan secara manual untuk keluar dan masuk pesan, akan lebih hidup suasanya. Untuk itu aku menambahkan beberapa elemen dari BaseChatData seperti gambar di bawah.


Kamu bisa dapatkan proyek contohnya di link sini.

Ini bisa menjadi gambaran sementara bagaimana membuat aplikasi chatting untuk iOS secara instan. Namun, bisa dikembangkan lebih dalam lagi, jika kita mempelajari apa fitur keseluruhan dari JSQMessagesViewController dan bagaimana menghubungkan dengan bagian API-nya.

No Comments

Tinggalkan Balasan

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d blogger menyukai ini: