19 KiB

Raw Permalink Blame History

โครงการส่วนขยายเบราว์เซอร์ ตอนที่ 2: เรียก API และใช้ Local Storage

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

บทนำ

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

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

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

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

✅ ทำตามส่วนที่มีหมายเลขในไฟล์ที่เหมาะสมเพื่อทราบว่าจะวางโค้ดของคุณที่ไหน

ตั้งค่าธาตุที่จะใช้ในส่วนขยาย

ก่อนที่ JavaScript ของคุณจะสามารถจัดการกับอินเทอร์เฟซได้ มันต้องมีการอ้างอิงถึงธาตุ HTML เฉพาะ ลองนึกถึงกล้องโทรทรรศน์ที่ต้องชี้ไปยังดาวเฉพาะ - ก่อนที่กาลิเลโอจะศึกษาดวงจันทร์ของดาวพฤหัสบดี เขาต้องค้นหาและโฟกัสไปที่ดาวพฤหัสบดีเอง

ในไฟล์ index.js ของคุณ เราจะสร้างตัวแปร const ที่จับการอ้างอิงไปยังธาตุฟอร์มที่สำคัญแต่ละตัว นี่คล้ายกับวิธีที่นักวิทยาศาสตร์ติดป้ายอุปกรณ์ของพวกเขา - แทนที่จะค้นหาทั้งห้องปฏิบัติการทุกครั้ง พวกเขาสามารถเข้าถึงสิ่งที่ต้องการได้โดยตรง

// form fields
const form = document.querySelector('.form-data');
const region = document.querySelector('.region-name');
const apiKey = document.querySelector('.api-key');

// results
const errors = document.querySelector('.errors');
const loading = document.querySelector('.loading');
const results = document.querySelector('.result-container');
const usage = document.querySelector('.carbon-usage');
const fossilfuel = document.querySelector('.fossil-fuel');
const myregion = document.querySelector('.my-region');
const clearBtn = document.querySelector('.clear-btn');

โค้ดนี้ทำอะไร:

จับ ธาตุฟอร์มโดยใช้ document.querySelector() กับตัวเลือก CSS class
สร้าง การอ้างอิงไปยังช่องป้อนข้อมูลสำหรับชื่อภูมิภาคและคีย์ API
เชื่อมต่อ กับธาตุแสดงผลสำหรับข้อมูลการใช้คาร์บอน
ตั้งค่า การเข้าถึงธาตุ UI เช่น ตัวบ่งชี้การโหลดและข้อความแสดงข้อผิดพลาด
เก็บ การอ้างอิงธาตุแต่ละตัวในตัวแปร const เพื่อการใช้งานซ้ำในโค้ดของคุณ

เพิ่มตัวฟังเหตุการณ์

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

form.addEventListener('submit', (e) => handleSubmit(e));
clearBtn.addEventListener('click', (e) => reset(e));
init();

ทำความเข้าใจแนวคิดเหล่านี้:

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

✅ สังเกตไวยากรณ์ฟังก์ชันลูกศรแบบย่อที่ใช้ที่นี่ วิธีการ JavaScript สมัยใหม่นี้ดูสะอาดกว่าการแสดงออกของฟังก์ชันแบบดั้งเดิม แต่ทั้งสองวิธีทำงานได้ดีเท่ากัน!

สร้างฟังก์ชันการเริ่มต้นและรีเซ็ต

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

ฟังก์ชัน reset() ให้ผู้ใช้เริ่มต้นใหม่ - คล้ายกับวิธีที่นักวิทยาศาสตร์รีเซ็ตเครื่องมือของพวกเขาระหว่างการทดลองเพื่อให้ได้ข้อมูลที่สะอาด

function init() {
	// Check if user has previously saved API credentials
	const storedApiKey = localStorage.getItem('apiKey');
	const storedRegion = localStorage.getItem('regionName');

	// Set extension icon to generic green (placeholder for future lesson)
	// TODO: Implement icon update in next lesson

	if (storedApiKey === null || storedRegion === null) {
		// First-time user: show the setup form
		form.style.display = 'block';
		results.style.display = 'none';
		loading.style.display = 'none';
		clearBtn.style.display = 'none';
		errors.textContent = '';
	} else {
		// Returning user: load their saved data automatically
		displayCarbonUsage(storedApiKey, storedRegion);
		results.style.display = 'none';
		form.style.display = 'none';
		clearBtn.style.display = 'block';
	}
}

function reset(e) {
	e.preventDefault();
	// Clear stored region to allow user to choose a new location
	localStorage.removeItem('regionName');
	// Restart the initialization process
	init();
}

การแยกสิ่งที่เกิดขึ้นที่นี่:

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

แนวคิดสำคัญเกี่ยวกับ Local Storage:

คงอยู่ ข้อมูลระหว่างเซสชันเบราว์เซอร์ (ไม่เหมือน session storage)
เก็บ ข้อมูลเป็นคู่คีย์-ค่าโดยใช้ getItem() และ setItem()
คืนค่า null เมื่อไม่มีข้อมูลสำหรับคีย์ที่กำหนด
ให้ วิธีง่ายๆ ในการจดจำการตั้งค่าและการตั้งค่าของผู้ใช้

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

ลักษณะสำคัญ:

คงอยู่ ข้อมูลแม้หลังจากคุณปิดเบราว์เซอร์

รอด การรีสตาร์ทคอมพิวเตอร์และการล่มของเบราว์เซอร์

ให้ พื้นที่เก็บข้อมูลที่มากสำหรับการตั้งค่าผู้ใช้

เข้าถึง ได้ทันทีโดยไม่มีความล่าช้าของเครือข่าย

หมายเหตุสำคัญ: ส่วนขยายเบราว์เซอร์ของคุณมี local storage ที่แยกออกจากหน้าเว็บทั่วไป ซึ่งให้ความปลอดภัยและป้องกันความขัดแย้งกับเว็บไซต์อื่นๆ

คุณสามารถดูข้อมูลที่เก็บไว้ได้โดยเปิดเครื่องมือพัฒนาเบราว์เซอร์ (F12) ไปที่แท็บ Application และขยายส่วน Local Storage

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

จัดการการส่งฟอร์ม

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

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

สร้างฟังก์ชันที่จับเหตุการณ์การส่งฟอร์มและดึงข้อมูลที่ผู้ใช้ป้อน:

function handleSubmit(e) {
	e.preventDefault();
	setUpUser(apiKey.value, region.value);
}

ในโค้ดด้านบน เราได้:

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

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

เลือกใช้ API

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

19 KiB Raw Permalink Blame History