Archive

Archive for March, 2010

iPhone: JSON over HTTP a.k.a web service

March 23, 2010 1 comment

OK, lanjut lagi tentang iPhone2an ini :). Sekarang kita akan membahas bagaimana membaca file JSON (JavaScript Object Notation) melalui iPhone, JSON belakangan banyak digunakan selain XML sebagai format pertukaran data, JSON dikenal dengan format nya yang simple dan lightweight.

OK, langsung saja, misalkan kita mempunyai aplikasi dengan bagan sebagai berikut:

Sebagai contoh, dalam database (saya pake MySQL) kita memiliki sebuah table dengan nama person, yang mempunyai field id, nama, hobby, alamat. Nah, nantinya data ini akan di-fetch melalui PHP yang akan menampilkan data tersebut dalam format JSON, dan akhirnya kita membaca JSON melalui iPhone dengan mengakses PHP script tersebut, tentunya script PHP ini harus bisa diakses lewat internet.

Database
Pertama-tama kita akan men-setup database. Silahkan buat database dengan format seperti di atas, atau Anda dapat meng-import dari sql file yang ada dalam archive di bawah.

PHP
Sekarang kita akan mengambil data yang ada di database dengan melakukan queryย  database seperti biasa.
Kurang lebih koding nya seperti ini:

Hehe, koding nya koq gambar yah :D, (belum nemu php syntax highlighting buat WordPress nih). Tapi, tenang-tenang, PHP file nya juga bisa diambil dalam archive di bawah.

Nah, kalo kita jalankan, maka script kira2 akan mengeluarkan output seperti ini:

Ini adalah data yang kita ambil dari database dan ditampilkan dalam format array biasa. Selanjutnya kita akan mengubah bentuk data tersebut dari array menjadi format JSON dengan fungsi json_encode. Anda tinggal meng-uncomment bagian json_encode (baris ke 24), dan comment baris ke 19-21.

Hasil dari script tersebut kurang lebih seperti ini:
[{"id":"1","nama":"Azhari Harahap","hobby":"Tidur","alamat":"Bogor"},{"id":"2","nama":"Olivia Jansen Lubis","hobby":"Shopping","alamat":"Jakarta"}]

Bisa juga dilihat di halaman berikut ini: http://back2arie.capungriders.com/iphone/json.php

iPhone
Nah, sekarang kita tinggal mengambil data JSON yang sudah disediakan oleh PHP script/web services yang telah dibuat di atas.
Untuk memparsing JSON ini, kita membutuhkan library JSON json-framework. Silahkan download terlebih dahulu.
Sebagai catatan, kita tidak akan menampilkan data JSON tersebut di layar/view, tapi hanya akan di tampilkan di console window.

  1. Jalankan Xcode, buat New Project, View-based Application, beri nama JSON.
  2. Import library json-framework yang telah di download (hanya folder JSON nya saja), Anda bisa langsung men drag ‘n drop folder dari Finder ke bagian Classes pada Xcode, atau dengan meng-klik kanan pada bagian Classes, lalu Add –> Existing Files...Jangan lupa centang opsi Copy items into destination group’s folder.
    .
  3. Selanjutnya buka JSONViewController.h dan tambahkan NSMutableData *responseData di dalam bagian @interface, responseData nantinya akan dipakai untuk menyimpan raw data (data JSON yg belum di parsing) dari script PHP melalui URL connection.
    .

    .
  4. Selanjutnya buka JSONViewController.m, pada bagian atas, import header JSON library yang terletak di JSON/JSON.h

    .
    Lalu pada fungsi viewDidLoad ubah menjadi seperti berikut

    .
    Disini terlihat kita melakukan koneksi melalui URL ke script PHP yang telah kita buat sebelumnya. Selanjutnya berturut-turut tambahkan fungsi2 berikut:


    .
    didReceiveResponse mengindikasikan koneksi telah mendapat response dari URL connection yg dibentuk, dalam hal ini kita men-set panjang dari responseData menjadi 0.
    didReceiveData menandakan koneksi telah mendapatkan sejumlah dari URL connection, pada fungsi ini kita meng-append responseData dengan data yang diterima.
    didFailWithError menandakan kita gagal melakukan koneksi.

    Terakhir, tambahkan fungsi connectionDidFinishLoading, yang merupakan callbacks jika koneksi berhasil dan selesai di load.


    .
    Dalam hal ini, kita melakukan looping untuk setiap item dalam JSON (dalam contoh terdapat 2 item) dengan bantuan enumerator, lalu menampilkan nya ke debugger console.

OK, that’s all. Kalau ada yang salah2 mohon koreksi nya yah, soalnya saya masih newbie nih ๐Ÿ˜€

Eits, kaya nya kalo ga ada screenshot kurang mantep :p

Oiya, hampir kelupaan, source code nya (sql, php, dan iphone) bisa di download disini.

Advertisements
Categories: Others Tags:

Menghapus app dari iPhone simulator

March 22, 2010 5 comments

Belakangan, iPhone simulator gw dipenuhi dengan aplikasi-aplikasi yang cukup banyak sehingga tampilan layar menjadi penuh sesak (lebay). So, ini adalah cara untuk menghapus aplikasi dari iPhone simulator, katanya sih sama dengan di iPhone beneran, tapi berhubung gw belum punya, jadi gw masih belum bisa membuktikan. :p

  1. Jalankan iPhone simulator.
  2. Masuk ke springboard dengan cara menekan tombol bulat besar yang ada dibawah.
  3. Pilih aplikasi yang ingin dihapus, lalu klik dan tahan sampai muncul tanda X.
  4. Klik X untuk menghapus aplikasi tersebut, sebelumnya Anda akan diminta untuk konfirmasi terlebih dahulu.

Sebenarnya ada cara lain untuk menghapus aplikasi, yaitu dengan me-reset simulator kembali ke mode awal (seluruh isi dan settingan akan di-reset). Cara nya yaitu dengan memilih menu iPhone Simulator –> Reset Content and Settings…

Categories: Others Tags:

iPhone devel untuk pemula day #2: Aplikasi sederhana

OK, sekarang kita akan membuat aplikasi sederhana, bukan aplikasi sih sebenarnya, cuma view aja, dan belum ada interaksi nya. View ini akan menampilkan sebuah gambar secara full screen dan akan meng-handle orientation, artinya jika nanti nya iPhone di rotate ke kanan/kiri maka screen akan otomatis menyesuaikan. Note: tampilan screen terbagi 2 jenis, potrait (tegak berdiri), dan landscape/melebar.

Let’s do it…

  1. Jalankan Xcode, New Project –> View-based Application, beri nama Hello
  2. Pada panel kiri (Group & Files), expand pada bagian Hello –> Resources, klik HelloViewController.xib, maka Interface Builder (IB) akan otomotatis membuka file tersebut, dan menampilkan layar kosong.
  3. Selanjutnya IB, buka Tools –> Library, tambahkan (dengan drag and drop) Navigation Bar ke dalam screen, posisi kan pada bagian atas,ย  klik 2 kali pada text ‘Title’, ganti menjadi ‘Hello’.
  4. Kemudian tambahkan Image VIew (UIImageView) ke dalam screen, posisi kan agar pas memenuhi seluruh space yang tersisa.

    Insert Image View

    Insert Image View

  5. Selanjutnya untuk menambahkan image ke dalam project, buka kembali Xcode, lalu pada panel kiri, klik kanan pada bagian Hello –> Add –> New Group, beri nama Images. Klik kanan pada bagian Images –> Add –> Existing files… lalu pilih gambar yg ingin di masukkan, jangan lupa centang pilihan “Copy items into destination’s group”.

    Insert Image

    Insert Image

  6. Kembali ke IB, pilih UIImageView yang ada di screen, lalu pilih Tools –> Attributes Inspector, expand pada bagian Image View, lalu isikan nama file gambar yg tadi dimasukkan, kalo di gw nama nya wall.jpg. Lalu pada bagian View –> Mode, pilih Aspect Fill.

    Image View Attributes

    Main screen

    .
    .
    .
    .
    .
    .
    .
    .
    .
    .
    .
    .
    .
    .
    .
    .
    .

    .
    .
    .

    Note: Agar gambar tidak menimpa header, Anda dapat mengatur urutan object nya.

    Urutan objek

    Urutan objek

  7. Sekarang, kembali ke Xcode dan coba jalankan program, Build and Go. Setelah simulator dijalankan, pilih Hardware –> Rotate Right/Left untuk melihat landscape orientation.
    Potrait

    Potrait

    Landscape

    Landscape

    .
    .
    .
    .
    .
    .
    .
    .
    .
    .
    .
    .
    .
    .
    .
    .
    .
    .
    .
    .

    Terlihat bahwa saat landscape orientation, view tidak berubah dan tidak menyesuaikan, berikut nya kita akan meng-handle orientation.

  8. Pada Xcode, pilih Hello –> Classes –> HelloViewController.m, cari bagian shouldAutorotateToInterfaceOrientation, buang bagian komentar untuk mengaktifkan fungsi ini, lalu pada return ubah menjadi YES.
    .
  9. Sip, sekarang jalankan kembali program nya, seharusnya orientation sudah berfungsi.
    .

.

.

.

.

.

.

.

.

.

.

Mission accomplished…

Categories: Others Tags:

iPhone devel untuk pemula day #1: Persiapan

March 1, 2010 7 comments

OK, inilah hasil oprekan gw selama beberapa hari tentang iphone development, dari yang awal nya “buta” sama sekali, sekarang kayanya ada sedikit pencerahan :). Baiklah, sekarang gw akan coba sedikit memberi penjelasan tentang bagaimana untuk memulai mengembangkan aplikasi berbasis iphone, apa saja jenis nya, tools yang digunakan, sampai menjalankan iphone simulator.

Aplikasi iphone terbagi ke dalam 2 jenis:

  1. native app, aplikasi yang memanfaatkan fitur dari iphone itu sendiri, seperti motion detection, voice detection, camera dan GPS. Contoh native app bisa dilihat di apple store
  2. web app, aplikasi web berbasis mobile Safari yang menawarkan native app experience. Teknologi yang digunakan sama seperti teknologi web pada umumnya seperti HTML, CSS, Javascript. Contoh nya bisa dilihat di testiphone.com dan di apple store

Untuk sekarang kita akan mencoba native app dulu.

Apa saja yang dibutuhkan:

  1. Intel based Macintosh computer
  2. Mac OS X v10.5 ke atas, tergantung versi iphone SDK nya, misal gw pake iphone SDK versi 3.1.3 butuh Mac OS X v10.5.7, silahkan baca read me nya
  3. Iphone SDK (Software Development Kit), versi yg gw pake 3.1.3, bisa di download di iphone dev center, harus register dulu, besar file nya 3.05 GB, dan gw butuh waktu seharian untuk men-download nya :|.
    .
    Lalu apa saja yang ada di dalam SDK tersebut?

    • Xcode, untuk develop native application
    • Interface Builder (IB), untuk user interface design
    • Dashcode, untuk develop web application
    • Iphone simulator, untuk mensimulasikan aplikasi kita tanpa harus berjalan di iphone device sebenarnya

    Berhubung yang akan dicoba adalah native app, maka kita hanya akan berurusan dengan 3 tools, yaitu Xcode, Interface Builder, dan iphone simulator.

Bahasa pemrograman apa yang digunakan?
Objective-C dengan Cocoa framework (sudah ada di dalam SDK).

Dimana mendapatkan dokumentasi nya?
Iphone dev center, semua lengkap, mulai dokumentasi, video tutorial, sampai sample code.

Iphone simulator
Setelah selesai download dan menginstall SDK (gampang koq, tinggal next-next aja), sekarang kita akan melihat bagaimana bentuk dari iphone simulator nya ๐Ÿ™‚

  1. Jalankan Xcode
  2. Pilih File –> New Project
  3. Akan muncul template dialog, pilih iPhone OS –> Application –> Window-based Application, sebenarnya ada 6 template yang tersedia, nanti akan dijelaskan fungsi dari masing2 template.
  4. Langsung saja, klik Build and Go, maka kita akan melihat iPhone simulator menampilkan layar putih.
iPhone simulator

iPhone simulator

Koq cuma layar putih doang?
Ya iyalah, belum diapa-apain juga :p. Next kita akan membuat aplikasi yang sangat sederhana, so stay tuned. ๐Ÿ™‚

Categories: Others Tags: