32 KiB

Raw Blame History

Browser Extension Project Part 2: Gumamit ng API, Local Storage

journey
    title Your API Integration & Storage Journey
    section Foundation
      Setup DOM references: 3: Student
      Add event listeners: 4: Student
      Handle form submission: 4: Student
    section Data Management
      Implement local storage: 4: Student
      Build API calls: 5: Student
      Handle async operations: 5: Student
    section User Experience
      Add error handling: 5: Student
      Create loading states: 4: Student
      Polish interactions: 5: Student

Pre-Lecture Quiz

Pre-lecture quiz

Panimula

Naalala mo ba ang browser extension na sinimulan mong gawin? Sa ngayon, mayroon kang magandang form, ngunit ito ay static pa rin. Ngayon, bibigyan natin ito ng buhay sa pamamagitan ng pagkonekta sa totoong data at pagbibigay ng memorya.

Isipin ang mga computer ng Apollo mission control - hindi lang sila nagpapakita ng nakapirming impormasyon. Patuloy silang nakikipag-ugnayan sa spacecraft, ina-update gamit ang telemetry data, at inaalala ang mahahalagang parameter ng misyon. Ganitong uri ng dynamic na pag-uugali ang itatayo natin ngayon. Ang iyong extension ay makakakuha ng totoong environmental data mula sa internet at maaalala ang iyong mga setting para sa susunod.

Ang API integration ay maaaring mukhang kumplikado, ngunit ito ay simpleng pagtuturo sa iyong code kung paano makipag-usap sa ibang mga serbisyo. Kung ikaw man ay kumukuha ng weather data, social media feeds, o impormasyon tungkol sa carbon footprint tulad ng gagawin natin ngayon, ito ay tungkol sa pagtatatag ng mga digital na koneksyon. Tatalakayin din natin kung paano maaaring mag-imbak ng impormasyon ang mga browser - katulad ng kung paano ginamit ng mga library ang card catalogs para maalala kung saan nakalagay ang mga libro.

Sa pagtatapos ng araling ito, magkakaroon ka ng browser extension na kumukuha ng totoong data, nag-iimbak ng mga preference ng user, at nagbibigay ng maayos na karanasan. Simulan na natin!

mindmap
  root((Dynamic Extensions))
    DOM Manipulation
      Element Selection
      Event Handling
      State Management
      UI Updates
    Local Storage
      Data Persistence
      Key-Value Pairs
      Session Management
      User Preferences
    API Integration
      HTTP Requests
      Authentication
      Data Parsing
      Error Handling
    Async Programming
      Promises
      Async/Await
      Error Catching
      Non-blocking Code
    User Experience
      Loading States
      Error Messages
      Smooth Transitions
      Data Validation

✅ Sundin ang mga numeradong segment sa mga kaukulang file para malaman kung saan ilalagay ang iyong code

I-set up ang mga elementong gagamitin sa extension

Bago manipulahin ng iyong JavaScript ang interface, kailangan nito ng mga reference sa mga partikular na HTML element. Isipin ito na parang teleskopyo na kailangang itutok sa mga partikular na bituin - bago mapag-aralan ni Galileo ang mga buwan ng Jupiter, kailangan niyang hanapin at ituon ang teleskopyo sa Jupiter mismo.

Sa iyong index.js file, gagawa tayo ng mga const variable na kumukuha ng mga reference sa bawat mahalagang element ng form. Katulad ito ng kung paano nilalagyan ng label ng mga siyentipiko ang kanilang kagamitan - sa halip na maghanap sa buong laboratoryo sa bawat pagkakataon, maaari nilang direktang ma-access ang kanilang kailangan.

flowchart LR
    A[JavaScript Code] --> B[document.querySelector]
    B --> C[CSS Selectors]
    C --> D[HTML Elements]
    
    D --> E[".form-data"]
    D --> F[".region-name"]
    D --> G[".api-key"]
    D --> H[".loading"]
    D --> I[".errors"]
    D --> J[".result-container"]
    
    E --> K[Form Element]
    F --> L[Input Field]
    G --> M[Input Field]
    H --> N[UI Element]
    I --> O[UI Element]
    J --> P[UI Element]
    
    style A fill:#e1f5fe
    style D fill:#e8f5e8
    style K fill:#fff3e0
    style L fill:#fff3e0
    style M fill:#fff3e0

// 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');

Narito ang ginagawa ng code na ito:

Kinukuha ang mga element ng form gamit ang document.querySelector() na may CSS class selectors
Gumagawa ng mga reference sa input fields para sa pangalan ng rehiyon at API key
Nag-eestablish ng koneksyon sa mga element ng display para sa carbon usage data
Nagse-set up ng access sa mga UI element tulad ng loading indicators at error messages
Nag-iimbak ng bawat reference ng element sa isang const variable para madaling magamit sa buong code

Magdagdag ng mga event listener

Ngayon gagawin natin ang iyong extension na tumugon sa mga aksyon ng user. Ang mga event listener ay paraan ng iyong code para subaybayan ang mga interaksyon ng user. Isipin ito na parang mga operator sa mga unang telephone exchanges - nakikinig sila sa mga tawag at ikinokonekta ang tamang circuit kapag may gustong tumawag.

sequenceDiagram
    participant User
    participant Form
    participant JavaScript
    participant API
    participant Storage
    
    User->>Form: Fills out region/API key
    User->>Form: Clicks submit
    Form->>JavaScript: Triggers submit event
    JavaScript->>JavaScript: handleSubmit(e)
    JavaScript->>Storage: Save user preferences
    JavaScript->>API: Fetch carbon data
    API->>JavaScript: Returns data
    JavaScript->>Form: Update UI with results
    
    User->>Form: Clicks clear button
    Form->>JavaScript: Triggers click event
    JavaScript->>Storage: Clear saved data
    JavaScript->>Form: Reset to initial state

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

Pag-unawa sa mga konsepto:

Nag-a-attach ng submit listener sa form na nagti-trigger kapag pinindot ng user ang Enter o click submit
Nagkokonekta ng click listener sa clear button para i-reset ang form
Nagpapasa ng event object (e) sa mga handler function para sa karagdagang kontrol
Tumatawag sa init() function kaagad para i-set up ang initial state ng iyong extension

✅ Pansinin ang shorthand arrow function syntax na ginamit dito. Ang modernong JavaScript approach na ito ay mas malinis kaysa sa tradisyunal na function expressions, ngunit pareho silang gumagana nang maayos!

🔄 Pedagogical Check-in

Pag-unawa sa Event Handling: Bago magpatuloy sa initialization, tiyaking kaya mong:

✅ Ipaliwanag kung paano ikinokonekta ng addEventListener ang mga aksyon ng user sa mga JavaScript function
✅ Unawain kung bakit natin ipinapasa ang event object (e) sa mga handler function
✅ Kilalanin ang pagkakaiba ng submit at click events
✅ Ilarawan kung kailan tumatakbo ang init() function at kung bakit

Mabilis na Self-Test: Ano ang mangyayari kung nakalimutan mo ang e.preventDefault() sa isang form submission? Sagot: Mare-reload ang page, mawawala ang lahat ng JavaScript state at maaabala ang karanasan ng user

Bumuo ng initialization at reset functions

Gagawa tayo ng initialization logic para sa iyong extension. Ang init() function ay parang navigation system ng barko na nagche-check sa mga instrumento nito - tinutukoy nito ang kasalukuyang estado at ina-adjust ang interface nang naaayon. Tinitingnan nito kung may gumamit na sa iyong extension dati at ina-load ang kanilang mga nakaraang setting.

Ang reset() function ay nagbibigay sa mga user ng bagong simula - katulad ng kung paano nire-reset ng mga siyentipiko ang kanilang mga instrumento sa pagitan ng mga eksperimento para masigurado ang malinis na data.

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();
}

Paghiwa-hiwalay kung ano ang nangyayari dito:

Kinukuha ang naka-store na API key at rehiyon mula sa local storage ng browser
Tinitingnan kung ito ay unang beses na user (walang naka-store na credentials) o bumabalik na user
Ipinapakita ang setup form para sa mga bagong user at itinatago ang ibang mga element ng interface
Ina-load ang naka-save na data nang awtomatiko para sa mga bumabalik na user at ipinapakita ang reset option
Pinamamahalaan ang estado ng user interface batay sa available na data

Mga pangunahing konsepto tungkol sa Local Storage:

Nagpe-persist ng data sa pagitan ng mga session ng browser (hindi tulad ng session storage)
Nag-iimbak ng data bilang key-value pairs gamit ang getItem() at setItem()
Nagbabalik ng null kapag walang data para sa isang partikular na key
Nagbibigay ng simpleng paraan para maalala ang mga preference at setting ng user

💡 Pag-unawa sa Browser Storage: Ang LocalStorage ay parang nagbibigay ng persistent memory sa iyong extension. Isipin kung paano ang sinaunang Library of Alexandria ay nag-imbak ng mga scroll - nananatiling available ang impormasyon kahit umalis at bumalik ang mga iskolar.

Mga pangunahing katangian:

Nagpe-persist ng data kahit na isara mo ang browser

Nananatili kahit mag-restart ang computer o mag-crash ang browser

Nagbibigay ng malawak na storage space para sa mga preference ng user

Nag-aalok ng instant access nang walang network delays

Mahalagang Paalala: Ang browser extension mo ay may sariling isolated local storage na hiwalay sa regular na mga web page. Nagbibigay ito ng seguridad at pinipigilan ang mga conflict sa ibang mga website.

Makikita mo ang iyong naka-store na data sa pamamagitan ng pagbukas ng browser Developer Tools (F12), pagpunta sa Application tab, at pag-expand ng Local Storage section.

stateDiagram-v2
    [*] --> CheckStorage: Extension starts
    CheckStorage --> FirstTime: No stored data
    CheckStorage --> Returning: Data found
    
    FirstTime --> ShowForm: Display setup form
    ShowForm --> UserInput: User enters data
    UserInput --> SaveData: Store in localStorage
    SaveData --> FetchAPI: Get carbon data
    
    Returning --> LoadData: Read from localStorage
    LoadData --> FetchAPI: Get carbon data
    
    FetchAPI --> ShowResults: Display data
    ShowResults --> UserAction: User interacts
    
    UserAction --> Reset: Clear button clicked
    UserAction --> ShowResults: View data
    
    Reset --> ClearStorage: Remove saved data
    ClearStorage --> FirstTime: Back to setup

⚠️ Pagsasaalang-alang sa Seguridad: Sa mga production application, ang pag-iimbak ng API keys sa LocalStorage ay may panganib sa seguridad dahil maa-access ito ng JavaScript. Para sa layunin ng pag-aaral, ang approach na ito ay maayos, ngunit ang mga totoong application ay dapat gumamit ng secure server-side storage para sa mga sensitibong credentials.

I-handle ang form submission

Ngayon, hahawakan natin kung ano ang mangyayari kapag may nagsumite ng iyong form. Sa default, nire-reload ng mga browser ang page kapag nagsusumite ng form, ngunit i-intercept natin ang behavior na ito para makagawa ng mas maayos na karanasan.

Ang approach na ito ay katulad ng kung paano hinahandle ng mission control ang komunikasyon ng spacecraft - sa halip na i-reset ang buong sistema sa bawat transmission, pinapanatili nila ang tuloy-tuloy na operasyon habang pinoproseso ang bagong impormasyon.

Gumawa ng function na kumukuha ng form submission event at nag-eextract ng input ng user:

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

Sa itaas, ginawa natin ang:

Pinipigilan ang default na behavior ng form submission na magre-refresh ng page
Kinukuha ang mga input value ng user mula sa API key at region fields
Ipinapasa ang form data sa setUpUser() function para sa processing
Pinapanatili ang single-page application behavior sa pamamagitan ng pag-iwas sa page reloads

✅ Tandaan na ang iyong HTML form fields ay may required attribute, kaya awtomatikong sine-check ng browser na magbigay ang user ng parehong API key at rehiyon bago tumakbo ang function na ito.

I-set up ang mga preference ng user

Ang setUpUser function ang responsable sa pag-save ng credentials ng user at pag-initiate ng unang API call. Ginagawa nitong maayos ang transition mula sa setup patungo sa pagpapakita ng resulta.

function setUpUser(apiKey, regionName) {
	// Save user credentials for future sessions
	localStorage.setItem('apiKey', apiKey);
	localStorage.setItem('regionName', regionName);
	
	// Update UI to show loading state
	loading.style.display = 'block';
	errors.textContent = '';
	clearBtn.style.display = 'block';
	
	// Fetch carbon usage data with user's credentials
	displayCarbonUsage(apiKey, regionName);
}

Hakbang-hakbang, narito ang nangyayari:

Sine-save ang API key at pangalan ng rehiyon sa local storage para sa susunod na paggamit
Ipinapakita ang loading indicator para ipaalam sa user na kumukuha ng data
Nililinis ang anumang naunang error messages mula sa display
Ipinapakita ang clear button para sa user na i-reset ang kanilang settings sa susunod
Ini-initiate ang API call para kumuha ng totoong carbon usage data

Ang function na ito ay lumilikha ng seamless user experience sa pamamagitan ng sabay-sabay na pamamahala ng data persistence at mga update sa user interface.

I-display ang carbon usage data

Ngayon, ikokonekta natin ang iyong extension sa mga external data sources sa pamamagitan ng APIs. Binabago nito ang iyong extension mula sa standalone tool patungo sa isang bagay na makakakuha ng real-time na impormasyon mula sa internet.

Pag-unawa sa APIs

APIs ang paraan kung paano nag-uusap ang iba't ibang application sa isa't isa. Isipin ito na parang telegraph system na nagkonekta sa mga malalayong lungsod noong ika-19 na siglo - nagpapadala ang mga operator ng mga request sa malalayong istasyon at tumatanggap ng mga sagot na may hinihinging impormasyon. Sa tuwing nagche-check ka ng social media, nagtatanong sa voice assistant, o gumagamit ng delivery app, ang APIs ang nagpapadali sa mga data exchanges.

flowchart TD
    A[Your Extension] --> B[HTTP Request]
    B --> C[CO2 Signal API]
    C --> D{Valid Request?}
    D -->|Yes| E[Query Database]
    D -->|No| F[Return Error]
    E --> G[Carbon Data]
    G --> H[JSON Response]
    H --> I[Your Extension]
    F --> I
    I --> J[Update UI]
    
    subgraph "API Request"
        K[Headers: auth-token]
        L[Parameters: countryCode]
        M[Method: GET]
    end
    
    subgraph "API Response"
        N[Carbon Intensity]
        O[Fossil Fuel %]
        P[Timestamp]
    end
    
    style C fill:#e8f5e8
    style G fill:#fff3e0
    style I fill:#e1f5fe

Mga pangunahing konsepto tungkol sa REST APIs:

REST ay nangangahulugang 'Representational State Transfer'
Gumagamit ng standard HTTP methods (GET, POST, PUT, DELETE) para makipag-ugnayan sa data
Nagbabalik ng data sa predictable formats, kadalasang JSON
Nagbibigay ng consistent, URL-based endpoints para sa iba't ibang uri ng request

✅ Ang CO2 Signal API na gagamitin natin ay nagbibigay ng real-time na carbon intensity data mula sa mga electrical grid sa buong mundo. Nakakatulong ito sa mga user na maunawaan ang environmental impact ng kanilang electricity usage!

💡 Pag-unawa sa Asynchronous JavaScript: Ang async keyword ay nagbibigay-daan sa iyong code na mag-handle ng maraming operasyon nang sabay-sabay. Kapag humihiling ka ng data mula sa server, ayaw mong mag-freeze ang buong extension - parang air traffic control na tumitigil sa lahat ng operasyon habang naghihintay ng sagot mula sa isang eroplano.

Mga pangunahing benepisyo:

Pinapanatili ang responsiveness ng extension habang naglo-load ang data

Pinapayagan ang ibang code na magpatuloy sa pagtakbo habang may network requests

Pinapaganda ang readability ng code kumpara sa tradisyunal na callback patterns

Nagbibigay-daan sa maayos na error handling para sa mga network issues

Narito ang isang mabilis na video tungkol sa async:

🎥 I-click ang imahe sa itaas para sa video tungkol sa async/await.

🔄 Pedagogical Check-in

Pag-unawa sa Async Programming: Bago sumabak sa API function, tiyaking nauunawaan mo:

✅ Bakit natin ginagamit ang async/await sa halip na i-block ang buong extension
✅ Paano hinahandle ng try/catch blocks ang mga network error nang maayos
✅ Ang pagkakaiba ng synchronous at asynchronous operations
✅ Bakit maaaring mag-fail ang API calls at paano ito hinahandle

Real-World Connection: Isipin ang mga pang-araw-araw na async na halimbawa:

Pag-order ng pagkain: Hindi ka naghihintay sa kusina - makakakuha ka ng resibo at magpapatuloy sa ibang aktibidad
Pagpapadala ng email: Hindi nag-freeze ang email app habang nagpapadala - maaari kang gumawa ng iba pang email
Paglo-load ng web pages: Progressive na naglo-load ang mga imahe habang maaari mo nang basahin ang teksto

API Authentication Flow:

sequenceDiagram
    participant Ext as Extension
    participant API as CO2 Signal API
    participant DB as Database
    
    Ext->>API: Request with auth-token
    API->>API: Validate token
    API->>DB: Query carbon data
    DB->>API: Return data
    API->>Ext: JSON response
    Ext->>Ext: Update UI

Gumawa ng function para kumuha at mag-display ng carbon usage data:

// Modern fetch API approach (no external dependencies needed)
async function displayCarbonUsage(apiKey, region) {
	try {
		// Fetch carbon intensity data from CO2 Signal API
		const response = await fetch('https://api.co2signal.com/v1/latest', {
			method: 'GET',
			headers: {
				'auth-token': apiKey,
				'Content-Type': 'application/json'
			},
			// Add query parameters for the specific region
			...new URLSearchParams({ countryCode: region }) && {
				url: `https://api.co2signal.com/v1/latest?countryCode=${region}`
			}
		});

		// Check if the API request was successful
		if (!response.ok) {
			throw new Error(`API request failed: ${response.status}`);
		}

		const data = await response.json();
		const carbonData = data.data;

		// Calculate rounded carbon intensity value
		const carbonIntensity = Math.round(carbonData.carbonIntensity);

		// Update the user interface with fetched data
		loading.style.display = 'none';
		form.style.display = 'none';
		myregion.textContent = region.toUpperCase();
		usage.textContent = `${carbonIntensity} grams (grams CO₂ emitted per kilowatt hour)`;
		fossilfuel.textContent = `${carbonData.fossilFuelPercentage.toFixed(2)}% (percentage of fossil fuels used to generate electricity)`;
		results.style.display = 'block';

		// TODO: calculateColor(carbonIntensity) - implement in next lesson

	} catch (error) {
		console.error('Error fetching carbon data:', error);
		
		// Show user-friendly error message
		loading.style.display = 'none';
		results.style.display = 'none';
		errors.textContent = 'Sorry, we couldn\'t fetch data for that region. Please check your API key and region code.';
	}
}

Paghiwa-hiwalay kung ano ang nangyayari dito:

Gumagamit ng modernong fetch() API sa halip na external libraries tulad ng Axios para sa mas malinis, dependency-free na code
Nag-iimplement ng tamang error checking gamit ang response.ok para ma-catch ang API failures nang maaga
Hinahandle ang asynchronous operations gamit ang async/await para sa mas nababasang code flow
Nag-aauthenticate sa CO2 Signal API gamit ang auth-token header
Nagpa-parse ng JSON response data at kumukuha ng carbon intensity information
Ina-update ang maraming UI element gamit ang formatted environmental data
Nagbibigay ng user-friendly error messages kapag nag-fail ang API calls

Mga pangunahing modernong JavaScript concepts na ipinakita:

Template literals gamit ang ${} syntax para sa malinis na string formatting
Error handling gamit ang try/catch blocks para sa robust applications
Async/await pattern para sa maayos na pag-handle ng network requests
Object destructuring para makuha ang partikular na data mula sa API responses
Method chaining para sa maraming DOM manipulations

✅ Ang function na ito ay nagpapakita ng ilang mahahalagang konsepto sa web development - pakikipag-ugnayan sa mga external server, pag-handle ng authentication, pagproseso ng data, pag-update ng interface, at maayos na pag-handle ng errors. Ito ay mga pangunahing kasanayan na regular na ginagamit ng mga propesyonal na developer.

flowchart TD
    A[Start API Call] --> B[Fetch Request]
    B --> C{Network Success?}
    C -->|No| D[Network Error]
    C -->|Yes| E{Response OK?}
    E -->|No| F[API Error]
    E -->|Yes| G[Parse JSON]
    G --> H{Valid Data?}
    H -->|No| I[Data Error]
    H -->|Yes| J[Update UI]
    
    D --> K[Show Error Message]
    F --> K
    I --> K
    J --> L[Hide Loading]
    K --> L
    
    style A fill:#e1f5fe
    style J fill:#e8f5e8
    style K fill:#ffebee
    style L fill:#f3e5f5

🔄 Pedagogical Check-in

Pag-unawa sa Buong Sistema: Tiyaking master mo ang buong flow:

✅ Paano ang DOM references ay nagbibigay-daan sa JavaScript na kontrolin ang interface
✅ Bakit ang local storage ay lumilikha ng persistence sa pagitan ng mga session ng browser
✅ Paano ang async/await ay gumagawa ng API calls nang hindi nag-freeze ang extension
✅ Ano ang nangyayari kapag nag-fail ang API calls at paano hinahandle ang errors
✅ Bakit ang user experience ay may kasamang loading states at error messages

🎉 Ano ang iyong na-accomplish: Nakagawa ka ng browser extension na:

Kumokonekta sa internet at kumukuha ng totoong environmental data
Nagpe-persist ng user settings sa pagitan ng mga session
Hinahandle ang errors nang maayos sa halip na mag-crash
Nagbibigay ng maayos, propesyonal na user experience

I-test ang iyong gawa sa pamamagitan ng pag-run ng npm run build at pag-refresh ng iyong extension sa browser. Mayroon ka na ngayong functional carbon footprint tracker. Sa susunod na aralin, magdadagdag tayo ng dynamic icon functionality para makumpleto ang extension.

GitHub Copilot Agent Challenge 🚀

Gamitin ang Agent mode para kumpletuhin ang sumusunod na challenge: Deskripsyon: Pagandahin ang browser extension sa pamamagitan ng pagdaragdag ng mga pagpapabuti sa error handling at mga tampok para sa mas magandang karanasan ng user. Ang hamon na ito ay makakatulong sa iyo na magsanay sa paggamit ng APIs, local storage, at DOM manipulation gamit ang mga modernong pattern ng JavaScript.

Prompt: Gumawa ng pinahusay na bersyon ng displayCarbonUsage function na may kasamang: 1) Isang retry mechanism para sa mga nabigong API call gamit ang exponential backoff, 2) Input validation para sa region code bago gumawa ng API call, 3) Isang loading animation na may progress indicators, 4) Pag-cache ng mga API response sa localStorage na may expiration timestamps (cache para sa 30 minuto), at 5) Isang tampok para ipakita ang historical data mula sa mga nakaraang API call. Magdagdag din ng tamang TypeScript-style na JSDoc comments para idokumento ang lahat ng parameters ng function at mga return types.

Alamin pa ang tungkol sa agent mode dito.

🚀 Hamon

Palawakin ang iyong kaalaman sa APIs sa pamamagitan ng pag-explore sa iba't ibang browser-based APIs na magagamit para sa web development. Pumili ng isa sa mga browser APIs na ito at gumawa ng maliit na demonstration:

Geolocation API - Kunin ang kasalukuyang lokasyon ng user
Notification API - Magpadala ng desktop notifications
HTML Drag and Drop API - Gumawa ng interactive na drag interfaces
Web Storage API - Mga advanced na teknik sa local storage
Fetch API - Modernong alternatibo sa XMLHttpRequest

Mga tanong para sa pananaliksik:

Anong mga totoong problema ang nilulutas ng API na ito?
Paano hinahandle ng API ang mga error at edge cases?
Anong mga konsiderasyon sa seguridad ang umiiral kapag ginagamit ang API na ito?
Gaano kalawak ang suporta ng API na ito sa iba't ibang browser?

Pagkatapos ng iyong pananaliksik, tukuyin kung anong mga katangian ang nagpapaganda sa isang API para sa mga developer at maaasahan.

Post-Lecture Quiz

Post-lecture quiz

Review & Self Study

Natutunan mo ang tungkol sa LocalStorage at APIs sa araling ito, parehong napaka-kapaki-pakinabang para sa mga propesyonal na web developer. Maiisip mo ba kung paano nagtutulungan ang dalawang bagay na ito? Isipin kung paano mo ididisenyo ang isang website na mag-iimbak ng mga item na gagamitin ng isang API.

⚡ Ano ang Pwede Mong Gawin sa Loob ng 5 Minuto

Buksan ang DevTools Application tab at i-explore ang localStorage sa anumang website
Gumawa ng simpleng HTML form at subukan ang form validation sa browser
Subukan ang pag-iimbak at pagkuha ng data gamit ang localStorage sa browser console
I-inspect ang form data na isinusumite gamit ang Network tab

🎯 Ano ang Pwede Mong Makamit sa Loob ng Isang Oras

Kumpletuhin ang post-lesson quiz at unawain ang mga konsepto ng form handling
Gumawa ng browser extension form na nagse-save ng user preferences
Mag-implement ng client-side form validation na may kapaki-pakinabang na error messages
Magsanay sa paggamit ng chrome.storage API para sa data persistence ng extension
Gumawa ng user interface na tumutugon sa mga na-save na user settings

📅 Ang Iyong Extension Building sa Loob ng Isang Linggo

Kumpletuhin ang isang full-featured browser extension na may form functionality
Masterin ang iba't ibang storage options: local, sync, at session storage
Mag-implement ng advanced form features tulad ng autocomplete at validation
Magdagdag ng import/export functionality para sa user data
Subukan ang iyong extension nang maigi sa iba't ibang browser
Pagandahin ang user experience at error handling ng iyong extension

🌟 Ang Iyong Web API Mastery sa Loob ng Isang Buwan

Gumawa ng mga kumplikadong aplikasyon gamit ang iba't ibang browser storage APIs
Matutunan ang offline-first development patterns
Mag-ambag sa mga open source projects na may kinalaman sa data persistence
Masterin ang privacy-focused development at pagsunod sa GDPR
Gumawa ng reusable libraries para sa form handling at data management
Magbahagi ng kaalaman tungkol sa web APIs at extension development

🎯 Ang Iyong Extension Development Mastery Timeline

timeline
    title API Integration & Storage Learning Progression
    
    section DOM Fundamentals (15 minutes)
        Element References: querySelector mastery
                          : Event listener setup
                          : State management basics
        
    section Local Storage (20 minutes)
        Data Persistence: Key-value storage
                        : Session management
                        : User preference handling
                        : Storage inspection tools
        
    section Form Handling (25 minutes)
        User Input: Form validation
                  : Event prevention
                  : Data extraction
                  : UI state transitions
        
    section API Integration (35 minutes)
        External Communication: HTTP requests
                              : Authentication patterns
                              : JSON data parsing
                              : Response handling
        
    section Async Programming (40 minutes)
        Modern JavaScript: Promise handling
                         : Async/await patterns
                         : Error management
                         : Non-blocking operations
        
    section Error Handling (30 minutes)
        Robust Applications: Try/catch blocks
                           : User-friendly messages
                           : Graceful degradation
                           : Debugging techniques
        
    section Advanced Patterns (1 week)
        Professional Development: Caching strategies
                                : Rate limiting
                                : Retry mechanisms
                                : Performance optimization
        
    section Production Skills (1 month)
        Enterprise Features: Security best practices
                           : API versioning
                           : Monitoring & logging
                           : Scalable architecture

🛠️ Buod ng Iyong Full-Stack Development Toolkit

Pagkatapos ng araling ito, mayroon ka nang:

DOM Mastery: Tumpak na pag-target at pag-manipula ng mga elemento
Storage Expertise: Pamamahala ng persistent data gamit ang localStorage
API Integration: Real-time na pagkuha ng data at authentication
Async Programming: Non-blocking operations gamit ang modernong JavaScript
Error Handling: Mga matibay na aplikasyon na maayos na humahawak ng mga pagkakamali
User Experience: Loading states, validation, at maayos na interaksyon
Modern Patterns: fetch API, async/await, at ES6+ features

Mga Propesyonal na Kasanayan na Nakuha: Naipatupad mo ang mga pattern na ginagamit sa:

Web Applications: Single-page apps na may external data sources
Mobile Development: Mga API-driven apps na may offline capabilities
Desktop Software: Electron apps na may persistent storage
Enterprise Systems: Authentication, caching, at error handling
Modern Frameworks: React/Vue/Angular data management patterns

Susunod na Antas: Handa ka nang mag-explore ng mga advanced na paksa tulad ng caching strategies, real-time WebSocket connections, o kumplikadong state management!

Assignment

Adopt an API

Paunawa:
Ang dokumentong ito ay isinalin gamit ang AI translation service na Co-op Translator. Bagamat sinisikap naming maging tumpak, pakatandaan na ang mga awtomatikong pagsasalin ay maaaring maglaman ng mga pagkakamali o hindi pagkakatugma. Ang orihinal na dokumento sa kanyang katutubong wika ang dapat ituring na opisyal na pinagmulan. Para sa mahalagang impormasyon, inirerekomenda ang propesyonal na pagsasalin ng tao. Hindi kami mananagot sa anumang hindi pagkakaunawaan o maling interpretasyon na dulot ng paggamit ng pagsasaling ito.

32 KiB Raw Blame History

Browser Extension Project Part 2: Gumamit ng API, Local Storage

Pre-Lecture Quiz

Panimula

I-set up ang mga elementong gagamitin sa extension

Magdagdag ng mga event listener

🔄 Pedagogical Check-in

Bumuo ng initialization at reset functions

I-handle ang form submission

I-set up ang mga preference ng user

I-display ang carbon usage data

🔄 Pedagogical Check-in

🔄 Pedagogical Check-in

GitHub Copilot Agent Challenge 🚀

🚀 Hamon

Post-Lecture Quiz

Review & Self Study

⚡ Ano ang Pwede Mong Gawin sa Loob ng 5 Minuto

🎯 Ano ang Pwede Mong Makamit sa Loob ng Isang Oras

📅 Ang Iyong Extension Building sa Loob ng Isang Linggo

🌟 Ang Iyong Web API Mastery sa Loob ng Isang Buwan

🎯 Ang Iyong Extension Development Mastery Timeline

🛠️ Buod ng Iyong Full-Stack Development Toolkit

Assignment

32 KiB

Raw Blame History