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

Membuat Modul Mobile Titanium Menggunakan CommonJS

by
Difficulty:BeginnerLength:LongLanguages:

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

Dalam artikel ini kita akan membahas cara membuat modul seluler Anda sendiri untuk Titanium Appcelerator dengan hanya menggunakan JavaScript dan sedikit pengetahuan CommonJS. Modul yang akan kita buat akan menjadi satu untuk Picasa, layanan gambar Google, dan akan memungkinkan pengguna kita untuk melihat album dan foto dari Picasa tanpa mengetahui detail apa pun tentang Picasa API itu sendiri. Setelah kita menguji modul, kita juga akan menjalankan pengemasannya untuk iOS dan Android!


Mengapa Membuat Modul Menggunakan CommonJS?

Mengapa paket menjadi modul sama sekali? Kode yang kita buat adalah JavaScript. Kita hanya dapat menyalin dan menempelkan file kode kita ke dalam proyek Titanium Appcelerator mana pun untuk menggunakannya. Ada sejumlah alasan yang sangat bagus untuk melakukan ini sebagai modul, namun.

  • Modul Anda dapat dibagikan dan diperlakukan sebagai komponen "kotak hitam", sama seperti modul asli lainnya.
  • Modul Anda dikompilasi, yang berarti Anda dapat melindungi kode Anda jika perlu.
  • Modul mudah dirawat dan dikembangkan di seluruh proyek Anda, memungkinkan Anda untuk lebih mudah menggunakan kembali kode Anda.

Sekarang kita memiliki "mengapa" keluar dari jalan, mari kita pindah ke "bagaimana" dan membuat modul kita!


Menyiapkan Proyek Modul Anda

Cara termudah untuk membuat proyek modul seluler baru adalah melalui Titanium Studio, jadi itulah yang akan kami lakukan. Buka Titanium Studio dan dari menu File, pilih New > Mobile Module Project. Anda akan disajikan dengan layar seperti di bawah ini. Saya memanggil modul "Picasa" dan memberikannya ID modul "com.boydlee.picasa". Catat apa ID modul Anda jika Anda memutuskan untuk menggunakan pengidentifikasi yang berbeda. Ini akan sangat penting ketika kita membuat file JavaScript kita nanti!

Membuat Proyek Modul Seluler baru di Titanium Studio

Anda mungkin akan mencatat pada tahap ini bahwa Anda hanya dapat membuat modul Anda untuk iOS ATAU Android. Ini karena modul dikompilasi secara terpisah untuk setiap platform. Saya akan memilih dan menggunakan iOS untuk modul kita sekarang. Ini lebih cepat untuk membangun dan menguji daripada Android. Kita akan membangun modul Android kita menggunakan kode yang sama di akhir tutorial. Tekan tombol Selesai dan Titanium Studio harus membuat proyek modul Anda dan menampilkannya di panel App Explorer. Mari kita mulai coding!


Membuat File Entri JavaScript Modul Anda

Hal pertama yang perlu kita lakukan adalah membuat file entri JavaScript untuk modul kami, yang akan masuk ke direktori / assets. Ini harus diberi nama dengan cara tertentu, yang perlu: your.module.id.js. Seperti yang saya beri nama modul saya com.boydlee.picasa, file JavaScript yang perlu saya buat harus disebut com.boydlee.picasa.js. Panel App Explorer Anda seharusnya akan terlihat seperti foto.

App Explorer Pane di Titanium Studio

Titanium secara otomatis mencari file entry point ketika memuat modul Anda, dan file entry point itu harus memiliki nama yang sama dengan pengidentifikasi modul Anda. Mari kita mulai membangun modul CommonJS kami, dimulai dengan kode shell, yang akan membuat fungsi Picasa kami, tambahkan objek "Access Levels" untuk kenyamanan menggunakan prototipe, dan kemudian ekspor fungsi melalui CommonJS.


Membangun Fungsionalitas Picasa

Sekarang setelah shell modul dasar kami selesai, saatnya untuk mengisinya dengan beberapa fungsi menggunakan prototipe. Kita akan menjaga modul ini cukup sederhana, sehingga hanya akan memiliki dua tujuan utama: mencari dan mengembalikan daftar album pengguna, dan mengembalikan daftar semua foto untuk album. Pertama, mari buat beberapa getter publik dan setter sehingga kita dapat mengatur tingkat nama pengguna dan akses.

Kita juga akan membutuhkan fungsi yang dapat melakukan permintaan HTTP. Daripada membuat beberapa permintaan untuk album dan panggilan foto ke Picasa, kita dapat membuat satu fungsi permintaan yang dapat digunakan kembali. Ayo lakukan itu sekarang.

Mari kita memperluas fungsi Picasa kita dengan beberapa fungsi yang akan mengambil nama pengguna dan tingkat akses dan mengembalikan kembali URL yang valid untuk layanan foto Picasa. Kita akan menggunakan URL ini nanti ketika kita membuat HttpRequests kita.


Mengakses Data Album melalui Picasa

Sekarang setelah struktur dasar dari modul kita ada di sana, kita  dapat mulai membangun terhadap API Picasa dan menambahkan fungsionalitas dan kegunaan nyata ke modul kita. Hal pertama yang kita lakukan adalah membuat fungsi yang memungkinkan pengguna kita mengambil kembali daftar album Picasa mereka. Informasi JSON yang dihasilkan Picasa untuk panggilan ini sangat rumit, jadi kita juga akan menyederhanakannya menjadi objek yang rapi dan bagus yang dapat Anda pahami dengan mudah pada pandangan pertama. Lanjutkan dan buat fungsi berikut di modul CommonJS Anda.


Mengakses Data Foto melalui Tautan Album

Sekarang kita dapat mengakses data album, kita perlu menggunakan endpoint foto Picasa untuk mengambil daftar foto untuk album tertentu. Ini bisa dilakukan dengan dua cara. Anda dapat menggunakan ID album dan membangun titik akhir URL Foto, atau Anda dapat menggunakan URL yang dikembalikan dalam Permintaan HTTP album. Kita akan membuat kedua fungsi hanya demi kegunaan, dan fungsi ketiga disebut createPhotosArray yang akan mengambil objek respons JSON dan mengembalikan kembali susunan gambar yang disederhanakan. Dalam modul CommonJS Anda, buat fungsi-fungsi berikut.

Itu saja sejauh modul CommonJS kita pergi! Kita sekarang dapat mengatur nama pengguna dan tingkat akses kita melalui fungsi properti publik, mengambil kembali daftar album dan menggunakan informasi itu untuk kemudian mengambil kembali daftar foto yang sesuai untuk setiap Album ID / Album URL. Ke bagian selanjutnya, di mana kita akan membahas tentang pengemasan modul kami untuk digunakan dalam aplikasi Titanium Mobile yang sesungguhnya!


Pengemasan dan Pengujian Modul Baru Anda

Mengemas modul Anda tidak bisa lebih sederhana saat menggunakan Titanium Studio. Pertama, klik ikon "Paket" di dalam panel App Explorer. Ikon Paket tampak seperti kotak yang tertutup. Kemudian, klik pada opsi submenu "Paket - Modul iOS". Jendela popup baru akan muncul yang terlihat seperti di bawah ini, dengan tiga opsi pengemasan yang berbeda.

  • Titanium SDK - Ini akan mengemas modul Anda dan menginstalnya langsung ke direktori "Modul" Titanium SDK Anda. Pada Mac, ini terletak dengan folder ~/Application Support / Titanium.
  • Proyek Seluler - Ini akan mengemas modul Anda dan menginstalnya langsung ke aplikasi yang saat ini ada di dalam panel Project Explorer Anda. Jika Anda ingin menguji modul yang sedang Anda kerjakan, ini umumnya cara termudah.
  • Lokasi - Ini akan mengemas modul Anda dan menyimpan file ZIP yang dihasilkan ke folder yang Anda tentukan. Ini adalah metode terbaik jika Anda ingin berbagi modul atau berpotensi mengunggahnya ke Appcelerator Marketplace.
Opsi Kemasan Modul Mobile Titanium

Kita akan melanjutkan dan memilih opsi pertama, membuat paket, dan menyimpannya di folder Titanium SDK kita. Pilih itu dan tekan "Selesai". Sekarang duduk dan tunggu sebentar. Titanium Studio akan membangun modul baru Anda dan ketika selesai Anda akan melihat pesan pemberitahuan kuning muncul di kanan bawah layar. Keberhasilan!

Paket Modul Sukses!

Sekarang setelah modul kita dikemas, kita mungkin harus mengujinya, bukan? Mari buat proyek seluler baru. Pilih Titanium Classic dari menu template, dan kemudian Default Project. Kita akan membuat contoh proyek kami dengan kode Titanium "klasik" yang sangat sederhana. Ini karena setelah berfungsi, kita ingin menyalin kode uji kita ke dalam file example.js dari modul kita agar orang lain dapat digunakan sebagai referensi. Saya menelepon aplikasi pengujian saya Picasa-TestApp dengan ID aplikasi com.boydlee.picasatestapp, tetapi Anda dapat menghubungi milik Anda sesukamu.

Membuat Proyek "Klasik" Ponsel Titanium Baru

Template dasar ini terdiri dari TabGroup dan dua jendela, semua didefinisikan dalam file app.js Anda. Kita akan menyederhanakan kode sehingga kita hanya memiliki satu tab dan satu jendela. Kita akan menambahkan TableView yang akan kami isi dengan data album kita, tetapi sebelum kita melakukannya, kita perlu menambahkan modul baru kita ke proyek uji. Buka file tiapp.xml, klik tombol "+" di samping daftar modul aplikasi, lalu pilih modul Picasa yang kita kemas dalam bagian sebelumnya.

Menambahkan Modul Picasa ke Proyek Uji kita

Sekarang mari kita tambahkan kode tes ke app.js, yang akan mengembalikan daftar album ke pengguna kita dan menampilkannya di TableView. Kita juga akan melakukan permintaan dan membuat objek Picasa baru melalui modul kami.

Perhatikan bahwa saya telah menetapkan akses ke publik dan nama pengguna untuk boydlee, yang akan mengakses foto di akun Picasa saya. Setelah selesai, cobalah meluncurkan aplikasi Anda di simulator.

Window default kita dengan daftar Album Picasa yang ditampilkan dalam TableView

Akhirnya, kita perlu menambahkan fungsi yang disebut openAlbumPhotosView, yang akan menerima judul album dan URL, membuka jendela baru di tab saat ini, dan kemudian menarik kembali dan menampilkan semua foto untuk album itu dalam ScrollableView.

Jalankan kode Anda di simulator untuk terakhir kalinya. Anda sekarang harus bisa mengambil kembali daftar album, pilih satu dari TableView, dan kemudian melihat slide show digulir dari foto untuk album itu. Rapi!

ScrollableView yang menampilkan semua foto dari Album Picasa pilihan kita.

Pengemasan Modul Picasa

Semua yang tersisa untuk dilakukan sekarang adalah paket modul Picasa untuk iOS dan Android. Pertama, salin semua kode dari file test app.js Anda dan tempelkan ke proyek modul /example/app.js. Kita ingin kode ini sebagai contoh untuk orang lain yang ingin menggunakan modul kita. Setelah selesai, tekan saja tombol Paket dan Anda dapat memilih untuk mengekspor modul Anda melalui Lokasi, seperti yang kami jelaskan di bagian Pengemasan & Pengujian Modul Baru Anda. Untuk Android, prosesnya sama, tetapi kita harus membuat proyek modul terpisah untuk itu dengan membuat proyek Modul Seluler baru untuk Android kali ini. Copy dan paste file example/app.js dan com.boydlee.picasa.js yang telah kita buat ke lokasi yang tepat dalam proyek modul mobile Android Anda. Anda kemudian dapat membangun dan mendistribusikan untuk Android seperti yang kita lakukan di iOS!

Tip: Anda mungkin perlu menginstal JDT sebelum Anda dapat membuat modul untuk Android. Panduan langkah demi langkah yang mudah tersedia di appcelerator.com


Kesimpulan

Semoga Anda menemukan tutorial ini bermanfaat. Lain kali Anda mempertimbangkan untuk membangun fungsi Titanium yang ingin Anda bagikan, atau gunakan di antara banyak proyek, Anda mungkin akan mempertimbangkan untuk membungkusnya menjadi modul CommonJS!

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.