Вопрос или проблема
Я оцениваю использование dexie, включая dexie-cloud, в проекте на чистом JavaScript. Это на самом деле просто раздел “Пользовательский код” в инструменте с низким кодом.
Поскольку я хотел бы сохранить все просто, я ищу решение на чистом JavaScript.
Использование самого dexie работает без проблем, это даже задокументировано здесь: https://dexie.org/docs/Tutorial/Hello-World
Но нет примера, включающего добавление dexie-cloud https://dexie.org/cloud/#getting-started. Я попробовал разные подходы, такие как:
- Используя обычный
<script src="https://unpkg.com/[email protected]/dist/umd/dexie-cloud-addon.js"> - Осознав, что это AMD-модуль, я использовал
<script type="module">import Dexie from "https://unpkg.com/[email protected]/dist/dexie.js"...
Но я не могу заставить его работать. Кто-нибудь использовал dexie-cloud на странице на чистом JavaScript?
Был похожий вопрос в обсуждениях на GitHub: https://github.com/dexie/Dexie.js/discussions/1826
Используйте включения скриптов, чтобы включить UMD-версию:
- dexie
- rxjs
- dexie-cloud-addon
Ответ или решение
Чтобы использовать Dexie и Dexie Cloud в проекте, выполненном с помощью Vanilla JS, следуйте приведенной ниже инструкции. Я объясню, как правильно подключить библиотеки и создать примерный проект.
Шаг 1: Подключение библиотек
Если вы хотите использовать Dexie и Dexie Cloud без системы сборки, вы можете подключить необходимые библиотеки через CDN. Вам понадобятся следующая структура скриптов в вашем HTML-файле:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> dexie-cloud с Vanilla JS</title>
<script src="https://unpkg.com/dexie@latest/dist/umd/dexie.js"></script>
<script src="https://unpkg.com/rxjs@latest/bundles/rxjs.umd.min.js"></script>
<script src="https://unpkg.com/dexie-cloud-addon@latest/dist/umd/dexie-cloud-addon.js"></script>
</head>
<body>
<script>
// Здесь будет ваш код
</script>
</body>
</html>Шаг 2: Инициализация Dexie с Cloud
Теперь, когда библиотеки подключены, вы можете инициализировать свою базу данных с использованием Dexie Cloud. Вот пример того, как это можно сделать:
// Создание базы данных
const db = new Dexie("MyDatabase");
// Определение схемы
db.version(1).stores({
friends: '++id,name,age'
});
// Инициализация Dexie Cloud
DexieCloud.setupCloud(db, {
appId: 'your-app-id', // Замените на ваш ID приложения
instanceId: 'your-instance-id', // Замените на ваш ID экземпляра
});
// Пример функции для добавления записи в базу данных
async function addFriend(name, age) {
try {
const id = await db.friends.add({ name, age });
console.log(`Друзья добавлены с ID: ${id}`);
} catch (error) {
console.error("Ошибка при добавлении друга: ", error);
}
}
// Пример функции для получения всех друзей
async function getFriends() {
try {
const friends = await db.friends.toArray();
console.log("Список друзей: ", friends);
} catch (error) {
console.error("Ошибка при получении друзей: ", error);
}
}
// Вызов функций для тестирования
addFriend("Иван", 25);
getFriends();Шаг 3: Работы с Cloud
Когда вы настроите Cloud, вы сможете использовать методы, предоставляемые Dexie Cloud, для синхронизации данных с удаленным сервером. Убедитесь, что вы правильно настроили ваше приложение на сайте Dexie Cloud, получили необходимые идентификаторы и указали их в настройках.
Заключение
Теперь у вас есть простейший пример использования Dexie и Dexie Cloud в проекте Vanilla JS. Не забудьте проверить документацию по Dexie Cloud для более подробных сведений о синхронизации данных и управлении облачными экземплярами. Если у вас возникнут дополнительные вопросы, не стесняйтесь задавать их в обсуждениях на GitHub или в других сообществах разработчиков.