Single Page Application Adalah : Mudah Membuat Aplikasi Satu Halaman

Last Updated on January 21, 2022 by

Dari waktu ke waktu, dunia pemrograman aplikasi terus berkembang dan mengalami perubahan secara signifikan. Single Page Application (SPA) adalah salah satu inovasi yang dimaksud dalam dunia pemrograman aplikasi.

Sistem pemrograman aplikasi kenyataannya tidak jauh berbeda dengan website yang bisa dibagi menjadi 2 sisi, yaitu pemrograman front end dan back end. Masing-masing sisi pemrograman terus mengalami perubahan sistem dan inovasi dengan tujuan para programmer bisa bekerja dengan lebih efektif dan dinamis.

Alhasil, tidaklah mengherankan jika inovasi seperti Single Page Application adalah terobosan yang mulai ramai diperbincangkan. Sebab, Single Page Application adalah sebuah cara baru dalam pemrograman front end aplikasi yang lebih praktis dan dinamik.

Apa itu Single Page Application? Bagaimana cara membuat Single Page Application?

Untuk Anda yang baru mempelajari seputar seluk beluk Single Page Application, maka Anda sudah menemmukan pemberhentian yang tepat! Pada artikel edisi kali ini, kami akan menjabarkan secara rinci terkait pengertian, keunggulan dan contoh Single Page Application. Selain itu, kami akan memberikan tutorial ringkas membangun Single Page Application menggunakan 2 jenis software yakni VueJs dan React.

Sudah tidak sabar hendak mengetahui apa itu Single Page Application? Mari lanjutkan scroll ke bagian selanjutnya. Selamat membaca!

Apa Itu SPA (Single Page Application)?

Istilah Single Page Application adalah kata-kata dari Bahasa Inggris, yang jika diartikan ke bahasa Indonesia akan menjadi: Aplikasi Satu Halaman. Pun dari sini kita sudah bisa menerka apa arti Single Page Application, bukan?

Single Page Application adalah sebuah istilah yang merujuk pada penggunaan satu halaman website sebagai tampilan antarmuka di web app (aplikasi berbasis website). Alih-alih menampilkan informasi dan data secara utuh, Single Page Application adalah software yang hanya menampilkan informasi terpenting / esensial ke hadapan user (pengguna). Dengan begini, kinerja web app menjadi lebih cepat, ringan, dan para user dapat dengan lebih praktis menemukan aneka informasi yang ia butuhkan.

Dengan menggunakan teknologi Single Page Application pun, user dapat mengambil data-data atau informasi yang ia butuhkan dari web app tanpa perlu berpindah halaman. Caranya?

Sistem Single Page Application memuat semua kebutuhan aplikasi (JavaScript, CSS, HTML) di bagian awal ketika user membuka SPA untuk pertama kali. Jika user memasukkan request untuk mengakses data dan tampilan baru, maka permintaannya akan diambilkan dari server secara terpisah. Jadi, user tidak perlu untuk pindah dari main page / home / dashboard. Tampilan web app baru akan berganti otomatis secara dinamis memakai JavaScript begitu data yang di-request diterima serta siap ditampilkan.

Cara kerja Single Page Application seperti di ataslah yang lantas menjadikan software ini bekerja dengan lebih ringan dan cepat dibandingkan sistem Multipage Application. Di sistem Multipage Application, setiap perpindahan halaman dan pemuatan data akan selalu membutuhkan sebuah request ke server dari client terlebih dahulu.

Jadi, client akan membuat request ke server. Kemudian server akan memberikan respond / return berupa HTML ke browser user. Berbeda sekali dengan Single Page Application yang lebih praktis, bukan?

Berkat kepraktisannya, saat ini pun ada banyak sekali contoh Single Page Application yang diaplikasikan oleh perusahaan-perusahaan software terkenal dunia. Beberapa nama perusahaan tersebut yang mengaplikasikan contoh Single Page Application adalah Facebook, Gmail dan GitHub. Sementara praktek Multipage Application terdapat pada Wikipedia, BukaLapak, dan Kaskus.

Untuk Anda yang saat ini sedang membuat sebuah aplikasi sendiri, tidak ada salahnya untuk coba mengaplikasikan Single Page Application karena sistem ini terbukti mampu memberikan User Experience (UX) terbaik. Beberapa keuntungan dari pengaplikasikan Single Page Application adalah:

• Lebih cepat, bebas waktu menunggu perpindahan halaman dan data.
• User tidak perlu bergonta-ganti halaman, kenapa? Tentu saja karena SPA ini memakai konsep virtual DOM (hanya sebagian elemen di halaman utama yang berubah sesuai request user).
• Debugging praktis dan simpel memakai browser. Cukup refresh browser
• Fleksibel, satu kode JavaScript bisa diaplikasikan untuk membangun aneka platform (Windows phone, Android, aplikasi website dan desktop, serta iOS)
• Hanya perlu index.html, beberapa JavaScript dan CSS saja. Tidak perlu repot melakukan setup

Sampai di sini, Anda sudah memahami apa itu Single Page Application, contoh dan manfaatnya. Berikutnya, kita akan melihat cara membuat Single Page Application memakai 2 jenis framework front end.

Tutorial Simpel Membuat SPA dengan VueJs dan React

Saat ini ada cukup banyak framework front end yang dapat digunakan untuk membuat Single Page Application. Beberapa nama framework pembuatan Single Page Application adalah React, VueJs dan Angular. Di antara ketiganya, framework front end React adalah yang paling banyak digunakan oleh programmer.

Berikut ini kami akan menjabarkan tutorial sederhana membuat Single Page Application memakai 2 framework software yang berbeda yaitu React dan VueJs.

React

Pertama adalah tutorial membuat Single Page Application memakai framework React. Untuk memulai, Anda akan membutuhkan melakukan instalasi Node.JS terlebih dahulu. Hal ini dikarenakan Anda akan memakai package node dari Node.JS bernama NPM. Kalau Anda belum punya Node.JS, Anda bisa mendownloadnya terlebih dulu di: https://nodejs.org/en/download/

Jika sudah menginstalasi Node.JS, maka Anda bisa langsung mengikuti langkah-langkah ini:

1. 1. Buka CMD / terminal.
   2. Pada CMD, ketik code berikut:

npm install –g create-react-app

                create-react-app selamat-pagi

3. 3. Nantinya, Anda akan mempunyai folder baru bernama selamat-pagi.
   4. Masuk ke folder. Jalankan code berikut:

cd selamat-pagi

                npm start

5. Selesai! Single Page Application Anda sudah jadi. Jika ditelaah lebih dalam, struktur SPA Anda adalah:


selamat-pagi/

README.md

index.html

favicon.ico

node_modules/

package.json

src/

App.css

App.js

index.css

index.js

logo.svg

VueJs

Bagaimana dengan VueJs? Kita telah melihat tutorial sederhana membangun single page memakai React. Kini, kita akan menelusuri cara membuat SPA memakai VueJs. Sebelum memulai praktik, Anda harus mempunyai vue-cli terlebih dahulu.

Jika Anda belum punya vue-cli, segera download di: https://cli.vuejs.org/ . Saat menginstalasi vue, pilih ‘vue-router’ sebab opsi ini akan memungkinkan Anda untuk membangun aplikasi SPA apa saja dengan VueJs.

Jika sudah menginstalasi vue-cli, maka Anda bisa langsung mengikuti langkah-langkah ini:

1. Buka file project Anda di text editor software masing-masing.
2. Edit App.vue ke project. Di sini pula Anda menambahkan code router view agar sistem bisa menampilkan data-data sesuai request user. Anda bisa mengetikkan kode berikut:


<template>
<div id="app">
<div class="detail">
<router-view></router-view>
</div>
</div>
</template>
<script>
export default {
}
</script>
<style>
#app {
font-family: ‘Verdana’, Rockwell, Segoe UI, cambria;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: left;
color: #9acd32;
}
</style>


3. Buka file index.js (folder: src/router/index.js).
4. Edit file index.js sebagai berikut:


import Vue from 'vue'
import Router from 'vue-router'
import User from "@/components/Admin"
import Home from "@/components/Home";
Vue.use(Router)
export default new Router({
[
{
path: '/',
name: 'Home',
component: Home
},
{
path: "/Admin/:id",
name: "Admin",
component: Admin
}
]
})


5. Instal axios untuk consume data. Cukup ketik: npm install axios –save
6. Buat file baru bernama Home.vue di folder (scr/components/Home.vue)
7. Import library axios > buat method getAllUser(). Kegunaan dari step ini adalah untuk mengambil dan memakai data API sesuai kebutuhan.
8. Buat sebuah instance > gunakan fungsi ‘created’ untuk run code.
9. Tampilkan data dengan fungsi ‘v-for’ > gunakan fungsi ‘vue-router’ untuk navigasi.
10. Terakhir, buat User.vue di folder (/src/components/User.vue) dengan code yang mirip dengan file home.vue. Bedanya, di sini Anda menambahkan this.$route.params.id di bagian URL end-point.

Begitu semua tahap sudah diselesaikan, kini Anda bisa melakukan run (menjalankan) aplikasi dengan kode: npm run dev

Demikianlah pembahasan kali ini tentang definisi, cara membuat hingga contoh Single Page Application. Semoga artikel edisi kali ini dapat menjadi salah satu referensi yang bisa membantu Anda dalam membuat Single Page Application, ya! Sebaiknya Anda membaca sebanyak mungkin tutorial pembuatan SPA kemudian harus mempraktekkannya, dengan begitu Anda akan lebih cepat dan lancar dalam membangun sebuah Single Page Application.

Terima kasih sudah mengikuti artikel ini sampai di sini. Temukan lebih banyak pembahasan menarik dan berwawasan tentang IT hanya dari website dan media sosial Appkey! Sampai jumpa lagi di artikel selanjutnya.