Explorasi Membuat Sosial Network Graph dengan Neo4j Graph Database dan Next.js

Alfiankan
8 min readFeb 27, 2022

--

Hai.. untuk kesekian kalinya mendapat semangat untuk menuliskan hasil explorasi yang saya lakukan.

just to be clear, untuk artikel tentang explorasi kali ini adalah suatu hal baru yang saya pelajari dan coba implementasi, pada kali ini saya akan mencoba database dengan tipe graph. untuk databasenya saya menggunakan Neo4j dengan pertimbangan :

  • Query language yang mudah bagi yang dulunya berasal dari sql
  • Ada base imagenya di docker hub sehingga memudahkan saya provisioning di local
  • Ada Neo4j aurora, yaitu versi cloud dimana terdapat gratis untuk satu database (tentunya dengan beberapa limitasi)
  • Mempunyai dashboard yang sangat intuitif
  • Support scalling (hanya pertimbagan jika suatu saat ingin menggunakan di production)

Sedangkan untuk implementasi membuat sosial media network sederhana saya menggunakan nextjs, sebenarnya sangat tidak direkomendasikan jika memang datanya sensitive lebih baik membuat api sendiri yang nanti bisa dikonsumsi untuk frontend clientnya, tapi karena tujuan saya adalah lebih ke explore tentang graph database nya saya memutuskan menggunakan Next.js supaya lebih cepat dan mudah. Jika ingin menggunakan framework lain atau ingin membuat dalam bentuk webservice Neo4j sangat wide support untuk banyak bahasa pemograman bisa dilihat di dokumentasinya.

Setelah saya cek di network driver untuk javascript bisa diakses melalui websocket atau jika familiar dengan graphql juga bisa.

Supported Driver

Graph Database

Mari kita lihat apa sebenarnya graph database dan bedanya dengan tipe lain, kali ini kita coba bandingkan dengan relational database. kita akan gunakan model social network.

Pada relational database model datanya akan seperti ini :

ERD

Pada graph database model datanya akan seperti ini :

User, Follow, Follow Back, Post, Comment

seperti namanya Graph Database ini eenggunakan struktur data graph dimana terdapat node, vertex dan edge.

dari 2 gambar diatas kita melihat bahwa node pada graph database yang mempresentasikan satu record (dengan beberapa properti didalamnya) bisa dianalogikan node sebagai baris dan properties sebagai colom. namun untuk relasi antar node berbeda dengan reational database dimana node ke node lain dihubungkan dengan edge dan kita tidak lagi memerlukan join table.

Lalu misalkan saja kita ingin query untuk mengetahui siapa saja followernya anindita maka akan seperti ini :

follower anindita

Lalu misalkan kita ingin query untuk melihat postingan Budi berikut dengan komentarnya maka menjadi seperti ini :

postingan budi dan komentar dari postingan tersebut

untuk lebih lengkapnya bisa ke dokumentasinya di https://neo4j.com/developer/graph-db-vs-rdbms/

Membuat Database

pertama adalah menyiapkan instance database, untuk testing dan percobaan saya sarankan menggunakan Neo4j auradb gratis dan cloud. untuk membuatnya pergi ke https://console.neo4j.io/ silahkan daftar pakai google oauth saja. setelah selesei anda akan di arahkan kehalaman setup.

pilih versi FREE lalu isi konfigurasi databasenya mulai dari nama sampai cloud region (saya sarankan pilih singapura ). dia khir pastikan memilih opsi Load or create your own….

setelah berhasil membuat akan ditampilkan password, pastikan anda telh menyimpan password di tempat aman.

lalu setelah konfirmasi akan di tampilan detail databasenya.

Neo4J Browser

untuk mengaksesnya klik open Neo4j Browser pada database information di Neo4j Auradb. setelah terbuka lakukan autentikasi dengan password yang telah disimpan sebelumnya.

Percobaan Neo4j Cypher

CQL (Cypher Query Language) Referensi dokumentasi lengap bisa diakses di https://neo4j.com/docs/cypher-manual/current/, untuk melakukan operasi CRUD pada Neo4j mirip pada sql kita menuliskan query namun pada Neo4j disebut Neo4j Cypher.

Cypher dapat diakses melalui CLI atau melalui Neo4j Browser.

Mencoba membuat data (CREATE) user, pada bagian console text Neo4j Browser tuliskan :

CREATE (a:User {username:'wijaya', user_id:123}) RETURN a
  • CREATE : melakukan penambahan node.
  • ( ) : adalah representasi sebuah Node
  • a:User : adalah label
  • {username:’wijaya’, user_id:123} : adalah properti
  • return a : menampilkan data

lalu klik tombol run dan akan ditampilkan representasi datanya dalam sebuah lingkaran selanjutnya kita bisa sebut sbagai node.

user wijaya berhasil dibuat

lalu kita mencoba membuat relationship dimana scenarionya adalah user andi follow user wijaya, karena user andi belum ada lakukan query seperti sebelumnya untuk membuat node user dengan properti username dan user_id berbeda. lalu coba lakukan query untuk menampilkan semua node.

MATCH (a) RETURN a
user wijaya dan andi

sekarang sudah mempunyai 2 user sehingga kita sudah bisa melakukan relationship scenarion andi follow wijaya. untuk melakukanya eksekusi query berikut:

MATCH (a:User {username: ‘andi’}),(b:User {username: ‘wijaya’}) WITH a, b CREATE (a)-[r:FOLLOW]->(b)
  • MATCH : untuk melakukan pencarian dimana dalam kurung pertama direpresentasikan sebuah node.
  • MATCH (a:user {username:’amdi’) : untuk mencari node User dengan properti username = andi lalu di tampung ke variable a, untuk selanjutnya sama yaitu mencari Node dengan properti username = wijaya lalu di tampung di variable b
  • WITH a, b : membawa variable a dan b ke query selanjutnya
  • CREATE (a)-[:r:FOLLOW]->(b) : untuk membuat relation dari node (a) ke node (b) dengan label relation FOLLOW, arah relationship mengikuti arah panah pada (a)-[:var:LABEL]->(b) dan bisa sebaliknya (a)<-[:var:LABEL]-(b), label pada CQL bisa diubah sesuai kebutuhan namun lebih baik label dibuat konsisten sesuai kebutuhan saja.

setelah terksekusi lakukan query untuk melihat representasi graph nya :

MATCH (a) RETURN a
andi follow ke wijaya

lalu bagaimana untuk followback??

untuk membuat relasi followback sama seperti query follow cukup kita sesuaikan node asal dan tujuan nya menjadi :

MATCH (a:User {username: ‘andi’}),(b:User {username: ‘wijaya’}) WITH a, b CREATE (b)-[r:FOLLOW]->(a)

pada query diatas perubahan dilakukan pada node dimana node b follow ke node a. lakukan query untuk melihat representasi graph nya :

MATCH (a) RETURN a
wijaya follow ke andi

berikut adalah contoh dengan beberapa user yang banyak dan relasi yang banyak.

contoh social network beberapa user

Implementasi penggunaan graph database aplikasi sosial media sederhana

npm i && npx next dev -p 3000

pada aplikasi ini fitur yang diharapkan :

  • profile view untuk menampikan halaman profile dengan nama username dan daftar followers dan following
  • halaman home untuk menampilkan postingan.

lalu melanjutkan ke aplikasi silahkan clone ke local anda lalu jalankan, berikut adalah penjelasan folder pada source code :

  • Basic Next folder : folder pages dll bawaan Next.JS,
  • internals : berisi fungsi koneksi ke Neo4j Auradb,
  • repository : berisi class dan method untuk query.

Untuk koneksi ke Neo4j Auradb terdapat fitur untuk connect langsung ke aplikasi static web menggunakan web socket anda dapat install node modulenya https://www.npmjs.com/package/neo4j-driver.

untuk membuat session dapat menggunakan fungsi seperti berikut :

pada code diatas saya hardcode untuk string koneksi dan password yang anda bisa dapatkan dari info database di web Neo4j Auradb yang telah anda buat sebelumnya.

lalu terdapat class UserRepository untuk handle query data yang berkaitan dengan User. berikut adalah beberapa query yang digunakan.

Mendapatkan semua user :

MATCH (f:User) RETURN f.username AS user

pada query diatas melakukan MATCH tanpa filter lalu membuat alias user

Menambah user :

CREATE (a:User {username:$username, user_id:$id})

pada query diatas melakukan CREATE dengan label User dan mengisikan properti username dan user_id pada node

Mengecek relasi antar user :

MATCH (me:User {username: $from}),(other:User {username: $to}) CALL { WITH me, other MATCH (other)-[:FOLLOW]->(me) RETURN count(other) AS followme } CALL { WITH me, other MATCH (me)-[:FOLLOW]->(other) RETURN count(me) AS followother } RETURN followme, followother

pada query diatas melakukan pengecekan apakah user yang sedang login (pengguna) mempunyai relasi dengan user yang di kunjungi atau cek.

  • followme : jika user yang dikunjungi follow user yang sedang login (pengguna)
  • followother : jika user yang sedang login (pengguna) follow ke profil yang dikunjungi

Follow user :

MATCH (a:User {username: $from}),(b:User {username: $to}) WITH a, b CREATE (a)-[r:FOLLOW]->(b)

pada query diatas membuat relation FOLLOW dari user node a ke b

UnFollow user :

MATCH ({username: $from})-[r:FOLLOW]->({username: $to}) DELETE r

pada query diatas menghapus relation FOLLOW dari user node a ke b

Mendapatkan user Followers:

MATCH (me:User { username: $username})<-[:FOLLOW]-(follower) CALL { WITH me, follower MATCH (me)-[:FOLLOW]->(follower) RETURN count(follower) AS followingback } RETURN follower.username AS follower_username, followingback

pada query diatas untuk mendapatkan daftar follower dan status relationship dengan pengguna yang sedang login

Mendapatkan user Followings:

MATCH (prof:User {username: $profile_username})-[:FOLLOW]->(following) CALL { WITH prof, following MATCH (me:User { username: $user})-[:FOLLOW]->(following) RETURN count(following) AS user_following } RETURN following.username AS following_username, user_following

pada query diatas untuk mendapatkan daftar following dan status relationship dengan pengguna yang sedang login

Uji Coba Aplikasi

aplikasi ini saya beri nama meow dengan fungsionalitas untuk melakukan sosial networking seperti Follow, FollowBack, unFollow, timeline dan todo yang belum selesei yaitu create comment dan create post.

aplikasi dapat diakses di https://meow-network.herokuapp.com/

pada tampilan awal anda akan otomatis login sebagai user ‘galgadot’ untuk switch ke user lain bisa memilih pada pojok kiri atas untuk membuat user baru pada tombol pojok kanan atas.

halaman profile user lain
Time Line post dan comment

Demo Video

meow app demo video

Baca Juga :

--

--

Alfiankan
Alfiankan

Written by Alfiankan

Lifetime learner | Backend Engineer at Soul Parking

No responses yet