И така, случи се! Най-накрая приключих със създаването на първото си приложение за една страница: ежедневно водене на дневник. Това приложение е създадено като част от моето портфолио проект за Flatiron School, Software Engineer Bootcamp. С това приложение за дигитален дневник можете:
- достъп до произволна ежедневна оферта, за да останете мотивирани и позитивни
- като ежедневния цитат
- напишете нов запис в дневника
- потърсете минал запис в дневника според датата
В тази статия ще разгледаме стъпките за достъп до данни от API и след това как да покажете тези данни във вашия проект. Ще използвам част от кода на приложението Daily Journaling App като пример, за да можете да следвате и използвате същите стъпки за вашето собствено приложение.
Да започваме!
СТЪПКА 1: изберете своя API
Има много безплатни публични API, от които да избирате, така че границата наистина е неограничена. За този проект избрах API за цитат, за да мога да показвам случаен цитат. API е от Type Fit и може да бъде достъпен тук: https://type.fit/api/quotes
СТЪПКА 2: разберете API
Уверете се, че сте прочели документацията на API, за да можете да разберете как да получите достъп до вашия API (проверете дали имате нужда от ключ или ако трябва да се абонирате...) и как се записват данните.
В нашия случай можем да видим, че всеки цитат е обект с 2 ключа:
- текст
- автор
Това ще бъде полезно по-късно, когато дойде време за манипулиране на данните.
СТЪПКА 3: достъп до данните
Сега, след като знаем как изглеждат нашите данни, е време да получим достъп до тях с нашето приложение. В нашия файл index.js ще използваме заявка за извличане:
ЗАБЕЛЕЖКА: просто заменете своя URL адрес на API за вашия проект
Обичам да регистрирам данните в console.log, за да проверя дали наистина имаме това, което искахме. В този случай, да, нашата заявка за извличане беше успешна!
Използвайки конзолата с инструменти за разработчици в браузъра Chrome, това беше console.log (вижте фиг. 3)
СТЪПКА 4: „покажете“ данните
След като вече знаем, че имаме достъп до данните в API, е време да ги „покажем“ в нашия проект. За целта ще коригираме нашата заявка за извличане и ще добавим функция за показване на данните. Ще извикаме тази функция displayQuote()
ЗАБЕЛЕЖКА: тъй като искам да покажа случаен цитат, ще коригирам кода си, за да избера произволен цитат вместо целия масив от кавички. (вижте фиг. 5)
Ако обърнете внимание на заглавието на СТЪПКА 4, ще забележите, че „дисплей“ е в „ “. Това е така, защото въпреки че написахме целия този код, пак нямаше да видим нищо показано в нашето приложение. Това е така, защото все още трябва да:
- създайте HTML елементите, където искаме да се показва нашата оферта
- напишете кода за displayQuote()
Нека направим точно това!
СТЪПКА 5: създайте HTML елементи, където искаме да се показват нашите данни
Ако помним правилно СТЪПКА 2, всеки цитат беше обект с ключовете текст и автор (вижте фиг. 1 и фиг. 3). И така, избрах да имам 2 различни HTML елемента за показване на тези 2 ключа:
- ‹q› ‹/q› за текста на цитата
- ‹p› ‹/p› за автора на цитата
ЗАБЕЛЕЖКА: този код е в моя index.html
Също така дадох идентификатор на всеки елемент, за да мога да получа достъп до тях по-късно в моя index.js
СТЪПКА 6: достъп до HTML елементите в index.js
Преди да започнем да кодираме нашата функция displayQuote(), трябва да имаме достъп до новосъздадените html елементи. Тъй като дадохме идентификатор на тези елементи, можете да го направите, като използвате:
- .querySelector()
OR
- .getElementById()
СТЪПКА 7: кодиране на нашата функция displayQuote().
Най-накрая можем да напишем кода за displayQuote(). Когато го правим, нека запомним няколко неща:
- когато извикахме displayQuote(), имаме цитат като параметър (вижте фиг. 5)
- цитатът е обект с 2 ключа: текст и автор (вижте фиг. 3)
- искаме стойността на innerText на всеки html елемент да бъде стойността на съответния ключ на нашия цитиран обект
ЗАБЕЛЕЖКА: Избрах името на автора да е с главни букви, така че ще използвам .toUpperCase()
СТЪПКА 8: проверете отново дали всичко работи
Ако сте забелязали (вижте фиг. 9), използвах console.log(quoteObj), за да се уверя, че параметърът, с който имаме работа, наистина е цитиран обект. Ето какво върна този console.log() в конзолата с инструменти за програмисти:
Ето как изглежда нашата показана оферта в нашето приложение:
ЗАКЛЮЧИТЕЛНИ ДУМИ
В тази статия научихте процеса стъпка по стъпка за достъп до данни от API и показване на тези данни във вашето приложение.
Ако имате някакви въпроси, просто ми оставете коментар по-долу и аз с удоволствие ще ви отговоря.
Ако искате да проверите целия проект, можете да го направите тук.
