Building Couse Assist ตอนที่ 5: สร้างฟังก์ชันการแชทขึ้นมาใหม่ตั้งแต่ต้น (2/2)
นี่เป็นความต่อเนื่องของบล็อกที่แล้ว ซึ่งหากคุณยังไม่ได้อ่านโปรดลองดู ในบล็อกที่แล้ว ฉันเริ่มกระบวนการสร้างฟังก์ชันการแชทตั้งแต่เริ่มต้น ซึ่งเป็นกระบวนการที่ค่อนข้างยาวและซับซ้อน 😢 ซึ่งเป็นสาเหตุที่ฉันตัดสินใจแบ่งบล็อกออกเป็นสองส่วน โดยส่วนนี้เป็นส่วนที่สองและส่วนสุดท้าย ส่วนแรกมุ่งเน้นไปที่การสร้าง UI ที่สะอาดตาซึ่งได้รับแรงบันดาลใจจากการแชท LinkedIn การสร้างออบเจ็กต์การสนทนาเพื่อแสดงรายการแชท และการตั้งค่าฟังก์ชันการส่งข้อความที่สำคัญที่สุดซึ่งหมายถึงข้อความแม้ว่าจะอยู่ในรูปแบบข้อความเท่านั้นที่สามารถทำได้ จะถูกส่งระหว่างผู้ใช้ แม้ว่าสิ่งนี้ทำให้ฉันใกล้จะเสร็จสิ้นแล้ว แต่ก็ยังมีอีกหลายอย่างที่ต้องทำซึ่งเป็นจุดเน้นของส่วนที่สองนี้
งานที่ยังคงอยู่และถูกเพิ่มเข้ามา ได้แก่ การเปิดใช้งานฟังก์ชันการส่งข้อความแบบเรียลไทม์ การเพิ่มการแจ้งเตือนเพื่อให้ผู้ใช้ได้รับการแจ้งเตือนเมื่อได้รับข้อความใหม่ การเปิดใช้งานการถ่ายโอนไฟล์ระหว่างผู้ใช้ และคุณลักษณะเล็กๆ น้อยๆ สองสามอย่างเพื่อปรับปรุงผู้ใช้โดยทั่วไป ประสบการณ์. เป็นที่น่าสังเกตว่าเนื่องจากโครงการช่วยเหลือหลักสูตรประกอบด้วยสองแอป (แอปผู้ใช้และแอปผู้เชี่ยวชาญ) ฉันจึงต้องใช้ฟีเจอร์เหล่านี้สองครั้ง นั่นเป็นเหตุผลว่าทำไมจึงใช้เวลานานกว่าที่ฉันคาดไว้
คุณลักษณะที่ฉันเริ่มต้นคือการเปิดใช้งานการถ่ายโอนไฟล์ระหว่างผู้ใช้ ดังที่ฉันได้กล่าวไว้ก่อนหน้านี้ มันเป็นไปได้ที่จะส่งข้อความในรูปแบบข้อความในการแชทเท่านั้น และไม่ใช่ไฟล์เช่นรูปภาพ, pdf, เอกสาร.. ฯลฯ สำหรับสิ่งนี้ ฉันใช้ไฟล์ React Native Expo ของบุคคลที่สาม โดยเลือกแพ็คเกจที่เรียกว่า expo-document-picker เพื่อจัดการ การรับไฟล์จากโทรศัพท์และบนแบ็กเอนด์ Django ช่วยให้สามารถจัดเก็บไฟล์และถ่ายโอนไฟล์ได้อย่างง่ายดายผ่าน API เฟรมเวิร์กส่วนที่เหลือของ Django ปัญหาที่ฉันพบคือการดาวน์โหลดและการเปิดไฟล์ เนื่องจากฉันใช้ react Native กับ expo ฉันจึงไม่พบแพ็คเกจที่เปิดใช้งานการดาวน์โหลดไฟล์ที่ได้รับ จากนั้นฉันก็เจอแพ็คเกจที่เรียกว่า expo-linking และสิ่งนี้ทำหน้าที่เปิดลิงก์ไปยังไฟล์ที่ส่งในเบราว์เซอร์ และเมื่อสิ่งนี้เกิดขึ้น เบราว์เซอร์จะดาวน์โหลดไฟล์โดยอัตโนมัติ ไม่ใช่วิธีการดาวน์โหลดที่ฉันมีอยู่ในใจ แต่ใช้งานได้ดังนั้นฉันจะยึดติดกับมันในตอนนี้ นอกจากนี้ วิธีนี้ยังใช้ได้กับ Android ซึ่งเป็นระบบปฏิบัติการที่ฉันกำลังทดสอบแอปอยู่ แต่ฉันไม่แน่ใจว่าจะเป็นเช่นนั้นกับ IOS หรือไม่ ฉันจะต้องรอดู
ถัดไปคือการแจ้งเตือน เมื่อมีการส่งข้อความ ผู้ใช้จะต้องได้รับแจ้งเมื่อได้รับข้อความ สำหรับสิ่งนี้ ฉันใช้ expo-push-notifications ซึ่งเป็นแพ็คเกจฟรีของบุคคลที่สามอีกชุดที่คุณสามารถใช้เพื่อโต้ตอบแบบเนทีฟ เมื่อโพสต์ข้อความสำเร็จแล้ว ฟังก์ชันส่งการแจ้งเตือนที่รวมอยู่ในการแจ้งเตือนแบบ expo-push-notifications จะถูกเรียกและส่งการแจ้งเตือนไปยังผู้ใช้เพื่อแจ้งให้ทราบว่าพวกเขาได้รับข้อความใหม่
คุณลักษณะสุดท้ายแต่สำคัญที่สุดที่ฉันทำคือฟังก์ชันการทำงานแบบเรียลไทม์ แอปแชทที่ไม่ใช่แบบเรียลไทม์ไม่ใช่แอปแชท ประเด็นทั้งหมดคือให้ผู้ใช้ได้รับข้อความทันทีหลังจากส่งไปแล้ว สำหรับสิ่งนี้ ฉันใช้ Socket-io ซึ่งฉันใช้อยู่แล้วกับส่วนอื่นของโปรเจ็กต์นี้ เซิร์ฟเวอร์ Nodejs กำลังทำงานและทำงานเป็นคนกลางระหว่างทั้งสองแอป เมื่อผู้ใช้ส่งข้อความ โหนดเซิร์ฟเวอร์ผ่านซ็อกเก็ตจะได้รับแจ้ง จากนั้นจะส่งข้อความผ่านซ็อกเก็ตไปยังแชทของผู้ใช้รายอื่นเพื่อขอให้เพจขอข้อความใหม่ กระบวนการทั้งหมดนี้เกิดขึ้นเกือบจะในทันที ฉันยังเพิ่มคุณสมบัติบางอย่างโดยหลักๆ แล้วเกี่ยวข้องกับการปรับปรุงอินเทอร์เฟซผู้ใช้และประสบการณ์ผู้ใช้ เช่น การล้างรายการข้อความ การจัดระเบียบแชท เพิ่มการประทับเวลาและวันที่ที่ดี กระบวนการรับและส่งไฟล์ที่ราบรื่น การบล็อกข้อความที่ส่งหาก ผู้ใช้ไม่ได้เขียนข้อความหรือเลือกไฟล์ใดๆ และมีอีกสองสามไฟล์ที่เกี่ยวข้องกัน และเช่นเดียวกับที่ฉันได้เพิ่มฟังก์ชันการแชทในโครงการของฉันตั้งแต่เริ่มต้นได้สำเร็จ ซึ่งทำให้ฉันเข้าใกล้การสำเร็จหลักสูตร Assist ไปอีกก้าวหนึ่ง ต่อไป ฉันจะทำการทดสอบทั้งระบบเพื่อดูว่าข้อบกพร่องใดบ้างที่ต้องแก้ไข และฟีเจอร์ใดบ้างที่สามารถเพิ่มได้ ทั้งหมดนี้ฉันจะบันทึกไว้ในบล็อกหน้าของฉัน ดังนั้นโปรดจับตาดูให้ดี ขอบคุณที่อ่าน🙏
