msb-public
/
Web-Dev-For-Beginners
mirror of https://github.com/microsoft/Web-Dev-For-Beginners.git
1
0
Code Issues Projects Releases Wiki Activity
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from 'softchris-patch-23'
${ noResults }
Web-Dev-For-Beginners/translations/bg/5-browser-extension/2-forms-browsers-local-storage/assignment.md

10 KiB
Raw Permalink Blame History Escape

Осиновете API

Преглед

API отварят безкрайни възможности за креативна уеб разработка! В тази задача ще изберете външен API и ще създадете браузърно разширение, което решава реален проблем или предоставя ценна функционалност на потребителите.

Инструкции

Стъпка 1: Изберете вашия API

Изберете API от този подбран списък с безплатни публични API. Разгледайте следните категории:

Популярни опции за начинаещи:

  • Развлечения: Dog CEO API за случайни снимки на кучета
  • Времето: OpenWeatherMap за актуални данни за времето
  • Цитати: Quotable API за вдъхновяващи цитати
  • Новини: NewsAPI за актуални заглавия
  • Забавни факти: Numbers API за интересни факти за числа

Стъпка 2: Планирайте вашето разширение

Преди да започнете да програмирате, отговорете на тези въпроси за планиране:

  • Какъв проблем решава вашето разширение?
  • Кой е вашият целеви потребител?
  • Какви данни ще съхранявате в локалното хранилище?
  • Как ще се справите с неуспехи на API или ограничения на заявките?

Стъпка 3: Създайте вашето разширение

Вашето разширение трябва да включва:

Задължителни функции:

  • Формуляри за въвеждане на необходимите параметри на API
  • Интеграция с API с подходящо управление на грешки
  • Локално хранилище за потребителски предпочитания или ключове за API
  • Чист, адаптивен потребителски интерфейс
  • Състояния на зареждане и обратна връзка към потребителя

Изисквания към кода:

  • Използвайте съвременни функции на JavaScript (ES6+)
  • Използвайте async/await за API заявки
  • Включете подходящо управление на грешки с try/catch блокове
  • Добавете смислени коментари, обясняващи вашия код
  • Спазвайте последователно форматиране на кода

Стъпка 4: Тествайте и усъвършенствайте

  • Тествайте вашето разширение с различни входни данни
  • Справете се с крайни случаи (липса на интернет, невалидни отговори от API)
  • Уверете се, че вашето разширение работи след рестарт на браузъра
  • Добавете удобни за потребителя съобщения за грешки

Допълнителни предизвикателства

Направете вашето разширение още по-добро:

  • Добавете множество API крайни точки за по-богата функционалност
  • Реализирайте кеширане на данни за намаляване на API заявките
  • Създайте клавишни комбинации за често използвани действия
  • Добавете функции за експортиране/импортиране на данни
  • Реализирайте опции за персонализация на потребителя

Изисквания за подаване

  1. Работещо браузърно разширение, което успешно се интегрира с избрания API
  2. README файл, който обяснява:
    • Кой API сте избрали и защо
    • Как да инсталирате и използвате вашето разширение
    • Необходимите ключове за API или настройки
    • Екранни снимки на вашето разширение в действие
  3. Чист, коментиран код, който следва съвременните практики на JavaScript

Рубрика

Критерии Отлично (90-100%) Добро (80-89%) Развиващо се (70-79%) Начално (60-69%)
Интеграция с API Безупречна интеграция с API с цялостно управление на грешки и крайни случаи Успешна интеграция с API с основно управление на грешки API работи, но има ограничено управление на грешки Интеграцията с API има значителни проблеми
Качество на кода Чист, добре коментиран съвременен JavaScript, следващ най-добрите практики Добра структура на кода с адекватни коментари Кодът работи, но се нуждае от по-добра организация Лошо качество на кода с минимални коментари
Потребителски опит Изпипан интерфейс с отлични състояния на зареждане и обратна връзка към потребителя Добър интерфейс с основна обратна връзка към потребителя Основен интерфейс, който функционира адекватно Лош потребителски опит с объркващ интерфейс
Локално хранилище Сложно използване на локалното хранилище с валидиране и управление на данни Правилно внедряване на локалното хранилище за ключови функции Основно внедряване на локалното хранилище Минимално или неправилно използване на локалното хранилище
Документация Изчерпателен README с инструкции за настройка и екранни снимки Добра документация, покриваща повечето изисквания Основна документация, липсват някои детайли Лоша или липсваща документация

Съвети за начало

  1. Започнете просто: Изберете API, който не изисква сложна автентикация
  2. Прочетете документацията: Разберете добре крайните точки и отговорите на избрания API
  3. Планирайте вашия интерфейс: Направете скица на интерфейса на вашето разширение преди да започнете да програмирате
  4. Тествайте често: Работете постепенно и тествайте всяка функция, докато я добавяте
  5. Управлявайте грешките: Винаги предполагайте, че API заявките може да се провалят и планирайте съответно

Ресурси

Забавлявайте се, докато създавате нещо полезно и креативно! 🚀

Отказ от отговорност:
Този документ е преведен с помощта на AI услуга за превод Co-op Translator. Въпреки че се стремим към точност, моля, имайте предвид, че автоматизираните преводи може да съдържат грешки или неточности. Оригиналният документ на неговия роден език трябва да се счита за авторитетен източник. За критична информация се препоръчва професионален човешки превод. Не носим отговорност за недоразумения или погрешни интерпретации, произтичащи от използването на този превод.