Angular8 + Firebase Real-Time Database


เมื่อวันที่ 27 มิถุนายน พ.ศ. 2562 ผู้เขียนได้มีโอากาสเข้าร่วม Workshop เรื่อง Angular8 + Firebase Real-Time Database โดย ผศ.วิชาญ ทุมทอง มหาวิทยาลัยราชภัฏร าไพพรรณี ให้เกียรติมาเป็นวิทยากร และสามารถถ่ายทอดความรู้ได้อย่างชัดเจน และเข้าใจง่าย

Angular 8

Angular เป็น Frontend/Client side JavaScript Framework ที่พัฒนาโดย Google อีกทั้งยังเป็น Open Source ที่มี Community ขนาดใหญ่ในการค้นหาข้อมูลเพื่อใช้ในการพัฒนาเว็บไซต์ ซึ่งมีการทำงานด้วยรูปแบบ MVC (Model, View, Controller) และยังพัฒนาด้วยรูปแบบ JavaScript/TypeScript ที่มีประสิทธิภาพและความรวดเร็วของเว็บไซต์ ซึ่งเจ้า Angular พัฒนาเพื่อให้สามารถรองรับในรูปแบบ Cross Platform กล่าวคือ สามารถรองรับหน้าจอทั้งโทรศัพท์มือถือ,Tablet, Notebook, Computer

Framework ที่ใช้พัฒนาเว็บไซต์นอกจาก Angular แล้วยังมี Framework รูปแบบอื่นๆที่ใช้ในการพัฒนาเว็บไซต์อย่างมีประสิทธิภาพเช่น React, Aurelia และ Vue ซึ่งการเขียนเว็บไซต์ จำเป็นต้องมีความรู้พื้นฐานภาษา Html, CSS, Saas, Less ในการขึ้นโครงหน้าเว็บไซต์ นอกจากนี้ยังจำเป็นต้องมีพื้นฐานภาษา Javascript, Programming Fundamentals อาทิเช่น Functions, Conditions และ Loops เพื่อใช้ในการควบคุมหน้าต่างๆให้สามารถทำงานในส่วนที่เราต้องการได้

การจะใช้งาน Angular จำเป็นต้อง Install โปรแกรมก่อนและยังต้องสร้าง Environment ให้กับตัวโปรแกรมในการทำงานอีกด้วย

ขั้นแรกวิทยากรให้ทำการติดตั้ง Xampp เพื่อเป็นฐานข้อมูลก่อนหลังจากนั้นติดตั้ง Visual Studio Code เพื่อใช้ในการเขียนโปรแกรม

ขั้นที่สองทำการดาวน์โหลดและติดตั้ง node js เพื่อเป็น Environment ในการใช้งานเจ้าตัว Angular หลังจากทำการติดตั้งเสร็จในการเปิดใช้งานจำเป็นต้องเช็ค Version ก่อน โดยการเข้าไปพิมพ์คำสั่งใน Command โดยพิมพ์ node -v และ ng version เพื่อทำการเช็ค เมื่อทำการเช็คเสร็จ

ขั้นที่สามวิทยากร ได้ทำการบอกให้ติดตั้ง Extension หรือส่วนเสริมของโปรแกรม VScode ได้แก่ vscode-icons ซึ่งทำให้ icon Folder เปลี่ยนรูปตามโปรแกรมที่ใช้งานทำให้ง่ายต่อ Developer, Angular 8 Snippets และ angular2-switcher และอย่าลืมทำการติดตั้ง Angular CLI (Command Line Interface) โดยการพิมพ์คำสั่งผ่าน Command line ว่า npm install -g @angular/cli

ขั้นที่สี่ หลังจากนั้นทำการสร้าง Folder ในการเขียน Angular โดย สร้าง Path file พิมพ์ใน cmd ว่า ng new … ชื่อ Folder โปรแกรมที่ต้องการ (cd ใช้ในการ Change Directory) ทำการเลือก Path ของ Folder โปรแกรม โดยพิมพ์ว่า ng serve –open

วิทยากรได้สอน Basic ของ Angular ตั้งแต่ Import , การสร้าง Class, Router Navigate, Header, Footer, Forms, Services, Modules, URL Parameters ว่าแต่ละส่วนทำงานยังไง ต้องแก้ไขส่วนไหนในการทำให้เกิดหน้าเว็บไซต์

28/06/62

Firebase

Require

Composer + Xampp (mysql) + phpmyadmin 7.1+

Firebase คือ Platform หรือ Project ที่ใช้ในการจัดการกับ Backend หรือ Server ซึ่งมีประสิทธิภาพอย่างมาก สามารถเป็นได้ทั้ง Database ประเภท NoSQL ซึ่งเป็นแบบ Realtime Database อีกด้วยนับว่าเป็นข้อดีอย่างมากเลยทีเดียว

ติดตั้ง Laravel Framework เป็น framework ของ php

Laravel เป็น framework อีกตัวนึงที่ใช้ในการออกแบบพัฒนา Web ในรูปแบบ MVC (Model, Views, Controller) ที่มีประสิทธิภาพอีกตัวนึงโดยผู้พัฒนาคือ นาย Taylor Otwell ภายใต้ลิขสิทธิ์ของ MIT และ Source Code ได้ถูกเก็บไว้บน Host ของ Github

พิมพ์ command เพื่อทำการสร้าง Laravel Project
composer create-project –prefer-dist laravel/Laravel … ตามด้วยชื่อ App folder
config ค่าที่ไฟล์ .env
DB_DATABASE=wunca

DB_USERNAME=root

DB_PASSWORD=

ใช้ Controller กับ Model ในการเรียก API
พิมพ์คำสั่ง เพื่อเตรียมข้อมูลสำหรับ api
php artisan make:model category
app > category.php

ทำการเขื่อมต่อ DB
ไปที่ routes > api.php

สร้างช่องทางให้ user เข้ามาดึงข้อมูล

$data=App\category::all();

ส่วนที่ใช้ในการ Query all(); = SELECT *

ทำการ Download JSON Viewer Extension เพื่อให้ง่ายต่อการอ่านใน Google Chrome

php artisan make:middleware Cors

จำเป็นต้องเปิด CORS (Cross Origin Resource Sharing) ทำให้สามารถเข้าถึงข้อมูลจาก Domain อื่นได้

เพิ่ม \App\Http\Middleware\Cors::class ใน Kernel api

ใช้ Electron Build App ในการ Build Application

หรือใช้ Native Build App ในการ Build Application ก็ได้

ทั้งนี้ทั้งนั้น กราบขอบพระคุณวิทยากรที่ให้ความรู้ที่สามารถนำมาปรับใช้ในการทำงานได้ บล็อคที่ท่านได้อ่านนี้ เป็นเพียงข้อความที่ผู้เขียนได้เรียบเรียงขึ้นมาจากการฟังบรรยาย อาจมีบกพร่องหรือผิดพลาดประการใด กราบขออภัยมา ณ ที่นี้ด้วย

ขอบคุณน้าาาาา

(づ ̄ ³ ̄)づ~~♡


Mahidol University Library and Knowledge Center @ 2019