อบรม Core Angular 7 and Firebase
วันที่เขียน 6/3/2562 14:27:41     แก้ไขล่าสุดเมื่อ 10/8/2565 14:55:58
เปิดอ่าน: 3771 ครั้ง

นำเสนอรายงานสรุปเนื้อหาและการนำไปใช้ประโยชน์ จากการเข้าร่วมฝึกอบรมผ่านระบบอินเตอร์เน็ต บริษัท โค้ดโมบายส์ จำกัด (CodeMobiles Co.,Ltd. : www.codemobile.com) ในหัวข้อเรื่อง “Core Angular7 and Firebase” ในระหว่างวันที่ 14 มกราคม 2562-14 กุมภาพันธ์ 2562 ตามบันทึกข้อความเลขที่ ศธ 0523.4.8/6 ลงวันที่ 4 มกราคม 2562

การเข้าร่วมฝึกอบรมผ่านระบบอินเตอร์เน็ต บริษัท โค้ดโมบายส์ จำกัด (CodeMobiles Co.,Ltd. : www.codemobile.com)  ในหัวข้อเรื่อง “Core Angular7 and Firebase”  ในระหว่างวันที่ 14 มกราคม 2562-14 กุมภาพันธ์ 2562  โดยมีเนื้อหาความรู้และหัวข้อการฝึกอบรมหลักดังนี้

-        Angular Tutorial  ได้เรียนรู้เกี่ยวกับพื้นฐานการติดตั้งใช้งาน installation , component , binding , event , Router-Basic & Passing Parameters , Router-CanActivate and CanDeActivate , Pipe-Custom , Service , HTTP-Client , Angular Form , Assets-Folder-Bundling Files และ How to upgrade Angular/CLI

-        API List : Angular update and remove from library  https://angular.io/api    

-        Firebase Database

-        Firebase Storage

                   Angular เป็น framework ที่สามารถทำให้เราเขียนโปรแกรมที่มีการทำงานเชิงไดนานามิกง่ายขึ้น และสามารถจัดการทำงานเป็นทีมได้ง่าย เนื่องจากมีการจัดการแบ่งหมวดหมู่โมดูลต่างๆ ได้อย่างชัดเชน และมีการแบ่งส่วนต่างๆ ได้ จัดการแก้ไขได้ง่ายขึ้น ช่วงแรก ๆ Angular ถือว่า High Learning Curve ค่อนข้างสูง แต่ถ้าหากเขียนได้แล้วจะสามารถนำไปทำต่อได้อย่างง่ายดาย  โดยเฉพาะการต่อยอดพัฒนาในฝั่งการพัฒนาแอพ Native App ด้วย คือสามารถทำโค้ดฝั่ง angular build ไปเป็นโค้ด ฝั่ง native app ก็จะใช้เวลาไม่มากนัก  เป็นสิ่งสำคัญยิ่งที่เราควรเรียน Angular เพราะมีความสามารถในการไปต่อยอดได้อีกมากมาย และทำงานได้เร็วเหมือนกับการทำงานของ mobile app  ตัวอย่างเช่น การทำงานร่วมกับทางฝั่งของ ionicframework และ nativescript

                    AngularJS เป็น Single Page Application Framework เป็น open source JavaScript framework ในการสร้าง web applications ในรูปแบบ HTML และ JavaScript โดยถูกสร้างขึ้นมาสนับสนุนการทำงานบนมือถือเป็นรายแรกซึ่ง Angular7 เป็น updated version ล่าสุด แต่ไม่ท้ายสุด ความหมายคือ Angular ยังคงมีการพัฒนาและ update version ไปอย่างต่อเนื่อง ในตัว Angular และ Typescript พัฒนาให้มีความสามารถโดยการนำหลักการ object oriented web development มาใช้ได้อย่างแท้จริง โดยรูปแบบการเขียนจะคล้ายคลึงกับ Java 8 

                     ซึ่งคำว่า single page web คือความสามารถในการ hide or show ได้โดยไม่พบการ reload ใดๆ เกิดขึ้น ในหน้าเว็บเบราเซอร์  หากต้องการทำหลายๆ หน้าก็ต้องทำหลาย ๆ angular project   และ angular ถูกสนับสนุน (Supported) โดย Google  มีการ integrated อย่างดีกับ NodeJS  และ Angular ถือเป็นตัวที่โดดเด่นมาก ดังนั้น  Angular จึงมี 3rd party libraries เพียบ  จึงเด่นกว่าชาวบ้าน เด่นกว่า React  และ Vue  การทำงานร่วมกับ backend ก็สามารถทำงาน provide ร่วมได้  เพราะ angular เน้นในการแต่ง script ฝั่งหน้าบ้าน (front-end) สามารถใช้ร่วมก้บ backend กับภาษาใดก็ได้ที่ที่สามารถ provide ข้อมูลทางหลังบ้านให้ไม่ว่าจะเป็น java , .net ได้หมดเลย ดังนั้น angular จึงถูกเรียกใช้หลายๆ แทบทุกโปรเจคในปัจจุบัน

Firebase เป็น BaaS/Remote Database Management ที่ถูกพัฒนาโดย SF-based Google subsidiary, Real-time synchronized cloud database และนับว่าเป็น NoSQL ตัวที่ได้รับความนิยมและประสบความสำเร็จตัวหนึ่งในปัจจุบัน Firebase คือ Project ที่ถูกออกแบบมาให้เป็น API และ Cloud Storage สำหรับพัฒนา Real-time Application ที่สามารถรองรับหลาย Platform ทั้ง IOS App, Android App, Web App

ตัวอย่างการทำ Workshop สร้าง Angular ทำงานร่วมกับ Firebase

 1. สร้างโครงการใน firebase  https://firebase.google.com/

2. หลังจากสร้างโปรเจค Angular ขึ้นมาใหม่ ด้วยคำสั่ง ng new angular-firebase  จากนั้นติดตั้งการใช้งาน Firebase Library  ด้วยคำสั่ง npm install angular-firebase –save  และ npm install angularfire2 firebase –save

3.นำค่า config จาก Firebase มากำหนดใน environment.ts  ไฟล์ environment.ts เป็นไฟล์สำหรับการกำหนดค่า development  โดยกำหนดค่า dictionary  ต่าง ๆ ที่เราใช้งานเข้ามาจาก firebase 

<style>
td{ vertical-align: middle !important;}
</style>
<div class="container">
<div style="text-align:center">
<br>
<h1>
Angular + Firebase Database TEST-App
</h1>
</div>
<form role="form">
<legend>Course Enrollment</legend>
<!-- Firstname -->
<div class="form-group">
<label for="firstname">Firstname</label>
<input name="firstname" [(ngModel)]="student.firstname" type="text" class="form-control" id="firstname" placeholder="First Name">
</div>
<button (click)="onClickSubmit()" class="btn btn-primary pull-right">Submit</button>
</form>
<br>
<br>
</div>
<!-- Lastname -->
<div class="form-group">
<label for="lastname">Lastname</label>
<input name="lastname" [(ngModel)]="student.lastname" type="text" class="form-control" id="lastname" placeholder="Last Name">
</div>
<!-- Email -->
<div class="form-group">
<label for="email">Email</label>
<input name="email" [(ngModel)]="student.email" type="email" class="form-control" id="email" placeholder="Email">
</div>
<!-- Course -->
<div class="form-group">
<label for="course">Course</label>
<input name="course" [(ngModel)]="student.course" type="text" class="form-control" id="course" placeholder="Course">
</div>
<button (click)="onClickSubmit()" class="btn btn-primary pull-right"> Submit</button>
</form> <br>  <br> </div>
<table class="table table-striped table-bordered">
<thead>
<tr>
<th>No#</th>
<th>Image</th>
<th>Fistname</th>
<th>Lastname</th>
<th>Email</th>
<th>Course</th>
<th>Date-Time</th>
<th>Payment</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let item of items | async; let i = index;">
<td>{{i+1}}</td>
<td><img src="{{item.payload.val().imageUrl}}" height="50px"></td>
<td>{{item.payload.val().firstname}}</td>
<td>{{item.payload.val().lastname}}</td>
<td>{{item.payload.val().email}}</td>
<td>{{item.payload.val().course}}</td>
<td>{{item.payload.val().timestamp | date: 'dd/MM/yyyy - HH:mm'}}</td>
<td>{{item.payload.val().payment}}</td>
<td style="text-align: center">
<button (click)="onClickDelete(item)" type="button" class="btn btn-danger">DEL</button>
<button (click)="onClickPayment(item)" type="button" class="btn btn-success">PAY</button>
</td>
</tr>
</tbody>
</table>


4. แทรกโค้ดหน้า index.html
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>AngularFirebaseStudent</title>
  <base href="/">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
 
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <app-root></app-root>
</body>
</html>


5. กำหนด app.module.ts และการ config firebase
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AngularFireModule } from 'angularfire2';
import { AngularFireDatabaseModule } from 'angularfire2/database'
import { FormsModule } from '@angular/forms'
import { AppComponent } from './app.component';
import { environment } from '../environments/environment';

import { AngularFirestoreModule } from 'angularfire2/firestore';
import { AngularFireAuthModule } from 'angularfire2/auth';
import { AngularFireStorageModule } from 'angularfire2/storage';

@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
AngularFireModule.initializeApp(environment.firebase),
AngularFireDatabaseModule,
FormsModule,
AngularFirestoreModule,
AngularFireAuthModule,
AngularFireStorageModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

6. กำหนดการทำงาน app.component.ts

import { Component } from '@angular/core';
import { AngularFireDatabase } from 'angularfire2/database';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';
import { AngularFireStorage, AngularFireUploadTask } from 'angularfire2/storage';
import { tap } from 'rxjs/operators';
 
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
  items:Observable<any[]>;
  student:Student = new Student();

constructor(private db:AngularFireDatabase){
//สร้างการทำงานให้สามารถฟีตแสดงผลข้อมูลออกมา
   this.items = this.db.list('/customers').snapshotChanges(); 
}
onClickSubmit(){
//สร้างโน๊ตใหม่ชื่อ customers ในกรณีที่ยังไม่มีสร้างใน db
let ref = this.db.list('/customers')
ref.push(this.student); //คือการโยนค่า student ใส่ลงไปทั้งก้อน
}
onClickDelete(item){
console.log("key:" + JSON.stringify(item));
let itemRef = this.db.list('customers');
itemRef.remove(item.key);
}
onClickPayment(item){
let itemRef = this.db.list('customers');
itemRef.update(item.key, {payment: 'Paid'})
}
}
class Student{
firstname = "";
lastname = "";
email = "";
course = "";
imageName = "";
imageUrl = "";
payment = "Waiting";
timestamp = Date.now();
}

จากโค้ดการทำงานข้างต้นจะได้ผลลัพธ์การทำงานดังนี้


ใน Angular 7 นี้สิ่งที่ต้องศึกษาเพิ่มเติมคือ เรื่องของการประกาศยกเลิก Libary ใน API หลายๆ ตัวได้ยกเลิกการใช้งานและมีการโยกย้ายไปอยู่ในหมวดอื่นๆ แทน ยกตัวอย่างเช่น การทำงานของ @angular/http  ได้มีการ  เลิกใช้แล้ว: การส่งออกทั้งหมดของจุดเริ่มต้นนี้เลิกใช้แล้ว  เลิกใช้ใน  @ angular / common / http  ซึ่งสามารถใช้งานได้ทาง HttpClientModule   ทั้งนี้สามารถ อ่านเพิ่มเติมได้ใน https://angular.io/api/http  และ https://angular.io/api/common/http/HttpClientModule

แนะนำข้อมูลศึกษาเพิ่มเติมที่น่าสนใจเกี่ยวกับ Angular

 
 

คำสำคัญ :
กลุ่มบทความ :
หมวดหมู่ :
แชร์ :
https://erp.mju.ac.th/acticleDetail.aspx?qid=930
ความคิดเห็นทั้งหมด (0)
ไม่มีข้อมูลตามเงื่อนไขที่ท่านกำหนด
รายการบทความการแลกเปลี่ยนเรียนรู้หมวดหมู่ : วิทยาศาสตร์ เทคโนโลยี
อ. มธุรส ชัยหาญ » การอบรมเชิงปฏิบัติติการ เรื่องเครือข่ายนักวิจัย เพื่อเตรียมความพร้อมเป็นศูนย์ประสานงานเครือข่ายการจับคู่ธุรกิจอาหารนวัตกรรม ภาคเหนือ
สำนักงานคณะกรรมการอาหารและยาได้อนุมัติให้กองอาหาร จัดทำโครงการศูนย์จับคู่ธุรกิจอาหารนวัตกรรม (Innovative Food Matching Center) เพื่อส่งเสริมให้ผลงานวิจัยด้านการแปรรูปมีความพร้อมสู่การผลิตเชิงพาณิชย...
นวัตกรรมอาหาร, กฎหมายอาหาร, อาหารใหม่, ประเภทอาหาร, อย.     บทความการแลกเปลี่ยนเรียนรู้ทั่วไป   วิทยาศาสตร์ เทคโนโลยี
ผู้เขียน มธุรส ชัยหาญ  วันที่เขียน 1/3/2565 11:22:29  แก้ไขล่าสุดเมื่อ 10/8/2565 0:17:04   เปิดอ่าน 492  ครั้ง | แสดงความคิดเห็น 0  ครั้ง