Интеграция с NocoDB для вывода списка рефералов по USER_ID. Реализовано на PuzzleBot

В этой статье мы рассмотрим, как в Puzzle можно интегрировать NocoDB с вашими мини-приложениями для вывода списка рефералов, приглашенных пользователями. Мы используем JavaScript для создания простого интерфейса, который позволяет пользователям вводить идентификатор (ID) и получать соответствующий список рефералов.

const token = 'заIT43zdIy2vXNEXmLV*********';
const tableUrl = 'https://nocodb.puzzlebot.top/api/v2/tables/m0o0ba8********/records';

- token: это токен аутентификации, который используется при обращении к API NocoDB. Он позволяет вашему приложению делать запросы к вашему табличному хранилищу.

- tableUrl: это URL-адрес API, который ссылается на таблицу в NocoDB, содержащую записи рефералов.

async function searchUsers() {
    const userId = document.getElementById('userIdInput').value.trim();
    const resultsContainer = document.getElementById('results');
    const loadingIndicator = document.getElementById('loading');

    if (!userId) {
        showError('Рефералы не найдены');
        return;
    }
    ...
}

Эта функция выполняется по нажатию кнопки "Поиск" после ввода ID пользователя. Она берет значение userId из текстового поля и проверяет, что оно не пустое. Если это не так, отображается сообщение об ошибке.
@verifure

- loadingIndicator: элемент, который показывает состояние загрузки во время выполнения запроса.  - resultsContainer: область, куда будут выводиться найденные рефералы.

const params = new URLSearchParams({
    where: USER_ID_TEXT,eq,${userId},
    fields: 'username'
});

const response = await fetch(${tableUrl}?${params}, {
    headers: {
        'xc-token': token,
        'Content-Type': 'application/json'
    }
});

Здесь мы формируем параметры запроса, чтобы найти записи, соответствующие введенному ID пользователя. Мы используем метод fetch для отправки HTTP-запроса к API NocoDB.
@verifure

- where: здесь мы указываем условие для фильтрации записей по идентификатору пользователя. - fields: вы можете указать, какие поля таблицы вы хотите получить. В нашем случае мы хотим получить только поле username.

if (!response.ok) throw new Error(HTTP error! status: ${response.status});

const data = await response.json();

if (data.list.length === 0) {
    showError('Рефералы не найдены');
    return;
}

После отправки запроса мы проверяем, успешно ли он выполнен, и извлекаем данные в формате JSON. Если рефералы не найдены, выводится сообщение об ошибке.
@verifure

data.list.forEach(user => {
    const div = document.createElement('div');
    div.className = 'user-container';
    div.textContent = user.username;
    resultsContainer.appendChild(div);
});

Если данные были успешно получены, мы проходим по каждому пользователю из ответа и создаем новый элемент div, который добавляется в контейнер результатов.

function showError(message) {
    const resultsContainer = document.getElementById('results');
    resultsContainer.innerHTML = <div class="error">${message}</div>;
}

Эта функция используется для отображения сообщений об ошибках. Принимает текст ошибки в качестве аргумента и обновляет содержимое контейнера результатов.

Таким образом, с помощью этого небольшого скрипта вы можете интегрировать ваше веб-приложение с NocoDB, позволяя пользователям вводить идентификаторы и получать список их приглашенных рефералов. Это простое решение можно адаптировать под ваши конкретные нужды и расширить для дополнительных задач.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>User Search</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            background-color: #f5f5f7;
            color: #1d1d1f;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }

        .container {
            width: 100%;
            max-width: 800px;
            padding: 20px;
            background-color: #ffffff;
            border-radius: 12px;
        }

        .search-box {
            display: flex;
            justify-content: space-between;
            margin-bottom: 20px;
        }

        #userIdInput {
            flex: 1;
            padding: 12px;
            font-size: 16px;
            border: 1px solid #d1d1d6;
            border-radius: 8px;
            margin-right: 10px;
            outline: none;
            transition: border-color 0.3s ease;
        }

        #userIdInput:focus {
            border-color: #007AFF;
        }

        button {
            padding: 12px 20px;
            background-color: #007AFF;
            color: white;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            font-size: 16px;
            transition: background-color 0.3s ease;
        }

        button:hover {
            background-color: #007bfd;
        }

.header-text {
display: flex;
height: 13px;
flex-direction: column;
justify-content: center;
flex-shrink: 0;
color: #7e7d83;
font-size: 13px;
font-weight: 380;
line-height: 90px;
letter-spacing: 0px;
}

.header {
display: flex;
width: 335px;
padding: 0 10px;
align-items: flex-start;
gap: 10px;
border-radius: 12px;
}

        .user-container {
            padding: 15px;
            margin: 10px 0;
            border: 1px solid #e0e0e0;
            border-radius: 8px;
            background-color: #fafafa;
            font-size: 16px;
            color: #1d1d1f;
            transition: background-color 0.3s ease;
        }

        .user-container:hover {
            background-color: #007bfd;
        }

        .error {
            color: #ff3b30;
            padding: 10px;
            font-size: 16px;
            text-align: center;
        }

        .loading {
            display: none;
            color: #666;
            padding: 10px;
            font-size: 16px;
            text-align: center;
        }
    </style>
</head>
<body>

<div class="header">
<div class="header-text">СПИСОК РЕФЕРАЛОВ</div>
</div>
<br>
<div class="content">
    <div class="container">
        <div class="search-box">
            <input type="text" 
                   id="userIdInput" 
                   placeholder="ID юзера">
            <button onclick="searchUsers()">Поиск</button>
            <div class="loading" id="loading">🔍</div>
        </div>
        <div id="results"></div>
    </div>

    <script>
        const token = 'Ваш токен';
        const tableUrl = 'https://nocodb.puzzlebot.top/api/v2/tables/Токен вашей таблицы/records';

        async function searchUsers() {
            const userId = document.getElementById('userIdInput').value.trim();
            const resultsContainer = document.getElementById('results');
            const loadingIndicator = document.getElementById('loading');

            if (!userId) {
                showError('Рефералы не найдены');
                return;
            }

            try {
                // Показываем загрузку
                loadingIndicator.style.display = 'block';
                resultsContainer.innerHTML = '';

                // Формируем запрос
                const params = new URLSearchParams({
                    where: `(USER_ID_TEXT,eq,${userId})`,
                    fields: 'username'
                });

                const response = await fetch(`${tableUrl}?${params}`, {
                    headers: {
                        'xc-token': token,
                        'Content-Type': 'application/json'
                    }
                });

                if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`);
                
                const data = await response.json();

                if (data.list.length === 0) {
                    showError('Транзакций по этой дате не найдено');
                    return;
                }

                // Создаем элементы
                data.list.forEach(user => {
                    const div = document.createElement('div');
                    div.className = 'user-container';
                    div.textContent = user.username;
                    resultsContainer.appendChild(div);
                });

            } catch (error) {
                showError(`Error: ${error.message}`);
            } finally {
                loadingIndicator.style.display = 'none';
            }
        }

        function showError(message) {
            const resultsContainer = document.getElementById('results');
            resultsContainer.innerHTML = `<div class="error">${message}</div>`;
        }
    </script>
</body>
</html>

Мой канал

t.me

Puzzle Html • Шаблоны

Мой ТГ

t.me

Hacker Verifure

6 комментариев

Константин Нагибович

22 мар

Ну вот, теперь и для работы с конструктором надо код уметь писать.

Ответить

Автор

Не обязательно, но можно, Puzzle и так позволяет реализовывать немыслимые проекты в своем конструкторе, мы создали канал где собираем готовые шаблоны 🤫
Подписывайтесь