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

Titanium Mobile: Membangun Image Uploader

by
Difficulty:IntermediateLength:LongLanguages:

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

Tutorial ini akan mendemonstrasikan bagaimana membangun kustom progress bar dengan menciptakan image uploader dengan Titanium Mobile. Secara khusus, proyek demo akan memungkinkan Anda untuk memilih gambar dari galeri foto perangkat dan meng-upload ke server jauh untuk penyimpanan. Titanium Mobile kode dan kode sisi server akan dijelaskan. Sekarang, mari kita mulai!


Proyek Tinjauan

Berikut ini adalah preview dari cross-platform aplikasi yang kami akan membangun dalam seri ini:

Android SDK Progress Bar Article
Android SDK Progress Bar Article

Prasyarat...

Tutorial ini mengasumsikan bahwa Anda menjalankan Titanium Studio dan memiliki update terbaru SDK diinstal, iaitu 1.7.5 pada saat tulisan ini. Karena ini adalah tutorial ini difokuskan pada iOS platform, pembaca juga akan memperoleh manfaat dari memiliki semua persyaratan untuk pembangunan di iOS platform.


Langkah 1: Membuat proyek baru

Buka Titanium Studio dan buat proyek baru, pilih target perangkat Android, iPhone, dan iPad saja. Anda dapat memberi nama proyek baru Anda apa pun yang Anda suka, namun, kami akan memanggil proyek kami "ProgressBar". Memberikan proyek Anda baru App ID dan URL, lalu pilih versi SDK Titanium terbaru. Ketika Anda selesai, klik "Next" dan pilih template satu jendela aplikasi sebelum mengklik "Selesai".

Android SDK Progress Bar Article
Android SDK Progress Bar Article

Jika template "Jendela aplikasi tunggal" pilihan ini tidak tersedia dalam versi Titanium, Anda dapat mengimpor kode sumber proyek yang melekat pada tutorial ini sebagai gantinya. Download file-file proyek, dan unzip mereka ke direktori yang Anda ingin bekerja dari. Kemudian ikuti langkah berikut:

  1. Dari Berkas menu, pilih "Impor" untuk membuka jendela munculan impor proyek.
  2. Dari daftar sumber impor, pilih 'Titanium' dan kemudian 'Impor Proyek Titanium yang Ada'.
  3. Di bidang teks direktori, browse ke folder yang berisi file-file proyek Anda download dan membuka ritsleting.
  4. Klik tombol selesai, dan sebuah proyek baru yang disebut "ProgressBar" akan dibuat dan dibuat tersedia dalam proyek Explorer Anda pane.

Jika Anda belum melakukannya, sekarang adalah waktu yang tepat untuk mengunduh file proyek dan unzip semua gambar dalam direktori 'Resources / assets / images' ke direktori 'Resources / assets / images' Anda sendiri di bawah proyek baru yang Anda baru saja dibuat. Secara default, Titanium juga menyertakan dua file ikon di root dari direktori “Resources” Anda yang disebut KS_nav_ui.png dan KS_nav_views.png - kami juga tidak perlu, jadi teruskan dan pindahkan keduanya ke tempat sampah. Anda dapat melewatkan langkah ini jika Anda sudah mengimpor seluruh proyek menggunakan "Impor" fitur.


Langkah 2: Membuat antarmuka

Sebagai template satu jendela aplikasi berikut struktur CommonJS, mungkin sedikit berbeda dengan apa yang Anda terbiasa. Di sini, file app.js yang menarik ApplicationWindow.js file menggunakan 'membutuhkan', yang pada gilirannya instantiates dan mengembalikan default jendela objek untuk aplikasi. ApplicationWindow file instantiates pandangan baru yang disebut FirstView, yang dikodekan dalam FirstView.js file di bawah folder 'Sumber daya/ui'. Objek pemandangan FirstView ini adalah dimana kita akan pengkodean hampir semua tutorial ini. Menghapus kode pra-dihasilkan dalam ekspor. FirstView = fungsi Konstruktor dan menggantinya dengan berikut:

Di atas kami telah menciptakan struktur dasar dari kami progress bar, dan sebuah tombol yang akan memungkinkan pengguna untuk membuka galeri foto pada perangkat mereka dan pilih gambar yang mereka ingin meng-upload. Menjalankan aplikasi dalam simulator sekarang, dan Anda akan melihat satu tombol di layar yang terlihat seperti ini:

Android SDK Progress Bar Article

Langkah 3: Memilih Gambar Dari Galeri

Sekarang bahwa kita memiliki dasar antarmuka setup, mari kita menambahkan pendengar acara dan handler untuk btnChoosePhoto yang akan memungkinkan pengguna kami untuk memilih foto dari galeri mereka. Ketik kode berikut tepat sebelum baris 'self.add(btnChoosePhoto);'.

Di ini "klik" event handler, kami membuka galeri dan memeriksa dalam bagian sukses kode untuk melihat apakah jenis media yang dipilih adalah foto dengan membandingkan objek untuk nilai konstan Ti.Media.MEDIA_TYPE_PHOTO. Jika cek ini berlalu, kita selanjutnya lulus objek event.media ke fungsi baru yang disebut UploadPhotoToServer. Itu adalah di sini bahwa kita akan melakukan file upload dan menunjukkan pengguna bar kemajuan kami meng-upload itu terjadi.


Step 4: Membuat kode Server PHP untuk menerima dan menyimpan kami upload foto

Kita akan membuat kode server kami untuk jarak jauh menyimpan foto kami dan kembali URL-nya menggunakan PHP. PHP adalah bahasa web umum dan terkenal yang didukung oleh banyak layanan hosting web umum. Buat file baru bernama upload.php dan ketik ke file itu kode berikut:

Ini naskah PHP dasar hanya mengambil dalam file POSTED disebut 'media' dan kemudian menyimpannya dengan lima acak, karakter nama file JPG perpanjangan ini, yang dihasilkan oleh fungsi randomFileName(). Jika kita mengatur untuk menyimpan foto berhasil, script akan kemudian echo luar lokasi terpencil URL foto baru kami, jika itu akan echo keluar 'palsu' Jika gagal.

Sekarang Anda harus menyimpan dan mentransfer upload.php file ke server Anda. Selain itu, Anda juga akan perlu untuk membuat folder baru di direktori yang sama seperti yang file upload.php yang disebut 'upload'. Ini adalah folder tempat foto-foto kita akan disimpan. Pastikan folder gambar memiliki izin menulis yang tepat (biasanya CHMOD 770) atau skrip PHP kami tidak akan berfungsi.

Catatan bahwa jika Anda tidak memiliki akses ke PHP server selalu bagi Anda dapat menulis naskah dalam bahasa pilihan Anda (.NET, Ruby, dll) yang melakukan tugas yang sama.


Langkah 5: Meng-upload foto dan menampilkan kemajuan melalui ProgressBar kustom kami

Sebelum kita membuat fungsi kami, ada beberapa hal-hal kecil yang perlu kita lakukan. Yang pertama adalah untuk menciptakan sebuah variabel yang disebut androidUploadProgress di bagian atas ekspor kami. Deklarasi FirstView. Ini akan melacak kemajuan upload perkiraan kami meng-upload file pada perangkat Android. Sayangnya, pada saat menulis Titanium Mobile untuk Android tidak mendukung variabel kemajuan selama acara onsendstream, yang berarti kita tidak bisa menghitung berapa jauh melalui upload kami pada perangkat Android dan itu harus menggunakan perkiraan terbaik pendekatan.

Selain itu, kita perlu membuat sebuah variabel string baru dalam file "i18n/en/strings.xml" yang akan terus lokasi server kami meng-upload naskah. Menambahkan elemen string berikut setelah adanya 'Selamat datang' satu, mengganti URL dengan lokasi script PHP Anda sendiri.

Mari kita membuat fungsi UploadPhotoToServer kami sekarang, dengan mengetikkan kode berikut dalam file FirstView.js Anda. Tempat terbaik untuk fungsi ini adalah di bawah bagian dekat bagian atas yang menyembunyikan statusBar pada perangkat iOS. Ini dimulai dengan if (Ti.Platform.osname == 'iphone'. Fungsi ini akan memeriksa apakah pengguna kami online, dan, jika demikian, menciptakan HTTPClient baru yang akan mengirimkan media data ke server PHP kami mana itu akan disimpan dan URL lengkap gambar upload kembali.

Ini adalah fungsi yang panjang dan membentuk 'daging' aplikasi Titanium kami, jadi mari kita selangkah demi selangkah. Pertama-tama, mari kita buat fungsi itu sendiri, bersama dengan kode awal yang akan menyembunyikan tombol 'Pilih Foto' dan sebaliknya menunjukkan kepada pengguna bilah kemajuan kita:

Anda akan melihat bahwa kita mengakses komponen tampilan kami dengan mengacu pada indeks mereka dalam FirstView anak objek. Kita bisa juga hanya telah menyatakan komponen tampilan kami di bagian atas dari file FirstView.js kami dan kemudian dipakai mereka, bagaimanapun, kita telah memilih untuk melakukan hal-hal dengan cara ini sehingga Anda memahami cara mengakses anak dari pandangan orang tua. Selanjutnya, kita perlu instantiate objek XHR HttpClient dan membuat semua event handlers diperlukan untuk melacak ketika meng-upload HttpClient kami berjalan dan jika gagal atau telah berhasil. Tambahkan kode berikut di bawah ini apa yang Anda ketik sebelumnya. Perhatikan bagaimana kita mengakses properti string "server" ditetapkan sebelumnya dalam tutorial dari file strings.xml kami dengan menggunakan L("server"), dan bagaimana objek parameter posting HttpClient kami mengirimkan disebut "media", yang sama persis dengan "media" FILE objek diharapkan oleh script PHP kami.

Sekarang mari kita edit fungsi event handler onsendstream. Dalam fungsi ini kita akan menghitung progres unggahan file kita saat ini, dan memperluas lebar progress bar. Perhatikan bahwa kita melakukan hal ini sedikit berbeda untuk Android daripada yang kita lakukan untuk iOS, sebagai onsendstream properti "kemajuan" saat ini tidak dilaksanakan untuk Android.

Mencoba menjalankan aplikasi dalam simulator sekarang, dan setelah memilih foto galeri bilah kemajuan akan muncul dan harus meningkatkan ukuran sebagai file upload. Seharusnya terlihat seperti berikut:

Android SDK Progress Bar Article

Langkah 6: Menyelesaikan

Akhirnya, kita perlu untuk memperluas fungsi pengendali event membongkar. Di dalamnya, kita perlu memastikan bahwa progress bar menunjukkan 100% (terutama untuk Android), dan kita perlu untuk menentukan apakah file tersebut berhasil diupload ke server atau tidak dengan memeriksa apakah properti responseText diatur ke "false". Jika tidak, kita kemudian berasumsi bahwa segala sesuatu bekerja ok dan menyajikan pengguna kami dengan sebuah dialog konfirmasi alert dimana mereka dapat memilih untuk membuka mereka baru saja upload gambar di web browser. Kami kemudian akan me-reset kami tata letak dan semua properti obyek kami ketika siap untuk meng-upload foto berikutnya.

That's it! Jalankan aplikasi sekarang simulator (Android atau iPhone) atau pada perangkat Anda. Anda masih harus melihat file upload kemajuan meter bernyawa dari 0-100%, dan ketika selesai peringatan akan muncul dialog seperti di bawah ini, memberikan Anda pilihan untuk melihat baru upload foto dalam browser.

Android SDK Progress Bar Article
Android SDK Progress Bar Article
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.