Skip to main content
Pengenalan Struktur code project ionic pada Android

Pengenalan Struktur Code Project Ionic Android

Pendahuluan Pengenalan Struktur Code Project Ionic Android

Salam sejahtera, masih seputar pembelajaran tentang penggunaan Ionic Framework untuk pengembangan aplikasi mobile, kali ini kita akan bahas tentang Pengenalan Struktur Code Project Ionic Android. Ada beberapa materi pembahasan sebelumnya tentang awal menggunakan Framework Ionic, mulai dari instalasi awal, pembuatan project dan menjalankan project melalui serve. Pembahasan tersebut mudah-mudahan menjadi landasan awal untuk lanjut ketahap ini. Pembahasan tentang pengenalan Struktur code project ionic ini sangat penting untuk pemahaman untuk pengembangan project ionic.Baca : Pembuatan Project Ionic

Topik Pembahasan Pengenalan Struktur Code Project Ionic Android:

  • Pengenalan Struktur code project ionic
  • Pengenalan File bower.json
  • Pengenalan File config.xml
  • Pengenalan file package.json
  • pengenalan file index.html
  • pengenalan file app.js
  • Kesimpulan

Untuk pemahaman tentang pengenalan Struktur code project ionic, saya lebih banyak ambil referensi dari web resmi ionic. Di web resmi nya banyak tersedia modul untuk belajar lebih lengkap tentang Framework Ionic.

Pengenalan Pengenalan Struktur code project ionic

Pembahasan awal untuk memulai pembahasan tentang pengenalan Struktur code project ionic, terlebih dahulu berisi penjelasan tentang struktur project Ionic. Struktur project Ionic akan terbuat dengan sendirinya ketika kita berhasil Create project awal dan menambahkan platformnya. Dan pastikan juga ketika kita men create project koneksi internet stabil. Mau lebih gampang untuk pembuatan project ionic, gunakan tools Ionic Lab.

Baca :

Pembahasan awal untuk kita pahami adalah tentang pengenalan Struktur code project ionic, berikut gambaran nya:

Pengenalan Struktur code project ionic pada Android
Pengenalan Struktur Code Project Ionic

Bahagian dalam folder www

Pengenalan Struktur code project ionic pada Android
pengenalan Struktur code project ionic

Keterangan:

  • Pengenalan bower.json

Dalam pengenalan Struktur code project ionic, terdapat file Bower, adalah pengelola paket web. Bower membantu anda untuk mengatur dependensi; file yang dibutuhkan untuk proyek anda. bower.json, file memiliki peran sentral di dalam linkup Bower. Sebelumnya, file ini diberi nama component.json, tapi kemudian diubah menjadi bower.json agar tidak terjadi konflik dengan alat lain yang menggunakan nama file yang sama. bower.json membantu Bower memahami proyek anda; Bower merekam meta data seperti nama proyek, versi, pencipta, ijin, dependensi, dan lain-lain. Informasi ini tersusun di dalam format JSON yang secara khusus nampak seperti di bawah ini:

{
  "name": "HelloIonic",
  "private": "true",
  "devDependencies": {
    "ionic": "driftyco/ionic-bower#1.2.4"
  }
}

Dari file JSON di atas, kita dapat menyimpulkan bahwa proyek ini bernama “HelloIonic”, saat ini versi “1.2.4”, sejumlah detail lain, dan beberapa dependensi yang harus ada agar proyek dapat berjalan.

  • Pengenalan config.xml

Demikian halnya dalam pemahaman pengenalan Struktur code project ionic, juga terdapat File config.xml, file ini akan tercipta sendiri ketika kita buat project ionic. onic framework memiliki sebuah file config.xml yang menjadi pusat pengaturan aplikasi yang dihasilkan. Di file inilah kita menentukan kedua nilai parameter tersebut.

<widget id="com.ionicframework.apppertama859922" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">

Dari contoh di atas, kita telah mendefinisikan version dan version code untuk apk nantinya. Kita tinggal mengeksekusi perintah ionic build android atau ionic run android  untuk menghasilkan sebuah file .apk.

  • Pengenalan file package.json

Dari sumber bacaan yang saya baca tentang pengenalan Struktur code project ionic, file ini berguna untuk mengelola plugin Anda dengan versi serta cara untuk me-reset pengaturan cordova project. Berisikan versi cordova dan plugin yang digunakan, Berikut script nya :

{
  "name": "app_pertama",
  "version": "1.1.1",
  "description": "APP_pertama: An Ionic project",
  "dependencies": {
    "gulp": "^3.5.6",
    "gulp-sass": "^2.0.4",
    "gulp-concat": "^2.2.0",
    "gulp-minify-css": "^0.3.0",
    "gulp-rename": "^1.2.0"
  },
  "devDependencies": {
    "bower": "^1.3.3",
    "gulp-util": "^2.2.14",
    "shelljs": "^0.3.0"
  },
  "cordovaPlugins": [
    "cordova-plugin-device",
    "cordova-plugin-console",
    "cordova-plugin-whitelist",
    "cordova-plugin-splashscreen",
    "cordova-plugin-statusbar",
    "ionic-plugin-keyboard"
  ],
  "cordovaPlatforms": [
    "android"
  ]
}

  • Pengenalan file index.html

Selanjutnya tentang pengenalan Struktur code project ionic, terdapat File index.html yang terletak dalam folder “www”, type file .html. Seperti file html lainnya, berisikan tentang script untuk halaman awal aplikasi. Namun, ada juga penggunaan dan pemakaian Framework AngularJS. File ini juga bisa kita modifikasi tergantung kebutuhan tampilan aplikasi. Berikut script nya :

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <title></title>

    <link href="lib/ionic/css/ionic.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">

    <!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
    <link href="css/ionic.app.css" rel="stylesheet">
    -->

    <!-- ionic/angularjs js -->
    <script src="lib/ionic/js/ionic.bundle.js"></script>

    <!-- cordova script (this will be a 404 during development) -->
    <script src="cordova.js"></script>

    <!-- your app's js -->
    <script src="js/app.js"></script>
  </head>
  <body ng-app="starter">
    <ion-pane>
      <ion-header-bar class="bar-stable">
<h1 class="title">Ionic Blank Starter</h1>
      </ion-header-bar>
      <ion-content>
      </ion-content>
    </ion-pane>
  </body>
</html>

Penjelasan :

Sekilas akan saya jelaskan pemahaman tentang Script awal index.html.

 <link href="lib/ionic/css/ionic.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet"> 

Ket : Kedua kode diatas adalah tag HTML untuk memanggil file ccs yang ada dalam project IONIC, ini akan langsung ada pada saat anda mginstall project

<!-- ionic/angularjs js -->
    <script src="lib/ionic/js/ionic.bundle.js"></script>
    <!-- cordova script (this will be a 404 during development) -->
    <script src="cordova.js"></script>
    <!-- your app's js -->
    <script src="js/app.js"></script>

Ket : kode diatas adalah tag HTML untuk memanggil file javascript (dalam IONIC menggunakan angularJS) yang ada dalam project IONIC, dan untuk memanggil javascript, nah pada file app.js ini kita akan membuat routing dari aplikasi kita. routing Bisa dikatakan sebagai pengatur alur dari aplikasi kita. ini akan langsung ada pada saat anda mginstall project.

  <body ng-app="starter">
    <ion-pane>
      <ion-header-bar class="bar-stable">
<h1 class="title">Ionic Blank Starter</h1>
      </ion-header-bar>
      <ion-content>
      </ion-content>
    </ion-pane>
  </body>

Ket : pada tag body tertulis kode ng-app=”starter”, kode tersebut adalah kode untuk memanggil nama dari angularJs kode “starter” ini berada pada file app.js.

  • Pengenalan file app.js

Seperti kita bahas sebelumnya yang berkenaan dengan pengenalan Struktur code project ionic, file app.js merupakan file javascript, akan coba kita bahas sekilas tentang struktur kode nya :

angular.module('starter', ['ionic'])
.run(function($ionicPlatform) {
  $ionicPlatform.ready(function() {
    if(window.cordova && window.cordova.plugins.Keyboard) {
      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
      cordova.plugins.Keyboard.disableScroll(true);
    }
    if(window.StatusBar) {
      StatusBar.styleDefault();
    }
  });
})

Berikut Sekilas Penjelasan tentang Kode nya :

angular.module('starter', ['ionic'])

ket : Baris kode diatas adalah untuk mendefinisikan controller, services dan hal lainnya yang berhubungan dengan aplikasi. Pendefinisian diatas wajib dilakukan karena apabila tidak didefinisikan akan terjadi error. Pendefinisian diatas ditampung dalam sebuat variabel array yang bernama “starter”. variabel “starter” ini akan dipanggil di halaman index.html yakni pada tag <body ng-app=”starter”>

.run(function($ionicPlatform) {
  $ionicPlatform.ready(function() {
    if(window.cordova && window.cordova.plugins.Keyboard) {
      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
      cordova.plugins.Keyboard.disableScroll(true);
    }
    if(window.StatusBar) {
      StatusBar.styleDefault();
    }
  });
})

ket : Belum bisa saya jelaskan dengan setail tentang kegunaan kode ini. Namun sekilas kita baca dan pahami ini berkenaan dengan plugin yang digunakan dalam project.

Note :

  • Source code app.js yang saya jelaskan tersebut terdapat dalam file “www/js”. Saya pilihan template waktu pembuatan aplikasi adalah “blank”. Jika anda memilih pilihan “tabs”,”sidemenu” atau “maps” mungkin akan ada file lain nya dan berbeda. Kapan-kapan akan kita bahas mengenai hal tersebut.

Kesimpulan Pengenalan Struktur code project ionic

  • Langkah berikutnya setelah kita memahami tentang pembuatan project ionic adalah degan mengetahui struktur code nya
  • Ionic menggunakan bahasa HTML, CSS dan JavaScript serta AngularJS.
  • Ionic juga menggunakan cordova untuk mengcompile project
  • File index.html merupakan file halaman utama aplikasi dan bisa dimodifikasi sesuai kebutuhan project

Demikian, semoga bermanfaat tentang pengenalan Struktur code project ionic.

Facebook Comments

Ridwan, SST

Seorang Tenaga Pengajar Yang Kebetulan Suka Menulis Dan Membuat Tulisan Melalui Blog Web. CP : 0852 7747 2958 E-mail : awanpijay@rocketmail.com

More Posts - Website

Follow Me:
TwitterFacebookYouTube

Ridwan, SST

Seorang Tenaga Pengajar Yang Kebetulan Suka Menulis Dan Membuat Tulisan Melalui Blog Web. CP : 0852 7747 2958 E-mail : awanpijay@rocketmail.com