یکی از مهمترین بخش‌های هر برنامه، بخش ذخیره و بازیابی دیتا است. برای ذخیره سازی از طریق وب و مرورگر، راه‌های مختلف زیادی چون
webStorage ,
Indexed DB ,
Sqlite ,
NeDB, و ... وجود دارند.
Sqlite دیتابیس مناسبی برای برنامه‌های چندسکویی است و عموما به عنوان
اولین گزینه استفاده می‌شود. برای کار با این دیتابیس، ما از ماژول
sql.js که یکی از ماژول‌های معروف در جاوااسکریپت است، استفاده می‌کنیم. برای نصب آن از طریق npm، به شکل زیر اقدام می‌کنیم:
npm install sql.js --save
سپس کد همیشگی زیر را برای آغاز، در فایل index.js وارد می‌کنیم:
const{app,BrowserWindow}=require("electron");
let win;
function onLoad()
{
win=new BrowserWindow({
width:800,
height:600
});
win.loadURL(`file://${__dirname}/index.html`);
}
app.on("ready",onLoad());
ابتدا باید بررسی کنیم که آیا دیتابیس از قبل موجود
است یا خیر و اگر موجود نبود، برای اولین بار آن را بسازیم. برای بررسی وجود
یک فایل نیز می‌توانیم از چند دستور مختلف استفاده کنیم. path.exists و fs.exists، دو عدد از آن‌ها می‌باشند که هر دوی آنان به صورت
غیرهمزمان هستند و پارمتر اولشان نام فایل، به همراه مسیر (یا تنها مسیر) است و
پارامتر دوم هم یک تابع callback است که به عنوان پارامتر، جواب را بر
می‌گرداند. برای استفاده از حالت همزمان، عبارت Sync را به انتهای نام متدها
اضافه کنید. نحوه استفاده از آن به شکل زیر است:
var path=require("path");
path.exists('filepath",(status)=>
{
....
});
var status=path.existsSync("file");
//===============================
var fs=require("fs");
fs.exists('filepath",(status)=>
{
....
});
var status=path.existsSync("file");
ولی بهتر است بدانید که تاریخ انقضای دو دستور بالا سر آمده است و الان از
دستور fs.stat استفاده می‌شود. این متد هم به دو شکل همزمان و غیرهمزمان
وجود دارد:
fs.stat('foo.txt', function(err, stat) {
if(err == null) {
console.log('فایل موجوده');
} else if(err.code == 'ENOENT') {
// فایل وجود نداره
fs.writeFile('log.txt', 'Some log\n');
} else {
//خطای دیگری رخ داده است
}
});
برای استفاده از حالت همزمان هم کد را به شکل زیر بنویسید:
try {
stats = fs.statSync(path);
console.log("File exists.");
}
catch (e) {
console.log("File does not exist.");
}
سپس کد زیر را در فرآیند اصلی وارد می‌کنیم:
const fs = require('fs');
const sql = require('sql.js');
dbPath = './mydb.sqlite';
dbExists=false;
try {
dbExists = fs.statSync(dbPath);
}
catch (e) {
}
if(!dbExists)
{
//create Database
var sqlStr=fs.readFileSync("./sql.txt");
var db = new sql.Database();
db.run(String(sqlStr));
//write to disk
var data=db.export();
var buffer=new Buffer(data);
fs.writeFileSync(dbPath,buffer);
}
else{
var buffer = fs.readFileSync(dbPath);
var db = new sql.Database(buffer);
}
ابتدا بررسی می‌کنیم که آیا فایلی با نام test.sqlite در مسیر جاری است یا خیر. در صورتی که نباشد، کد داخل شرط اجرا می‌شود. در اولین خط شرط، فایلی را با نام sql.txt که شامل محتوای زیر است، می‌خوانیم:
CREATE TABLE numbers (
id INT PRIMARY KEY
UNIQUE
NOT NULL,
fname VARCHAR (20) NOT NULL,
lname VARCHAR (30) NOT NULL,
number VARCHAR (15) NOT NULL
);
insert into numbers values(1,'ali','yeganeh','03111223344');
insert into numbers values(2,'xxx','yyy','45454555'); سپس در خطوط بعدی دیتابیس جدیدی را ایجاد می‌کنیم و دستور sql را با متد run اجرا می‌کنیم. دستوراتی که متد run اجرا می‌کند، شامل خروجی نیستند. پس دستوراتی را که نیاز به خروجی ندارند، به این متد بسپارید. سپس از این دیتابیس، یک شیء خروجی را دریافت میکنم و با بافر کردن، آن را در یک فایل ذخیره می‌کنیم. در صورتی هم که از قبل دیتابیس وجود داشته باشد، بافر خوانده شده را مستقیما به سازنده Database می‌دهیم.
بعد از آن نیاز است تا دیتابیس در دسترس Render Processها قرار بگیرد که در مقاله "
شیوه کدنویسی در الکترون " در مورد global صحبت کرده‌ایم و نحوه استفاده از آن را فرا گرفتیم:
در پایان اجرای برنامه لازم است که دیتابیس توسط دستور close بسته شود. سپس کد زیر را در رویداد windows-all-closed می‌نویسیم:
app.on('window-all-closed', () => {
db.close();
if (process.platform !== 'darwin') {
app.quit();
}
}); در این کد گفته‌ایم که موقعی که تمام پنجره‌های برنامه بسته شدند، دیتابیس را نیز ببند.
(چند مورد خارج از بحث): کد بعدی که مورد استفاده قرار گرفته است و در مقالات قبلی در مورد آن صحبت نکرده‌ایم این است که در سیستم‌های مک، وضعیت به این قرار است که اگر شما برنامه را ببیندید، آن برنامه بسته نشده و در پس زمینه فعال است و می‌توانید آن را از طریق dock اطراف صفحه، مجددا فعال کنید. ولی با نوشتن کد بالا، ما این وضعیت را اعلام کرده‌ایم که اگر تمامی پنجره‌ها بسته شدند، کل برنامه را ببند.
همچنین بسیار خوب است که کد زیر را هم همیشه اضافه کنید:
win.on('closed', () => {
win = null;
});
موقعی که پنجره مربوطه بسته شود، متغیری که به پنجره اشاره می‌کند، در حافظه می‌ماند. پس بهتر است که این مقدار حافظه را رها کنید تا Garbage Collector اقدام به حذف آن در حافظه کند.
پس اگر این کد را نوشتید، وضعیت سیستم عامل مک را به خاطر داشته باشید و مجبور هستید کد زیر را نیز اضافه کنید:
app.on('activate', () => {
if (win === null) {
createWindow();
}
});
در این صورت اگر کاربر پنجره را از طریق Dock مجددا فعال کرد، پنجره برنامه شما نیز مجددا نمایش داده خواهدشد.
بعد از اینکه دیتابیس را به شیء global دادیم، در صفحه html کد زیر را وارد می‌کنیم:
<html>
<head>
<script src="./jquery.min.js"></script>
<link href="./bootstrap-3.3.6-dist/css/bootstrap.min.css" rel="stylesheet"></link>
<meta charset="utf-8">
<title></title>
<script>
const {remote}=require("electron");
let db=remote.getGlobal("db");
</script>
</head>
<body>
<table id="people" class="table table-hover table-striped">
<th>
<tr>
<td>First Name</td>
<td>last Name</td>
<td>Phone Number</td>
</tr>
</th>
<tbody>
</tbody>
</table>
</body>
</html>
در این کد یک جدول داریم و قصد ما این است که آن دو سطر را که در ابتدا اضافه کردیم، در آن نمایش دهیم. چیزی که در این کدها قابل ملاحظه است، این است که ما از بسته‌های بوت استرپ و
جی کوئری استفاده می‌کنیم. در ادامه کدهای زیر را در تگ اسکریپت وارد می‌کنیم:
$(document).ready(()=>
{
//show data
var tableBody=$("#people");
db.each("select * from numbers",(row)=>{
let rowTemplate=`<tr><td>${row.fname}</td><td>${row.lname}</td><td>${row.number}</td></tr>`;
tableBody.append(rowTemplate);
}); متد each برای مواقعی مناسب است که شما تعدادی سطر را برای بازگشت دارید و callback آن، به ازای هر سطر اجرا می‌شود و با استفاده از یک template string سطر سازی را انجام داده و آن را با استفاده از توابع جی کوئری به انتهای جدول اضافه می‌کنیم.
حال وقت آن رسیده است که خروجی کار را ببینیم. پس کد npm start را اجرا می‌کنیم. همانطور که می‌بینید خروجی به راحتی نمایش داده می‌شود. در مقاله بعدی بیشتر در این مورد صحبت می‌کنیم.
