具有Electron，React和SQLite堆栈的独立应用程序。

Sometimes we need to build some kind of application that does not need to consume any online service and we need to store data at the same time. Local storage could be an option in some cases, but a few weeks ago I’ve faced a project requirement where the application must store massive data collected in field research at remote places with no internet connection.

有时，我们需要构建不需要使用任何在线服务的应用程序，而我们需要同时存储数据。 在某些情况下，可以选择使用本地存储，但是几周前，我遇到了一个项目要求，即该应用程序必须在没有互联网连接的情况下在远程位置存储在田野研究中收集的海量数据。

The collectors were using a kind of windows application built with the C# Windows Forms framework and SQLite that I created. With that stack, it’s simple to open a file or even connect to a database, as the process who runs the application is the same main process that launched it.

收集者使用的是一种Windows应用程序，该应用程序是用我创建的C＃Windows Forms框架和SQLite构建的。 使用该堆栈，打开文件甚至连接数据库都很简单，因为运行应用程序的进程与启动该文件的主进程相同。

Of course, the collectors came back to me asking about new requirements on the application, and as I’ve learned and improved much more my skills I decided to rewrite the small application using that new stack proposed at the story title.

当然，收藏家回来找我询问有关该应用程序的新要求，并且随着我学习和提高技能的更多，我决定使用故事标题中提出的新堆栈来重写小型应用程序。

TL;DR;

TL; DR;

让我们来看看什么照亮了我们的眼睛 (Let’s get to what lights up our eyes)

First of all, we must use create-react-app to bootstrap our application and then install some dependencies related to the Electron.

首先，我们必须使用create-react-app引导我们的应用程序，然后安装一些与Electron相关的依赖项。

create-react-app appyarn add electron electron-builder wait-on concurrently --devyarn add electron-is-dev

Add this electron.js file to the “public” folder.

将此electron.js文件添加到“ public”文件夹中。

Add the “main” property to package.json and point to our electron file:

在package.json中添加“ main”属性，并指向我们的电子文件：

“main”: “public/electron.js”

Add this script to run the dev version:

添加此脚本以运行开发版本：

"electron-dev": "concurrently \"BROWSER=none yarn start\" \"wait-on http://localhost:3000 && electron .\""

Run the script:

运行脚本：

yarn electron-dev

Now you have a sample electron app running. It’s basically what a guy named Kitze wrote here.

现在，您正在运行一个示例电子应用程序。 这基本上是一个名叫Kitze的人在这里写的。

现在怎么办？ 如何连接到SQLite数据源？ (What now? How to connect to an SQLite data source?)

At this point, We’re about to use something named Electron ipcMain and ipcRenderer. They are both a Node.js Event Emitter. Essentially we use them to communicate between the main process to the render process and vice-versa.

此时，我们将使用名为Electron ipcMain和ipcRenderer的名称 。 它们都是Node.js 事件发射器 。 本质上，我们使用它们在主流程与渲染流程之间进行通信，反之亦然。

拿到这些工具后，让我们“乒乓”吧。 (Having these tools on our hands, let’s “ping pong” it.)

Write a function to allow the renderer to say ping to the main process. It will send a message named asynchronous-message to the main process and will be waiting once for a response named asynchronous-reply.

编写一个函数，以允许渲染器对主进程说出ping。 它将向主进程发送一个名为异步消息的消息 ，并且将等待一次名为异步响应的响应 。

As our renderer.js will be imported by the Electron renderer process, we must explicit we want Node integration at our created BrowserWindow. So, get back to electron.js and put this there.

由于我们的renderer.js将由Electron渲染器进程导入，因此我们必须明确希望在创建的BrowserWindow上进行Node集成。 因此，回到electron.js并将其放在此处。

new BrowserWindow({
    ...
    webPreferences: {
      nodeIntegration: true,
    }
});

That’s how the electron dependencies are injected into the browser window. Afterward, we import the dependency from the window variable as you could see on the renderer.js file.

这就是将电子相关性注入浏览器窗口的方式。 然后，如您在renderer.js文件上看到的那样，我们从window变量导入依赖项。

const electron = window.require('electron');

Now, write a function to allow the main process to receive the renderer message (asynchronous-message) and respond it back (asynchronous-reply).

现在，编写一个函数，以允许主进程接收渲染器消息( 异步消息 )并对其进行响应( 异步回复 ) 。

Import the main.js on our electron.js file. Remember that file, right?

将main.js导入我们的electronic.js文件。 还记得那个文件吧？

// preferable require it right after the main imports.
require('../src/message-control/main');

On our web application (the renderer), create basic logic just to see that behavior happening.

在我们的Web应用程序(渲染器)上，创建基本逻辑以查看发生的行为。

Awesome, we already have our web application communicating to the main process, which is so powerful in terms of access.

太棒了，我们已经使我们的Web应用程序与主流程进行通信，该流程在访问方面非常强大。

您可能会说：“好吧，我们已经做了很多事情，但是您还没有向我展示任何有关SQLite的信息。” (You may say: “Ok, we’ve already played a lot with it but you didn’t show me anything about SQLite yet.”)

Yeah, I did this on purpose to make sure you understood the concept of the communication between both processes (main and renderer).

是的，我这样做是为了确保您了解两个进程(主进程和渲染器)之间的通信概念。

So, talking about SQLite… add it.

因此，谈论SQLite ...添加它。

yarn add sqlite3

Tip: Add an SQLite database file to the public folder. I suggest you use the DB Browser for SQLite tool.

提示：将SQLite数据库文件添加到公用文件夹。 我建议您使用 DB Browser for SQLite 工具。

Change the main.js to receive a SQL statement, run it, and send the result back to the renderer via event.

更改main.js以接收SQL语句，运行它，然后通过事件将结果发送回渲染器。

Change the App.js to treat the result as an array, as below:

更改App.js以将结果视为数组，如下所示：

Now, you must see the query results on the app screen. Simple as it is.

现在，您必须在应用程序屏幕上查看查询结果。 就这么简单。

Ok! That’s all folks.

好！ 那是所有人。

Did you get a kind of ‘module not found’ error about SQLite?

您是否收到有关SQLite的“找不到模块”错误？

That’s because sqlite3 isn’t a native module, as in Node.js only 400 modules are native, against the 650,000 modules available.

这是因为sqlite3不是本机模块，因为在Node.js中只有400个本机模块，而可用的650,000个模块是本机模块。

https://www.electronjs.org/docs/tutorial/using-native-node-modules

But, if you wanna solve that, repeat the following steps:

但是，如果您想解决该问题，请重复以下步骤：

yarn add --dev electron-rebuild

Add to your package.json:

添加到您的package.json中：

“rebuild-sqlite3”: “electron-rebuild -f -w sqlite3”

Run:

跑：

yarn rebuild-sqlite3

It could be a bit tricky. If you are on a MacOSX, you might need to have XCode and its tools installed. Also, on Windows, you may need to have some of the .NET Framework properly installed to build that native module. I don’t want to talk about that part of the story to avoid distraction from the main story’s idea.

这可能有点棘手。 如果您使用的是MacOSX，则可能需要安装XCode及其工具。 另外，在Windows上，您可能需要正确安装一些.NET Framework才能构建该本机模块。 我不想谈论故事的那一部分，以避免分散主故事的想法。

结论 (Conclusion)

With that stack, every React web developer can build desktop solutions collecting and storing data into an improved data source once compared to the simple and limited local storage.

与简单且有限的本地存储相比，有了该堆栈，每个React Web开发人员都可以构建桌面解决方案，以将数据收集和存储到改进的数据源中。

I hope you all enjoyed it. You can check the repository at https://github.com/fmacedoo/ers-stack

希望大家喜欢。 您可以在https://github.com/fmacedoo/ers-stack中检查存储库

Thanks!

谢谢！

翻译自: https://medium.com/@fmacedoo/standalone-application-with-electron-react-and-sqlite-stack-9536a8b5a7b9