สร้างแพลตฟอร์มบล็อกแบบ SPA ด้วย ReactJS และ Back4App

1\ บทนำ บทเรียนนี้จะนำคุณผ่านกระบวนการสร้างแอปพลิเคชันหน้าเดียว (spa) ที่สมบูรณ์สำหรับแพลตฟอร์มบล็อกโดยใช้ reactjs เป็นส่วนหน้าและ back4app เป็นส่วนหลัง เราจะครอบคลุมทุกอย่างตั้งแต่การตั้งค่าสภาพแวดล้อมการพัฒนา การจัดการสถานะทั่วโลกด้วย redux การดำเนินการเส้นทางและการนำทาง ไปจนถึงการดำเนินการ crud ด้วย back4app วัตถุประสงค์ สร้างแพลตฟอร์มบล็อกที่ใช้งานได้อย่างสมบูรณ์ซึ่งผู้ใช้สามารถสร้าง แก้ไข และลบบล็อกโพสต์ และผู้อ่านสามารถดูและแสดงความคิดเห็นเกี่ยวกับโพสต์ แอปพลิเคชันนี้จะใช้ reactjs สำหรับส่วนหน้าและ back4app สำหรับการดำเนินการด้านหลัง ฟีเจอร์หลัก การตรวจสอบสิทธิ์ผู้ใช้ การสร้าง แก้ไข และลบบล็อกโพสต์ การดูโพสต์และความคิดเห็น การจัดการสถานะทั่วโลกด้วย redux การนำทางและการนำทางโดยใช้ react router ข้อกำหนดเบื้องต้น ความรู้พื้นฐานเกี่ยวกับ javascript, reactjs และ redux บัญชี back4app ที่ใช้งานอยู่ ติดตั้ง node js และ npm ในสภาพแวดล้อมท้องถิ่นของคุณ 2 การตั้งค่าเบื้องต้น 2 1 การตั้งค่าโปรเจกต์ reactjs ขั้นตอนที่ 1 สร้างโปรเจกต์ react ใหม่โดยใช้ create react app ขั้นตอนที่ 2 เริ่มเซิร์ฟเวอร์พัฒนา 2 2 การตั้งค่า back4app ขั้นตอนที่ 1 ลงชื่อเข้าใช้บัญชี back4app ของคุณและสร้างแอปพลิเคชันใหม่ ขั้นตอนที่ 2 ในแดชบอร์ด back4app ให้ไปที่ "core > browser" และสร้างคลาสต่อไปนี้ โพสต์ (เพื่อเก็บบล็อกโพสต์) ความคิดเห็น (เพื่อเก็บความคิดเห็นเกี่ยวกับโพสต์) ขั้นตอนที่ 3 รับ application id และ javascript key ของคุณจากส่วน "app settings > security & keys" 2 3 การติดตั้งแพ็กเกจที่จำเป็น ติดตั้งการพึ่งพาที่จำเป็นสำหรับการรวม react, redux และ back4app npm install parse @reduxjs/toolkit react redux react router dom 2 4 การกำหนดค่า parse sdk ขั้นตอนที่ 1 สร้างไฟล์ชื่อ parseconfig js ในโฟลเดอร์ src และกำหนดค่า parse sdk import parse from 'parse'; parse initialize("your app id", "your javascript key"); parse serverurl = 'https //parseapi back4app com/'; export default parse; 3 การพัฒนาแพลตฟอร์มบล็อก 3 1 โครงสร้างโปรเจกต์ จัดระเบียบโปรเจกต์ด้วยโครงสร้างดังต่อไปนี้ src/ \| components/ \| | postlist js \| | postdetails js \| | postform js \| | commentlist js \| redux/ \| | store js \| | postslice js \| | commentslice js \| parseconfig js \| app js \| index js 3 2 การใช้งาน redux สำหรับการจัดการสถานะทั่วโลก ขั้นตอนที่ 1 ตั้งค่า redux store ใน redux/store js import { configurestore } from '@reduxjs/toolkit'; import postreducer from ' /postslice'; import commentreducer from ' /commentslice'; export const store = configurestore({ reducer { posts postreducer, comments commentreducer, }, }); ขั้นตอนที่ 2 สร้าง slice สำหรับการจัดการโพสต์ใน redux/postslice js import { createslice, createasyncthunk } from '@reduxjs/toolkit'; import parse from ' /parseconfig'; export const fetchposts = createasyncthunk('posts/fetchposts', async () => { const query = new parse query('post'); const results = await query find(); return results map(post => ({ id post id, title post get('title'), content post get('content'), })); }); const postslice = createslice({ name 'posts', initialstate { list \[], status null, }, reducers {}, extrareducers { \[fetchposts fulfilled] (state, action) => { state list = action payload; state status = 'success'; }, }, }); export default postslice reducer; ขั้นตอนที่ 3 สร้าง slice สำหรับการจัดการความคิดเห็นใน redux/commentslice js import { createslice, createasyncthunk } from '@reduxjs/toolkit'; import parse from ' /parseconfig'; export const fetchcomments = createasyncthunk('comments/fetchcomments', async (postid) => { const query = new parse query('comment'); query equalto('post', { type 'pointer', classname 'post', objectid postid }); const results = await query find(); return results map(comment => ({ id comment id, content comment get('content'), postid postid, })); }); const commentslice = createslice({ name 'comments', initialstate { list \[], status null, }, reducers {}, extrareducers { \[fetchcomments fulfilled] (state, action) => { state list = action payload; state status = 'success'; }, }, }); export default commentslice reducer; 3 3 การใช้งาน routing ด้วย react router ขั้นตอนที่ 1 ตั้งค่าการนำทางใน app js import { browserrouter as router, route, switch } from 'react router dom'; import postlist from ' /components/postlist'; import postdetails from ' /components/postdetails'; import postform from ' /components/postform'; function app() { return ( \<router> \<switch> \<route path="/" exact component={postlist} /> \<route path="/post/\ id" component={postdetails} /> \<route path="/new post" component={postform} /> \</switch> \</router> ); } export default app; 3 4 การสร้างคอมโพเนนต์ ขั้นตอนที่ 1 สร้าง postlist คอมโพเนนต์เพื่อแสดงโพสต์บล็อกทั้งหมด import react, { useeffect } from 'react'; import { usedispatch, useselector } from 'react redux'; import { fetchposts } from ' /redux/postslice'; import { link } from 'react router dom'; const postlist = () => { const dispatch = usedispatch(); const posts = useselector(state => state posts list); useeffect(() => { dispatch(fetchposts()); }, \[dispatch]); return ( \<div> \<h1>blog posts\</h1> \<link to="/new post">create new post\</link> \<ul> {posts map(post => ( \<li key={post id}> \<link to={`/post/${post id}`}>{post title}\</link> \</li> ))} \</ul> \</div> ); }; export default postlist; ขั้นตอนที่ 2 สร้าง postdetails คอมโพเนนต์เพื่อแสดงรายละเอียดของโพสต์เฉพาะ import react, { useeffect } from 'react'; import { useparams } from 'react router dom'; import { usedispatch, useselector } from 'react redux'; import { fetchcomments } from ' /redux/commentslice'; const postdetails = () => { const { id } = useparams(); const dispatch = usedispatch(); const comments = useselector(state => state comments list); useeffect(() => { dispatch(fetchcomments(id)); }, \[dispatch, id]); return ( \<div> \<h1>post details\</h1> \<p>comments \</p> \<ul> {comments map(comment => ( \<li key={comment id}>{comment content}\</li> ))} \</ul> \</div> ); }; export default postdetails; ขั้นตอนที่ 3 สร้าง postform คอมโพเนนต์สำหรับการสร้างและแก้ไขโพสต์ import react, { usestate } from 'react'; import parse from ' /parseconfig'; import { usehistory } from 'react router dom'; const postform = () => { const \[title, settitle] = usestate(''); const \[content, setcontent] = usestate(''); const history = usehistory(); const handlesubmit = async (e) => { e preventdefault(); const post = parse object extend('post'); const post = new post(); post set('title', title); post set('content', content); try { await post save(); history push('/'); } catch (error) { console error('error creating post ', error); } }; return ( \<div> \<h1>create new post\</h1> \<form onsubmit={handlesubmit}> \<div> \<label>title\</label> \<input type="text" value={title} onchange={(e) => settitle(e target value)} /> \</div> \<div> \<label>content\</label> \<textarea value={content} onchange={(e) => setcontent(e target value)} /> \</div> \<button type="submit">submit\</button> \</form> \</div> ); }; export default postform; 4\ การทดสอบและการปรับใช้ 4 1 การทดสอบแอปพลิเคชัน ขั้นตอนที่ 1 ทดสอบแอปพลิเคชันในเครื่องเพื่อให้แน่ใจว่าฟีเจอร์ทั้งหมดทำงาน ทดสอบการสร้าง แก้ไข และลบโพสต์ ตรวจสอบให้แน่ใจว่าคอมเมนต์แสดงผลถูกต้องสำหรับแต่ละโพสต์ ทดสอบการนำทางระหว่างเส้นทางต่างๆ 4 2 การสร้างแอปพลิเคชันสำหรับการผลิต ขั้นตอนที่ 1 สร้างแอปพลิเคชันสำหรับการผลิต npm run build ขั้นตอนที่ 2 ปรับใช้แอปพลิเคชันที่สร้างขึ้นไปยังบริการโฮสติ้งเช่น back4app containers 4 3 การตั้งค่า back4app สำหรับการผลิต back4app เป็นสภาพแวดล้อมที่พร้อมสำหรับการผลิตแล้ว แต่คุณสามารถตรวจสอบโค้ดของคุณและอัปเดตตัวแปรและคีย์สภาพแวดล้อมที่จำเป็นได้ 5 สรุป สรุป บทแนะนำนี้ได้แนะนำคุณผ่านการสร้างแพลตฟอร์มบล็อกแบบ spa ที่สมบูรณ์โดยใช้ reactjs และ back4app คุณได้เรียนรู้วิธีการตั้งค่าและกำหนดค่าพื้นหลังบน back4app จัดการสถานะทั่วโลกด้วย redux ใช้การนำทางด้วย react router และดำเนินการ crud แพลตฟอร์มนี้สามารถขยายได้ด้วยฟีเจอร์เพิ่มเติม เช่น การตรวจสอบสิทธิ์ผู้ใช้ ระบบแสดงความคิดเห็นขั้นสูง และอื่น ๆ ขั้นตอนถัดไป สำรวจการเพิ่มการตรวจสอบสิทธิ์ผู้ใช้ด้วย back4app ปรับปรุงระบบแสดงความคิดเห็นด้วยการอัปเดตแบบเรียลไทม์ ดำเนินการฟีเจอร์ seo เพื่อปรับปรุงการมองเห็นในเครื่องมือค้นหา 6 โค้ดต้นฉบับและแหล่งข้อมูลเพิ่มเติม ที่เก็บ github ให้ลิงก์ไปยังโค้ดต้นฉบับทั้งหมดสำหรับแอปพลิเคชันบน github แหล่งข้อมูลเพิ่มเติม เอกสาร reactjs https //reactjs org/docs/getting started html เอกสาร redux https //redux js org/ เอกสาร react router https //reactrouter com/ เอกสาร back4app https //www back4app com/docs 7 คำถามที่พบบ่อย / การแก้ไขปัญหา ปัญหาที่พบบ่อย เกิดข้อผิดพลาดในการเชื่อมต่อกับ back4app ตรวจสอบหมายเลขประจำตัวแอปพลิเคชันและคีย์ javascript ของคุณอีกครั้ง สถานะ redux ไม่อัปเดต ตรวจสอบให้แน่ใจว่าการกระทำและรีดิวเซอร์ของคุณถูกกำหนดค่าอย่างถูกต้อง การสนับสนุน หากคุณพบปัญหาใด ๆ คุณสามารถติดต่อฝ่ายสนับสนุน back4app หรือถามคำถามในชุมชนนักพัฒนาที่เกี่ยวข้อง