angular อ่านบัตรประชาชน

การอ่านบัตรประชาชนด้วย Angular สามารถทำได้โดยใช้ Angular CLI

ขั้นที่ 1: ติดตั้ง Angular CLI

หากยังไม่ได้ติดตั้ง Angular CLI ให้ทำตามขั้นตอนต่อไปนี้:

  1. ดาวน์โหลด Node.js จากเว็บไซต์ทางการ: https://nodejs.org/en/
  2. ติดตั้ง Node.js ตามคำแนะนำบนหน้าจอ
  3. ตรวจสอบว่า Node.js และ npm ได้รับการติดตั้งอย่างถูกต้องโดยเรียกใช้คำสั่งต่อไปนี้ในเทอร์มินัล:
1
2
node -v
npm -v

ขั้นที่ 2: สร้างแอปพลิเคชัน Angular

เมื่อติดตั้ง Angular CLI แล้ว คุณสามารถสร้างแอปพลิเคชัน Angular ใหม่ได้โดยใช้คำสั่งต่อไปนี้:

1
ng new my-app

คำสั่งนี้จะสร้างโฟลเดอร์ใหม่ชื่อ “my-app” ที่มีโครงสร้างพื้นฐานสำหรับแอปพลิเคชัน Angular

ขั้นที่ 3: เพิ่มโมดูลสำหรับอ่านบัตรประชาชน

ในการเพิ่มโมดูลสำหรับอ่านบัตรประชาชน ให้ทำตามขั้นตอนต่อไปนี้:

  1. สร้างโมดูลสำหรับอ่านบัตรประชาชนโดยใช้คำสั่งต่อไปนี้:
1
ng generate module card-reader
  1. นำเข้าโมดูลสำหรับอ่านบัตรประชาชนลงในโมดูลหลักโดยใช้คำสั่งต่อไปนี้:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
import { CardReaderModule } from './card-reader';

@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
CardReaderModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

ขั้นที่ 4: สร้างคอมโพเนนต์สำหรับอ่านบัตรประชาชน

ในการสร้างคอมโพเนนต์สำหรับอ่านบัตรประชาชน ให้ทำตามขั้นตอนต่อไปนี้:

  1. สร้างคอมโพเนนต์สำหรับอ่านบัตรประชาชนโดยใช้คำสั่งต่อไปนี้:
1
ng generate component card-reader
  1. นำเข้าโมดูลสำหรับอ่านบัตรประชาชนลงในคอมโพเนนต์โดยใช้คำสั่งต่อไปนี้:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
import { CardReaderModule } from './card-reader';

@Component({
selector: 'my-card-reader',
templateUrl: './card-reader.component.html',
styleUrls: ['./card-reader.component.css']
})
export class CardReaderComponent implements OnInit {

constructor(private cardReader: CardReaderService) {}

ngOnInit() {
this.cardReader.readCard().subscribe((data) => {
console.log(data);
});
}

}

ขั้นที่ 5: แก้ไขเทมเพลต HTML สำหรับคอมโพเนนต์อ่านบัตรประชาชน

ในการแก้ไขเทมเพลต HTML สำหรับคอมโพเนนต์อ่านบัตรประชาชน ให้ทำตามขั้นตอนต่อไปนี้:

  1. เปิดไฟล์ card-reader.component.html และแก้ไขเทมเพลต HTML ดังนี้:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<div class="card-reader">
<div class="card">
<img src="assets/images/card.png" alt="บัตรประชาชน">
</div>
<div class="data">
<h2>ข้อมูลบัตรประชาชน</h2>
<ul>
<li>เลขประจำตัวประชาชน: {{ data.id }}</li>
<li>ชื่อ: {{ data.name }}</li>
<li>นามสกุล: {{ data.surname }}</li>
<li>วันเดือนปีเกิด: {{ data.dob }}</li>
<li>สถานที่เกิด: {{ data.pob }}</li>
<li>เพศ: {{ data.sex }}</li>
<li>สัญชาติ: {{ data.nationality }}</li>
</ul>
</div>
</div>

ขั้นที่ 6: เรียกใช้แอปพลิเคชัน

เมื่อปรับแต่งแอปพลิเคชันของคุณแล้ว คุณสามารถเรียกใช้แอปพลิเคชันได้โดยใช้คำสั่งต่อไปนี้:

1
ng serve

คำสั่งนี้จะเริ่มต้นเซิร์ฟเวอร์การพัฒนาและเปิดแอปพลิเคชันของคุณในเบราว์เซอร์เริ่มต้น

ตัวอย่าง

ต่อไปนี้เป็นตัวอย่างการอ่านบัตรประชาชนด้วย Angular:

ติดตั้ง Angular CLI

npm install -g @angular/cli

สร้างแอปพลิเคชัน Angular

ng new my-app

เพิ่มโมดูลสำหรับอ่านบัตรประชาชน

ng generate module card-reader

นำเข้าโมดูลสำหรับอ่านบัตรประชาชนลงในโมดูลหลัก

import { CardReaderModule } from ‘./card-reader’;

@NgModule({
declarations: [
App