💻 Как устроен современный веб: клиент-серверная архитектура
Как работает большинство современных сайтов? За красивым интерфейсом скрывается интересный механизм обмена данными между вашим браузером (клиентом) и сервером.
Когда вы заходите на сайт, ваш браузер (фронтенд) запрашивает данные у сервера (бэкенд). Сервер отвечает в формате JSON - это такой простой способ представления информации.
📖 Как посмотреть эти данные самостоятельно?
Очень просто! В каждом браузере есть инструменты разработчика (нажмите F12 или правая кнопка мыши → "Инспектировать").
Вот что нужно сделать:
❶ Перейдите на вкладку Network
❷ Включите фильтр Fetch/XHR - это покажет только API-запросы
❸ Обновите страницу (чтобы заново сделать все запросы к серверу и получить ответы)
❹ Найдите нужный запрос
❺ Откройте вкладку Preview - здесь будут данные в удобном виде
❻ Хотите сохранить? Используйте Copy Object (в меню при нажатии правой кнопки мыши)
🤷 Почему это полезно знать?
Допустим, вы тестировщик или аналитик. Теперь вы можете самостоятельно проверить, какие данные приходят с сервера, не дожидаясь помощи от разработчиков. Это особенно удобно, когда нужно быстро понять, почему что-то не работает.
💡Пример
Eсли на сайте не отображаются товары, вы можете проверить, пришли ли они вообще с сервера. Если данные есть, но не показываются - проблема во фронтенде. Если данных нет - проблема на бэкенде.
Теперь вы знаете базовый принцип работы веб-приложений и умеете использовать DevTools для анализа сетевого трафика! 🤓
#webdevelopment #devtools #json #api
Как работает большинство современных сайтов? За красивым интерфейсом скрывается интересный механизм обмена данными между вашим браузером (клиентом) и сервером.
Когда вы заходите на сайт, ваш браузер (фронтенд) запрашивает данные у сервера (бэкенд). Сервер отвечает в формате JSON - это такой простой способ представления информации.
📖 Как посмотреть эти данные самостоятельно?
Очень просто! В каждом браузере есть инструменты разработчика (нажмите F12 или правая кнопка мыши → "Инспектировать").
Вот что нужно сделать:
❶ Перейдите на вкладку Network
❷ Включите фильтр Fetch/XHR - это покажет только API-запросы
❸ Обновите страницу (чтобы заново сделать все запросы к серверу и получить ответы)
❹ Найдите нужный запрос
❺ Откройте вкладку Preview - здесь будут данные в удобном виде
❻ Хотите сохранить? Используйте Copy Object (в меню при нажатии правой кнопки мыши)
🤷 Почему это полезно знать?
Допустим, вы тестировщик или аналитик. Теперь вы можете самостоятельно проверить, какие данные приходят с сервера, не дожидаясь помощи от разработчиков. Это особенно удобно, когда нужно быстро понять, почему что-то не работает.
💡Пример
Eсли на сайте не отображаются товары, вы можете проверить, пришли ли они вообще с сервера. Если данные есть, но не показываются - проблема во фронтенде. Если данных нет - проблема на бэкенде.
Теперь вы знаете базовый принцип работы веб-приложений и умеете использовать DevTools для анализа сетевого трафика! 🤓
#webdevelopment #devtools #json #api
🔥3❤1👍1
Нередко возникает ситуация, когда надо проанализировать данные, содержащиеся в json. Или просто их покрутить и получить нужный кусок.
Для этих целей, я когда-то сделал небольшое веб-приложение, позволяющее преобразовывать JSON (структурированные данные, обычно получаемые от сервера через API) в Excel или CSV формат.
Чаще всего я его использую при работе с API-ответами во фронтенде через DevTools, когда требуется представить данные в более читаемом табличном формате вместо вложенной структуры JSON (как это описано в этой статье).
💪 Пример использования
Представим, что на странице есть выпадающий список, данные для него могут приходить с бэка. Если надо получить элементы списка, просто копируем json из ответа АПИ, вставляем в конвертер, скачиваем Excel и получаем нужные мне значения.
Важно!
Обработка данных осуществляется локально на стороне пользователя
Передача информации на внешние серверы не производится
Исходный код выложен на: GitHub, в репозитории канала)
Всё вместилось в один файл))
Основным компонентом приложения, осуществляющим конвертацию является библиотека Datatables
#tools #json #API #opensource
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
👍2🔥2❤1
Пост для тех, кто слышит слова "API", "эндпоинт", "REST", но до конца не понимает, как это работает и зачем нужно.
Это как меню в ресторане: вы выбираете блюдо (request/запрос), официант (API) передаёт заказ на кухню (сервер) и приносит результат (response). Вам не нужно знать, как готовят — достаточно указать, что хотите.
Выше, в карточках, можно узнать подробнее как это устроено, а ниже основные термины:
🧩 Resource (ресурс) — объект, с которым работает API (например, пользователь, заказ). Каждый ресурс имеет свой URL (адрес), например, /users/123.
🚪 Endpoint (Эндпоинт) — адрес, по которому можно обратиться к API. Как почтовый ящик, но для данных. Например: api.example.com/users — это endpoint для получения списка пользователей.
📬 HTTP Methods (Методы запросов) — глаголы, которые говорят API, что вы хотите сделать: GET — запросить данные (как прочитать письмо); POST — отправить новые данные (как отправить письмо); PUT/PATCH — изменить существующие данные; DELETE — удалить данные.
📤 Request (Запрос) — сообщение от клиента к серверу с просьбой что-то сделать. Как письмо с надписью «Хочу список пользователей».
Состоит из: метода (GET), эндпоинта (/users), заголовков и тела (если нужно).
📥 Response (Ответ) — сообщение от сервера в ответ на запрос. Как конверт, который пришёл обратно: «Вот список пользователей» или «Ошибка: доступ запрещён».
Содержит: статус-код (200, 404), заголовки и тело с данными.
📄 Body (Тело) / Payload (Полезная нагрузка) — основное содержимое запроса или ответа. Как текст письма внутри конверта.
📝 Headers (Заголовки) — служебная информация о запросе/ответе — как надписи на конверте: «Срочно», «Только для вас».
Примеры: Content-Type: application/json (тип данных), Authorization: Bearer token (ключ доступа).
🔑 API Key (Ключ API) — уникальный идентификатор, как пароль для доступа к API. Нужен, чтобы система знала, кто делает запрос.
Представьте это как пропуск на работу — без него вас не пустят.
🚦 Status Codes (Коды ответов) — Числа, объясняющие результат запроса: 200 OK — всё хорошо, 404 Not Found — не найдено, 401 Unauthorized — нет доступа.
Как светофор: зелёный — едем, красный — стоп.
👀 Смотрите также
1. RESTful APIs in 100 Seconds
2. APIs Explained in 6 Minutes
#api #ликбез #simplewords
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
❤18🔥13
Excel — это не только таблицы и формулы. Прямо из Excel можно подключаться к API и выгружать данные как профи. Сегодня расскажу, как превратить Excel в мощный инструмент для работы с API без единой строчки кода.
🙉 Как это вообще возможно?
Excel (особенно версии для Windows) имеет встроенную функцию Power Query — мощный инструмент для подключения к различным источникам данных. И да, API — один из таких источников!
🧐 Зачем это вообще нужно?
— Анализировать данные без программирования
— Создавать отчеты на основе актуальных данных
— Сравнивать данные из разных источников
— Быстро проверять гипотезы без помощи разработчиков
📖 Разберём на примере: GitHub API
Допустим, вы хотите собрать информацию о репозиториях пользователя. Делаем так:
1. Откройте Excel, во вкладке Данные → Получить данные → Из других источников → Из веб.
2. Укажите URL GitHub API: например, для репозиториев вашего аккаунта:
https://api.github.com/user/repos3. Настройка аутентификации:
После ввода URL нажмите ОК.
Появится окно Authentication:
Выберите Basic → введите: Username: Ваш GitHub логин. Password: Скопированный токен (в поле пароля!).
Нажмите Connect.
4. После подключения откроется редактор Power Query.
Преобразование JSON в таблицу. Если данные отображаются как список или запись: Выберите Record или List → To Table.
Раскрытие вложенных полей. Для каждого столбца с данными нажмите на стрелку раскрытия рядом с названием столбца.
Сохранение и загрузка в Excel: Во вкладке Главная → Закрыть и загрузить → Закрыть и загрузить в.... Выберите, куда поместить данные (новый лист или существующий).
5. Чтобы обновлять данные без повторного подключения: Щелкните правой кнопкой по таблице в Excel → Обновить.
💡Главный подводный камень: пагинация
Большинство API ограничивают количество записей в одном запросе (обычно 10-100). Это называется пагинация.
Пример: GitHub API возвращает максимум 100 репозиториев за раз. Если их больше, нужно делать несколько запросов.
Как обойти пагинацию в Excel? Можно создать запрос, который автоматически перебирает страницы, а можно вручную менять параметры в URL и объединять результаты.
⚙️ Ограничения, о которых нужно знать
— Лимиты запросов — большинство публичных API имеют ограничения на количество запросов в минуту/час
— Авторизация — для некоторых API нужно добавлять заголовки авторизации (в Power Query это делается через "Дополнительные параметры")
— Структура данных — если API меняет структуру ответа, ваш запрос может перестать работать
— Максимальный размер — Excel имеет ограничения на количество строк (около 1 млн в современных версиях)
🤌 Лайфхак
Создайте шаблон Excel с подключением к нужному API один раз, сохраните его. Теперь вы можете обновлять данные одним кликом (Данные → Обновить все)!
Это особенно полезно для продуктовых менеджеров, аналитиков и всех, кто работает с данными, но не пишет код.
#excel #api #analytics #lifehacks
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥11❤7