52 KiB

Raw Blame History

สร้างแอปธนาคาร ตอนที่ 3: วิธีการดึงและใช้งานข้อมูล

ลองนึกถึงคอมพิวเตอร์ของ Enterprise ใน Star Trek - เมื่อกัปตัน Picard ขอข้อมูลสถานะของยาน ข้อมูลจะปรากฏขึ้นทันทีโดยที่อินเทอร์เฟซไม่ต้องปิดและสร้างใหม่ทั้งหมด การไหลลื่นของข้อมูลแบบนี้คือสิ่งที่เรากำลังสร้างด้วยการดึงข้อมูลแบบไดนามิก

ตอนนี้แอปธนาคารของคุณเหมือนกับหนังสือพิมพ์ที่พิมพ์ออกมา - มีข้อมูลแต่ไม่เปลี่ยนแปลง เราจะเปลี่ยนมันให้เป็นเหมือนศูนย์ควบคุมภารกิจของ NASA ที่ข้อมูลไหลเวียนอย่างต่อเนื่องและอัปเดตแบบเรียลไทม์โดยไม่รบกวนการทำงานของผู้ใช้

คุณจะได้เรียนรู้วิธีการสื่อสารกับเซิร์ฟเวอร์แบบอะซิงโครนัส จัดการข้อมูลที่มาถึงในเวลาต่างกัน และเปลี่ยนข้อมูลดิบให้เป็นสิ่งที่มีความหมายสำหรับผู้ใช้ นี่คือความแตกต่างระหว่างการสาธิตและซอฟต์แวร์ที่พร้อมใช้งานจริง

แบบทดสอบก่อนเรียน

สิ่งที่ต้องเตรียมก่อนเริ่ม

ก่อนที่จะเริ่มต้นการดึงข้อมูล ให้แน่ใจว่าคุณมีสิ่งเหล่านี้พร้อม:

บทเรียนก่อนหน้า: ทำแบบฟอร์ม เข้าสู่ระบบและลงทะเบียน ให้เสร็จ - เราจะใช้เป็นพื้นฐานในการสร้าง
เซิร์ฟเวอร์ในเครื่อง: ติดตั้ง Node.js และ เรียกใช้ API เซิร์ฟเวอร์ เพื่อให้ข้อมูลบัญชี
การเชื่อมต่อ API: ทดสอบการเชื่อมต่อเซิร์ฟเวอร์ของคุณด้วยคำสั่งนี้:

curl http://localhost:5000/api
# Expected response: "Bank API v1.0.0"

การทดสอบอย่างรวดเร็วนี้ช่วยให้มั่นใจว่าทุกองค์ประกอบสามารถสื่อสารกันได้อย่างถูกต้อง:

ตรวจสอบว่า Node.js ทำงานได้อย่างถูกต้องในระบบของคุณ
ยืนยันว่าเซิร์ฟเวอร์ API ของคุณทำงานและตอบสนอง
ตรวจสอบว่าแอปของคุณสามารถเข้าถึงเซิร์ฟเวอร์ได้ (เหมือนการตรวจสอบการติดต่อวิทยุก่อนเริ่มภารกิจ)

การทำความเข้าใจการดึงข้อมูลในแอปเว็บสมัยใหม่

วิธีที่แอปพลิเคชันเว็บจัดการข้อมูลได้พัฒนาขึ้นอย่างมากในช่วงสองทศวรรษที่ผ่านมา การทำความเข้าใจวิวัฒนาการนี้จะช่วยให้คุณเข้าใจว่าทำไมเทคนิคสมัยใหม่อย่าง AJAX และ Fetch API ถึงมีประสิทธิภาพและกลายเป็นเครื่องมือสำคัญสำหรับนักพัฒนาเว็บ

มาสำรวจดูว่าการทำงานของเว็บไซต์แบบดั้งเดิมแตกต่างจากแอปพลิเคชันที่ตอบสนองและไดนามิกในปัจจุบันอย่างไร

แอปพลิเคชันแบบหลายหน้า (MPA)

ในยุคแรกของเว็บ ทุกครั้งที่คลิกเหมือนกับการเปลี่ยนช่องบนโทรทัศน์เก่า - หน้าจอจะว่างเปล่า แล้วค่อยๆ ปรับเข้าสู่เนื้อหาใหม่ นี่คือความจริงของแอปพลิเคชันเว็บในยุคแรก ที่ทุกการโต้ตอบหมายถึงการสร้างหน้าใหม่ทั้งหมดจากศูนย์

sequenceDiagram
    participant User
    participant Browser
    participant Server
    
    User->>Browser: Clicks link or submits form
    Browser->>Server: Requests new HTML page
    Note over Browser: Page goes blank
    Server->>Browser: Returns complete HTML page
    Browser->>User: Displays new page (flash/reload)

ทำไมวิธีนี้ถึงดูไม่ราบรื่น:

ทุกครั้งที่คลิกหมายถึงการสร้างหน้าใหม่ทั้งหมด
ผู้ใช้ถูกขัดจังหวะกลางความคิดด้วยการกระพริบหน้าจอที่น่ารำคาญ
การเชื่อมต่ออินเทอร์เน็ตทำงานหนักเพื่อดาวน์โหลดส่วนหัวและส่วนท้ายซ้ำๆ
แอปพลิเคชันรู้สึกเหมือนการค้นหาเอกสารในตู้เก็บเอกสารมากกว่าการใช้ซอฟต์แวร์

แอปพลิเคชันแบบหน้าเดียว (SPA)

AJAX (Asynchronous JavaScript and XML) เปลี่ยนแปลงรูปแบบนี้ไปอย่างสิ้นเชิง เหมือนกับการออกแบบแบบโมดูลของสถานีอวกาศนานาชาติ ที่นักบินอวกาศสามารถเปลี่ยนส่วนประกอบแต่ละส่วนได้โดยไม่ต้องสร้างโครงสร้างทั้งหมดใหม่ AJAX ช่วยให้เราสามารถอัปเดตส่วนเฉพาะของหน้าเว็บได้โดยไม่ต้องโหลดใหม่ทั้งหมด แม้ว่าชื่อจะกล่าวถึง XML แต่ปัจจุบันเราใช้ JSON เป็นหลัก แต่หลักการสำคัญยังคงเหมือนเดิม: อัปเดตเฉพาะสิ่งที่ต้องเปลี่ยนแปลง

sequenceDiagram
    participant User
    participant Browser
    participant JavaScript
    participant Server
    
    User->>Browser: Interacts with page
    Browser->>JavaScript: Triggers event handler
    JavaScript->>Server: Fetches only needed data
    Server->>JavaScript: Returns JSON data
    JavaScript->>Browser: Updates specific page elements
    Browser->>User: Shows updated content (no reload)

ทำไม SPA ถึงดีกว่า:

อัปเดตเฉพาะส่วนที่เปลี่ยนแปลงจริงๆ (ฉลาดใช่ไหม?)
ไม่มีการขัดจังหวะที่น่ารำคาญ - ผู้ใช้สามารถทำงานต่อได้อย่างต่อเนื่อง
ข้อมูลที่เดินทางผ่านเครือข่ายน้อยลง หมายถึงการโหลดที่เร็วขึ้น
ทุกอย่างรู้สึกเร็วและตอบสนองได้ดี เหมือนแอปบนมือถือของคุณ

การพัฒนาไปสู่ Fetch API สมัยใหม่

เบราว์เซอร์สมัยใหม่มี Fetch API ซึ่งแทนที่ XMLHttpRequest แบบเก่า เหมือนกับความแตกต่างระหว่างการใช้โทรเลขและการใช้อีเมล Fetch API ใช้ promises เพื่อเขียนโค้ดอะซิงโครนัสที่สะอาดขึ้นและจัดการ JSON ได้อย่างเป็นธรรมชาติ

คุณสมบัติ	XMLHttpRequest	Fetch API
ไวยากรณ์	ใช้ callback ที่ซับซ้อน	ใช้ promises ที่สะอาด
การจัดการ JSON	ต้องแปลงด้วยตนเอง	มี `.json()` ในตัว
การจัดการข้อผิดพลาด	ข้อมูลข้อผิดพลาดจำกัด	รายละเอียดข้อผิดพลาดครบถ้วน
การสนับสนุนสมัยใหม่	รองรับแบบเก่า	ใช้ promises และ async/await ของ ES6+

💡 ความเข้ากันได้ของเบราว์เซอร์: ข่าวดี - Fetch API ใช้งานได้ในเบราว์เซอร์สมัยใหม่ทั้งหมด! หากคุณอยากรู้เกี่ยวกับเวอร์ชันเฉพาะ caniuse.com มีข้อมูลความเข้ากันได้ครบถ้วน

สรุป:

ใช้งานได้ดีใน Chrome, Firefox, Safari และ Edge (พื้นฐานที่ผู้ใช้ของคุณอยู่)
Internet Explorer เท่านั้นที่ต้องการความช่วยเหลือเพิ่มเติม (และจริงๆ ถึงเวลาปล่อย IE ไปแล้ว)
เตรียมพร้อมสำหรับรูปแบบ async/await ที่สง่างามที่เราจะใช้ในภายหลัง

การสร้างระบบเข้าสู่ระบบและการดึงข้อมูลบัญชี

ตอนนี้เรามาสร้างระบบเข้าสู่ระบบที่เปลี่ยนแอปธนาคารของคุณจากการแสดงผลแบบคงที่ไปเป็นแอปพลิเคชันที่ใช้งานได้จริง เหมือนกับโปรโตคอลการตรวจสอบสิทธิ์ที่ใช้ในสถานที่ปลอดภัยของทหาร เราจะตรวจสอบข้อมูลรับรองของผู้ใช้และให้สิทธิ์เข้าถึงข้อมูลเฉพาะของพวกเขา

เราจะสร้างสิ่งนี้ทีละขั้นตอน โดยเริ่มจากการตรวจสอบสิทธิ์พื้นฐานและเพิ่มความสามารถในการดึงข้อมูล

ขั้นตอนที่ 1: สร้างฟังก์ชันพื้นฐานสำหรับการเข้าสู่ระบบ

เปิดไฟล์ app.js ของคุณและเพิ่มฟังก์ชัน login ใหม่ ฟังก์ชันนี้จะจัดการกระบวนการตรวจสอบสิทธิ์ของผู้ใช้:

async function login() {
  const loginForm = document.getElementById('loginForm');
  const user = loginForm.user.value;
}

มาดูรายละเอียดกัน:

คำว่า async? มันบอก JavaScript ว่า "เฮ้ ฟังก์ชันนี้อาจต้องรออะไรบางอย่าง"
เรากำลังดึงฟอร์มจากหน้า (แค่หาโดยใช้ ID)
จากนั้นเราก็ดึงข้อมูลที่ผู้ใช้พิมพ์เป็นชื่อผู้ใช้
นี่คือเคล็ดลับที่ดี: คุณสามารถเข้าถึงอินพุตของฟอร์มใดๆ โดยใช้แอตทริบิวต์ name - ไม่ต้องใช้ getElementById เพิ่มเติม!

💡 รูปแบบการเข้าถึงฟอร์ม: ทุกการควบคุมฟอร์มสามารถเข้าถึงได้โดยใช้ชื่อ (ตั้งค่าใน HTML ด้วยแอตทริบิวต์ name) เป็น property ของ element ฟอร์ม ซึ่งให้วิธีการที่สะอาดและอ่านง่ายในการดึงข้อมูลฟอร์ม

ขั้นตอนที่ 2: สร้างฟังก์ชันดึงข้อมูลบัญชี

ต่อไป เราจะสร้างฟังก์ชันเฉพาะเพื่อดึงข้อมูลบัญชีจากเซิร์ฟเวอร์ ซึ่งจะใช้รูปแบบเดียวกับฟังก์ชันการลงทะเบียนของคุณ แต่เน้นที่การดึงข้อมูล:

async function getAccount(user) {
  try {
    const response = await fetch('//localhost:5000/api/accounts/' + encodeURIComponent(user));
    return await response.json();
  } catch (error) {
    return { error: error.message || 'Unknown error' };
  }
}

สิ่งที่โค้ดนี้ทำได้:

ใช้ Fetch API สมัยใหม่เพื่อร้องขอข้อมูลแบบอะซิงโครนัส
สร้าง URL คำขอ GET พร้อมพารามิเตอร์ชื่อผู้ใช้
ใช้ encodeURIComponent() เพื่อจัดการอักขระพิเศษใน URL อย่างปลอดภัย
แปลง การตอบกลับเป็นรูปแบบ JSON เพื่อการจัดการข้อมูลที่ง่าย
จัดการ ข้อผิดพลาดอย่างมีประสิทธิภาพโดยการส่งคืนวัตถุข้อผิดพลาดแทนการหยุดทำงาน

⚠️ หมายเหตุด้านความปลอดภัย: ฟังก์ชัน encodeURIComponent() จัดการอักข สำหรับเนื้อหาที่ซับซ้อนมากขึ้น ให้ใช้ document.createElement() ร่วมกับเมธอด append():

// Safe way to create new elements
const transactionItem = document.createElement('div');
transactionItem.className = 'transaction-item';
transactionItem.textContent = `${transaction.date}: ${transaction.description}`;
container.append(transactionItem);

ทำความเข้าใจวิธีนี้:

สร้างองค์ประกอบ DOM ใหม่ด้วยโปรแกรม
ควบคุมคุณสมบัติและเนื้อหาขององค์ประกอบได้อย่างเต็มที่
รองรับโครงสร้างองค์ประกอบที่ซับซ้อนและซ้อนกัน
รักษาความปลอดภัยโดยแยกโครงสร้างออกจากเนื้อหา

⚠️ ข้อควรระวังด้านความปลอดภัย: แม้ว่า innerHTML จะปรากฏในบทเรียนหลายๆ แห่ง แต่สามารถรันสคริปต์ที่ฝังอยู่ได้ เช่นเดียวกับมาตรการรักษาความปลอดภัยที่ CERN ที่ป้องกันการรันโค้ดที่ไม่ได้รับอนุญาต การใช้ textContent และ createElement เป็นทางเลือกที่ปลอดภัยกว่า

ความเสี่ยงของ innerHTML:

รันแท็ก <script> ที่อยู่ในข้อมูลของผู้ใช้
เสี่ยงต่อการโจมตีด้วยการฉีดโค้ด
สร้างช่องโหว่ด้านความปลอดภัย
ทางเลือกที่ปลอดภัยที่เราใช้นั้นให้ฟังก์ชันการทำงานที่เทียบเท่ากัน

ทำให้ข้อผิดพลาดเป็นมิตรกับผู้ใช้

ปัจจุบัน ข้อผิดพลาดในการเข้าสู่ระบบปรากฏเฉพาะในคอนโซลของเบราว์เซอร์ ซึ่งผู้ใช้มองไม่เห็น เช่นเดียวกับความแตกต่างระหว่างการวินิจฉัยภายในของนักบินและระบบข้อมูลสำหรับผู้โดยสาร เราจำเป็นต้องสื่อสารข้อมูลสำคัญผ่านช่องทางที่เหมาะสม

การแสดงข้อความข้อผิดพลาดที่มองเห็นได้จะช่วยให้ผู้ใช้ได้รับข้อมูลทันทีเกี่ยวกับสิ่งที่ผิดพลาดและวิธีดำเนินการต่อไป

ขั้นตอนที่ 1: เพิ่มพื้นที่สำหรับข้อความข้อผิดพลาด

ก่อนอื่น ให้เพิ่มพื้นที่สำหรับข้อความข้อผิดพลาดใน HTML ของคุณ เพิ่มส่วนนี้ไว้ก่อนปุ่มเข้าสู่ระบบเพื่อให้ผู้ใช้มองเห็นได้ง่าย:

<!-- This is where error messages will appear -->
<div id="loginError" role="alert"></div>
<button>Login</button>

สิ่งที่เกิดขึ้นที่นี่:

เรากำลังสร้างคอนเทนเนอร์ว่างที่ยังคงมองไม่เห็นจนกว่าจะมีการใช้งาน
วางตำแหน่งไว้ในที่ที่ผู้ใช้มักจะมองหลังจากคลิก "เข้าสู่ระบบ"
role="alert" เป็นการเพิ่มที่ดีสำหรับโปรแกรมอ่านหน้าจอ - มันบอกเทคโนโลยีช่วยเหลือว่า "นี่คือสิ่งสำคัญ!"
id ที่ไม่ซ้ำกันช่วยให้ JavaScript ของเราสามารถกำหนดเป้าหมายได้ง่าย

ขั้นตอนที่ 2: สร้างฟังก์ชันช่วยเหลือที่ใช้งานง่าย

มาสร้างฟังก์ชันยูทิลิตี้เล็กๆ ที่สามารถอัปเดตข้อความขององค์ประกอบใดๆ ได้ นี่เป็นหนึ่งในฟังก์ชัน "เขียนครั้งเดียว ใช้ได้ทุกที่" ที่จะช่วยประหยัดเวลา:

function updateElement(id, text) {
  const element = document.getElementById(id);
  element.textContent = text;
}

ประโยชน์ของฟังก์ชัน:

อินเทอร์เฟซที่เรียบง่ายที่ต้องการเพียง ID ขององค์ประกอบและเนื้อหาข้อความ
ค้นหาและอัปเดตองค์ประกอบ DOM ได้อย่างปลอดภัย
รูปแบบที่นำกลับมาใช้ใหม่ได้ซึ่งลดการทำซ้ำโค้ด
รักษาพฤติกรรมการอัปเดตที่สอดคล้องกันทั่วทั้งแอปพลิเคชัน

ขั้นตอนที่ 3: แสดงข้อผิดพลาดในที่ที่ผู้ใช้สามารถมองเห็นได้

ตอนนี้มาแทนที่ข้อความคอนโซลที่ซ่อนอยู่ด้วยสิ่งที่ผู้ใช้สามารถมองเห็นได้จริง อัปเดตฟังก์ชันเข้าสู่ระบบของคุณ:

// Instead of just logging to console, show the user what's wrong
if (data.error) {
  return updateElement('loginError', data.error);
}

การเปลี่ยนแปลงเล็กน้อยนี้สร้างความแตกต่างอย่างมาก:

ข้อความข้อผิดพลาดปรากฏในที่ที่ผู้ใช้กำลังมองหา
ไม่มีการล้มเหลวแบบเงียบๆ อีกต่อไป
ผู้ใช้ได้รับข้อมูลย้อนกลับที่สามารถดำเนินการได้ทันที
แอปของคุณเริ่มให้ความรู้สึกเป็นมืออาชีพและใส่ใจ

ตอนนี้เมื่อคุณทดสอบด้วยบัญชีที่ไม่ถูกต้อง คุณจะเห็นข้อความข้อผิดพลาดที่เป็นประโยชน์ปรากฏบนหน้า!

ขั้นตอนที่ 4: การสร้างความครอบคลุมด้วยการเข้าถึง

นี่คือสิ่งที่น่าสนใจเกี่ยวกับ role="alert" ที่เราเพิ่มไว้ก่อนหน้านี้ - มันไม่ใช่แค่การตกแต่ง! คุณสมบัตินี้สร้างสิ่งที่เรียกว่า Live Region ที่ประกาศการเปลี่ยนแปลงให้โปรแกรมอ่านหน้าจอทราบทันที:

<div id="loginError" role="alert"></div>

เหตุผลที่สำคัญ:

ผู้ใช้โปรแกรมอ่านหน้าจอจะได้ยินข้อความข้อผิดพลาดทันทีที่มันปรากฏ
ทุกคนได้รับข้อมูลสำคัญเดียวกัน ไม่ว่าจะนำทางอย่างไร
เป็นวิธีง่ายๆ ในการทำให้แอปของคุณใช้งานได้สำหรับคนจำนวนมากขึ้น
แสดงให้เห็นว่าคุณใส่ใจในการสร้างประสบการณ์ที่ครอบคลุม

การใส่ใจในรายละเอียดเล็กๆ น้อยๆ เช่นนี้แยกนักพัฒนาที่ดีออกจากนักพัฒนาที่ยอดเยี่ยม!

ขั้นตอนที่ 5: ใช้รูปแบบเดียวกันกับการลงทะเบียน

เพื่อความสอดคล้องกัน ให้ใช้การจัดการข้อผิดพลาดแบบเดียวกันในแบบฟอร์มการลงทะเบียนของคุณ:

เพิ่มองค์ประกอบแสดงข้อผิดพลาดใน HTML การลงทะเบียนของคุณ:

<div id="registerError" role="alert"></div>

อัปเดตฟังก์ชันการลงทะเบียนของคุณเพื่อใช้รูปแบบการแสดงข้อผิดพลาดเดียวกัน:

if (data.error) {
  return updateElement('registerError', data.error);
}

ประโยชน์ของการจัดการข้อผิดพลาดที่สอดคล้องกัน:

ให้ประสบการณ์ผู้ใช้ที่สม่ำเสมอในทุกแบบฟอร์ม
ลดภาระทางความคิดด้วยการใช้รูปแบบที่คุ้นเคย
ทำให้การบำรุงรักษาง่ายขึ้นด้วยโค้ดที่นำกลับมาใช้ใหม่ได้
รับรองมาตรฐานการเข้าถึงทั่วทั้งแอป

การสร้างแดชบอร์ดแบบไดนามิกของคุณ

ตอนนี้เราจะเปลี่ยนแดชบอร์ดแบบคงที่ของคุณให้เป็นอินเทอร์เฟซแบบไดนามิกที่แสดงข้อมูลบัญชีจริง เช่นเดียวกับความแตกต่างระหว่างตารางเวลาการบินที่พิมพ์กับบอร์ดแสดงการออกเดินทางแบบเรียลไทม์ที่สนามบิน เรากำลังเปลี่ยนจากข้อมูลแบบคงที่ไปเป็นการแสดงผลที่ตอบสนองแบบเรียลไทม์

ใช้เทคนิคการจัดการ DOM ที่คุณได้เรียนรู้ เราจะสร้างแดชบอร์ดที่อัปเดตโดยอัตโนมัติด้วยข้อมูลบัญชีปัจจุบัน

ทำความรู้จักกับข้อมูลของคุณ

ก่อนที่เราจะเริ่มสร้าง มาดูข้อมูลประเภทที่เซิร์ฟเวอร์ของคุณส่งกลับมา เมื่อมีคนเข้าสู่ระบบสำเร็จ นี่คือข้อมูลที่คุณจะได้ใช้งาน:

{
  "user": "test",
  "currency": "$",
  "description": "Test account",
  "balance": 75,
  "transactions": [
    { "id": "1", "date": "2020-10-01", "object": "Pocket money", "amount": 50 },
    { "id": "2", "date": "2020-10-03", "object": "Book", "amount": -10 },
    { "id": "3", "date": "2020-10-04", "object": "Sandwich", "amount": -5 }
  ]
}

โครงสร้างข้อมูลนี้ให้:

user: เหมาะสำหรับการปรับแต่งประสบการณ์ ("ยินดีต้อนรับกลับมา, Sarah!")
currency: ทำให้แน่ใจว่าเราแสดงจำนวนเงินได้อย่างถูกต้อง
description: ชื่อที่เป็นมิตรสำหรับบัญชี
balance: ยอดคงเหลือปัจจุบันที่สำคัญที่สุด
transactions: ประวัติการทำธุรกรรมทั้งหมดพร้อมรายละเอียด

ทุกสิ่งที่คุณต้องการเพื่อสร้างแดชบอร์ดธนาคารที่ดูเป็นมืออาชีพ!

💡 เคล็ดลับมือโปร: อยากเห็นแดชบอร์ดของคุณทำงานทันทีใช่ไหม? ใช้ชื่อผู้ใช้ test เมื่อเข้าสู่ระบบ - มันมาพร้อมกับข้อมูลตัวอย่างที่โหลดไว้ล่วงหน้าเพื่อให้คุณเห็นทุกอย่างทำงานโดยไม่ต้องสร้างธุรกรรมก่อน

เหตุผลที่บัญชีทดสอบมีประโยชน์:

มาพร้อมกับข้อมูลตัวอย่างที่สมจริงที่โหลดไว้แล้ว
เหมาะสำหรับการดูว่าการแสดงผลธุรกรรมทำงานอย่างไร
ดีสำหรับการทดสอบฟีเจอร์ของแดชบอร์ด
ช่วยให้คุณไม่ต้องสร้างข้อมูลจำลองด้วยตัวเอง

การสร้างองค์ประกอบแสดงผลแดชบอร์ด

มาสร้างอินเทอร์เฟซแดชบอร์ดของคุณทีละขั้นตอน โดยเริ่มจากข้อมูลสรุปบัญชีและต่อด้วยฟีเจอร์ที่ซับซ้อนมากขึ้น เช่น รายการธุรกรรม

ขั้นตอนที่ 1: อัปเดตโครงสร้าง HTML ของคุณ

ก่อนอื่น แทนที่ส่วน "Balance" แบบคงที่ด้วยองค์ประกอบตัวแทนแบบไดนามิกที่ JavaScript ของคุณสามารถเติมข้อมูลได้:

<section>
  Balance: <span id="balance"></span><span id="currency"></span>
</section>

จากนั้นเพิ่มส่วนสำหรับคำอธิบายบัญชี เนื่องจากส่วนนี้ทำหน้าที่เป็นหัวข้อสำหรับเนื้อหาแดชบอร์ด ใช้ HTML เชิงความหมาย:

<h2 id="description"></h2>

ทำความเข้าใจโครงสร้าง HTML:

ใช้องค์ประกอบ <span> แยกสำหรับยอดคงเหลือและสกุลเงินเพื่อการควบคุมแยกกัน
กำหนด ID ที่ไม่ซ้ำกันให้แต่ละองค์ประกอบเพื่อการกำหนดเป้าหมายด้วย JavaScript
ปฏิบัติตาม HTML เชิงความหมายโดยใช้ <h2> สำหรับคำอธิบายบัญชี
สร้างลำดับชั้นที่มีเหตุผลสำหรับโปรแกรมอ่านหน้าจอและ SEO

✅ ข้อมูลเชิงลึกด้านการเข้าถึง: คำอธิบายบัญชีทำหน้าที่เป็นหัวข้อสำหรับเนื้อหาแดชบอร์ด ดังนั้นจึงถูกทำเครื่องหมายเชิงความหมายเป็นหัวข้อ เรียนรู้เพิ่มเติมเกี่ยวกับวิธีที่ โครงสร้างหัวข้อ ส่งผลต่อการเข้าถึง คุณสามารถระบุองค์ประกอบอื่นๆ บนหน้าของคุณที่อาจได้รับประโยชน์จากแท็กหัวข้อได้หรือไม่?

ขั้นตอนที่ 2: สร้างฟังก์ชันอัปเดตแดชบอร์ด

ตอนนี้สร้างฟังก์ชันที่เติมข้อมูลแดชบอร์ดของคุณด้วยข้อมูลบัญชีจริง:

function updateDashboard() {
  if (!account) {
    return navigate('/login');
  }

  updateElement('description', account.description);
  updateElement('balance', account.balance.toFixed(2));
  updateElement('currency', account.currency);
}

ทีละขั้นตอน นี่คือสิ่งที่ฟังก์ชันนี้ทำ:

ตรวจสอบว่ามีข้อมูลบัญชีก่อนดำเนินการต่อ
เปลี่ยนเส้นทางผู้ใช้ที่ไม่ได้รับการรับรองกลับไปยังหน้าล็อกอิน
อัปเดตคำอธิบายบัญชีโดยใช้ฟังก์ชัน updateElement ที่นำกลับมาใช้ใหม่ได้
จัดรูปแบบยอดคงเหลือให้แสดงทศนิยมสองตำแหน่งเสมอ
แสดงสัญลักษณ์สกุลเงินที่เหมาะสม

💰 การจัดรูปแบบเงิน: เมธอด toFixed(2) นั้นช่วยชีวิต! มันทำให้ยอดคงเหลือของคุณดูเหมือนเงินจริงเสมอ - "75.00" แทนที่จะเป็นแค่ "75" ผู้ใช้ของคุณจะชื่นชอบการเห็นการจัดรูปแบบสกุลเงินที่คุ้นเคย

ขั้นตอนที่ 3: ทำให้แน่ใจว่าแดชบอร์ดของคุณอัปเดต

เพื่อให้แน่ใจว่าแดชบอร์ดของคุณรีเฟรชด้วยข้อมูลปัจจุบันทุกครั้งที่มีคนเข้าชม เราจำเป็นต้องเชื่อมต่อกับระบบนำทางของคุณ หากคุณทำงานที่มอบหมายใน บทเรียนที่ 1 เสร็จแล้ว สิ่งนี้ควรรู้สึกคุ้นเคย หากยังไม่เสร็จ ไม่ต้องกังวล - นี่คือสิ่งที่คุณต้องการ:

เพิ่มสิ่งนี้ไปยังส่วนท้ายของฟังก์ชัน updateRoute() ของคุณ:

if (typeof route.init === 'function') {
  route.init();
}

จากนั้นอัปเดตเส้นทางของคุณเพื่อรวมการเริ่มต้นแดชบอร์ด:

const routes = {
  '/login': { templateId: 'login' },
  '/dashboard': { templateId: 'dashboard', init: updateDashboard }
};

สิ่งที่การตั้งค่าที่ชาญฉลาดนี้ทำ:

ตรวจสอบว่าเส้นทางมีโค้ดเริ่มต้นพิเศษหรือไม่
รันโค้ดนั้นโดยอัตโนมัติเมื่อเส้นทางโหลด
ทำให้แน่ใจว่าแดชบอร์ดของคุณแสดงข้อมูลปัจจุบันเสมอ
รักษาเหตุผลและการจัดระเบียบของตรรกะการนำทางของคุณ

การทดสอบแดชบอร์ดของคุณ

หลังจากดำเนินการเปลี่ยนแปลงเหล่านี้ ทดสอบแดชบอร์ดของคุณ:

เข้าสู่ระบบด้วยบัญชีทดสอบ
ตรวจสอบว่าคุณถูกเปลี่ยนเส้นทางไปยังแดชบอร์ด
ตรวจสอบว่าคำอธิบายบัญชี ยอดคงเหลือ และสกุลเงินแสดงผลอย่างถูกต้อง
ลองออกจากระบบและเข้าสู่ระบบอีกครั้งเพื่อให้แน่ใจว่าข้อมูลรีเฟรชอย่างถูกต้อง

แดชบอร์ดของคุณควรแสดงข้อมูลบัญชีแบบไดนามิกที่อัปเดตตามข้อมูลของผู้ใช้ที่เข้าสู่ระบบ!

การสร้างรายการธุรกรรมอัจฉริยะด้วยเทมเพลต

แทนที่จะสร้าง HTML สำหรับแต่ละธุรกรรมด้วยตนเอง เราจะใช้เทมเพลตเพื่อสร้างรูปแบบที่สม่ำเสมอโดยอัตโนมัติ เช่นเดียวกับส่วนประกอบมาตรฐานที่ใช้ในกระบวนการผลิตยานอวกาศ เทมเพลตช่วยให้ทุกแถวธุรกรรมมีโครงสร้างและลักษณะเหมือนกัน

เทคนิคนี้สามารถปรับขนาดได้อย่างมีประสิทธิภาพตั้งแต่ธุรกรรมไม่กี่รายการไปจนถึงหลายพันรายการ โดยยังคงรักษาประสิทธิภาพและการนำเสนอที่สม่ำเสมอ

flowchart LR
    A[Transaction Data] --> B[HTML Template]
    B --> C[Clone Template]
    C --> D[Populate with Data]
    D --> E[Add to DOM]
    E --> F[Repeat for Each Transaction]

ขั้นตอนที่ 1: สร้างเทมเพลตธุรกรรม

ก่อนอื่น เพิ่มเทมเพลตที่นำกลับมาใช้ใหม่สำหรับแถวธุรกรรมใน HTML <body> ของคุณ:

<template id="transaction">
  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</template>

ทำความเข้าใจเทมเพลต HTML:

กำหนดโครงสร้างสำหรับแถวตารางเดียว
ยังคงมองไม่เห็นจนกว่าจะถูกโคลนและเติมข้อมูลด้วย JavaScript
รวมสามเซลล์สำหรับวันที่ คำอธิบาย และจำนวนเงิน
ให้รูปแบบที่นำกลับมาใช้ใหม่ได้สำหรับการจัดรูปแบบที่สม่ำเสมอ

ขั้นตอนที่ 2: เตรียมตารางของคุณสำหรับเนื้อหาแบบไดนามิก

ถัดไป เพิ่ม id ให้กับส่วนตารางของคุณเพื่อให้ JavaScript สามารถกำหนดเป้าหมายได้ง่าย:

<tbody id="transactions"></tbody>

สิ่งที่สิ่งนี้ทำให้สำเร็จ:

สร้างเป้าหมายที่ชัดเจนสำหรับการแทรกแถวธุรกรรม
แยกโครงสร้างตารางออกจากเนื้อหาแบบไดนามิก
เปิดใช้งานการล้างและเติมข้อมูลธุรกรรมได้ง่าย

ขั้นตอนที่ 3: สร้างฟังก์ชันโรงงานแถวธุรกรรม

ตอนนี้สร้างฟังก์ชันที่เปลี่ยนข้อมูลธุรกรรมเป็นองค์ประกอบ HTML:

function createTransactionRow(transaction) {
  const template = document.getElementById('transaction');
  const transactionRow = template.content.cloneNode(true);
  const tr = transactionRow.querySelector('tr');
  tr.children[0].textContent = transaction.date;
  tr.children[1].textContent = transaction.object;
  tr.children[2].textContent = transaction.amount.toFixed(2);
  return transactionRow;
}

การแยกย่อยฟังก์ชันโรงงานนี้:

ดึงองค์ประกอบเทมเพลตโดย ID ของมัน
โคลนเนื้อหาเทมเพลตเพื่อการจัดการที่ปลอดภัย
เลือกแถวตารางภายในเนื้อหาโคลน
เติมข้อมูลแต่ละเซลล์ด้วยข้อมูลธุรกรรม
จัดรูปแบบจำนวนเงินให้แสดงตำแหน่งทศนิยมที่เหมาะสม
ส่งคืนแถวที่เสร็จสมบูรณ์พร้อมสำหรับการแทรก

ขั้นตอนที่ 4: สร้างแถวธุรกรรมหลายแถวอย่างมีประสิทธิภาพ

เพิ่มโค้ดนี้ไปยังฟังก์ชัน updateDashboard() ของคุณเพื่อแสดงธุรกรรมทั้งหมด:

const transactionsRows = document.createDocumentFragment();
for (const transaction of account.transactions) {
  const transactionRow = createTransactionRow(transaction);
  transactionsRows.appendChild(transactionRow);
}
updateElement('transactions', transactionsRows);

ทำความเข้าใจวิธีการที่มีประสิทธิภาพนี้:

สร้างเอกสาร fragment เพื่อจัดการการดำเนินการ DOM แบบกลุ่ม คำสั่ง: สร้างฟังก์ชันการค้นหาสำหรับแอปธนาคารที่รวมถึง: 1) แบบฟอร์มการค้นหาที่มีช่องป้อนข้อมูลสำหรับช่วงวันที่ (จาก/ถึง), จำนวนเงินขั้นต่ำ/สูงสุด และคำสำคัญของคำอธิบายธุรกรรม, 2) ฟังก์ชัน filterTransactions() ที่กรองอาร์เรย์ account.transactions ตามเกณฑ์การค้นหา, 3) อัปเดตฟังก์ชัน updateDashboard() เพื่อแสดงผลลัพธ์ที่กรองแล้ว, และ 4) เพิ่มปุ่ม "ล้างตัวกรอง" เพื่อรีเซ็ตมุมมอง ใช้วิธีการอาร์เรย์ JavaScript สมัยใหม่ เช่น filter() และจัดการกรณีขอบสำหรับเกณฑ์การค้นหาที่ว่างเปล่า

เรียนรู้เพิ่มเติมเกี่ยวกับ agent mode ที่นี่

🚀 ความท้าทาย

พร้อมที่จะยกระดับแอปธนาคารของคุณไปอีกขั้นหรือยัง? มาทำให้มันดูดีและใช้งานง่ายกันเถอะ นี่คือไอเดียบางส่วนเพื่อจุดประกายความคิดสร้างสรรค์ของคุณ:

ทำให้สวยงาม: เพิ่มการออกแบบ CSS เพื่อเปลี่ยนแดชบอร์ดที่ใช้งานได้ให้กลายเป็นสิ่งที่ดูน่าดึงดูดใจ คิดถึงเส้นที่สะอาดตา การเว้นระยะที่ดี และอาจมีแอนิเมชันเล็กน้อย

ทำให้ตอบสนองได้ดี: ลองใช้ media queries เพื่อสร้าง การออกแบบที่ตอบสนอง ที่ใช้งานได้ดีบนโทรศัพท์ แท็บเล็ต และเดสก์ท็อป ผู้ใช้ของคุณจะขอบคุณ!

เพิ่มความน่าสนใจ: พิจารณาการใช้สีเพื่อแยกประเภทธุรกรรม (สีเขียวสำหรับรายรับ สีแดงสำหรับรายจ่าย), เพิ่มไอคอน, หรือสร้างเอฟเฟกต์เมื่อวางเมาส์ที่ทำให้ส่วนติดต่อผู้ใช้ดูมีชีวิตชีวา

นี่คือตัวอย่างแดชบอร์ดที่ดูดีหลังจากการออกแบบ:

ไม่จำเป็นต้องทำให้เหมือนตัวอย่างนี้เป๊ะ ๆ - ใช้มันเป็นแรงบันดาลใจและสร้างสรรค์ในแบบของคุณเอง!

แบบทดสอบหลังการบรรยาย

งานที่ได้รับมอบหมาย

ปรับปรุงและแสดงความคิดเห็นในโค้ดของคุณ

ข้อจำกัดความรับผิดชอบ:
เอกสารนี้ได้รับการแปลโดยใช้บริการแปลภาษา AI Co-op Translator แม้ว่าเราจะพยายามให้การแปลมีความถูกต้อง แต่โปรดทราบว่าการแปลอัตโนมัติอาจมีข้อผิดพลาดหรือความไม่ถูกต้อง เอกสารต้นฉบับในภาษาดั้งเดิมควรถือเป็นแหล่งข้อมูลที่เชื่อถือได้ สำหรับข้อมูลที่สำคัญ ขอแนะนำให้ใช้บริการแปลภาษามืออาชีพ เราไม่รับผิดชอบต่อความเข้าใจผิดหรือการตีความผิดที่เกิดจากการใช้การแปลนี้

52 KiB Raw Blame History