Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus,
luctus nec ullamcorper mattis, pulvinar dapibus leo.
โปรเจ็คนี้เป็นหน้า Dashboard สำหรับแอดมินไว้ตอบลูกค้าผ่านไลน์ Channel ของบริษัทที่ใช้ Firestore เป็นตัวกลางในการรับข้อความจากไลน์ แล้วส่งมาที่ระบบ พอแอดมินตอบข้อความกลับไปก็ทำการเก็บลง Firestore แล้วใช้ Clound Functions ส่งข้อความไปที่ไลน์อีกทีนึง เป็น React Project ที่ขึ้นด้วย Material UI
โปรเจ็คนี้เป็นไลฟ์แชทสำหรับแอดมินเอาไว้ตอบข้อความลูกค้าอีกเวอร์ชั่นนึงที่ไม่ใช้ไลน์ ผมลองทำเพื่อทำความเข้าใจการทำงานของ Firestore ซึ่งมันเข้ากับ React ได้ดีมากจริงๆ
Todo App สุดคลาสสิคของสายเว็บแอ็พครับ เชื่อว่าทุกคนต้องเคยฝึกทำกับ React, Vue หรือ Angular มาบ้าง ตัวนี้ผมทำเพื่อฝึกใช้งาน React
ก่อนอื่นก็เข้าไปในโฟลเดอร์ของโปรเจ็คที่ต้องการก่อน แล้วตามด้วยคำสั่งข้างล่างนี้
อันนี้เป็นโน้ตจากการที่ผมพยายามทำแชทให้แอดมินใช้ตอบลูกค้าครับ ที่อยากได้คือลิสรายชื่อที่เวลาเราเลื่อนลงมาลงสุดแล้วให้มันโหลดรายชื่อเพิ่มเหมือนของ Facebook นั่นแหละ ผมก็เลยค้นหาและลองจนใช้งานได้แล้วก็เอามาแปะไว้ในนี้ด้วย กันลืม เวลาจะใช้ครั้งต่อไปจะได้หาง่ายๆ
ตัวไลบรารี่อยู่บน Github ตามชื่อด้านล่างนี้เลย React Firebase Hooks – Realtime Database
อันนี้ผมถึงกับต้องจดเลยทีเดียว เพราะผมคิดว่ามันต้องใช้บ่อย และลองทำตามคลิปที่เค้าสอนแล้วมีปัญหา โค้ดในไฟล์ config ต้องเป็นแบบนี้ ส่วนการนำไปใช้งาน ต้อง import มันมาแบบนี้ แล้วก็ใช้งานในฟังก์ชั่นแบบนี้ ผมฝึกเขียน Toda App บ่อย ผมก็เลยมักจะใช้กับฟังก์ชัน addTodo นี่แหละ พวกคีที่ผมใส่ไว้ใน config ไม่ต้องห่วงหรอกว่ามันจะ connect ได้ ผมลบโปรเจ็คทิ้งไปแล้ว ผมทดลองทำดูเฉยๆ
ต้องออกตัวก่อนเลยว่าเหมาะสำหรับคนขี้เกียจมากกว่ามืออาชีพนะครับ ผมแค่อยากแชร์วิธีการขึ้นโปรเจ็คใหม่แบบคลีนๆ เริ่มตั้งแต่เซ็ต WordPress เลย แต่ผมจะไม่เขียนวิธีติดตั้งนะครับ ขอเริ่มตั้งแต่ติดตั้งเสร็จแล้วได้ธีมที่เราจะใช้มาเลยแล้วกัน อันนี้ผมเริ่มจาก Twenty Twenty One เลย ทำไมถึงเลือก Twenty Twenty One? เหตุผลหลักๆเลยคือมันเป็นธีมที่วางโครงสร้างที่จำเป็นมาแบบครบถ้วนแล้วนั่นแหละครับ ครบถ้วนยังไงบ้าง ในมุมมองของผมคือมันมี Sass มาให้ในตัว มี breakpoint สำหรับเช็คขนาดหน้าจอต่างๆมาให้เกือบครบครัน(ผมใช้คำว่าเกือบเพราะมันไม่ได้ใส่จอใหญ่ๆมาให้ ผมไปขโมยมาจาก
คำถามคลาสสิคเกี่ยวกับ CSS จริงๆ เวลาสัมภาษณ์งานเกี่ยวกับ Front-end มักจะโดนถามตลอด คงเพราะเค้าต้องการวัดความรู้พื้นฐานแหละ ผมคิดว่างั้น Visibility มีสองแบบก็คือ visible กับ hidden ง่ายก็คือซ่อนไว้กับแสดงนั่นแหละ ยกตัวอย่างเช่น ปุ่มนึงในหน้าเว็บ ถ้าซ่อนก็ใส่ visibiility:hidden ถ้าแสดงก็ใส่ visibility:visible แค่นั้นเอง ความต่างของ Visibility hidden กับ
© 2021 All rights reserved