Tutorial

You are currently browsing articles tagged Tutorial.

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.

Tags: , ,

Oke hari ini aku akan memberikan cara membuat Sticker untuk aplikasi chat LINE, LINE kini memberikan peluang kepada desainer atau orang — orang yang suka menggambar untuk mengupload gambar — gambar stikernya ke LINE.


Karena potensi atau peluangnya banyak untuk menjual stiker di LINE dan aku sendiri pernah berpengalaman membuat Stiker LINE. Aku akan memberikan cara dan tipsnya yang bermanfaat.

Ide dan Konsep.

Setiap karya pasti selalu dimulai dengan mencari konsepnya, carilah ide yang menurut teman itu sangat beda dan kreatif, kalau bisa langsung saja lakukan corat coret di kertas supaya lebih yakin lagi dari konsep itu. Oh iya, dari prosedur LINE, kita harus membuat 40 stiker, tidak lebih dan tidak kurang. Jangan asal mendapatkan ide juga ya, kita harus ikuti peraturan LINE juga untuk tata krama dan tata cara, jangan sampai stikernya itu menghina orang lain atau melecehkan, atau menjelekkan siapa pun deh, untuk lebih lanjutnya ada di Guidlines LINE.

Saatnya menggambar

Setelah mendapatkan ide yang cemerlang, minimal teman sudah punya sepuluh gambar untuk setiap stiker, karena untuk gambar — gambar berikutnya, teman bisa tinggal memodifikasi saja bentuk atau ekspresi wajahnya agar menghemat waktu. Jika tidak, teman bisa juga membuatnya dari nol, mungkin teman ingin gambarnya beda — beda banget, supaya lebih keren. Teman — teman sebenarnya bisa langsung gambar di komputer, jika teman sudah punya pengalaman banyak, tapi rekomendasi aku, gambar saja dari kertas dulu, ini juga menghemat waktu agar tidak banyak mikir setelah di depan komputer. Untuk menggambar di komputer, kamu bisa menggambar di software apa saja, seperti Adobe Illustrator, Corel Draw atau yang gratisan ada juga GIMP, kalau sudah punya manfaatin software dari ketiga itu dengan fitur — fitur terbaik yang diberikannya, gambar anda pasti hasilnya bagus.

Buka dan ikuti prosedur LINE

Setelah gambar teman — teman selesai dengan 40 stiker, saatnya kita mengikuti peraturan dari LINE sebelum menguploadnya, fungsinya untuk menjaga kualitas gambar dan kualitas LINE-nya juga. pertama kita buka LINE Creators Market (http://creator.line.me), website ini khusus buat para pembuat stiker, setelah itu buka tab Guidelines yang ada di menu utama.

‘Main Image’
‘Sticker Images’

Di halaman Guidelines, kita lihat berapa ukuran yang diminta oleh LINE, — pertama, untuk tampilan ‘Main Image’ yang ada di Line Store, kita harus menggunakan ukuran dengan W (Width) 240 * H (Height) 240. Untuk pemberian nama gambar gunakan ‘main.png’.

Kedua, ukuran ‘Sticker Image’ kita harus menggunakan ukuran dengan maksimal W (Width) 370 * (Height) 320, untuk yang ini kita tidak boleh terlalu minimal juga ukurannya. Untuk pemberian nama gunakan angka dua digit seperti ini ‘01.png 02.png 35.png’ sampai ke angka 40. Ada rekomendasi dari LINE, untuk ‘Sticker Image’, kamu harus memberikan celah atau space antara gambarnya dengan pinggiran ukuran, seperti gambar di bawah ini.

‘Chat Room Tab Image’

Ketiga, ukuran ‘Chat Room tab Image’ kita harus menggunakan ukuran dengan W (Width) 96 * H (Height) 74. Untuk pemberian nama gunakan ‘tab.png’.

Maksimal ukuran file adalah 1 MB, untuk tipenya PNG.

Daftar LINE Creators dan Mengupload

Oke, kita sudah menggambar, terus menyimpan gambar finalnya dengan tipe gambar yang direkomendasikan, sekarang kita harus buat Akun LINE Creator dulu sebagai profil anda, profil ini tidak hanya teman mengupload stiker saja, kita nanti juga bisa melihat statistik penghasilan dan berapa banyak yang download stikernya. Langsung saja, kita buka halaman My Page, oh iya kita tidak perlu mendaftar lagi, kita langsung saja sign in dengan akun chat LINE kita, langsung saja masukkan, usahakan akun anda sudah berintegrasi dengan e-mail, jika tidak teman harus mengubah settingnya yang ada di aplikasi LINE.

Ada tombol hijau besar yang berisi tulisan ‘New Submission’, tekan saja langsung, setelah itu anda akan dibawa ke halaman berisi formulir untuk mendeskripsikan Stiker kita, isi lengkap yang diwajibkan, jika ada yang diminta options (tidak wajib) anda bisa membiarkannya kosong atau isi, setelah lengkap data yang kita masukkan, tekan tombol hijau dengan tulisan ‘Save’. Setelah menyimpan, anda akan melihat informasi — informasi stiker anda, terus, saatnya mengupload gambar dengan menekan tab tulisan ‘Stiker Images’. LINE punya dua cara untuk mengupload gambar, pertama kita mengupload gambarnya secara manual yang berisi angka dan tulisan seperti tampilan kalendar, kedua kita menggabungkan stiker — stikernya dengan file ZIP, jika teman tidak tahu tidak tahu file ZIP, kita uploadnya secara manual saja, walaupun banyak memakan waktu.

Check dan submit

Setelah memasukkan data dan mengupload, cek — cek dulu, dari prosedurnya, terus data — datanya, ukuran filenya, setelah di cek dan memenuhi syarat, saatnya menekan tombol ‘submit’ yang berada di atas sebelah kanan dengan berwarna hijau, akhirnya selesai juga.

Setelah submit stiker, stiker teman tidak langsung ada di LINE Store-nya, kita harus menunggu untuk di review stiker kita, jika stiker kita tidak memenuhi prosedur atau syarat dari LINE, stiker kita bakal tidak diterima dan waktu untuk menunggu ini tidak sebentar, jika trafiknya lagi ramai mungkin bisa menunggu satu bulan lebih.

Catatan penting, untuk penerimaan uang hasil penjualan. LINE menggunakan pembayaran Paypal, jika belum punya, teman — teman harus punya dulu, kalau sudah punya teman — teman tinggal isi email paypalnya di halaman settingnya.

Aku punya beberapa di LINE, ada satu mengenai momen di bulan ramadhan dan profesi pilot dari saudaraku. Ini sudah cukup banyak menghasilkan lebih dari satu juta. Yang paling penting ekspresif dan semakin lucu akan makin menarik. Kualitas dan ide kreatif harus diperhatikan ya.

Semoga bermanfaat.. 😀

Tags: , ,

Ableton Live, ini adalah software membuat musik favorit aku.

Untuk ini, aku ingin memberikan bagaimana merekam suara vokal di Ableton Live, walaupun kamu tidak memiliki alat yang professional, sesuaikan saja dengan headset yang kamu miliki. Menurut aku, Ableton bisa menyesuaikan apa yang kamu punya.

Aku ingin menyampaikan sebuah pesan untuk melanjutkannya. Jangan paksakan, jika kamu tidak menggunakan software Ableton. Karena ini hanya berlaku untuk pengguna yang baru membeli Ableton dan menguasai fitur — fiturnya. Jika kamu ingin menjadi produktif, berusalah untuk menggunakan lisensi yang asli. Itu akan mendorong motivasi kamu, untuk mendapatkannya.

Caranya gampang. Dari arrangement view, tempat untuk bereksperimen musik. Di situ terdapat audio track di mana ada sebuah tombol kecil dengan bentuk lingkaran paling bawah.

Tombol tersebut tidak langsung merekamnya, namun mengaktifkannya. Setelah menekan tombol tersebut, tombol itu berwarna merah dan tombol barisan Audio Track tersebut berubah menjadi lingkarannya artinya siap untuk merekam.

Pastikan kita memeriksanya terlebih dahulu mic-nya, apakah berfungsi dengan baik dengan melihat grafik bar di samping tombol tersebut, namun itu tidak mengeluarkan suara selama pemeriksaan, tidak ada alat output khusus di dalam tersebut.

Saatnya perekaman, tinggal menekan tombol lingkaran di antara barisan audio track, rekaman sudah mulai. Selama kita rekaman nanti, bakal ada grafik besar di bawahnya, untuk hasil rekamannya dalam bentuk visual. Selesai sudah.

Jika ada masalah terhadap rekaman, seperti mic headset tidak berfungsi. Coba periksa preferences atau settings dari Ableton, setelah itu bagian Audio. Di situ, komputer kamu memiliki sumber Audio Input lebih dari satu. Dan kita harus mencobanya, mana yang akan berfungsi dengan Ableton. Oh iya, sebenarnya mic yang terdapat di komputer, juga berfungsi.

Bagaimana masalah dengan suara jernih untuk vokal. Itu adalah hal yang relatif. Jika ingin mendapatkan suara tersebut, lihat sekitar kita, apakah ruangan sekitar sudah kelihatan sepi. Sebenarnya ada teknik khusus untuk memberikan suara jernih, namun itu tidak akan sempurna. Suara yang jernih, itu berasal dari sumbernya.

Rekaman di Ableton terbilang sangat instan, namun kaya fitur yang bisa kita manfaatkan. Dari memanipulasi suaranya, menjernihkannya, mencampuri dengan suara lainnya. Itu bisa kita gunakan dengan efek — efek dari Ableton.

Tags: , ,