เมื่อเร็วๆ นี้ เราได้เพิ่มหน้า "เริ่มต้นใช้งาน" ลงใน AppSignal ซึ่งแสดงให้ผู้ใช้ใหม่เห็นหน้าเว็บที่เต็มไปด้วยขั้นตอนที่แนะนำเพื่อช่วยให้พวกเขาได้รับประโยชน์สูงสุดจากประสบการณ์ AppSignal
ผู้ใช้บางคนชอบความช่วยเหลือเมื่อเริ่มต้นใช้งาน AppSignal ในขณะที่คนอื่นๆ ชอบสำรวจผลิตภัณฑ์ของเราเพียงลำพังหรือมีประสบการณ์กับ AppSignal อยู่แล้ว
เพื่อให้ผู้ใช้ทุกคนมีทางเลือกระหว่างประสบการณ์แบบมีไกด์หรือเดี่ยว เราได้ออกแบบปุ่มสลับที่จะซ่อนและแสดงหน้า "เริ่มต้นใช้งาน"
ความท้าทาย
การให้ผู้ใช้สามารถสลับหน้า "เริ่มต้นใช้งาน" จากเมนูการตั้งค่าส่วนบุคคลนั้นท้าทายกว่าที่คุณคาดไว้เล็กน้อย นั่นเป็นเพราะหน้า "เริ่มต้นใช้งาน" สร้างขึ้นใน React.js และเมนูการตั้งค่าส่วนบุคคลเป็นเทมเพลตที่สร้างโดย Rails ซึ่งแสดงผลนอกแอป React
เราต้องหาวิธีการซิงค์สถานะสลับบนเมนูที่สร้างโดย Rails และเมนู React โดยหลักการแล้วโดยไม่ต้องโพลเซิร์ฟเวอร์สำหรับสถานะปัจจุบัน
วิธีแก้ปัญหา
สำหรับการโต้ตอบแบบไม่โต้ตอบ AppSignal ใช้ StimulusJS ใน "Rails way" เพิ่มความสนุกสนานเชิงโต้ตอบของ JavaScript ทั่วทั้งแอปพลิเคชันของคุณ
เราเลือก StimulusJS vanilla JS เนื่องจากมีโครงสร้างที่ได้มาตรฐานซึ่งได้รับการบันทึกไว้อย่างดี และนักพัฒนา Rails ทุกคนที่มีประสบการณ์ JavaScript ก็สามารถนำไปใช้ได้อย่างง่ายดาย
เพื่อให้ React.js และ StimulusJS ซิงค์กัน เราจึงสร้างเหตุการณ์แบบกำหนดเองที่ส่งไปในส่วนเนื้อหาของเอกสาร เรากำหนดค่าการตั้งค่า React และ StimulusJS เพื่อเชื่อมต่อและฟัง hide_getting_started ของเรา เหตุการณ์
ในสิ่งกระตุ้น JS
เมื่อคอนโทรลเลอร์ StimulusJS เชื่อมต่อ เราจะฟังเหตุการณ์ในเอกสาร เพื่อให้ JavaScript ของเราเรียบร้อยและเป็นระเบียบเรียบร้อย เราจะลบตัวฟังเหตุการณ์เมื่อตัดการเชื่อมต่อ:
ใน React.js
เราทำสิ่งเดียวกันใน React.js เช่นเดียวกับที่เราทำใน StimulusJS โค้ด React.js ของเราจะคอยฟังเหตุการณ์ในเอกสารและลบตัวฟังเหตุการณ์เมื่อตัดการเชื่อมต่อ:
สลับเปิด สลับปิด
ด้วยการตั้งค่านี้ เราสามารถปล่อยเหตุการณ์ที่กำหนดเองจากทั้งการใช้งาน React.js และ StimulusJS ที่เป็นอิสระของเรา ทำให้พวกเขาโต้ตอบกันและสะท้อนสถานะที่ถูกต้องได้เสมอ:
สิ่งที่ยอดเยี่ยมเกี่ยวกับ JavaScript ก็คือแม้ในสถานการณ์เช่นเรา ซึ่งคุณใช้เฟรมเวิร์กที่แตกต่างกัน คุณสามารถใช้เหตุการณ์เพื่อจัดการกับการเปลี่ยนแปลงภายนอกส่วนประกอบและตัวควบคุม React.js หรือ StimulusJS ของคุณได้
โซลูชันที่เรียบง่ายและตรงไปตรงมานี้ช่วยให้คุณจัดการสถานะระหว่างการใช้งาน JavaScript ต่างๆ ได้โดยไม่ต้องแก้ไข DOM หรือสร้างโซลูชันที่ซับซ้อนมากขึ้นซึ่งส่งคำขอไปมาระหว่างส่วนหลังและส่วนหน้า
ตรวจสอบ Front-end JavaScript ของคุณด้วย AppSignal
คุณต้องการตรวจสอบส่วนหน้า JavaScript ของแอปพลิเคชันของคุณด้วยเครื่องมือที่นักพัฒนาสร้างขึ้นเพื่อนักพัฒนาหรือไม่ นักพัฒนาซอฟต์แวร์กล่าวว่าพวกเขาสนุกกับการใช้การตรวจสอบของเราเพราะเรามี:
- อินเทอร์เฟซที่ใช้งานง่ายซึ่งใช้งานง่าย
- การกำหนดราคาที่เรียบง่ายและคาดเดาได้
- การสนับสนุนระหว่างนักพัฒนาถึงนักพัฒนา
หากคุณยังใหม่กับ AppSignal อย่าลืมขอสโตรปวาเฟิลฟรีจากเรา! รสชาติเกือบจะดีพอๆ กับความรู้สึกที่มีการวัดผลแอปพลิเคชันทั้งหมดอยู่ใกล้แค่ปลายนิ้ว 😉🍪
คอนเนอร์ เจมส์
ผู้จัดการฝ่ายการตลาดนักพัฒนาซอฟต์แวร์ที่ AppSignal ผู้ติดพอดแคสต์ที่ชื่นชอบ Cannoli มากจนกำลังพิจารณาเปลี่ยนชื่อเป็น Connoli เขาคิดว่ามีตัว 'u' อยู่ในสี คุณอาจพบเขาหน้าไมค์ บนเวที หรือนอนอยู่บนโซฟาเมื่อเขาเลิกงาน
บทความทั้งหมดโดย Connor James
โรเบิร์ต บีคแมน
ในฐานะผู้ร่วมก่อตั้ง Robert ได้เขียนความมุ่งมั่นครั้งแรกของเรา เขายังเป็นแบบอย่างในการสนับสนุนของเราและรู้ทุกอย่างเกี่ยวกับรายละเอียดเล็กๆ น้อยๆ ในโค้ด การเดินทางและรูปถ่าย (พร้อมกัน)
บทความทั้งหมดโดย Robert Beekman
