Bagaimana cara membuat aplikasi berbasis android dan iOS? Disini, saya akan mencoba menjelaskan tentang bagaimana membuat sebuah aplikasi berbasis android dan iOS. Projek membuat aplikasi yang akan saya jelaskan adalah membuat sebuah aplikasi absensi siswa di sekolah via device atau gadget masing-masing siswa. Dalam penjelasan terkait projek ini, saya akan membaginya dalam beberapa chapter atau berseri. Pada kesempatan kali ini, saya akan langsung mengajak anda untuk masuk dalam chapter pertama. Chapter ini berisi tentang bagaimana membuat sebuah file projek aplikasi android. Sebelumnya, jangan lupa bahwa anda telah menginstal node.js, cordova dan ionic versi ke-2 di Laptop atau pc anda, untuk anda memulai projek ini dalam membuat sebuah aplikasi android. Langsung saja, mari kita mulai.
Membuat file projek ionic 2 (embrio apk)
Untuk membuat sebuah apk yang nantinya akan digunakan untuk android dan iOS. Kita terlebih dahulu membuat sebuah file projek untuk membuat fitur-fitur apa saja yang akan terdapat dalam aplikasi tersebut nantinya. Nah untuk membuat file projek tersebut, langkah-langkah yang harus kita lakukan pertama ialah membuka command promt atau CMD. Klik start atau tekan icon bergambar bendera windows di keyboard anda, kemudian pada bagian search ketik CMD lalu enter, nanti akan terbuka jendela CMD atau command promt di layar laptop atau pc anda, tampilannya seperti berikut :
Jika anda ingin menyimpan file projek pada local disk D (misalnya), maka anda tinggal mengetikkan D: kemudian tekan enter. Kemudian anda tinggal memilih lokasi folder yang anda inginkan, untuk menentukan lokasi folder anda perlu mengetik cd kemudian nama folder yang anda inginkan menjadi lokasi penyimpanan file projek, misalnya “cd Tio”. Setelah menentukan lokasi penyimpanan, maka langkah selanjutnya adalah memulai untu membuat sebuah file projek. Masih dalam jendela command prompt atau CMD. Untuk memulai anda perlu mengetikkan :
Ionic start menu1 tabs –v2 atau
Ionic start menu1 sidemenu –v2 atau
Ionic start menu1 blank –v2
3 kode tersebut merupakan pilihan bagi anda untuk menentukan template dari aplikasi yang anda inginkan. Saya akan menjelaskan bagian-bagian dalam kode tersebut. “Ionic start” adalah sebuah pernyataan bahwa anda akan memulai membuat sebuah file projek. Sedangkan “menu1” merupakan nama file projek yang akan anda buat, nama ini bisa anda ubah sesuai dengan apa yang anda inginkan. Kemudian “tabs”, “sidemenu”, “blank” adalah pilihan jenis template yang mau anda gunakan dan yang terakhir “–v2” merupakan kode untuk penanda bahwa file projek yang akan anda buat adalah ionic versi ke-2. Berikut adalah gambaran dari jenis-jenis template :
a. Template tabs
b. Template sidemenu (menu samping)
Anda sudah bisa melihat dan mulai menganalisis perbedaan-perbedaan dari beberapa contoh template di atas dan anda bebas untuk memilih jenis template apa yang nantinya akan anda gunakan dalam membuat sebuah projek aplikasi android yang ingin anda buat. Tetapi, kembali lagi ke awal bahwa disini saya akan memaparkan kepada anda ke dalam sebuah projek saya dalam membuat aplikasi absensi siswa. Untuk itu, pada kesempatan kali ini pilihan template akan ditentukan sesuai keinginan dari saya. Saya akan menggukan jenis template sidemenu (menu samping). Maka saya akan membuat file projek dengan kode ionic start menu1 sidemenu –v2.
Setelah mengetik kode tersebut, lalu di enter. Kemudian tinggal tunggu proses untuk membuat file projek tersebut. Setelah proses selesai, maka sudah jadilah file projek yang ingin anda buat. Anda tinggal mengecek di lokasi anda menyimpang file projek tersebut. Langkah selanjutnya adalah tinggal mengubah, mengedit dari file-file yang ada untuk menjadikan aplikasi tersebut menjadi sebuah aplikasi seperti yang anda inginkan. Maka, dengan sudah terbuatnya file projek ini, penjelasan untuk chapter 1 cukup sampai disini. Untuk langkah selanjutnya, saya akan menjelaskan pada chapter yang ke-2. Terimakasih.
Bertemu lagi dengan saya, Tio Prasetyo dalam tulisan saya yang ke-2. Setelah sebelumnya pada chapter 1 saya membahas tentang bagaimana membuat sebuah file projek aplikasi yang berbasis android dan iOS. Pada chapter 2 ini saya akan membahas bagaimana cara membuat sebuah form login. Sebelumnya saya ingin mengingatkan kembali, bahwa tujuan dari tutorial ini adalah membuat sebuah aplikasi absensi siswa yang berbasis android dan iOS. Untuk itu perlu adanya sebuah akun atau id bagi untuk setiap user yang ingin menggunakan aplikasi ini nantinya. Dengan adanya id atau akun, maka perlu juga adanya sebuah form login agar user dapat membuat sebuah id atau akun pribadinya, serta masuk ke dalam id atau akun miliknya. Oke, langsung saja kita masuk dalam pembahasannya.
Membuat Page Login, Page Register dan Provider AuthService
Sebenarnya di dalam file projek aplikasi yang telah kita buat sebelumnya, seudah terdapat beberapa page bawaan dari ionic. Hanya saja untuk membuat sebuah form login lebih baik kita membuat sebuah page baru agar page yang sebelumnya telah tersedia hanya digunakan untuk isi konten dari aplikasinya saja. Kemudian, provider atuhservice disini dimaksudkan untuk mengatur jalannya sebuah sistem dari form login tersebut. Untuk membuat file page baru dan sebuah provider hamper tidak jauh berbeda. Langkahnya adalah, silahkan buka jendela command prompt atau CMD pada perangkat anda, tentukan lokasi atau directory nya sesuai lokasi tersimpannya file projek aplikasi yang telah kita buat sebelumnya. Kemudian ketikkan :
Ionic g page login
Ionic g page register
Ionic g provider atuhService
Ketikkan 3 kode diatas satu persatu. Ketik satu lalu tunggu prosesnya, kemudian baru
ketikkan kode selanjutnya sampai selesai. Kemudian jika sudah, buka file projek aplikasinya, didalam folder file projek aplikasinya akan terdapat folder src, apabila di klik akan terdapat folder provider yang isinya apabila dibuka adalah file authService. Dan terdapat pula folder pages, dimana isinya terdapat folder login dan register. Jika benar, maka proses menginput file dan folder baru tersebut telah berhasil. Nah, langsung saja kita eksekusi. Namun, file yang pertama kali akan kita edit bukanlah file baru tersebutm tetapi file app.module dan file app.component yang sebelumnya telah ada dari bawaan ionicnya. Dimanakah lokasi file tersebut? Silahkan anda buka file projek aplikasinya, kemudian klik src/app/app.module.ts. kemudian buka appmodule.ts di sublime text. Ubah script app.module.ts menjadi seperti ini :
import { NgModule } from '@angular/core';
import { IonicApp, IonicModule } from 'ionic-angular';
import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
import { LoginPage } from '../pages/login/login';
import { AuthService } from '../providers/auth-service';
import { RegisterPage } from '../pages/register/register';
@NgModule({
declarations: [
MyApp,
HomePage,
LoginPage,
RegisterPage
],
imports: [
IonicModule.forRoot(MyApp)
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
HomePage,
LoginPage,
RegisterPage
],
providers: [AuthService]
})
export class AppModule {}
|
Pada sricpt app.module.ts ini kita harus mengimport semua page yang ada di aplikasi kita dan mendeklarasikannya. Hal ini bertujuan agar page tersebut dapat di gunakan dan terbaca oleh program karena sudah dideklarasikan.
Kemudian setelah itu, buka file app.component di src/app/app.component ke sublime text. Edit kembali script file tersebut menjadi seperti dibawah ini :
import { Component } from '@angular/core';
import { Platform } from 'ionic-angular';
import { StatusBar } from 'ionic-native';
import { LoginPage } from '../pages/login/login';
@Component({
template: `<ion-nav [root]="rootPage"></ion-nav>`
})
export class MyApp {
rootPage = LoginPage;
constructor(platform: Platform) {
platform.ready().then(() => {
StatusBar.styleDefault();
});
}
}
|
Pada bagian ini, salah satunya adalah berfungsi untuk menentukan page mana yang akan terbuka ketika pertamakali program dijalankan. Maka dari itu, pada export class My App disitu dituliskan rootPage = loginPage. Hal ini agar ketika program file projek dijalankan, page yang pertamakali terbuka adalah page login.
Selanjutnya, kita masih harus mengedit file atau iscript lainnya lagi. File atau script yang harus kita ubah selanjutnya adalah authService. Buka file di src/provider/authService dan edit script menjadi seperti berikut :
import { Injectable } from '@angular/core';
import {Observable} from 'rxjs/Observable';
import 'rxjs/add/operator/map';
export class User {
name: string;
email: string;
constructor(name: string, email: string) {
this.name = name;
this.email = email;
}
}
@Injectable()
export class AuthService {
currentUser: User;
public login(credentials) {
if (credentials.email === null || credentials.password === null) {
return Observable.throw("Please insert credentials");
} else {
return Observable.create(observer => {
// At this point make a request to your backend to make a real check!
let access = (credentials.password === "pass" && credentials.email === "email");
this.currentUser = new User('Simon', 'saimon@devdactic.com');
observer.next(access);
observer.complete();
});
}
}
public register(credentials) {
if (credentials.email === null || credentials.password === null) {
return Observable.throw("Please insert credentials");
} else {
// At this point store the credentials to your backend!
return Observable.create(observer => {
observer.next(true);
observer.complete();
});
}
}
public getUserInfo() : User {
return this.currentUser;
}
public logout() {
return Observable.create(observer => {
this.currentUser = null;
observer.next(true);
observer.complete();
});
}
}
|
Pada script authService, kita mengatur untuk email dan password yang akan kita gunakan ketika login nantinya. Jadi sebagai syarat yang kita gunakan untuk mendapatkan akses ke aplikasi tersebut.
Setelah kita mengatur sistematis jalannya program, sekarang saatnya kita mengatur page loginnya sendiri. Dalam folder login page, terdapat 3 file. Nah ketiga-tiganya akan kita edit scriptnya untuk mendapatkan hasil yang menarik. Oke, untuk pertama, bukalah file login.ts di src/pages/login/login.ts pada sublime text. Kemudian ubah scriptnya menjadi seperti berikut :
import { Component } from '@angular/core';
import { NavController, AlertController, LoadingController, Loading } from 'ionic-angular';
import { AuthService } from '../../providers/auth-service';
import { RegisterPage } from '../register/register';
import { HomePage } from '../home/home';
@Component({
selector: 'page-login',
templateUrl: 'login.html'
})
export class LoginPage {
loading: Loading;
registerCredentials = {email: '', password: ''};
constructor(private nav: NavController, private auth: AuthService, private alertCtrl: AlertController, private loadingCtrl: LoadingController) {}
public createAccount() {
this.nav.push(RegisterPage);
}
public login() {
this.showLoading()
this.auth.login(this.registerCredentials).subscribe(allowed => {
if (allowed) {
setTimeout(() => {
this.loading.dismiss();
this.nav.setRoot(HomePage)
});
} else {
this.showError("Access Denied");
}
},
error => {
this.showError(error);
});
}
showLoading() {
this.loading = this.loadingCtrl.create({
content: 'Please wait...'
});
this.loading.present();
}
showError(text) {
setTimeout(() => {
this.loading.dismiss();
});
let alert = this.alertCtrl.create({
title: 'Fail',
subTitle: text,
buttons: ['OK']
});
alert.present(prompt);
}
}
|
Script di file login.ts ini adalah berisikan perintah yang nantinya menentukan fungsi-fungsi atau fitur apa saja yang kita sematkan dalam aplikasi ini terutama dalam page login. Kemudian untuk mengatur konten isi dalam page kita beralih ke file login.html. Buka file tersebut di src/pages/login/login.html pada sublime text, kemudian edit script file tersebut menjadi seperti berikut :
<ion-content class="login-content" padding>
<ion-row class="logo-row">
<ion-col></ion-col>
<ion-col width-67>
<img src="http://placehold.it/300x200"/>
</ion-col>
<ion-col></ion-col>
</ion-row>
<div class="login-box">
<form (ngSubmit)="login()" #registerForm="ngForm">
<ion-row>
<ion-col>
<ion-list inset>
<ion-item>
<ion-input type="text" placeholder="Email" name="email" [(ngModel)]="registerCredentials.email" required></ion-input>
</ion-item>
<ion-item>
<ion-input type="password" placeholder="Password" name="password" [(ngModel)]="registerCredentials.password" required></ion-input>
</ion-item>
</ion-list>
</ion-col>
</ion-row>
<ion-row>
<ion-col class="signup-col">
<button ion-button class="submit-btn" full type="submit" [disabled]="!registerForm.form.valid">Login</button>
<button ion-button class="register-btn" block clear (click)="createAccount()">Create New Account</button>
</ion-col>
</ion-row>
</form>
</div>
</ion-content>
|
Dengan mengedit script html, maka apabila kalian buka atau jalankan program ini page login sudah berisikan kata-kata atau komten lainnya seperti yang terdapat dalam script di atas. Selanjutnya untuk tahap terakhir, bagian file yang harus kita edit adalah file login.scss. buka file tersebut di src/pages/login/login.scss pada sublime text dan kemudian sedit script di dalamnya menjadi seperti berikut :
page-login {
.login-content {
background: #56CA96;
.logo-row {
padding-top: 50px;
padding-bottom: 20px;
}
.login-box {
background: #399F8B;
padding: 20px 20px 0px 20px;
margin-top: 30px;
}
ion-row {
align-items: center;
text-align: center;
}
ion-item {
border-radius: 30px !important;
padding-left: 30px !important;
font-size: 0.9em;
margin-bottom: 10px;
border: 1px solid #ffffff;
border-bottom: 0px !important;
box-shadow: none !important;
}
.signup-col {
margin: 0px 16px 0px 16px;
padding-bottom: 20px;
}
.item-inner {
border-bottom-color: #ffffff !important;
box-shadow: none !important;
}
.submit-btn {
background: #51CFB1;
border-radius: 30px !important;
border: 1px solid #ffffff;
}
.register-btn {
color: #ffffff;
font-size: 0.8em;
}
}
}
|
Pada bagian ini, script ini berfungsi untuk menentukan size huruf, background page, margin dan border yang telah kita sematkan di dalam isi konten page. Oke setelah kita mengedit semua file yang telah saya anjurkan, maka jangan lupa untuk mengesave nya. Setelah itu buka kembali command prompt atau CMD kemudian arahkan directory ke file projek kemudian ketikkan ionic serve –lab dan tunggu prosesnya. Jika proses berhasil dan telah selesai maka akan terbuka programnya di web browser yang kalian gunakan di perangkat anda. Maka, hasil dari mengedit script-script di atas adalah sebagai berikut :
Halo, berjumpa lagi dengan saya. Ini merupakan tulisan saya yang ke-3 yang membahas bagaimana cara membuat aplikasi berbasis android dan iOS, absensi siswa. Pada bagian atau chapter 1 dan 2 saya telah membahas bagaimana membuat sebuah file projek ionic 2 dan bagaimana cara membuat form login. Chapter 3 ini saya akan membahas bagaimana membuat sebuah button yang berfungsi untuk memindahkan dari page satu ke page lainnya dan juga membahas bagaimana cara membuat sebuah allertcontroller sebagai sebuah penringatan atau pemberitahuan. Oke tanpa harus basa-basi lagi, kita langsung saja masuk ke dalam pembahasan kita.
Membuat Button Fungsi
Bagaimana membuat penghubung antar page. Untuk membuat sebuah aplikasi pastinya kita perlu menggunakan lebih dari satu page. Entah itu digunakan untuk sebuah menu yang tidak mungkin di sematkan dalam satu halaman saja. Untuk itu perlu adanya fungsi yang menghubungkan antar page agar page-page tersebut saling terhubung. Biasanya untuk masalah tersebut, jawabannya adalah menggunakan fungsi button. Untuk membuat fungsi button. Langkah pertama adalah kita membuka file html dari page pertama (misalnya home page). Tambahkan code dalam script html tersebut seperti berikut :
<button ion-button button class= "….." (click)="…..()" icon-left>
<ion-icon name="….."></ion-icon>
…..
</button>
Untuk yang saya beri warna, meurpakan nama class dari button atau tombol yang akan kita buat. Sedangkan yang saya beri tanda warna kuning merupakan tanda atau kode untuk pemanggilan fungsi tersebut dari file typescript (.ts). untuk yang berwarna hijau itu merupakan kode dari icon yang akan kita tampilkan, misalnya kita mau menggunakan icon handphone dalam tombol yang kita buat, nah untuk menampilkannya tinggal mengubah yang saya beri tanda hijau tersebut dengan kode icon handphone. Untuk mengetahui kode-kode dan icon apa saja yang dapat kota gunakan, maka kalian bisa membuka https://ionicframework.com/docs/v2/ionicons. Kemudian untuk yang saya beri tanda warna biru itu untuk menamakan tombol yang akan kita buat. Jadi untuk semua yang saya beri warna, bisa kalian ubah-ubah sesuai dengan kebutuhan tombol yang akan kalian buat untuk projek aplikasi kalian nanti.
Oke, kita balik lagi ke tujuan kita untuk membuat sebuah aplikasi absensi siswa. Setelah kita membuat tampilan tombol yang akan kita buat pada file atau script html, maka sekarang saatnya kita membuat fungsi dari tombol tersebut. Untuk membuat fungsi dari tombol tersebut, maka kita harus mengubah script pada file typescriptnya (.ts). tambahkan code seperti ini pada file typescriptnya di bagian paling bawah dari script tersebut :
public …..() {
this.nav.setRoot(Page tujuan);
}
Nah, untuk yang saya beri tanda kuning adalah kunci untuk memanggil atau mengkoneksikan antara file typescript dengan file html. Warna kuning yang saya pilih karena ini haruslah sama dengan apa yang anda ketik di file html tadi dengan posisi atau letak yang saya beri tanda kuning pula. Kemudian langkah selanjutnya adalah menambahkan import baru pada script file (.ts) ini di bagian paling atas dari code lainnya. Seperti berikut :
import { ….. } from '../…../…..';
Baik, untuk yang saya beri tanda merah, itu berarti harus kalian isi dengan page tujuan anda. Seperti tujuan awalnnya, bahwa kita ingin membuat sebuah perpindahan dari page 2 ke page 2 atau page lainnya. Nah, untuk yang diberi tanda merah tersebut, isilah page tujuan yang anda inginkan apabila tombol di klik. Kemudian untuk yang saya beri tanda warna biru, itu adalah lokasi dari file page tujuan anda. Di folder manakah anda menaruh file dari page tujuan anada tersebut. Misalnya ada didalam folder page/login/login. Maka yang perlu di input hanyalah 2 lokasi bagian paling akhir saja yaitu login/login. Jadi nanti itu diisi sesuai dengan lokasi kalian dimana menyimpan file tersebut.
Membuat Allert controller
Untuk membuat alert controller itu sebenarnya tidaklah jauh berbeda dengan membuat sebuah button. Membuat allert controller diperlukan editing pada script html dan type script pula. Namun, apabila kita telah membuat button fungsi maka kita tidak perlu lagi mengedit file atau script htmlnya. Kita hanya perlu mengedit script dari typescriptnya saja, seperti berikut :
public …..() {let alert = this.alertCtrl.create({ title: 'Success', subTitle: 'Anda berhasil menginput absen', buttons: ['OK'] }); alert.present(); this.nav.setRoot(Page tujuan); }
No comments:
Post a Comment