Srsko senang sungguh nak buat apps kamera guna Ionic

Bukan mati senang – mungkin boleh terjemah sangat mudah atau piece a cake. Kita cuba buat apps yang utilize kamera pada phone.

Sebelum kita buat apps kamera, kepada yang tak biasa (beginner), sila rujuk setting asas dalam pembangunan Ionic pada Windows di sini
–>> http://fstm.kuis.edu.my/blog/ionic-pengenalan/

Katakan kita nak buat apps baru dalam Ionic, dalam PowerShell boleh taip arahan-arahan (CLI) berikut;

ionic start appkamera sidemenu

Pilih Angular dan tunggu selesai download Ionic project.

Sila rujuk langkah di sini untuk dapatkan kod seterusnya; https://ionicframework.com/docs/native/camera

ionic cordova plugin add cordova-plugin-cameranpm

install @ionic-native/camera

SESI KODING

Pada src/app/app.module.ts tambahkan hanya dua balis kod yang ditanda komen

		

		
			

			

			

			
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';

import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';

import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';

//add for camera ******************
import { Camera } from '@ionic-native/camera/ngx';//use camera

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [
    BrowserModule,
    IonicModule.forRoot(),
    AppRoutingModule
  ],
  providers: [
    StatusBar,
    Camera, //add for camera ******************
    SplashScreen,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}
			

				

					

				

					
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
				
						
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';
 
import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';
 
import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
 
//add for camera ******************
import { Camera } from '@ionic-native/camera/ngx';//use camera
 
@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [
    BrowserModule,
    IonicModule.forRoot(),
    AppRoutingModule
  ],
  providers: [
    StatusBar,
    Camera, //add for camera ******************
    SplashScreen,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}
					
				
			
		

Kemudian pada src/app/home/home.page.ts tambahkan kod berikut;

		

		
			

			

			

			
import { Component } from '@angular/core';
//to utilize camera
import { Camera, CameraOptions } from '@ionic-native/camera/ngx';//use camera
@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {

  //declarations
	nama:any;
	gambar:any;

  constructor(
  	public camera:Camera, //to utilize camera
  	) 
  {}

  ambilgambar(){
  	//code to shoot image camera
  	//copy from 
  	// https://ionicframework.com/docs/native/camera
  	const options: CameraOptions = {
	  quality: 100,
	  destinationType: this.camera.DestinationType.DATA_URL,
	  encodingType: this.camera.EncodingType.JPEG,
	  mediaType: this.camera.MediaType.PICTURE,
	  correctOrientation:true,
	  saveToPhotoAlbum:true
	}

	this.camera.getPicture(options).then((imageData) => {
	 // imageData is either a base64 encoded string or a file URI
	 // If it's base64 (DATA_URL):
	 this.gambar = 'data:image/jpeg;base64,' + imageData;
	}, (err) => {
	 // Handle error
	});
  }
}
			

				

					

				

					
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
				
						
import { Component } from '@angular/core';
//to utilize camera
import { Camera, CameraOptions } from '@ionic-native/camera/ngx';//use camera
@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {
 
  //declarations
	nama:any;
	gambar:any;
 
  constructor(
  	public camera:Camera, //to utilize camera
  	) 
  {}
 
  ambilgambar(){
  	//code to shoot image camera
  	//copy from 
  	// https://ionicframework.com/docs/native/camera
  	const options: CameraOptions = {
	  quality: 100,
	  destinationType: this.camera.DestinationType.DATA_URL,
	  encodingType: this.camera.EncodingType.JPEG,
	  mediaType: this.camera.MediaType.PICTURE,
	  correctOrientation:true,
	  saveToPhotoAlbum:true
	}
 
	this.camera.getPicture(options).then((imageData) => {
	 // imageData is either a base64 encoded string or a file URI
	 // If it's base64 (DATA_URL):
	 this.gambar = 'data:image/jpeg;base64,' + imageData;
	}, (err) => {
	 // Handle error
	});
  }
}
					
				
			
		

Setersnya pada antaramuka src/app/home/home.page.html tambahkan kod berikut ;

Home

		

		
			

			

			

			
<ion-header>
  <ion-toolbar color="primary">
    <ion-buttons slot="start">
      <ion-menu-button></ion-menu-button>
    </ion-buttons>
    <ion-title>
      Home
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>

  <ion-button (click)="ambilgambar()" color="warning"
        expand="block">
           <ion-icon name="camera"></ion-icon>
    </ion-button>
    
    <div *ngIf="gambar">
      <img src={{gambar}}>
    </div>

    
</ion-content>
			

				

					

				

					
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
				
						
<ion-header>
  <ion-toolbar color="primary">
    <ion-buttons slot="start">
      <ion-menu-button></ion-menu-button>
    </ion-buttons>
    <ion-title>
      Home
    </ion-title>
  </ion-toolbar>
</ion-header>
 
<ion-content>
 
  <ion-button (click)="ambilgambar()" color="warning"
        expand="block">
           <ion-icon name="camera"></ion-icon>
    </ion-button>
    
    <div *ngIf="gambar">
      <img src={{gambar}}>
    </div>
 
    
</ion-content>
					
				
			
		

Penulis adalah pensyarah di Jabatan Sains Komputer, FSTM KUIS. Khirulnizam telah menjadi pengajar/trainer Programming semenjak 1999. Bermula dengan C, Java, Visual Basic, PHP & MySQL. Sekarang lebih berminat dengan MVC framework (masa depan pengaturcaraan) seperti Android Studio, Bootstrap, Laravel, dan IONIC. Bermula 2020 beliau akan fokus dengan IONIC sebagai mobile frontend dan Laravel sebagai backend. Hubungi kami di fstm.wasap.my

https://github.com/khirulnizam/ionicfirebasecamera/tree/master/appkamera

		

		
			

			

			

			

			

				

					

				

					
1