ВВЕДЕНИЕ

Эта статья покажет вам, как вы можете использовать базу данных SQLite для своего приложения Electron.

Недавно я начал создавать автономное настольное приложение с помощью Electron. Это означало, что мне нужно было иметь локальную базу данных для моего приложения.

Проведя некоторое исследование, я обнаружил, что использование SQLite лучше всего подходит для моего сценария. Однако мне пришлось много копать, и я не смог найти надежный ресурс, который показал бы мне, как я могу реализовать это в своем приложении Electron, использующем Vite и React.

Поэтому я создаю эту статью для тех, кто в будущем может оказаться в такой же ситуации, как я.

Настройка пустого проекта

В этом уроке я буду использовать этот шаблон для создания пустого проекта. Как всегда, спасибо разработчикам, которые сделали шаблон!

Используйте следующую команду в своем терминале и просмотрите параметры для настройки проекта. Вы также можете нажать кнопку «использовать этот шаблон» на GitHub и настроить такой репозиторий.

Обратите внимание, что по какой-то причине «npm create electronic-vite» не пытается использовать пряжу.

yarn create electron-vite

зайдите в свой проект и откройте его в коде VS (или другой вашей любимой IDE) и установите все зависимости, используя следующую команду в своем терминале.

yarn

Проверьте, что у вас есть работающий проект, используя

yarn dev

Ваш проект должен выглядеть примерно так

Установка SQLite и подключение к базе данных

Введите следующую команду, чтобы установить SQLite3 в свой проект.

yarn add sqlite3

Если вы используете другой менеджер пакетов, просто убедитесь, что вы устанавливаете sqlite3 как зависимость, а не зависимость Dev.

После установки создайте файл с именем "database.db" на верхнем уровне вашего проекта.

После установки Sqlite3 и создания файла "database.db" создайте файл "databaseConnection.ts" в папке electron.

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

В этом файле сначала мы импортируем sqlite и подключимся к нашей базе данных.

import sqlite3 from "sqlite3";

export const db = new sqlite3.Database("database.db");

Аргумент «database.db» попытается подключиться к файлу с таким именем в родительском каталоге вашего проекта. Если файл не существует, он создаст этот файл.

Заполнение базы данных

Следующим шагом будет создание таблиц внутри нашего файла базы данных. Мы можем сделать это, создав функции в нашей программе, но я буду использовать программу под названием Beekeeper Studio для создания таблиц, потому что это намного проще.

Запустите приложение, подключитесь к созданному вами файлу базы данных sqlite и выполните запросы для создания таблиц!

Получение данных из базы данных

Теперь мы создадим функцию в нашем файле «databaseConnection.ts» для извлечения данных из таблицы имен. Вот так выглядит наша функция.

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

export function getAllNames() {
  const query = "SELECT * FROM names;";
  return new Promise((resolve, reject) => {
    let statement = db.prepare(query);
    statement.all((err, rows) => {
      if (err) {
        console.error(err.message);
        reject(err);
      } else {
        resolve(rows);
      }
      statement.finalize();
    });
  });
}

Связь между бэкендом и внешним интерфейсом с помощью IPCMain

Мы будем использовать IPCMain (модуль в nodejs для отправки и получения сообщений) для отправки наших данных в наш интерфейс.

В том же «databaseConnection.ts» создайте еще одну функцию с именем IPCHandlers и введите в нее следующее.

export function IpcHandlers() {
  ipcMain.handle("get-all-names", async (event, args) => {
    const data = await getAllNames();
    return data;
  });
}

Что делает эта функция, так это то, что каждый раз, когда IPCMain получает событие «get-all-names», эта функция срабатывает и отправляет данные обратно.

Теперь в electron/main/index.ts добавьте функцию IpcHandlers, чтобы электрон зарегистрировал их. Измените следующее

app.whenReady().then(createWindow)

К этому

app.whenReady().then(() => {
  IpcHandlers();
  createWindow();
});

Теперь все ваши обработчики зарегистрированы, и вы сможете вызывать их в своем интерфейсе!

В вашем App.tsx давайте проверим это!

function App() {
  const [count, setCount] = useState(0)

  async function getData() {
    const data = await ipcRenderer.invoke("get-all-names")
    console.log("This data came from my database:", data)
  }
  getData();
  
  return (
    <div className='App'>...

И вуаля! теперь вы можете извлекать и получать данные из своей базы данных.

Заключение

В заключение в этой статье представлено пошаговое руководство по настройке базы данных sqlite для электронного приложения, использующего React и TypeScript. Я показал, как установить sqlite3; как общаться с вашей базой данных с помощью IPCMain и как получать данные в вашем интерфейсе.

Вы также можете найти репозиторий, который я создал для демонстрации того, что я показал в этой статье, здесь.

Надеюсь, вам была полезна эта статья :)