Skip to main content
Cara Jalankan project ionic

Cara Jalankan Project Ionic Melalui Server

Pendahuluan Cara Jalankan Project Ionic Melalui Server

Salam semuanya, topik pembahasan berikut tentang Cara Jalankan Project Ionic Melalui Server merupakan kelanjutan pembahasan sebelumnya yaitu cara buat project menggunakan Framework Ionic. Hal awal dalam pembuatan project pastikan dulu semua tools sudah diinstall pada komputer/Laptop anda. Sebagai review sekilas bahwa Framework Ionic memberikan kemudahan kepada pengembang aplikasi Mobile yang tidak memahami bahasa standart platform. Untuk mempelajari Cara Jalankan project ionic kita harus memahami bahasa pemrograman Web yaitu HTML5, CSS3 dan JavaScript.

Cara Jalankan project ionic Dan Topik Pembahasannnya :

  • Tambahkan Platform
  • Cara Jalankan Project Ionic di Server Browser
  • Mengedit Tampilan Project
  • Video Demo
  • Kesimpulan

Untuk Lebih jelas dan Terarah memahami pembahasan ini, baca kembali pembahasan sebelumnya tentang perkenalan awal framework Ionic.

Tambahkan Platform Project Ionic :

Sebelumnya pada pembahasan tentang pembuatan project awal Ionic, kita telah bisa membuat project sederhana. Project tersebut belum kita tambahkan platform nya. Artinya project nya harus ditentukan terlebih dahulu, akan dijalankan pada platform apa (Android atau IoS). Untuk Contoh kita akan tambahkan kedalam Platform Android. Berikut langkah nya :

– Buka CMD kemudian arahkan ke Directori Project nya, ketikkan perintah berikut dalam Command Line :

Note : Sesuaikan dengan letak dimana anda simpan project nya.

– Kemudian masukkan perintah berikut untuk penambahan platform : ionic platform add android

Cara Jalankan project ionic secara mudah
Cara Jalankan project ionic

– Setelah Selesai menambahkan Platform nya, coba kini kita buka Struktur Project nya,

Struktur project sebelum platform ditambahkan

project ionic
Jalankan Project

Struktur project setelah platform ditambahkan

project ionic
Cara run project

– Berikut Video Demo Cara Jalankan Project Ionic :

Cara Jalankan Project di Server Browser

Setelah penambahan Platform selesai dilakukan, Selanjutnya kita akan lihat hasil run projectnya. Untuk menjalankan project (run) bisa kita lakukan langsung tanpa menggunakan Emulator, namun lewat Browser. Berikut Cara Jalankan project ionic :

– Ketikkan Perintah Berikut di command line : ionic serve

– Kemudian langsung akan diarahkan ke Browser untuk menampilkan hasil run projectnya

– Berikut Video Demo Cara Jalankan Project Ionic :

Mengedit Tampilan Project

Setelah tahapan untuk menambahkan platform dan Cara Jalankan project ionic sudah selesai anda lakukan, Maka tahapan selanjutnya adalah kita ingin melakukan editan source codenya. Untuk melakukan edit code, bisa gunakan editor apapun. Kalau saya gunakan editor Notepad++. Langsung menuju ke File Struktur Projectnya, kemudian cari file : index.html . Terletak di : www

Ini tampilan Source Code defaultnya :


<!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 Kode :

– Source code yang penting terletak dibagian berikut :


 <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>

kode tersebut menggunakan Framework Angular.js. Penguasaan JavaScript juga sangat dibutuhkan Untuk pemahaman pengembangan project Ionic.

Cara Jalankan Project Ionic Melalui Server Beserta Kesimpulannya :

  • Untuk menambahkan platform dan run project aplikasi ionic dilakukn lewat perintah command line.
  • Pastikan koneksi internet jalan dan stabil
  • Selain melalui browser, kita juga bisa menjalankan project nya lewat emulator yang telah kita install.
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

  • edo

    mas ridwan kalo muncul enoent: no such file …. itu biasa’y kenapa ya

    • Bisa di Print Screen error nya,, Makasih.

      • edo

        ini mas kyk’y ada yg error waktu penginstalan

  • Bens Kiddie

    ada penjelasan yang kurang gan, setelah saya mengikuti dari instalasi ionic di windows ada yang kurang yaitu install cordova “npm install -g cordova” mohon untuk ditambahkan di tutorial. Terimakasih