Интеграция с NocoDB для вывода списка рефералов по USER_ID. Реализовано на PuzzleBot
СПИСОК РЕФЕРАЛОВ
В этой статье мы рассмотрим, как в Puzzle можно интегрировать NocoDB с вашими мини-приложениями для вывода списка рефералов, приглашенных пользователями. Мы используем JavaScript для создания простого интерфейса, который позволяет пользователям вводить идентификатор (ID) и получать соответствующий список рефералов.
Основные элементы кода
const token = 'заIT43zdIy2vXNEXmLV*********';
const tableUrl = 'https://nocodb.puzzlebot.top/api/v2/tables/m0o0ba8********/records';
Что такое token и tableUrl?
- token: это токен аутентификации, который используется при обращении к API NocoDB. Он позволяет вашему приложению делать запросы к вашему табличному хранилищу.
- tableUrl: это URL-адрес API, который ссылается на таблицу в NocoDB, содержащую записи рефералов.
Функция searchUsers
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 из текстового поля и проверяет, что оно не пустое. Если это не так, отображается сообщение об ошибке.
- 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.
- 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. Если рефералы не найдены, выводится сообщение об ошибке.
Отображение результатов
data.list.forEach(user => {
const div = document.createElement('div');
div.className = 'user-container';
div.textContent = user.username;
resultsContainer.appendChild(div);
});
Если данные были успешно получены, мы проходим по каждому пользователю из ответа и создаем новый элемент div, который добавляется в контейнер результатов.
Функция showError
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>
Мой канал
Мой ТГ
6 комментариев