Todo List ด้วย React Redux และ Firebase


ที่จริงแล้วเนื้อหาเกี่ยวกับการทำ Todo List กับ React มีเยอะมากตามบล๊อกของเหล่าท่านเทพๆ แต่ที่ผมยังนำเนื่อหาเรื่องนี้มาเขียนอีกเพราะว่าอยากจะทบทวนความรู้ของตนเอง เพราะว่าผมกำลังศึกษา React อย่างจริงจังก็ไม่กี่เดือนที่ผ่านมานี้เอง

  1. Part 1 — Todo List ด้วย React Redux และ Firebase
  2. Part 2 —ตกแต่ง Todo List ด้วย Ant Design และ styled-components
  3. Part 3 — แยก Presentational และ Container Components

สำหรับในบทความนี้เราจะมาเริ่มต้นสร้าง project และทำการเชื่อมต่อกับ database ของ Firebase แล้วลองทดสอบเพิ่ม, ลบ, แก้ไขข้อมูล สำหรับคนที่ต้องการดู Code ไปพร้อมกับอ่านเชิญดูได้ที่ GitHub ครับ


1. สร้าง project ง่ายๆ ด้วย create-react-app

create-react-app todo-list
ที่จริงการสร้าง project ของ React นั้นสามารถทำเองได้นะครับ ตามลำบากเลยครับ สำหรับคนที่เค้าโปรๆ เค้าจะสร้างไฟล์เอง, install packages เอง แต่สำหรับมือใหม่อย่างผมของแบบง่ายๆ ก่อนนะครับ

เมื่อทำการติดตั้งสำเร็จ ให้เข้าไปที่ folder ชื่อ todo-list และทำการ start project เพื่อทดสอบการติดตั้งครับ

cd todo-list
npm start

npm จะสั่งเปิด browser (default) ไปที่ http://localhost:3000 และจะแสดงหน้าตาประมาณนี้ครับ

React starter project

การติดตั้ง React เสร็จครับ ง่ายๆ ด้วย create-react-app


2. ปรับ structure ให้ดูง่ายๆ

เรามาทำการปรับ structure ของโปรแกรม เพื่อให้ง่ายต่อการพัฒนา

เริ่มจากการลบไฟล์ที่ไม่ได้ใช้ก่อนเลยครับ

src/App.css
src/App.js
src/App.test.js
src/index.css
src/logo.svg

สร้าง folder ชื่อ components และสร้างไฟล์ชื่อ app.js ไว้ที่ src/components/app.js

จากนั้นทำการแก้ไขไฟล์ src/index.js

save แล้วดูผลที่ browser ถ้าไม่มี errors ก็ผ่าน…


3. สร้าง Firebase project กัน

เข้าไปที่ https://console.firebase.google.com

ทำการ sign in แล้วกดที่ Add project

Create Firebase project

กรอกชื่อ, เลือก location, ติ๊ก I accept the… แล้วกด Create project

จากนั้นเราจะนำ config ของ firebase project ที่เราสร้างไว้ มาเก็บไว้ที่ react project ของเรา

กดที่ Add Firebase to your web app

Add Firebase to react app

สร้างไฟล์ไว้ที่ src/firebaseConfig.js แล้ว copy config ไปวางที่ไฟล์

อย่าลืม export ด้วยนะครับ เดี่ยวเราจะนำไปใช้ในขั้นตอนต่อไปครับ

ต่อไปเราจะทำการเปิดใช้งาน Database เลือกจากเมนูด้านซ้ายมือครับ

Enable database in test mode

เลื่อนลงมาเรื่อยๆ เราจะใช้ Realtime Database กด Create database เลือก Start in test mode แล้วกด Enable

เลือก Start in test mode เพราะว่าเราจะข้ามเรื่องการ Authentication ไปก่อน เดี่ยวเนื้อหาจะยาวเกินไปครับ (เอาไว้เป็นบทความต่อไปนะครับ)

4. ติดตั้ง Firebase เข้ากับ React project

เริ่มจากการ install packages ดังต่อไปนี้

npm install --save redux react-redux firebase react-redux-fir
ebase

สร้าง folder ชื่อ reducers และสร้างไฟล์ index.js ไว้ที่ src/reducers/index.js

และแก้ไขไฟล์ src/index.js

ตอนนี้เราสามารถเชื่อมต่อกับ Firebase ได้แล้วครับ


5. สร้าง components เพิ่มรายการงานเข้าไปที่ database

เริ่มจากสร้าง folder ชื่อ containers และไฟล์ชื่อ newTodo.js ไว้ที่ src/containers/newTodo.js

เพิ่ม import ที่ไฟล์ src/components/app.js

save แล้วเปิด Developer tools (F12) บน browser เลือก tab ชื่อ Console ลองพิมพ์ข้อความใส่ input แล้วกด enter จะมีข้อความที่เราพิมพ์แสดงขึ้นมา

Test input data in Console

จากนั้นเราจะบันทึกข้อความที่เราพิมพ์ไปที่ database ของ firebase

ทำการอัพเดทไฟล์ src/containers/newTodo.js

save แล้วทดสอบพิมพ์แล้วกด enter

Push data to Firebase database

เปิด browser เข้าไปดูที่ database ของ Firebase

Data structure in Firebase database

ข้อมูลจะบันทึกไปที่ database ของ Firebase เรียบร้อยแล้ว


6. แสดงรายการงานจาก Firebase

สร้างไฟล์ชื่อ todos.js ไว้ที่ src/containers/todos.js

เพิ่ม import ที่ไฟล์ src/components/app.js

save แล้วลองเปิด browser ครับ

แสดงข้อความ “รายการงานว่าง” เมื่อไม่มีข้อมูล
เพิ่มรายการงาน
เปลี่ยนสถานะงาน
ลบรายการงาน

เรียบร้อย…


จะเห็นว่าระบบเราสามารถทำงานกับ Firebase ได้แล้ว code ที่ผมเขียนเสร็จแล้ว สามารถดาวน์โหลดได้จาก GitHub ได้เลยครับ

่ยังเหลือหน้าตาที่ไม่ค่อยน่าใช้งานสักเท่าไหร่ ตอนต่อไปเราจะปรับหน้าตาของ Todo List ให้น่าใช้งานกันกับ Part 2 — ตกแต่ง Todo List ด้วย Ant Design และ styled-components

สำหรับวันนี้พอแค่นี้ก่อนนะครับ แล้วพบกันใหม่