Membangun aplikasi offline-pertama dengan Node.js dan SQLite

"Offline dulu" adalah paradigma pengembangan aplikasi di mana pengembang memastikan bahwa fungsionalitas aplikasi tidak terpengaruh oleh hilangnya konektivitas jaringan untuk sementara. Aplikasi web progresif, yang terasa seperti aplikasi asli tetapi berjalan seperti aplikasi web, sering dibangun di atas paradigma ini.

Tutorial ini akan mengajarkan Anda cara membangun aplikasi offline terlebih dahulu dengan Node.js dan database SQLite. Mari kita mulai dengan pengenalan aplikasi web progresif.

Pengenalan PWA

Progressive Web Apps (PWA) adalah aplikasi web yang menggunakan service worker, manifes, dan fitur platform web lainnya serta peningkatan progresif untuk memberikan pengalaman yang sebanding dengan aplikasi asli kepada pengguna.

PWA terkadang dapat mengungguli aplikasi asli dalam hal efisiensi. Mereka beroperasi sesuai permintaan dan selalu tersedia tanpa menghabiskan memori atau data ponsel cerdas yang berharga. Pengguna mengkonsumsi lebih sedikit data saat memilih PWA daripada versi asli dari aplikasi yang sama. Mereka masih dapat menyimpan PWA ke layar beranda; itu dapat diinstal tanpa perlu mengunduh penuh.

Apa yang kita bangun?

Untuk mendemonstrasikan kekuatan aplikasi web progresif, kami akan membuat aplikasi blog sederhana.

Pengguna akan dapat berinteraksi dengannya seperti PWA lainnya, seperti PWA Twitter. Mari kita langsung saja.

Inisialisasi aplikasi NodeJs

Mari kita mengotori tangan kita. Untuk memulai, kami akan membuat folder proyek kami dengan perintah di bawah ini:

mkdir PWA && cd PWA

Kemudian, kita akan menginisialisasi aplikasi Node.js dengan perintah di bawah ini:

npm init -y

Perintah di atas membuat package.json file untuk aplikasi.

Selanjutnya, buat struktur folder berikut di folder proyek kami:

Siapkan server Ekspres

Dengan pengaturan aplikasi kita, mari kita instal Express untuk membuat server Node.js kita dengan perintah di bawah ini:

npm install express

Kemudian, kita akan membuat beberapa folder dan file di folder publik:

• file css/style.css
• file js/app.js

Selanjutnya, buat index.js file di direktori root proyek dengan cuplikan kode berikut di bawah ini:

const express = require("express");
const path = require("path");
const app = express();
app.use(express.static(path.join(__dirname, "public")));

app.get("/", function (req, res) {
  res.sendFile(path.join(__dirname, "public/index.html"));
});
app.listen(8000, () => console.log("Server is running on Port 8000"));

Dalam cuplikan kode, kami mengimpor express untuk membuat server kami dan jalur modul. Kami mengonfigurasi aplikasi kami untuk merender file statis menggunakan express.static metode, yang mengambil jalur ke folder statis (publik), kami membuat rute root aplikasi kami dan merender index.html mengajukan. Kemudian kami mengonfigurasi aplikasi untuk mendengarkan port 8000 .

Hubungkan ke Database SQLite

Dengan pengaturan server untuk aplikasi kita, mari buat dan hubungkan aplikasi kita untuk menyimpan detail blog kita. Untuk memulai, jalankan perintah di bawah ini untuk menginstal dependensi sqlite3.

npm install sqlite3

Kemudian, di titik masuk index.js file, tambahkan cuplikan kode di bawah ini untuk membuat dan menghubungkan aplikasi ke Database SQLite.

const db = new sqlite3.Database("db.sqlite", (err) => {
  if (err) {
    // Cannot open database
    console.error(err.message);
    throw err;
  } else {
    console.log("Connected to the SQLite database.");
  }
});

Selanjutnya, kita akan membuat daftar blog yang akan kita simpan di database kita dan dirender nanti ke sisi klien dengan cuplikan kode di bawah ini:

let blogs = [
  {
    id: "1",
    title: "How To Build A RESTAPI With Javascript",
    avatar: "images/coffee2.jpg",
    intro: "iste odio beatae voluptas dolor praesentium illo facere optio nobis magni, aspernatur quas.",
  },
  {
    id: "2",
    title: "How to Build an Offline-First Application with Node.js,"
    avatar: "images/coffee2.jpg",
"iste odio beatae voluptas dolor praesentium illo facere optio nobis magni, aspernatur quas.",
  },
  {
    id: "3",
    title: "Building a Trello Clone with React DnD",
    avatar: "images/coffee2.jpg",
    intro: "iste odio beatae voluptas dolor praesentium illo facere optio nobis magni, aspernatur quas.",
  },
];

Setiap posting blok di aplikasi kita akan memiliki id , judul , avatar , dan pengantar bidang.

Sekarang buat nama tabel database blog dan simpan detail blog yang baru saja kita buat di atas dengan cuplikan kode di bawah ini:

db.run(
  `CREATE TABLE blog (id INTEGER PRIMARY KEY AUTOINCREMENT, title text,avatar text,intro text)`,
  (err) => {
    if (err) {
      // console.log(err)
      // Table already created
    } else {
      // Table just created, creating some rows
      var insert = "INSERT INTO blogs (title, avatar, intro) VALUES (?,?,?)";
      blogs.map((blog) => {
        db.run(insert, [
          `${blog.title}`,
          `${blog.avatar}`,
          `${blog.intro}`,
        ]);
      });
    }
  }
);

Dalam cuplikan kode, kami membuat tabel blog menggunakan db.run. db.run metode mengambil kueri SQL sebagai parameter, lalu kita mengulang array blog kita dan memasukkannya ke dalam tabel blog yang baru saja kita buat menggunakan fungsi js map.

Lihat Catatan Basis Data

Sekarang mari kita lihat catatan yang baru saja kita buat menggunakan Arctype. Untuk melihat record dalam database SQLite Anda menggunakan Arctype, ikuti langkah-langkah di bawah ini:

• Instal Arctype
• Jalankan Aplikasi dengan node index.js untuk membuat basis data
• Luncurkan Arctype dan klik pada tab SQLite

• Klik pada Pilih file SQLite tombol, dan cari db.sqlite file yang dihasilkan saat Anda menjalankan server.
• Anda akan melihat tabel blog dan catatan yang kami buat seperti yang ditunjukkan pada tangkapan layar di bawah ini:

Render Halaman

Pada titik ini, kami telah menghubungkan aplikasi ke database SQLite dan juga memasukkan beberapa catatan ke dalam database. Sekarang, buka index.html file dan tambahkan cuplikan kode berikut di bawah ini:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link rel="stylesheet" href="css/style.css" />
    <title>Blogger</title>
    <link rel="manifest" href="manifest" />
  </head>
  <body>
    <section>
      <nav>
        <h1>Blogger</h1>
        <ul>
          <li>Home</li>
           <li class="active">Blog</li>
        </ul>
      </nav>
      <div class="container"></div>
    </section>
    <script src="js/app.js"></script>
  </body>
</html>

Kami membuat markup sederhana dengan tautan ke manifes kami di file di atas, yang akan kami buat di bagian berikutnya, gaya , dan app.js file.

Kemudian, kita akan membuat blog rute di index.js our kami file untuk mengembalikan blog ke sisi klien.

...
app.get("/blogs", (req, res) => {
  res.status(200).json({
    blogs,
  });
});
...

Di public/js/app.js our kami file, kami akan mengirimkan permintaan get ke endpoint blog untuk mendapatkan blog dari backend kami. Kemudian kami mengulang blog, menargetkan wadah kelas dan menampilkannya.

let result = "";
fetch("http://localhost:8000/blogs")
  .then((res) => res.json())
   .then(({ rows } = data) => {
    rows.forEach(({ title, avatar, intro } = rows) => {
      result += `
       <div class="card">
            <img class="card-avatar" src="/${avatar}"/>
            <h1 class="card-title">${title}</h1>
            <p class="intro">${intro}</p>
            <a class="card-link" href="#">Read</a>
        </div>
       `;
    });
    document.querySelector(".container").innerHTML = result;
  })
  .catch((e) => {
    console.log(e);
  });

Kami juga akan menambahkan beberapa gaya ke aplikasi kami di public/css/style.css dengan cuplikan kode di bawah ini:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  background: #fdfdfd;
  font-size: 1rem;
}
section {
  max-width: 900px;
  margin: auto;
  padding: 0.5rem;
  text-align: center;
}
nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
ul {
  list-style: none;
  display: flex;
}
li {
  margin-right: 1rem;
}
h1 {
  color: #0e9c95;
  margin-bottom: 0.5rem;
}
.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  grid-gap: 1rem;
  justify-content: center;
  align-items: center;
  margin: auto;
  padding: 1rem 0;
}
.card {
  display: flex;
  align-items: center;
  flex-direction: column;
  width: 15rem auto;
  background: #fff;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
  border-radius: 10px;
  margin: auto;
  overflow: hidden;
}
.card-avatar {
  width: 100%;
  height: 10rem;
  object-fit: cover;
}
.card-title {
  color: #222;
  font-weight: 700;
  text-transform: capitalize;
  font-size: 1.1rem;
  margin-top: 0.5rem;
}
.card-link {
  text-decoration: none;
  background: #16a0d6e7;
  color: #fff;
  padding: 0.3rem 1rem;
  border-radius: 20px;
  margin: 10px;
}
.intro {
  color: #c2c5c5;
  padding: 10px;
}
.active {
  color: #16a0d6e7;
}

Sekarang buka package.json file dan tambahkan skrip start.

"start": "node index.js"

Pada titik ini, kami telah menyiapkan aplikasi kami. Tetapi kami tidak dapat menjalankan aplikasi kami ketika server tidak berjalan atau ketika tidak ada koneksi jaringan untuk produksi. Mari kita siapkan di bagian berikutnya.

Mengoptimalkan aplikasi

Kita perlu membuat aplikasi kita kompatibel dengan semua ukuran layar. Kami juga akan menambahkan warna tema dengan menambahkan markup di bawah ini di bagian kepala index.html kami mengajukan.

<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="theme-color" content="#16a0d6e7"/>

Buat Manifes

Kita perlu menjelaskan aplikasi kita dan bagaimana seharusnya berperilaku ketika diinstal pada perangkat pengguna. Kita dapat melakukan ini dengan membuat manifes.

Buat manifes file di direktori root proyek dan tambahkan konfigurasi berikut:

{
    "name": "Blogger"
    "short_name": "Blogger"
    "start_url": "/",
    "display": "standalone",
    "background_color": "#0e9c95",
    "theme_color": "#16a0d6e7",
    "orientation": "portrait",
    "icons": []
}

Dalam manifes kami, kami mendefinisikan konfigurasi berikut:

• nama :Ini mendefinisikan nama tampilan aplikasi.
• nama_short :Ini mendefinisikan nama yang akan ditampilkan di bawah ikon aplikasi saat dipasang.
• start_url :Ini memberi tahu browser URL root aplikasi.
• tampilan :Ini memberi tahu browser cara menampilkan aplikasi.
• warna_latar belakang: Ini menentukan warna latar belakang aplikasi saat diinstal.
• warna_tema: Ini menentukan warna bilah status.
• orientasi: Ini menentukan orientasi yang akan digunakan selama tampilan aplikasi.
• ikon: Ini menentukan ikon atau gambar dengan ukuran berbeda untuk digunakan sebagai ikon beranda aplikasi kami.

Membuat ikon layar beranda kami secara manual bisa menjadi tugas yang sangat rumit, tetapi jangan khawatir. Kami akan memanfaatkan modul pihak ketiga yang dikenal sebagai pwa-asset-generator untuk menghasilkan ikon dengan ukuran berbeda dari ikon aplikasi utama kami di dalam direktori publik dengan perintah di bawah ini:

#change directory to the public folder
cd public
#generate icons
npx pwa-asset-generator logo.png icons

Perintah di atas akan membuat ikon folder di dalam folder publik dengan banyak ikon untuk aplikasi kita, bersama dengan beberapa JSON di terminal yang akan kita tempel ke array ikon kita di manifes.

Array ikon dalam manifes kami akan terlihat seperti ini:

"icons": [
    {
      "src": "public/icons/manifest-icon-192.maskable.png",
      "sizes": "192x192",
      "type": "image/png",
      "purpose": "any"
    },
    {
      "src": "public/icons/manifest-icon-192.maskable.png",
      "sizes": "192x192",
      "type": "image/png",
      "purpose": "maskable"
    },
    {
      "src": "public/icons/manifest-icon-512.maskable.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "any"
    },
    {
      "src": "public/icons/manifest-icon-512.maskable.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "maskable"
    }
  ]

Juga, perintah menghasilkan tautan markup ke ikon yang dihasilkan.

Salin dan tempel markup ke bagian kepala markup di public/index.html berkas.

Setup Service Worker

Dengan manifes kami dibuat, mari siapkan pekerja layanan. Service worker adalah bagian dari kode JavaScript yang dijalankan browser Anda di latar belakang dalam utas terpisah untuk menangani cache aset dan data yang Anda simpan untuk permintaan di masa mendatang guna mengaktifkan dukungan offline untuk aplikasi Anda.

Jadi buat blogger.serviceWorker.js file di publik map. Untuk service worker, ada banyak kejadian (push, aktifkan, instal, ambil, pesan, sinkronkan), tetapi untuk demonstrasi dalam tutorial ini, kita akan membahas instal, aktifkan, dan ambil acara. Sebelum itu, kita perlu membuat array untuk menyimpan semua aset yang kita gunakan di aplikasi kita.

const assets = [
  "/",
  "css/style.css",
  "js/app.js",
  "/images/blog1.jpg",
  "/images/blog2.jpg",
  "/images/blog3.jpg,"
];

Kemudian, kita akan mendengarkan instal acara untuk mendaftar dan menyimpan file statis kami ke cache browser. Proses ini membutuhkan waktu untuk diselesaikan. Untuk melewati waktu tunggu, kita akan menggunakan skipWaiting().

const BLOGGER_ASSETS = "blogger-assets";
self.addEventListener("install", (installEvt) => {
  installEvt.waitUntil(
    caches
      .open(BLOGGER_ASSETS)
      .then((cache) => {
        cache.addAll(assets);
      })
      .then(self.skipWaiting())
      .catch((e) => {
        console.log(e);
      })
  );
});
...

Kemudian, kita perlu mengosongkan cache untuk menghapus aset lama setiap kali service worker diperbarui. Untuk itu, kita akan mendengarkan mengaktifkan cuplikan kode di bawah ini:

...
self.addEventListener("activate", function (evt) {
  evt.waitUntil(
    caches
      .keys()
      .then((keysList) => {
        return Promise.all(
          keysList.map((key) => {
            if (key === BLOGGER_ASSETS) {
              console.log(`Removed old cache from ${key}`);
              return caches.delete(key);
            }
          })
        );
      })
      .then(() => self.clients.claim())
  );
});

Dalam cuplikan kode di atas, kami menggunakan waitUntil metode pada pekerja layanan. Metode ini menunggu tindakan selesai, lalu kami memeriksa apakah aset yang kami coba hapus adalah aset aplikasi kami saat ini sebelum kami menghapusnya.

Selanjutnya, kita membutuhkan file yang disimpan dalam cache kita untuk menggunakannya.

self.addEventListener("fetch", function (evt) {
  evt.respondWith(
    fetch(evt.request).catch(() => {
      return caches.open(BLOGGER_ASSETS).then((cache) => {
        return cache.match(evt.request);
      });
    })
  );
})

Saat permintaan dibuat di halaman, PWA akan memeriksa cache kami dan membaca darinya jika ada data di cache daripada pergi ke jaringan. Kemudian, menggunakan respondWith metode, kami mengganti default browser dan membuat acara kami mengembalikan janji. Ketika cache selesai, kami dapat mengembalikan cache yang sesuai dengan evt.request. Ketika cache sudah siap, kita bisa mengembalikan cache yang cocok dengan evt.request.

Kami telah berhasil menyiapkan pekerja layanan kami. Sekarang mari kita membuatnya tersedia di aplikasi kita.

Daftarkan Service Worker

Sekarang mari daftarkan service worker kita di public/js/app.js file dengan cuplikan kode di bawah ini:

...
if ("serviceWorker" in navigator) {
  window.addEventListener("load", function () {
    navigator.serviceWorker
      .register("/blogger.serviceWorker.js")
      .then((res) => console.log("service worker registered"))
      .catch((err) => console.log("service worker not registered", err));
  });
}

Di sini, kami memeriksa apakah browser aplikasi kami mendukung pekerja layanan (tentu saja, tidak semua browser mendukung pekerja layanan), lalu daftarkan file pekerja layanan kami.

Sekarang jalankan aplikasi dengan perintah di bawah ini:

npm start

Buka localhost:8000 di browser Anda untuk mengakses aplikasi.

Pemeriksaan Mercusuar Google

Sekarang mari kita periksa apakah kita mengatur PWA kita dengan benar menggunakan pemeriksaan Google Lighthouse. Klik kanan pada browser Anda dan pilih "periksa." Pada tab periksa, pilih mercusuar dan klik buat laporan. Jika semuanya berjalan dengan baik dengan aplikasi Anda, Anda akan melihat output seperti pada tangkapan layar di bawah ini:

Kami telah berhasil membuat aplikasi pertama kami. Anda juga dapat menghentikan server untuk menguji aplikasi dalam mode offline.

Kesimpulan

Progressive Web Apps (PWA) menggunakan API modern untuk memberikan peningkatan kemampuan, ketergantungan, dan kemudahan pemasangan dengan basis kode tunggal. Mereka memungkinkan pengguna akhir Anda untuk menggunakan aplikasi Anda terlepas dari apakah mereka memiliki koneksi internet atau tidak. Anda harus merasa bebas untuk melakukan fork repositori dan menambahkan fitur tambahan ke proyek. Semoga berhasil!