Belajar Ionic Dasar | Membuat Aplikasi Android Dongeng Digital

Membuat Aplikasi Android Dongeng Digital dengan Ionic Framework untuk Pemula

Pada posting sebelumnya kita sudah mempelajari Apa itu ionic ?Nahh .. pada posting kali ini saya akan mengupas tutorial sederhana tentang membuat projek dongeng digital dengan ionic framework untuk pemula,  ini dia langkah-langkah nya ..
Install tool framework ionic yang di butuhkan :
sebelum install tools ionic pastikan internet dalam keadaan aktiv ya :)

1. Download JDK disini
   cara install JDK bisa dilihat disini di artikel Membuat Aplikasi Android Berbasis HTML5 dengan Cordova
2. Download dan install Git disini
3. Download dan install software Node.js versi LTS disini
4. ketik di cmd : `npm -v` maka akan muncul versi nya
5. install ionic cordova , ketik di cmd : `npm install -g cordova`
6. setelah berhasil install cek dengan ketik di cmd  `cordova -v`
7. install ionic dengan ketik di cmd : `npm install -g ionic`
8. setelah berhasil install cek dengan ketik di cmd :  ` ionic -v`
9. install bower . bower ini adalah packet manager yang dibutuhkan dalam pembuatan aplikasi ionic. ketik di cmd dengan: `npm install -g bower`
10. pastikan bower sudah terinstall dengan cek :  `bower -v`
11. install gulp caranya ketik di cmd : `npm install -g gulp` cek versi `gulp -v`

Membuat projek Dongeng Digital sederhana :

1. langkah selanjutnya adalah membuat folder baru , misalnya di drive D: dengan nama folder kisahteladan
2. Buka cmd, lalu arahkan ke folder kisahteladan , karena saya menyimpan di data D dan nama foldernya kisahteladan beserta nama projeknya app_kisah , maka ini perintah cmd nya :
   D: cd kisahteladan/app_kisah

1. kemudian enter dan ketikan baris perintah berikut untuk membuat project dengan nama app_kisah. kemudian ketik di cmd : ionic start app_kisah
2. maka library ionic pada projek app_kisah akan di donload
3. jika muncul pesan notif dilewatkan saja dengan mengetik n lalu enter. dan projek app_kisah sudah selesai di buat  yeayyyy :) :)

Menjalankan Projek app_kisah
1. Buka cmd , arahkan kepada direktori app_kisah, kemudian ketik :
ionic serve dan secara otomatis browser akan kebuka dan menjalankan projeck app_kisah default bawaan ionic-nya

Mengedit Template Default Ionic

1. silahkan edit dengan membuka projek app_kisah/www/templates/tab-dash.htmlmenjadi :
<ion-view view-title="Kisah Teladan Rasul"><ion-content class="padding login" >   </ion-content></ion-view> 2. membuat file custom.css  :
.login{background: url(../img/login.png) center;  /*ini adalah gambar kartun anak sesuai selera yang dimpan di folder img*/ background-size: cover;<br />} simpan di folder app_kisah/www/css , dan jangan lupa tambahkan

di app_kisah/www/index.html
3. tambahkan data element di app_kisah/www/js/services.js dan jangan lupa tambahkan gambar di folder img dan edit nama file gambar di services.js sesuai dengan nama gamabr yang ditambahkan tadi , berikut ini adalah source code yang harus ditambahkan di service.js :

angular.module('starter.services', [])<br /><br />.factory('Chats', function() {<br /><br />  // Might use a resource here that returns a JSON array<br /><br />  // Some fake testing data<br /><br />  var chats = [{<br />id: 0,<br />name: 'Nabi Muhammad SAW',<br />lastText: 'Pengemis Buta Di pasar Madinah',<br />content:'Di sudut pasar Madinah Al-Munawarah seorang pengemis Yahudi buta hari demi hari apabila ada orang yang mendekatinya ia selalu berkata "Wahai saudaraku jangan dekati Muhammad, dia itu orang gila, dia itu pembohong, dia itu tukang sihir, apabila kalian mendekatinya kalian akan dipengaruhinya". Setiap pagi Rasulullah SAW mendatanginya dengan membawa makanan, dan tanpa berkata sepatah kata pun Rasulullah SAW menyuapi makanan yang dibawanya kepada pengemis itu walaupun pengemis itu selalu berpesan agar tidak mendekati orang yang bernama Muhammad. Rasulullah SAW melakukannya hingga menjelang Beliau SAW wafat. Setelah kewafatan Rasulullah tidak ada lagi orang yang membawakan makanan setiap pagi kepada pengemis Yahudi buta itu.Suatu hari Abubakar r.a berkunjung ke rumah anaknya Aisyah r.ha. Beliau bertanya kepada anaknya, "anakku adakah sunnah kekasihku yang belum aku kerjakan", Aisyah r.ha menjawab pertanyaan ayahnya, "Wahai ayah engkau adalah seorang ahli sunnah hampir tidak ada satu sunnah pun yang belum ayah lakukan kecuali satu sunnah saja". "Apakah Itu?", tanya Abubakar r.a. Setiap pagi Rasulullah SAW selalu pergi ke ujung pasar dengan membawakan makanan untuk seorang pengemis Yahudi buta yang berada di sana", kata Aisyah r.ha.Ke esokan harinya Abubakar r.a. pergi ke pasar dengan membawa makanan untuk diberikannya kepada pengemis itu. Abubakar r.a mendatangi pengemis itu dan memberikan makanan itu kepada nya. Ketika Abubakar r.a. mulai menyuapinya, si pengemis marah sambil berteriak, "siapakah kamu ?". Abubakar r.a menjawab, "aku orang yang biasa". "Bukan !, engkau bukan orang yang biasa mendatangiku", jawab si pengemis buta itu. Apabila ia datang kepadaku tidak susah tangan ini memegang dan tidak susah mulut ini mengunyah. Orang yang biasa mendatangiku itu selalu menyuapiku, tapi terlebih dahulu dihaluskannya makanan tersebut dengan mulutnya setelah itu ia berikan pada ku dengan mulutnya sendiri", pengemis itu melanjutkan perkataannya.Abubakar r.a. tidak dapat menahan air matanya, ia menangis sambil berkata kepada pengemis itu, aku memang bukan orang yang biasa datang pada mu, aku adalah salah seorang dari sahabatnya, orang yang mulia itu telah tiada. Ia adalah Muhammad Rasulullah SAW. Setelah pengemis itu mendengar cerita Abubakar r.a. ia pun menangis dan kemudian berkata, benarkah demikian?, selama ini aku selalu menghinanya, memfitnahnya, ia tidak pernah memarahiku sedikitpun, ia mendatangiku dengan membawa makanan setiap pagi, ia begitu mulia.... Pengemis Yahudi buta tersebut akhirnya bersyahadat dihadapan Abubakar r.a.',<br />face: 'img/pengemis.jpg'<br /><br /><br />}, {<br /><br /><br />id: 1,<br />name: 'Nabi Muhammad SAW',<br />lastText: 'Gadis Yatim di Madinah',<br />content:'Di suatu pagi pada hari raya Idul Fitri, Rasulullah SAW bersama keluarganya dan beberapa sahabatnya seperti biasanya mengunjungi rumah demi rumah untuk mendo’akan para muslimin dan muslimah agar merasa bahagia di hari raya itu. Alhamdulillah, semua terlihat merasa gembira dan bahagia di Hari Raya Ied tersebut, terutama anak-anak. Anak-anak bermain sambil berlari-lari kesana kemari dengan mengenakan pakaian hari rayanya. Namun tiba-tiba Rasulullah saw melihat di sebuah sudut adaseorang gadis kecil sedang duduk bersedih.Ia memakai pakaian tambal-tambal dan sepatu yang telah usang. Rasulullah saw lalu bergegas menghampirinya. Gadis kecil itu menyembunyikan wajahnya dengan kedua tangannya, lalu menangis tersedu-sedu. Rasulullah kemudian meletakkan tangannya yg putih sewangi bunga mawar itu dengan penuh kasih sayang di atas kepala gadis kecil tersebut, lalu bertanya dengan suaranya yang lembut :“Anakku, mengapa engkau menangis? Bukankah hari ini adalah hari raya?”Gadis kecil itu terkejut bukan kepalang. Tanpa berani mengangkat kepalanya dan melihat siapa yang bertanya, perlahan-lahan ia menjawab sambil bercerita : “Pada hari raya yang suci ini semua anak menginginkan agar dapat merayakannya bersama orang tuanya dengan berbahagia. Semua anak-anak bermain dengan riang gembiranya. Aku lalu teringat pada Ayahku, itu sebabnya aku menangis. Ketika itu hari raya terakhir bersamanya. Ia membelikan aku sebuah gaun berwarna hijau dan sepatu baru. Waktu itu aku sangat bahagia. Lalu suatu hari ayahku pergi berperang bersama Rasulullah membela Islam dan kemudian ia meninggal. Sekarang ayahku sudah tidak ada lagi Aku telah menjadi seorang anak yatim. Jika aku tidak menangis untuknya, lalu untuk siapa lagi?” Setelah Rasulullah saw mendengar cerita itu, seketika hatinya diliputi kesedihan yang mendalam. Dengan penuh kasih sayang beliau membelai kepala gadis kecil itu sambil berkata: “Anakku, hapuslah air matamu…Angkatlah kepalamu dan dengarkan apa yang akan aku katakan kepadamu…. Apakah kamu ingin agar aku Rasulullah menjadi ayahmu? Dan apakah kamu juga ingin Ali menjadi pamanmu?. Dan apakah kamu juga ingin agar Fatimah menjadi kakak perempuanmu?….dan Hasan dan Husein menjadi adik-adikmu? dan Aisyah menjadi ibumu ?. Bagaimana pendapatmu tentang usul dariku ini?” Begitu mendengar kata-kata itu, ia langsung berhenti menangis. Ia memandang dengan penuh takjub orang yang berada tepat di hadapannya. Gadis yatim kecil itu sangat tertarik pada tawaran Rasulullah SAW, namun entah mengapa ia tidak bisa berkata sepatah katapun. Ia hanya dapat menganggukkan kepalanya perlahan sebagai tanda persetujuannya. Gadis yatim kecil itu lalu bergandengan tangan dengan Rasulullah saw menuju ke rumah. Sesampainya di rumah, wajah dan kedua tangan gadis kecil itu lalu dibersihkan dan rambutnya disisir. Semua memperlakukannya dengan penuh kasih sayang. Gadis kecil itu lalu dipakaikan gaun yang indah dan diberikan makanan dan uang hari raya. Lalu ia diantarnya gadis itu keluar, agar dapat bermain bersama anak-anak lainnya. Anak-anak lain merasa iri pada gadis kecil dengan gaun yang indah dan wajah yang berseri-seri itu. Mereka merasa keheranan, lalu ia berkata : “Akhirnya aku memiliki seorang ayah! Di dunia ini, tidak ada yang bisa menandinginya! Siapa yang tidak bahagia memiliki seorang ayah seperti Rasulullah? Aku juga kini memiliki seorang paman, namanya Ali yang hatinya begitu mulia. Juga seorang kakak perempuan, namanya Fatima Az`Zahra. Ia menyisir rambutku dan mengenakanku gaun yang indah ini. Aku merasa sgt bahagia dan bangga memiliki adik adik, hasan dan husein Aku juga kini memiliki seorang ibu, namanya Aisyah, dan ingin rasanya aku memeluk seluruh dunia beserta isinya.” Maka anak-anak yang sedang bermain dengannya sampai berkata: “Ah, seandainya ayah-ayah kita mati terbunuh ketika perang itu tentu kita akan begitu.”Syahdan tatkala Nabi saw meninggal dunia, anak kecil itu keluar seraya menaburkan debu ke atas kepalanya meminta tolong sambil memekik: “Aku sekarang menjadi anak asing dan yatim lagi.” Subhanallah, Kasih sayang Rasulullah senantiasa hadir bagi setiap insan ',<br />face: 'img/arya.jpg'<br />}, {<br /><br />    id: 2,<br /><br />    name: 'Nabi Ayub AS',<br /><br />    lastText: 'Kisah Nabi Ayub Menjalani Cobaan Berat',<br /><br />    content:'Nabi Ayyub A.S adalah salah satu nabi yang di utus Allah di negeri Syam. Nabi Ayyub adalah keturunan nabi Ishaq a.s. bin nabi ibrahim a.s, Ibunya Nabi ayyub adalah putri dari nabi luth a.s sedangkan istri nabi ayyub a.s. bernama rahmah Nabi Ayyub a.s tergolong orang yang kaya raya, tetapi tidak sombong dan juga tidak kikir, suka menolong orang tanpa memandang golongan, pangkat dan jabatan, beliau melakukan itu semata mata karena Allah dengan hati yang ikhlas, Nabi Ayuub a.s. tidak pernah lupa hatinya untuk selalu beryukur atas Nikmat yang Allah telah berikan kepadanya. Nabi Ayyub selalu taat dan patuh terhadap perintah Allah. Sehingga para malaikat terkagunm kagum terhadap ketaatan nabi Ayyub dan keikhlasan hatinya dalam beribadahh kepada Allah swt. Pada suatu saat nabi Ayuyub mendapat cobaan dari Allah SWT, Yaitu  Anaknya yang berjumlah 11 orang satu persatu meninggal dunia ,Semua harta benda yang dimilikinya habis terbakar termasuk kebun anggurnya, Menderita sakit kulit (Kudis) yang sangat parah dan menjijikan Bahkan dari kulit sekujur tubuhnya mengalir darah bercampur nanah. Penyakit kulit ini di derita nabi Ayyub selama kurang lebih 7 tahun. Istrinya pergi tidak mau merawat nabi Ayyub yang sedang sakit, suatu hari istrinya berkata kepada naib ayyub bahwa dia sungguh tidak sanggup lagi merawat nabi Ayyub. Nabi Ayyub marah atas sikap istrinya yang kurang tawaka menghadapi cobaan dari Allah swt. Nabi Ayyub berjanji dengan berkata kepada istrinya :"Jika kelak aku telah sembuh dari penyakitku dan kekuatan badanku telah pulih kembali, aku akan mencambukmu sebanyak seratus kali" Walaupun berat dan besar cobaan tersebut namum beliau tetap sabar dan tabah serta tawakal terhadap Allah swt. bahkan ia semakin yakin dengan keimanannya dan selalu berzikir untuk mendekatkan diri kepada Allah swt. beliau berdoa kepada Allah swt :" Ya Allah tuhanku, aku telah diganggu oleh setan dengan kepayahanm kesusahan, serta siksaan dan engkaulah Tuhan Yang Maha Pengasih dan Maha Penyayang"  Akhirnya atas kesabaran dan ketabahan Nabi Ayyub tersebut. Akhirnya, penyakit kulitnya sembuh tanpa bekas, setelah ia menghentakkan kakinya ketanah atas perintah Allah swt, kemudian keluarlah air yang memancar yang dipakainya untuk mandi dan munimgigihan dan ketabahan beliau dalam menerima cobaan dan ujian Allah swt. tidak hanya mengembalikan kesahatan kuga kekayaan Nab Ayyub. Kembali seperti semua. pada saat itu istri beliau kembali padanya. Nabi Ayyub pun melaksanakan sumpahnya, yaitu dengan mencambuk istrinya. Setelah itu, nabi Ayyub hidup dengan berbahagia sampai akhir hayatnya, Nabi Ayyub wafat pada usia 93 Tahun',<br /><br />    face: 'img/nabiayub.jpg'<br /><br />  }];<br /><br />  return {<br /><br />    all: function() {<br /><br />      return chats;<br /><br />    },<br /><br />    remove: function(chat) {<br /><br />      chats.splice(chats.indexOf(chat), 1);<br /><br />    },<br /><br />    get: function(chatId) {<br /><br />      for (var i = 0; i < chats.length; i++) {<br /><br />        if (chats[i].id === parseInt(chatId)) {<br /><br />          return chats[i];<br /><br />        }<br /><br />      }<br /><br />      return null;<br /><br />    }<br /><br />  };<br /><br />});<br /><br />

4. panggil data tesebut di app_kisah/www/templates/tab-chats.html , dengan mengetik :

<ion-view view-title="Daftar Isi"><br /><br />  <ion-content><br /><br />    <ion-list><br /><br />      <ion-item class="item-remove-animate item-avatar item-icon-right" ng-repeat="chat in chats" type="item-text-wrap" href="#/tab/chats/{{chat.id}}"><br /><br />        <img ng-src="{{chat.face}}"><br /><br />        <h2>{{chat.name}}</h2><br /><br />        <p>{{chat.lastText}}</p><br /><br />        <i class="icon ion-chevron-right icon-accessory"></i><br /><br />        <ion-option-button class="button-assertive" ng-click="remove(chat)"><br /><br />          Delete<br /><br />        </ion-option-button><br /><br />      </ion-item><br /><br />    </ion-list><br /><br />  </ion-content><br /><br /></ion-view>

5. kemudian panggil detail di app_kisah/www/templates/chat-detail.html , ketik :

<ion-view view-title="{{chat.name}}"><br /><br />  <ion-content class="padding"><br /><br />  <div class="card"><br /><br />  <div class="item item-text-wrap"><br /><br />    <img ng-src="{{chat.face}}" style="width: 64px; height: 64px"><br /><br />    <p><br /><br />     <b> {{chat.lastText}}</b><br /><br />    </p><br /><br />    <p><br /><br />      {{chat.content}}<br /><br />    </p><br /><br />    </div><br /><br />    </div><br /><br />  </ion-content><br /><br /></ion-view>

6. edit icon tabs di app_kisah/www/templates/tabs.html  :

<ion-tabs class="tabs-icon-top tabs-color-active-positive"><br /><br />  <!-- Dashboard Tab --><br /><br />  <ion-tab title="Dashboard" icon-off="ion-ios-home" icon-on="ion-ios-home" href="#/tab/dash"><br /><br />    <ion-nav-view name="tab-dash"></ion-nav-view><br /><br />  </ion-tab><br /><br />  <!-- Chats Tab --><br /><br />  <ion-tab title="Daftar Isi" icon-off="ion-ios-star" icon-on="ion-ios-star" href="#/tab/chats"><br /><br />    <ion-nav-view name="tab-chats"></ion-nav-view><br /><br />  </ion-tab><br /><br />  <!-- Account Tab --><br /><br />  <ion-tab title="Account" icon-off="ion-ios-gear-outline" icon-on="ion-ios-gear" href="#/tab/account"><br /><br />    <ion-nav-view name="tab-account"></ion-nav-view><br /><br />  </ion-tab><br /><br /></ion-tabs>

7. silahkan lihat hasilnya di brower dengan ketik cmd arahkan ke dalam direktori app_kisah
kemudian ketik :
ionic serve
dan browser akan terbuka dan horeeee sudah jadi : D

Membuild android 

1. Buka cmd, arahkan ke dalam folder direktori app_kisah
2. ketik ini : ionic platform add android kemudian enter
3. tunggu sampai selesai donlod, dan kita akan membuild android apk-nya . ketik : ionic build android
4. tuggu sampai program android selesai di build. sampai menampilkan pesan BUILD SUCCESSFUL
5. jika sudah sukses build-nya silahkan buka folder di app_kisah/platforms/android/build/outputs/apk/android-debug.apk
6. sekarang copy dan install android-debug.apk di android kamu 
7. yesss berhasil, silahkan bacakan dongeng ke anak atau adik di hp kamu hasil buatan kamu sendiri :)

Ini hanyalah panduan tutorial sederhana, silahkan explore source code sesuai selera kamu ya .
Tutorial ini bertujuan untuk membantu mengenalkan dasar-dasar ionic bagi teman-teman yang sedang belajar ionic framework
Demikian dan terimakasih :)

CodePolitan Developer School

Saat ini CodePolitan mengadakan program pelatihan belajar coding intensif merupakan Solusi belajar pemrograman Basic Android yang berorientasi pada kebutuhan industri selama satu minggu secara tatap muka dengan bimbingan mentor berpengalaman yang dilengkapi dengan fasilitas asrama selama belajar.
Benefit apa yang bisa kamu dapatkan dari CodePolitan Developer School?

• Belajar Intensif selama seminggu dan dibimbing mentor berpengalaman
• Program Karantina untuk mendapatkan hasil yang maksimal
• Kurikulum belajar disusun sesuai dengan kebutuhan industri
• Modul belajar dari Google Android Developer Fundamentals
• Konsultasi Belajar dengan mentor setelah program
• Mendapatkan kemampuan basic sebagai pondasi menjadi Android Developer