BAB VI

Pengembangan Aplikasi iOS dengan Mobione

6.1. Tujuan

1. Mengenalkan Lingkungan Pengembangan iOS dengan MobiOne.

2. Mampu membuat program sederhana menggunakan MobiOne.

6.2. Alat & Bahan

1. Personal Computer (PC) / Notebook.

2. MobiOne installer

6.3. Dasar Teori

6.3.1. Pengenalan iOS

iOS (sebelumnya iPhone OS) adalah sistem operasi perangkat bergerak yang

dikembangkan dan didistribusikan oleh Apple Inc. Sistem operasi ini pertama

diluncurkan tahun 2007 untuk iPhone dan iPod Touch, dan telah dikembangkan untuk

mendukung perangkat Apple lainnya seperti iPaddan Apple TV. Tidak seperti Windows

Phone (Windows CE) Microsoft dan Android Google, Apple tidak melisensikan iOS

untuk diinstal di perangkat keras non-Apple. Pada 12 September 2012, App Store Apple

berisi lebih dari 700.000 aplikasi iOS, yang secara kolektif telah diunduh lebih dari

30 miliar kali.[3] SO ini memiliki pangsa pasar 14,9% untuk unit sistem operasi perangkat

bergerak telepon cerdas yang dijual pada kuartal ketiga 2012, terbanyak setelah Android

Google.[4] Pada bulan Juni 2012, iOS mencakup 65% konsumsi data web perangkat

bergerak (termasuk di iPod Touch dan iPad). Pada pertengahan 2012, terdapat 410 juta

perangkat bergerak yang diaktifkan. Menurut Apple pada tanggal 12 September 2012,

400 juta perangkat bergerak iOS telah dijual sepanjang bulan Juni 2012.

Antarmuka pengguna iOS didasarkan pada konsep manipulasi

langsung menggunakan gerakan multisentuh. Elemen kontrol antarmukanya meliputi

slider, switch, dan tombol. Interaksi dengan SO ini mencakup gerakan

seperti geser, sentuh, jepit, dan jepit buka, masing-masing memiliki arti tersendiri dalam

konteks sistem operasi iOS dan antarmuka multisentuhnya. Akselerometer internalnya

dipakai oleh sejumlah aplikasi agar bisa merespon terhadap pengguncangan alat

(misalnya membatalkan tindakan) atau memutarnya dalam tiga dimensi (misalnya beralih

dari mode potret ke lanskap).

iOS diturunkan dari OS X, yang memiliki fondasi Darwin dan karena itu iOS

merupakan sistem operasi Unix. iOS adalah versi bergerak dari sistem operasi OS X yang

dipakai di komputer-komputer Apple.

sumber : wikipedia.com

6.3.2. Pengenalan MobiOne

MobiOne Studio merupakan salah satu developer tools dari Genuitec. MobiOne

Studio memilik sembilan fitur utamayang memudahkan developer dalam

mengembangkan aplikasi. MobiOne Studio dapat digunakan bukan hanya untuk

membuat aplikasi di iOS namun juga di perangkat mobile lainnya. Berikut fitur-fitur

unggulan MobiOne Studio yang ditawarkan antara lain:

Cross Paltform

MobiOne Studio memberikan kemudahan dan pendekatan intuitif dalam

menggunakannya. “Write once, run anywhere” demikian prinsip kerjanya. Dengan

fitur ini sekali kita membuat aplikasi menggunakan MobiOne Studio, kita dapat

mengimplementasikannya baik di iOS maupun Android. Aplikasi MobiOne memiliki

kemampuan untuk auto-scale user interface yang dipakai unuk menyesuaikan ukuran

screen pada perangkat smartphone ataupun tablet yang berbeda. MobiOne dibangun

menggunakan HTML5 hybrid-native application dengan bermodel

pada Cordova/PhoneGap™ framework.

WYSIWYG, What You See Is What You Get

Melalui Visual User Interface Designer, kita dapat dengan mudah melakukan

drag and drop WYSIWYG editor. Disini dapat dilakukan tata letak dan pengaturan

User Interface secara interaktif. Pengujian cross platform user interface antara mobile

device yang ada baik iOS atau yang lainnya dapat dilakukan dengan mudah.

Termasuk juga uji rotasi layar.

App dan WebApp Generator

Pada MobiOne Studio juga disediakan Design Center. Disini disediakan juga

application generator yang akan melakukan konversi User Interface Design yang

dibuat melalui Visual UI Designer menjadi aplikasi berbasis HTML5. Setelah kita

menyelesaikan desain aplikasi, kita dapat menjalankan App Generator ini untuk

menciptakan file-file berbasis HTML5, CSS3 dan JavaScript untuk menjalankan

aplikasi kita secara web application. Fitur ini memungkinkan kita untuk melakukan

testing aplikasi pada Test Center yang disediakan MobiOne Studio.

Operating System Windows

MobiOne menggunakan Operating System Windows (XP, Vista, Win7) yang

ekonomis, scalable dan umum tersedia. Dengan output menggunakan basis HTML5

web standard dan juga penggunaan virtual device seperti camera, audio dan lain-lain,

MobiOne Studio dapat membantu kita untuk menciptakan aplikasi berbasis native

iOS menjadi bentuk biner yang dapat digunakan pada semua device. Pendekatan ini

sangat membantu kita, terutama bagi kita yang kesulitan dalam membangun aplikasi

iOS yang berbasis Apple Objective C ataupun Java dan programming tools lainnya.

iOS dan Android Emulator

MobiOne Studio menyediakan iOS dan Andriod mobile web emulator.

Dengan fitur ini kita dapat melakukan evaluasi dan testing atas hasil aplikasi kita.

Emulator menjadi bagian dari Test Center Workbench. Emulator ini mendukung

iPhone, iPad dan perangkat mobile lainnya. Emulator juga mendukung fungsi rotasi

layar.

Inspeksi dan Debug

Debuging adalah bagian penting dari pembuatan sebuah aplikasi. Test Center

juga menyediakan Tools Debuging, View DOM, profiling dan monitoring resource

serta inspeksi HTML5 local storage. Resource Monitor akan memungkinkan kita

untuk melihat bagaimana penggunaan resource mempengaruhi kinerja aplikasi kita.

Profiler dapat kita gunakan untuk menganalisa fungsi optimalisasi JavaScript. Test

Center JavaScript debugger dapat kita gunakan untuk menemukan logic error dan

memeriksa isi variable.

Build Native Application di Cloud

MobiOne’s App Center Builder juga menyediakan cloud service. Fitur ini

digunakan untuk menyimpan aplikasi kita, dimana setelah kita menyelesaikan

pembuatan aplikasi kita dapat mendistribusikannya pada device kita. Maksimal kita

dapat menyimpan sampai 50MB.

MobiOne Design Center menyediakan wizard yang membantu kita dalam

proses Application Build, baik iOS maupun lainnya. Seperti app codebase, app ID,

digitial signing data dan app icons (artwork). Pasca wizard ini akan dilanjutkan

dengan koneksi ke App Center Builder untuk mengupload content dan memulai

proses build.

Over the Air Application Installation

Pembuatan aplikasi hasil dari App Center Builder dapat diinstalasi langsung

secara wireless ke device yang terkoneksi. Artinya kita tidak memerlukan iTunes

untuk dapat melakukan instalasinya.

Publish Mobile Webapps

Juga melalui App Center yaitu di cloud service, kita dapat mempublikasikan

aplikasi kita sebagai aplikasi mobile berbasis web. Artinya aplikasi dapat kita akses

melalui web browser. Fitur ini sangat berguna untuk pengujian singkat maupun

presentasi ke user atau sharing ke sesama team member.

6.4. Membuat Aplikasi iOS – News & Shop Portal

1. Buka Mobione yang telah terinstall pada PC.

2. Muncul dengan template awal mobione iPhone 4

Tampilan Awal Masuk Mobione

3. Template yang akan digunakan adalah template iPhone 5, close template awal, buat

project baru maka klik File > Smartphone Visual Design.

4. Pilih desain template Basic.

Pemilihan Template Smartphone

5. Template yang telah dipilih akan muncul di halaman Mobione, ubah tampilan nya

menjadi iPhone 5 dengan mengklik icon Apple, pilih iPhone 5.

Mengubah tampilan template menjadi iphone5

6. Tampilan template telah berubah menjadi iPhone 5, siap untuk membuat aplikasi.

Tampilan template iphone5

7. Pilih container navigation, drag ke template letakkan di bagian atas.

Menambahkan navigation

8. Hapus tombol Back dan Button karena tidak digunakan dalam pembuatan aplikasi ini.

Menghapus tombol

9. Pilih container multipage, drag ke template letakkan di bagian atas.

Menambahkan Multipage

10. Setelah menambahkan multipage, tambahkan halaman baru pada outline tab multipage

dengan cara klik kanan tab multipage1 > new page.

Menambahkan page baru pada multipage

11. Tambahkan container TabBar, drag ke layar letakkan di bagian bawah.

Menambahkan TabBar

12. Pada properties TabBar Multipage Widget Binding isikan dengan multipage1.

Mengisi Multipage Widget Binding

13. Tampilan pada TabBar akan berubah sesuai dengan page yang telah dibuat.

Tampilan TabBar

14. Pada outline, ubah tulisan pada label page1 dan page2 dengan tulisan yang diinginkan. Agar

sesuai dengan aplikasi yang dibuat isikan label page1 dengan nama News dan page2 dengan

nama Shop.

Merubah nama label page

15. Nama label pada TabBar akan sesuai dengan yang telah diubah sebelumnya.

Tampilan TabBar yang telah diubah nama tabelnya

16. Ubah title pada navigation bar dengan “News & Shop Portal” agar sesuai dengan aplikasi yang

dibuat.

Merubah title navigation bar

17. Tambahkan image button, drag ke layar.

Menambahkan image button

18. Masukkan dengan gambar yang diinginkan.

Memasukkan gambar

19. Ulangi dengan menambah image button dan masukkan gambar, maka tampilan akan seperti

gambar berikut.

Tampilan image button yang telah diberi gambar

20. Pada bagian OnClick image button, isikan dengan Go To URL, ketikkan url yang akan dituju.

Isikan URL pada image button 1 dengan detik.com, isikan okezone.com pada image button 2

Mengisi URL image button

21. Klik tombol Run, maka simulasi aplikasi akan berjalan.

Simulasi aplikasi yang berjalan.

Tugas!

1. Lanjutkan project tambahkan isi tab Shop minimal 2.

2. Ganti icon pada di tabbar yang sesuai dengan aplikasi yang dibuat.