Pada materi sebelumnya sudah dijelaskan tentang pengetian Ionic. Lalu bagaimana sih cara pembuatan aplikasi menggunakan ionic itu ? Sebelum itu tools atau aplikasi yang digunakan adalah appcamp.io. Pada appcamp.io dijelaskan dasar dasar pembuatan aplikasi menggunakan framework Ionic, tetapi pada materi ini akan dijelaskan lebih lanjut. Langsung saja simak langkah – langkah berikut.
Aplikasi Pertama – Hello World
Setelah membuat akun baru pada appcamp.io, untuk memulai belajar yang pertama – tama harus masuk ke menu The Basic terlebih dahulu, pada materi The Basic dijelaskan dasar – dasar pembuatannya. Pada sub materi Hello World diberikan sepotong kode seperti berikut dan tampilan pada handphone seperti berikut :
Kode div dengan class bar tersebut untuk memunculkan header bar pada layar aplikasi. Pada ionic menyediakan banyak pengaturan header bar. Apasaja itu ? pengaturan header bar pada ionic adalah seperti berikut :
1) Bar Light
<div class="bar bar-header bar-light">
</div>
Bar Light ini memiliki background putih dan border abu – abu berukuran 1px pada bagian bawah.
2) Bar Stable
<div class="bar bar-header bar-stable">
</div>
Bar Stable memiliki style classic, dengan warna abu – abu dan border pada bagian bawah.
3) Bar Positive
</div>
Bar Default pada Appcamp.io dengan background Biru.
4) Bar Calm
<div class="bar bar-header bar-calm">
</div>
5) Bar Balance
<div class="bar bar-header bar-balanced">
</div>
6) Bar Energizer
<div class="bar bar-header bar-energized">
</div>
7) Bar Assertive
<div class="bar bar-header bar-assertive">
</div>
8) Bar Royal
<div class="bar bar-header bar-royal">
</div>
9) Bar Dark
<div class="bar bar-header bar-dark">
</div>
Setelah menentukan style warna pada Header Bar, beri penamaan dulu pada header bar misalnya dengan nama aplikasinya. Pada materi akan saya beri contoh yaitu “Toko Roti”. Caranya yaitu menambahkan tag heading didalam tag div header bar tadi.
<div class="bar bar-header bar-dark">
<h1 class="title">Toko Roti</h1>
</div>
Tampilannya akan menjadi seperti berikut, jika menggunakan Kode diatas.
Setelah pembuatan header pada aplikasi selesai, langkah selajutnya adalah menambahkan sebuah div yang mempunyai class list, has-header dan padding. Class tersebut difungsikan untuk memudahkan dalam menampilkan sebuah list data. Didalam tag div isikan sebuah tulisan atau sebuah kalimat misalnya kalimat “Hello World saya sedang belajar Ionic”. Bisa juga menggunakan kata kata yang lain, sesuai kreatifitas masing-masing. Code nya seperti dibawah ini.
<div class="list has-header">
Toko Roti Menyediakan segala jenis roti kerng.
</div>
Tampilanya akan seperti ini.
Jika dilihat, tulisan yang berada pada tag div tadi tidak mempunyai jarak pada batas kiri halaman. Untuk membuat tulisan menjadi rapi maka harus ditambahkan class “padding ” pada tag div sebelumnya. Kode nya seperti dibahan ini :
<div class="list has-header padding">
Toko Roti Menyediakan segala jenis roti kering.
</div>
Tampilan akhir setelah diberi class padding.
Aplikasi pertama sudah selesai dibuat, sebelum melanjutkan ke tahap berikutnya, bila perlu copy kode yang sudah dibuat tadi pada file txt. Karena, jika sudah melanjutkan pada tahap berikutnya kode pada tahap sebelumnya akan kembali seperti semula. Untuk tahap berikutnya mengenai Tags.
Itu tadi penjelasan dari tutorial Appcamp.io tentang Dasar IONIC bagian Hello World. Semoga Bermanfaat da Terima kasih sudah mengunjungi blog ini.
- Jangan Lupa untuk Share -
Tidak ada komentar:
Posting Komentar