Aplikasi Cordova dengan Bootstrap

Transkripsi

1 Aplikasi Cordova dengan Bootstrap Juli 2015 Tingkat: Oleh : Feri Djuandi Pemula Menengah Mahir Artikel kali ini akan menjelaskan cara membuat sebuah aplikasi sederhana menggunakan API Cordova. Hasil yang ingin dicapai dengan aplikasi ini adalah: Aplikasi menampilkan halaman web HTML yang dijalankan secara lokal di dalam perangkat mobile (bukan mengakses halaman web dari server web luar) Untuk memperindah tampilan digunakan UI framework JQuery dan Bootstrap Aplikasi menampilkan komponen menu dan tab dari Bootstrap Untuk dapat membangun aplikasi Cordova, pastikan komputer kerja Anda telah dipersiapkan dengan API Cordova dan software yang dibutuhkan lainnya. Untuk mempersiapkan perangkat pengembangan Cordova, silakan membaca artikel Memulai Cordova yang dibuat penulis sebelumnya. Catatan: Pada artikel ini platform yang digunakan hanya Android, sehingga semua penjelasan yang diuraikan mengacu pada platform tersebut. Kode program dari contoh aplikasi telah disertakan bersama artikel ini sehingga Anda bisa menggunakannya sambil membaca penjelasan agar lebih mudah memahaminya. Membuat projek baru 1. Buat sebuah folder kerja untuk projek Cordova. Pada contoh ini folder tersebut diletakkan pada folder..\cordova\workshop. Anda bebas menentukan nama dan lokasi folder tersebut. 2. Buka sebuah command shell dan masuk ke dalam folder kerja di atas. Pada contoh ini akan dibuat sebuah projek bernama animalkingdom. 3. Jalankan perintah berikut ini: cordova create animalkingdom com.excercise.animalkingdom Animal Kingdom Setelah projek berhasil dibuat, file-file projek tersebut akan disimpan di dalam folder..\cordova\workshop\ animalkingdom. Silakan menuju folder tersebut dan melihat folder-folder dan file-file apa saja yang sudah terbentuk. 1

2 4. Tambahkan dukungan untuk platform Android. Silakan masuk ke flder..\cordova\workshop\ animalkingdom dan jalankan perintah: cordova platforms add android 5. Tambahkan plugin dasar. Silakan masuk ke flder..\cordova\workshop\animalkingdom dan jalankan perintah: cordova plugin add cordova-plugin-device cordova plugin add cordova-plugin-console 6. Sesuaikan versi API Android yang terinstal pada komputer kerja dengan versi target yang akan dibuat. Buka file project.properties di dalam folder..\workshop\animalkingdom\platforms\android. Ubah versi API pada bagian target dengan yang sesuai. Buka file AndroidManifest.xml di dalam folder..\workshop\animalkingdom\platforms\ android. Ubah versi API pada bagian android:targetsdkversion dengan yang sesuai. Mempersiapkan JQuery JQuery dibutuhkan untuk digunakan bersama-sama Bootstrap. Versi JQuery yang digunakan pada contoh program ini adalah jquery Dianjurkan untuk tidak menggunakan jquery 2.x karena terbatasnya versi browser yang didukung oleh versi tersebut. 1. Silakan mengunduh JQuery dari situs beralamat: 2. Silakan menyalin file jquery js ke dalam folder..\animalkingdom\www\js. Mempersiapkan Bootstrap Pada contoh ini framework Bootstrap akan digunakan untuk memperindah tampilan antar muka (User Interface= UI). Bootstrap adalah UI framework yang sangat popular dan cukup mudah digunakan. Versi Bootstrap yang digunakan pada contoh program ini adalah 3.3.4, namun demikian tidak ada batasan untuk menggunakan versi yang lebih baru. 1. Silakan mengunduh JQuery dari situs beralamat: 2. Silakan menyalin file bootstrap.min.js ke dalam folder..\animalkingdom\www\js. 3. Silakan menyalin semua file bootstrap*.css ke dalam folder..\animalkingdom\www\css. 2

3 Mengedit file html 1. Buka file index.html yang ada di dalam folder..\animalkingdom\www. Hapus semua skrip HTML yang asli dang anti dengan skrip yang baru berikut ini. <!DOCTYPE html> <html> <head> <meta http-equiv="content-security-policy" content="default-src 'self' data: gap: 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *"> <meta name="format-detection" content="telephone=no"> <meta name="msapplication-tap-highlight" content="no"> <meta name="viewport" content="width=device-width, initial-scale=1">  <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"> <link rel="stylesheet" type="text/css" href="css/bootstrap-theme.min.css"> <title>animal Kingdom</title> </head> <body> <nav class="navbar navbar-inverse"> <div class="container-fluid">  <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" ariaexpanded="false"> <span class="sr-only">toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">animal Kingdom</a>  <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav"> <li class="active"><a href="#">link <span class="sr-only">(current)</span></a></li> <li><a href="#">link</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">dropdown <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">action</a></li> <li><a href="#">another action</a></li> <li><a href="#">something else here</a></li> 3

4 <li role="separator" class="divider"></li> <li><a href="#">separated link</a></li> <li role="separator" class="divider"></li> <li><a href="#">one more separated link</a></li> </li> <form class="navbar-form navbar-left" role="search"> <div class="form-group"> <input type="text" class="form-control" placeholder="search"> <button type="submit" class="btn btn-default">submit</button> </form> <ul class="nav navbar-nav navbar-right"> <li><a href="#">link</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">dropdown <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">action</a></li> <li><a href="#">another action</a></li> <li><a href="#">something else here</a></li> <li role="separator" class="divider"></li> <li><a href="#">separated link</a></li> </li>   </nav> <div class="container"> <h1>welcome!</h1> <div class="panel panel-primary"> <div class="panel-heading"><h2>wildlife Tourism</h2> <div class="panel-body"> Wildlife tourism can be an eco and animal friendly tourism, usually showing animals in their natural habitat. Wildlife tourism, in its simplest sense, is watching wild animals in their natural habitat. Wildlife tourism is an important part of the tourism industries in many countries including many African and South American countries, Australia, India, Canada, Indonesia, Bangladesh, Malaysia, Sri Lanka and Maldives among many. <p align="center"><img src="img/splash.png"></p> It has experienced a dramatic and rapid growth in recent years world wide and is closely aligned to eco-tourism and sustainable-tourism. <blockquote> <p>wildlife tourism is also a multi-million dollar industry offering customized tour packages and safaris. </blockquote> <p align="center"><a class="btn btn-primary btn-lg" href="animals.html" role="button">learn more</a></p> 4

5 <script type="text/javascript" src="cordova.js"></script> <script type="text/javascript" src="js/index.js"></script> <script type="text/javascript" src="js/jquery js"></script> <script type="text/javascript" src="js/bootstrap.min.js"></script> </body> </html> 2. Buat sebuah file HTML baru bernama animals.html di dalam folder www yang sama. Salin skrip HTML berikut ini ke dalamnya. <!DOCTYPE html> <html> <head> <meta http-equiv="content-security-policy" content="default-src 'self' data: gap: 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *"> <meta name="format-detection" content="telephone=no"> <meta name="msapplication-tap-highlight" content="no"> <meta name="viewport" content="width=device-width, initial-scale=1">  <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"> <link rel="stylesheet" type="text/css" href="css/bootstrap-theme.min.css"> <title>animal Kingdom</title> </head> <body> <a name="top"></a> <nav class="navbar navbar-inverse"> <div class="container-fluid">  <div class="navbar-header"> <a class="navbar-brand" href="index.html"><span class="glyphicon glyphicon-menu-left" aria-hidden="true"></span>back</a> </nav> <div class="container"> <ul id="mytab" class="nav nav-tabs"> <li class="active"> <a href="#giraffe" data-toggle="tab"> <strong>giraffe</strong> </a> </li> <li><a href="#hippo" data-toggle="tab"><strong>hippopotamus</strong></a></li> <li class="dropdown"> <a href="#" id="mytabdrop1" class="dropdown-toggle" data-toggle="dropdown"><strong>other</strong> 5

6 <b class="caret"></b> </a> <ul class="dropdown-menu" role="menu" aria-labelledby="mytabdrop1"> <li><a href="#lion" tabindex="-1" data-toggle="tab"><strong>lion</strong></a></li> <li><a href="#zebra" tabindex="-1" data-toggle="tab"><strong>zebra</strong></a></li> </li> <div id="mytabcontent" class="tab-content"> <div class="tab-pane fade in active" id="giraffe"> <h3>giraffe</h3> <p>the giraffe (Giraffa camelopardalis) is an African even-toed ungulate mammal, the tallest living terrestrial animal and the largest ruminant. Its species name refers to its camel-like shape and its leopard-like coloring. Its chief distinguishing characteristics are its extremely long neck and legs, its horn-like ossicones, and its distinctive coat patterns. It is classified under the family Giraffidae, along with its closest extant relative, the okapi. The nine subspecies are distinguished by their coat patterns. <p align="center"><img src="img/giraffe.png"></p> <p>the giraffe's scattered range extends from Chad in the north to South Africa in the south, and from Niger in the west to Somalia in the east. Giraffes usually inhabit savannas, grasslands, and open woodlands. Their primary food source is acacia leaves, which they browse at heights most other herbivores cannot reach. Giraffes are preyed on by lions; their calves are also targeted by leopards, spotted hyenas, and wild dogs. Adult giraffes do not have strong social bonds, though they do gather in loose aggregations if they happen to be moving in the same general direction. Males establish social hierarchies through "necking", which are combat bouts where the neck is used as a weapon. Dominant males gain mating access to females, which bear the sole responsibility for raising the young. <p>the giraffe has intrigued various cultures, both ancient and modern, for its peculiar appearance, and has often been featured in paintings, books, and cartoons. It is classified by the International Union for Conservation of Nature as Least Concern, but has been extirpated from many parts of its former range, and some subspecies are classified as Endangered. Nevertheless, giraffes are still found in numerous national parks and game reserves. <div class="tab-pane fade" id="hippo"> <h3>hippopotamus</h3> <p>the common hippopotamus (Hippopotamus amphibius), or hippo, is a large, mostly herbivorous mammal in sub- Saharan Africa, and one of only two extant species in the family Hippopotamidae, the other being the pygmy hippopotamus (Choeropsis liberiensis or Hexaprotodon liberiensis). The name comes from the ancient Greek for "river horse". After the elephant and rhinoceros, the common hippopotamus is the third-largest type of land mammal and the heaviest extant artiodactyl. <p align="center"><img src="img/hypo.png"></p> <p>despite their physical resemblance to pigs and other terrestrial even-toed ungulates, their closest living relatives are cetaceans (whales, porpoises, etc.) from which they diverged about 55 million years ago. The common ancestor of whales and hippos split from other even-toed ungulates around 60 million years ago. The earliest known hippopotamus fossils, belonging to the genus Kenyapotamus in Africa, date to around 16 million years ago. <p>common hippos are recognizable by their barrel-shaped torsos, wide-opening mouths revealing large canine tusks, nearly hairless bodies, columnar-like legs and large size; adults average 1,500 kg (3,300 lb) and 1,300 kg (2,900 lb) for males and females respectively, making them the largest species of land mammal after the 3 species of elephants and the white and Indian rhinoceros. Despite its stocky shape and short legs, it is capable of running 30 km/h (19 mph) over short distances. The hippopotamus is a highly aggressive and unpredictable animal and is ranked among the most dangerous animals in Africa. Nevertheless, they are still threatened by habitat loss and poaching for their meat and ivory canine teeth. <div class="tab-pane fade" id="lion"> <h3>lion</h3> <p>the lion (Panthera leo) is one of the five big cats in the genus Panthera and a member of the family Felidae. The commonly used term African lion collectively denotes the several subspecies found in Africa. With some males exceeding 250 kg (550 6

7 lb) in weight, it is the second-largest living cat after the tiger. Wild lions currently exist in sub-saharan Africa and in Asia (where an endangered remnant population resides in Gir Forest National Park in India) while other types of lions have disappeared from North Africa and Southwest Asia in historic times. <p align="center"><img src="img/lion.png"></p> <p>until the late Pleistocene, about 10,000 years ago, the lion was the most widespread large land mammal after humans. They were found in most of Africa, across Eurasia from western Europe to India, and in the Americas from the Yukon to Peru. The lion is a vulnerable species, having seen a major population decline in its African range of 30 50% per two decades during the second half of the 20th century. Lion populations are untenable outside designated reserves and national parks. Although the cause of the decline is not fully understood, habitat loss and conflicts with humans are currently the greatest causes of concern. Within Africa, the West African lion population is particularly endangered. <p>lions live for years in the wild, although in captivity they can live more than 20 years. In the wild, males seldom live longer than 10 years, as injuries sustained from continual fighting with rival males greatly reduce their longevity. They typically inhabit savanna and grassland, although they may take to bush and forest. Lions are unusually social compared to other cats. A pride of lions consists of related females and offspring and a small number of adult males. Groups of female lions typically hunt together, preying mostly on large ungulates. Lions are apex and keystone predators, although they are also expert scavengers obtaining over 50 percent of their food by scavenging as opportunity allows. While lions do not typically hunt humans, some have. Sleeping mainly during the day, lions are primarily nocturnal, although bordering on crepuscular in nature. <div class="tab-pane fade" id="zebra"> <h3>zebra</h3> <p>zebras are several species of African equids (horse family) united by their distinctive black and white striped coats. Their stripes come in different patterns, unique to each individual. They are generally social animals that live in small harems to large herds. Unlike their closest relatives, horses and donkeys, zebras have never been truly domesticated. <p align="center"><img src="img/zebra.png"></p> <p>there are three species of zebras: the plains zebra, the Grévy's zebra and the mountain zebra. The plains zebra and the mountain zebra belong to the subgenus Hippotigris, but Grévy's zebra is the sole species of subgenus Dolichohippus. The latter resembles an ass, to which it is closely related, while the former two are more horse-like. All three belong to the genus Equus, along with other living equids. <p>the unique stripes of zebras make them one of the animals most familiar to people. They occur in a variety of habitats, such as grasslands, savannas, woodlands, thorny scrublands, mountains, and coastal hills. However, various anthropogenic factors have had a severe impact on zebra populations, in particular hunting for skins and habitat destruction. Grévy's zebra and the mountain zebra are endangered. While plains zebras are much more plentiful, one subspecies, the quagga, became extinct in the late 19th century though there is currently a plan, called the Quagga Project, that aims to breed zebras that are phenotypically similar to the quagga in a process called breeding back. <p><a href="#top"><span class="glyphicon glyphicon-home" aria-hidden="true"></span> Back to top</a> <script type="text/javascript" src="cordova.js"></script> <script type="text/javascript" src="js/jquery js"></script> <script type="text/javascript" src="js/bootstrap.min.js"></script> </body> </html> 7

8 Mempersiapkan file-file gambar File-file gambar ada di dalam folder..\animalkingdom\www\img. Mempersiapkan file icon Sebuah icon baru telah dipersiapkan untuk menggantikan icon standar dari aplikasi Cordova. 1. Siapkan sebuah gambar dengan format PNG dan berukuran 96 x 96 pixel. 2. Pada folder projek aplikasi Cordova, silakan masuk ke sub-folder..\platforms\android\res. Di situ akan dijumpai beberapa folder drawable dan drawable-xxx seperti pada gambar berikut ini. 3. Hapus semua folder drawable-xxx dan tinggalkan sebuah folder bernama drawable. Dengan dihapusnya folder-folder drawable-xxx maka perangkat mobile selalu akan mencari gambar icon di dalam folder drawable. 4. Di dalam folder drawable terdapat file bernama icon.png. File inilah yang dapat diganti dengan gambar lain supaya icon aplikasi berubah sesuai dengan gambar yang diinginkan. Silakan mengambil gambar icon yang baru dan salin ke dalam folder ini dengan nama file yang sama (hapus file icon.png yang asli). Pastikan resolusinya sama dengan gambar yang asli. 8

9 Menjalankan aplikasi 1. Sambungkan kabel data dari komputer ke perangkat Android. Pastikan perangkat Android terdeteksi oleh komputer. 2. Masuk ke dalam folder..\cordova\workshop\animalkingdom dan jalankan perintah: cordova run android Beberapa tampilan aplikasi diperlihatkan pada gambar di bawah ini. Tampilan awal index.html Menu pull-down menggunakan Bootstrap 9

10 Komponen Tab pada animals.html menggunakan Bootstrap Proverbs 1:7. The fear of the LORD is the beginning of knowledge: but fools despise wisdom and instruction. 10