5 modernios API, kad padidintumėte žiniatinklio programą

Internetas patyrė nepaprastą evoliuciją, nuo statinių HTML puslapių pereinant prie dinamiškų, interaktyvių žiniatinklio programų, kurios vartotojams suteikia asmeninį potyrį. Naršyklės API kūrimas suvaidino svarbų vaidmenį vykdant šią transformaciją.

Naršyklės API yra iš anksto sukurtos sąsajos, integruotos į žiniatinklio naršykles, padedančios kūrėjams atlikti sudėtingas operacijas. Šios API reiškia, kad galite vengti dirbti su žemesnio lygio kodu ir sutelkti dėmesį į aukštos kokybės žiniatinklio programų kūrimą.

Naršykite šias įdomias naršyklės API ir sužinokite, kaip jas naudoti žiniatinklio programose, kad pasiektumėte maksimalų efektą.

1. Web Speech API

Web Speech API leidžia integruoti kalbos atpažinimą ir sintezę į žiniatinklio programas. Kalbos atpažinimo funkcija leidžia vartotojams įvesti tekstą į žiniatinklio programą kalbant. Priešingai, kalbos sintezės funkcija leidžia žiniatinklio programoms išvesti garsą reaguojant į vartotojo veiksmus.

Web Speech API naudinga pritaikymo neįgaliesiems tikslais. Pavyzdžiui, tai leidžia silpnaregiams vartotojams lengviau bendrauti su žiniatinklio programomis. Tai taip pat padeda vartotojams, kuriems sunku rašyti klaviatūra arba naršyti pele.

Be to, tai suteikia tiesioginį požiūrį į šiuolaikinių šiandien naudojamų įrankių ir technologijų kūrimą. Pavyzdžiui, galite naudoti API, kad kurkite kalbos pakeitimo tekstu programėles užrašams daryti.

// inicijuoti kalbos atpažinimą
konst pripažinimas = naujas webkitSpeechRecognition();
// nustatykite kalbą į anglų
atpažinimas.lang = „en-US“;
// apibrėžkite funkciją, skirtą kalbos atpažinimo rezultatui apdoroti
pripažinimas.rezultas = funkcija(įvykis) {
konst rezultatas = event.results[event.resultIndex][0].nuorašas;
konsolė.log (rezultatas)
};
// pradėti kalbos atpažinimą
atpažinimas.start();

Štai pavyzdys, kaip kalbos atpažinimo objektas naudojamas norint konvertuoti kalbą į tekstą, kuris būtų rodomas konsolėje.

2. Drag and Drop API

„Drag and Drop“ API leidžia vartotojams vilkti ir mesti elementus tinklalapyje. Ši API gali pagerinti jūsų žiniatinklio programos naudotojų patirtį, nes naudotojai gali lengvai perkelti ir pertvarkyti elementus. „Drag and Drop“ API sudaro dvi pagrindinės toliau išvardytos dalys:

• Vilkimo šaltinis yra elementas, kurį vartotojas spusteli ir tempia.
• Numetimo tikslas yra sritis, kurioje reikia numesti elementą.

Pridėkite įvykių klausytojus prie vilkimo šaltinio ir numeskite tikslinius elementus, kad galėtumėte naudoti „Drag and Drop“ API. Įvykio klausytojai tvarkys dragstart, dragenter, dragleave, dragover, drop ir vilkimo pabaigos įvykius.

// Gaukite nuvilkiamos zonos elementus
konst draggableElement = dokumentas.getElementById("velkamas");
konst dropZone = dokumentas.getElementById('išmetimo vieta');
// Pridėkite įvykių klausytojus, kad elementą būtų galima vilkti
draggableElement.addEventListener('vilkimas', (įvykis) => {
// Nustatykite duomenis, kurie turi būti perkeliami, kai elementas numetamas
 event.dataTransfer.setData('tekstas/paprastas', event.target.id);
});
// Pridėkite įvykių klausytoją, kad būtų galima nuleisti kritimo zonos elementą
dropZone.addEventListener("dragoveris", (įvykis) => {
 event.preventDefault();
 dropZone.classList.add(„nutempti“);
});
// Pridėkite įvykių klausytoją, kad galėtumėte apdoroti nuleidimo įvykį
dropZone.addEventListener('lašas', (įvykis) => {
 event.preventDefault();
konst draggableElementId = event.dataTransfer.getData('tekstas');
konst draggableElement = dokumentas.getElementById (dragableElementId);
 dropZone.appendChild (dragableElement);
 dropZone.classList.remove(„nutempti“);
});

Įdiegę aukščiau pateiktą programą, vartotojai galės vilkti elementą, kurio ID galima vilkti, ir numesti jį į nuleidimo zoną.

3. Ekrano orientacijos API

Ekrano orientacijos API kūrėjams teikia informaciją apie esamą įrenginio ekrano orientaciją. Ši API ypač naudinga žiniatinklio kūrėjams, kurie nori optimizuoti savo svetaines, kad jos atitiktų skirtingus ekrano dydžius ir orientacijas. Pavyzdžiui, jautri žiniatinklio programa pakoreguos savo sąsajos išdėstymą ir dizainą priklausomai nuo to, ar vartotojas laiko savo įrenginį vertikaliai, ar gulsčias.

Ekrano orientacijos API kūrėjams suteikia tam tikrų ypatybių ir metodų, leidžiančių pasiekti informaciją apie įrenginio ekrano orientaciją. Štai kai kurių API teikiamų savybių ir metodų sąrašas:

• langas.ekranas.orientacija.kampas: ši savybė grąžina esamą įrenginio ekrano kampą laipsniais.
• window.screen.orientation.type: ši ypatybė grąžina esamą įrenginio ekrano orientacijos tipą (pvz., „pagrindinis stačias“, „pagrindinis kraštovaizdis“).
• window.screen.orientation.lock (orientacija): Šis metodas užrakina ekrano orientaciją pagal konkrečią reikšmę (pvz., „pagrindinis portretas“).

Galite naudoti šias ypatybes ir metodus kurdami interaktyvias žiniatinklio programas, prisitaikančias prie skirtingų ekrano orientacijų.

Štai kodo fragmento pavyzdys, rodantis, kaip veikia ekrano orientacijos API, kad aptiktų ir reaguotų į įrenginio ekrano orientacijos pokyčius:

// Gaukite dabartinę ekrano orientaciją
konst srovėOrientacija = langas.screen.orientation.type;
// Pridėkite įvykių klausytoją, kad aptiktumėte ekrano orientacijos pokyčius
langas.screen.orientation.addEventListener('pakeisti', () => {
konst nauja Orientacija = langas.screen.orientation.type;
// Atnaujinkite vartotojo sąsają pagal naują orientaciją
jeigu (nauja Orientacija 'portrait-primary') {
// Sureguliuokite portreto orientacijos išdėstymą
 } Kitas {
// Sureguliuokite kraštovaizdžio išdėstymą
 }
});

4. Web Share API

„Web Share“ API leidžia kūrėjams integruoti vietines bendrinimo galimybes į savo žiniatinklio programas. Naudodami šią API naudotojai gali lengvai bendrinti turinį iš žiniatinklio programos tiesiai į kitas programas, pvz., socialinę mediją ar susirašinėjimo programas. Naudodami žiniatinklio bendrinimo API galite sklandžiai dalytis savo naudotojais, o tai gali padėti padidinti įtraukimą ir pritraukti srautą į jūsų žiniatinklio programą.

Norėdami įdiegti Web Share API, naudosite navigator.share metodas. Norėdami tai įgyvendinti, naudosite asinchroninė JavaScript funkcija, kuris grąžina pažadą. Tas pažadas išsispręs su a ShareData objektas, kuriame yra bendrinami duomenys, pvz., pavadinimas, tekstas ir URL. Kai tik turėsite ShareData objektą, galite skambinti navigator.share būdas atidaryti savąjį bendrinimo meniu ir leisti vartotojui pasirinkti programą, su kuria nori bendrinti turinį.

// Gaukite bendrinimo mygtuką
konst ShareButton = dokumentas.getElementById('share-mygtukas');
// Pridėti įvykių klausytoją, kad galėtumėte bendrinti mygtuką
shareButton.addEventListener('spustelėkite', async () => {
bandyti {
konst shareData = {
 pavadinimas: „Pažiūrėkite šią šaunią žiniatinklio programą!“,
 tekstas: „Aš ką tik atradau šią nuostabią programą, kurią turite išbandyti!“,
 url: ' https://example.com'
 };
laukti navigator.share (shareData);
 } sugauti (klaida) {
konsolė.error(„Klaida bendrinant turinį:“, klaida);
 }
});

5. Geolokacijos API

Geolokacijos API leidžia žiniatinklio programoms pasiekti vartotojo vietos duomenis. Ši API teikia tokią informaciją kaip platuma, ilguma ir aukštis virš jūros lygio, kad vartotojams būtų teikiamos vietos nustatymo paslaugos. Pavyzdžiui, žiniatinklio programos gali naudoti geografinės vietos nustatymo API, kad teiktų suasmenintą turinį ar paslaugas pagal vartotojo vietą.

Norėdami įdiegti geografinės vietos API, naudosite navigatorius.geolokacija objektas. Jei yra API palaikymas, galite naudoti getCurrentPosition metodą, kad sužinotumėte dabartinę vartotojo vietą. Šiam metodui naudojami du argumentai: sėkmingo atgalinio skambinimo funkcija, iškviesta vietai nuskaityti, ir klaidos atgalinio skambinimo funkcija, iškviečiama, jei nuskaitant vietą įvyko klaida.

// Gaukite vietos mygtuką ir išvesties elementą
konst Vietovės mygtukas = dokumentas.getElementById('vietos mygtukas');
konst outputElement = dokumentas.getElementById("išvesties elementas");
// Pridėti įvykių klausytoją prie vietos mygtukas
locationButton.addEventListener('spustelėkite', () => {
// Patikrinkite, ar palaikoma geografinė padėtis
jeigu (navigator.geolocation) {
// Gaukite dabartinę vartotojo poziciją
 navigator.geolocation.getCurrentPosition((padėtis) => {
 outputElement.textContent = „Platuma: ${position.coords.latitude}, Ilguma: ${position.coords.longitude}`;
 }, (klaida) => {
konsolė.error(„Klaida nustatant vietą:“, klaida);
 });
 } Kitas {
 outputElement.textContent = „Ši naršyklė nepalaiko geografinės vietos nustatymo“.;
 }
}); 

Galite sukurti geresnes žiniatinklio programas naudodami naršyklės API

Naršyklės API naudojimas gali iš tikrųjų pakeisti žiniatinklio programos vartotojo patirtį. Šios API gali padėti atskleisti naujus kūrybiškumo ir naujovių lygius, pradedant naujų funkcijų lygių pridėjimu ir baigiant labiau suasmenintų funkcijų kūrimu. Eksperimentuodami su šiomis API ir tyrinėdami jų potencialą, galite sukurti patrauklesnę, įtraukesnę ir dinamiškesnę žiniatinklio programą, kuri išsiskirtų perpildytame skaitmeniniame pasaulyje.

Naršyklės API panaudojimas kuriant įvairias technologijas aiškiai parodo jų platų pritaikymą ir reikšmę.