Modul 5 Mobione
-
Upload
david-campbell -
Category
Documents
-
view
121 -
download
1
description
Transcript of Modul 5 Mobione
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.