API : Application Programming Interface คือ ช่องทางในการติดต่อ ระหว่าง Application กับ User
ต่อการทำ Stubby ครั้งที่แล้ว
เริ่มต้นเราจะ Create Project ขึ้นมาหนึ่ง Project ชื่อว่า r-books เพื่อที่จะไปต่อกับ Database ให้มาแสดงที่หน้าบ้าน หรือว่า FrontEnd
มาเริ่มกัน เปิด Terminal ขึ้นมา แล้วกรอกคำสั่งว่า
ls เพื่อดูเราอยู่ตรงไหน
cd projectName เข้าไปใน Project
การ Create Project Angular
เราจะสร้าง Project ชื่อว่า r-books ด้วยคำสั่ง ที่โฟลเดอร์ angular
ng new r-booksจะคำถามว่า ต้องการ จะเพิ่ม Angular routing ไหม ให้ตอบ y
เลือกเป็นรูปแบบที่ใช้ในการตกแต่ง css ดังนี้ และรอให้สร้างให้เสร็จ จะขึ้นข้อความว่า success ด้านล่างนี้
ลอง ls ดูว่ามี Project ที่เราสร้างจริงไหม; และ cd เข้าไปใน Project และเปิดเข้าไปใน Project ได้เลย ดังนี้
เมื่อเข้าไปใน Project แล้ว ให้กด [command + J] เพื่อเปิด Termanal และรันคำสั่ง [ng serve]
เมื่อรันเสร็จให้ไปที่ Port : http://localhost:4200/ จะได้ Project Angular ดังนี้
การ Run Database
ก่อนที่ไปต่อกับ database ให้เราไป start ก่อน
คำสั่งในการรัน java -jar stubby4j-6.0.2.jar -d test-stubby.yaml หรือ stubby -d test-stubby.yaml ถ้า Install stubby ลงไปแล้ว
ถ้ารันสำเร็จ จะได้ดังนี้ ที่ Terminal
ขั้นตอนการ Connect Database
ทีนี้เราจะเริ่มทำการต่อกับ Database ให้ไปที่ src > app > app.module.ts และ import HttpClientModule เข้ามา ดังนี้
ทีนี้ไปที่ไฟล์ app.component.html และลบโค้ดออกให้หมดเลยนะคะ
ก่อนอื่น เราต้องการไฟล์ Config ถ้าไม่อย่างงั้นเราจะไม่สามารถเรียก Database ได้ เพราะ มันอยู่ที่เดียวกัน เราจึงต้องทำการจำลองตัว Config ขึ้นมา ไม่เช่นนั้นจะ Error แดงเถือก
เราต้องการไฟล์ที่จะมาใช้ในการ Config ทั้งสองให้สามารถติดต่อกันได้ โดยสร้างไฟล์ชื่อ proxy.conf.json และกำหนด path ไว้ที่ข้างนอกสุดเลย ส่วนที่เป็น target คือที่อยู่ของ Database เราแต่ละคนก็จะไม่เหมือนกัน
เมื่อได้ไฟล์ config แล้วการรันของเราก็จะเปลี่ยนไปจากเดิม เราจะใช้คำสั่งนี้
ng serve --proxy-config proxy.conf.jsonทีนี้ไปที่ไฟล์ app.component.ts แก้ไขโค้ดดังนี้ โดยเราจะ implement OnInit และสร้าง constructor จะไม่เปลี่ยนแปลงบ่อย เป็นการเตรียมการ และ OnInit จะเปลี่ยนตามคำสั่งของเราทุกครั้ง เป็นขั้นตอนการทำ
นำ HttpClient มาใช้ โดยการบอกว่า private ชื่อตัวแปร ค่าเป็นอะไร ไว้ที่ constructor ดังนี้
ทีนี้เราจะเรียกดู Data ของเราออกมาดู ดังนี้
คือตอนนี้เรารันอยู่นะคะ และให้ไปที่ Browser > คลิกขวา Inspect > Console เราจะเป็นอยู่ 3 Object ดังนี้
เราสร้างตัวแปรมารับค่า ชื่อว่า data ให้มีค่าเป็น Book[]
เพราะเราได้ประกาศไว้ class ไว้ข้างบนแล้ว
กำหนดในส่วนของ OnInit ด้วยว่าให้ data เท่ากับ response
โค้ดทั้งหมดที่ไฟล์ app.component.ts จะได้ดังนี้
คือเราต้องการที่จะให้ Data ของเรานี้ มาแสดงที่หน้าบ้าน ให้ไปที่ไฟล์ app.component.html กัน เราจะใช้ *ngFor ในการวนลูป data ออกมา ดังนี้
และจะแต่งนิดๆ ให้ไปที่ไฟล์ app.component.css
เสร็จแล้วไปดูผลลัพธ์ที่ Browser กันเลย
ซึ่งตรงกับ Database ของเราที่มีอยู่ จากการทำ Stubby API
สรุปเรามี
ProjectAngular Name : r-books
Database จากการ stubby : Stubby > test-stubby.yamlเอาไว้เท่านี้ก่อนล่ะกัน บ๊ายยยย
