# Примите API ## Обзор API открывают бесконечные возможности для креативной веб-разработки! В этом задании вам предстоит выбрать внешний API и создать расширение для браузера, которое решает реальную проблему или предоставляет полезную функциональность пользователям. ## Инструкции ### Шаг 1: Выберите API Выберите API из этого тщательно подобранного [списка бесплатных публичных API](https://github.com/public-apis/public-apis). Рассмотрите следующие категории: **Популярные варианты для начинающих:** - **Развлечения**: [Dog CEO API](https://dog.ceo/dog-api/) для случайных фотографий собак - **Погода**: [OpenWeatherMap](https://openweathermap.org/api) для данных о текущей погоде - **Цитаты**: [Quotable API](https://quotable.io/) для вдохновляющих цитат - **Новости**: [NewsAPI](https://newsapi.org/) для актуальных заголовков - **Интересные факты**: [Numbers API](http://numbersapi.com/) для интересных фактов о числах ### Шаг 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 могут завершиться неудачей, и заранее планируйте, как с этим справляться ## Ресурсы - [Документация по расширениям для браузера](https://developer.mozilla.org/docs/Mozilla/Add-ons/WebExtensions) - [Руководство по Fetch API](https://developer.mozilla.org/docs/Web/API/Fetch_API/Using_Fetch) - [Учебник по локальному хранилищу](https://developer.mozilla.org/docs/Web/API/Window/localStorage) - [Парсинг и обработка JSON](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/JSON) Получайте удовольствие от создания чего-то полезного и креативного! 🚀 --- **Отказ от ответственности**: Этот документ был переведен с использованием сервиса автоматического перевода [Co-op Translator](https://github.com/Azure/co-op-translator). Несмотря на наши усилия обеспечить точность, автоматические переводы могут содержать ошибки или неточности. Оригинальный документ на его родном языке следует считать авторитетным источником. Для получения критически важной информации рекомендуется профессиональный перевод человеком. Мы не несем ответственности за любые недоразумения или неправильные интерпретации, возникшие в результате использования данного перевода.