PERANCANGAN APLIKASI CUSTOMER RELATIONSHIP MANAGEMENT

MENGGUNAKAN EXPRESS JS DAN NEXT JS BERBASIS WEBSITE DAN

WHATSAPP BUSINESS

LAPORAN TUGAS AKHIR

Diajukan sebagai Laporan Tugas Akhir Jurusan Sistem Informatika Jaringan dan Aplikasi

Oleh:
M Arya Anggara Gustiana

0045998701

SISTEM INFORMATIKA JARINGAN DAN APLIKASI

SMK NEGERI 1 GARUT

2023
 LEMBAR PENGESAHAN

PERANCANGAN APLIKASI CUSTOMER RELATIONSHIP MANAGEMENT

MENGGUNAKAN EXPRESS JS DAN NEXT JS BERBASIS WEBSITE DAN
WHATSAPP BUSINESS

LAPORAN TUGAS AKHIR

Oleh:

M Arya Anggara Gustiana

192010076 (NIS) / 0045998701 (NISN)

Telah disetujui dan disahkan di Garut

Pembimbing 1, Pembimbing 2,

Revy Cahya Alamsyah, S.Kom. Andriansyah Maulana, M.Kom.

Ketua Kompetensi Keahlian,

Asep Ulumudin S.Kom.

NIP. 198808192020121003

i
 DAFTAR ISI
LEMBAR PENGESAHAN ................................................................................................ i
DAFTAR ISI....................................................................................................................... ii
BAB I PENDAHULUAN ................................................................................................... 1
1.1. Latar Belakang ................................................................................................. 1
1.2. Rumusan Masalah ............................................................................................ 2
1.3. Tujuan dan Manfaat ......................................................................................... 3
1.4. Luaran yang Diharapkan .................................................................................. 4
BAB II TINJAUAN PUSTAKA ........................................................................................ 4
2.1. Website ............................................................................................................ 4
2.2. WhatsApp Business ......................................................................................... 5
2.3. Customer Relationship Management ............................................................... 6
2.4. TypeScript ........................................................................................................ 7
2.5. Node.js ............................................................................................................. 8
2.6. Express JS ........................................................................................................ 9
2.7. PostgreSQL ...................................................................................................... 10
2.8. React JS ............................................................................................................ 11
2.9. Next JS ............................................................................................................. 12
2.10. Tailwind CSS ................................................................................................. 13
2.11. Vercel ............................................................................................................. 14
2.12. Railway App .................................................................................................. 15
BAB III ANALISIS DAN PERANCANGAN ................................................................... 16
3.1. Analisis Sistem................................................................................................. 16
3.2. Perancangan Aplikasi....................................................................................... 18
3.3. Analisis Jadwal Pengerjaan.............................................................................. 25
BAB IV PEMBAHASAN................................................................................................... 26
4.1. Tampilan Aplikasi ............................................................................................ 26
BAB V PENUTUP ............................................................................................................. 30
5.1. Saran ................................................................................................................ 30
5.2. Kesimpulan ...................................................................................................... 31
DAFTAR PUSTAKA ......................................................................................................... 32

ii
 BAB I

PENDAHULUAN

1.1. Latar Belakang

Customer Relationship Management (CRM) atau Manajemen Hubungan Pelanggan
adalah strategi bisnis yang fokus pada kebutuhan dan kepuasan pelanggan. Hal ini sangat
penting untuk mempertahankan pelanggan, meningkatkan loyalitas, dan meningkatkan
pendapatan perusahaan. Dalam konteks bisnis modern, perusahaan harus memiliki sistem
CRM yang baik untuk memastikan keberhasilan jangka panjang mereka.
Dalam era digital, teknologi memainkan peran yang sangat penting dalam
meningkatkan Manajemen Hubungan Pelanggan (CRM). Dalam konteks ini, aplikasi CRM
modern memberikan keuntungan yang signifikan dalam memantau dan memperbaiki
interaksi pelanggan. Dengan menggunakan teknologi, perusahaan dapat melacak kebiasaan
pembelian, preferensi, dan keluhan pelanggan, serta menyediakan informasi yang
diperlukan secara real-time.
Express JS dan Next JS adalah dua framework atau kerangka kerja pengembangan
aplikasi website populer yang dapat digunakan untuk membangun aplikasi website
berkualitas tinggi dengan cepat dan mudah. Express JS digunakan untuk membangun
server dan API, sedangkan Next JS digunakan untuk membuat antarmuka pengguna yang
menarik.
WhatsApp Business adalah aplikasi messaging populer yang dirancang khusus untuk
perusahaan dan pengusaha kecil. WhatsApp Business memungkinkan bisnis untuk
terhubung dengan pelanggan mereka secara langsung melalui pesan teks, suara, dan
gambar. Hal ini memungkinkan bisnis untuk memperluas jangkauan mereka dan
meningkatkan interaksi dengan pelanggan mereka.
Dengan memadukan teknologi dan strategi CRM yang kuat dengan kerangka kerja
Express JS dan Next JS, serta integrasi WhatsApp Business sebagai platform komunikasi
bisnis, perusahaan dapat meningkatkan manajemen hubungan pelanggan mereka dan
mencapai keberhasilan jangka panjang dalam bisnis mereka. Oleh karena itu, perancangan
aplikasi CRM menggunakan Express JS dan Next JS berbasis website dan WhatsApp
Business sangat penting untuk membantu perusahaan meningkatkan efektivitas strategi
CRM mereka.

1
1.2. Rumusan Masalah
Berdasarkan latar belakang yang telah disebutkan sebelumnya, berikut adalah rumusan
masalah yang dapat dijabarkan.
1.2.1. Bagaimana perancangan aplikasi CRM menggunakan Express JS dan Next JS
berbasis website dan WhatsApp Business dapat membantu perusahaan
meningkatkan manajemen hubungan pelanggan mereka?
1.2.2. Bagaimana cara membangun antarmuka pengguna yang intuitif dan menarik
dengan menggunakan Next JS untuk memperbaiki interaksi pelanggan dalam
aplikasi CRM?
1.2.3. Bagaimana Express JS dapat digunakan untuk membangun server dan API
dalam aplikasi CRM untuk meningkatkan kecepatan dan efisiensi pengembangan?
1.2.4. Bagaimana WhatsApp Business dapat diintegrasikan ke dalam aplikasi CRM
untuk memperluas jangkauan perusahaan dan meningkatkan interaksi dengan
pelanggan?
1.2.5. Bagaimana aplikasi CRM yang dirancang dengan Express JS, Next JS, dan
WhatsApp Business dapat membantu perusahaan meningkatkan loyalitas
pelanggan, meningkatkan pendapatan, dan mencapai keberhasilan jangka panjang
dalam bisnis mereka?

2
1.3. Tujuan dan Manfaat
Untuk tujuan dari perancangan aplikasi ini adalah memberikan pemahaman yang
komprehensif tentang bagaimana teknologi dapat digunakan untuk meningkatkan
manajemen hubungan pelanggan, dan untuk memberikan rancangan aplikasi CRM yang
efektif dan efisien menggunakan Express JS, Next JS, dan WhatsApp Business.
Adapun manfaat dari laporan ini adalah sebagai berikut:
1.3.1. Memberikan pemahaman yang lebih baik tentang CRM dan teknologi yang
dapat digunakan untuk meningkatkan efektivitas strategi CRM.
1.3.2. Memperkenalkan kerangka kerja Express JS dan Next JS sebagai platform
pengembangan aplikasi website yang kuat dan fleksibel untuk membangun
aplikasi CRM yang mudah digunakan dan memiliki antarmuka pengguna yang
menarik.
1.3.3. Menggambarkan cara WhatsApp Business dapat diintegrasikan ke dalam
aplikasi CRM untuk meningkatkan interaksi langsung dengan pelanggan dan
memperluas jangkauan perusahaan.
1.3.4. Memberikan rancangan aplikasi CRM yang efektif dan efisien menggunakan
Express JS, Next JS, dan WhatsApp Business yang dapat membantu perusahaan
meningkatkan manajemen hubungan pelanggan mereka.
1.3.5. Menjelaskan manfaat dan dampak dari aplikasi CRM yang dirancang
menggunakan Express JS, Next JS, dan WhatsApp Business dalam meningkatkan
loyalitas pelanggan, meningkatkan pendapatan, dan mencapai keberhasilan
jangka panjang dalam bisnis.

1.4. Luaran yang Diharapkan

Dari perancangan ini akan dihasilkan:
1.4.1. Dashboard berupa aplikasi website untuk mengatur data yang ada.
1.4.2. Interaksi chat berbasis WhatsApp Business untuk memenuhi kebutuhan
pengguna.

3
 BAB II

TINJAUAN PUSTAKA

2.1. Website
Website adalah sekumpulan halaman web terkait yang dapat diakses melalui internet
dengan menggunakan browser web. Setiap halaman web dapat terdiri dari teks, gambar,
video, dan elemen desain lainnya yang disusun secara logis dan dibuat dengan bahasa
pemrograman seperti HTML, CSS, dan JavaScript.
Website dapat berupa situs web sederhana seperti blog pribadi atau situs web bisnis
yang kompleks dengan berbagai fitur dan fungsionalitas, seperti e-commerce, forum, atau
aplikasi web.
Website sangat penting dalam dunia digital karena dapat digunakan untuk berbagai
tujuan, seperti untuk memperkenalkan produk atau jasa, memberikan informasi,
membangun merek, dan berinteraksi dengan pelanggan atau pengguna.
Website juga dapat diakses melalui berbagai perangkat, seperti desktop, laptop, tablet,
dan smartphone, dan mampu mencapai audiens global dengan cepat dan efisien.
Untuk membuat website, dibutuhkan pengetahuan tentang bahasa pemrograman dan
desain web, atau dapat menggunakan platform website yang sudah tersedia dan mudah
digunakan, seperti WordPress.

4
2.2. WhatsApp Business
WhatsApp Business adalah aplikasi khusus bisnis yang memungkinkan perusahaan
untuk berkomunikasi dengan pelanggan melalui platform WhatsApp. WhatsApp Business
menyediakan fitur-fitur seperti chat, pesan otomatis, dan pengiriman pesan massal untuk
membantu perusahaan memperluas jangkauan dan meningkatkan interaksi dengan
pelanggan.
WhatsApp Business memungkinkan perusahaan untuk membuat profil bisnis mereka
sendiri dengan menyertakan informasi bisnis seperti alamat, jam operasional, dan deskripsi
bisnis. Perusahaan juga dapat mengirim pesan otomatis kepada pelanggan, seperti pesan
selamat datang atau pesan balasan otomatis saat pelanggan mengirim pesan saat jam kerja
telah berakhir.
Selain itu, WhatsApp Business juga memungkinkan perusahaan untuk mengelola pesan
masuk dari pelanggan melalui fitur pesan terpisah. Ini memungkinkan perusahaan untuk
memantau pesan yang masuk dan memberikan respons yang lebih cepat dan efektif kepada
pelanggan.
WhatsApp Business memiliki API yang memungkinkan perusahaan untuk
mengintegrasikan WhatsApp dengan sistem CRM mereka dan mengirim pesan otomatis
yang lebih kompleks.

5
2.3. Customer Relationship Management (CRM)
Manajemen hubungan pelanggan atau customer relationship management disingkat
CRM adalah strategi bisnis yang bertujuan untuk meningkatkan kepuasan pelanggan dan
memperkuat hubungan antara pelanggan dan perusahaan. CRM melibatkan pengumpulan,
analisis, dan pengelolaan informasi pelanggan untuk membantu perusahaan memahami
kebutuhan dan preferensi pelanggan mereka.
CRM melibatkan pengumpulan data pelanggan, analisis perilaku pelanggan, dan
penerapan strategi bisnis yang berfokus pada kebutuhan dan keinginan pelanggan. Hal ini
bertujuan untuk meningkatkan retensi pelanggan, mengembangkan pelanggan yang sudah
ada, dan menarik pelanggan baru.
Sistem CRM adalah perangkat lunak yang digunakan untuk mengelola hubungan
dengan pelanggan secara efektif. Sistem ini memungkinkan perusahaan untuk
mengumpulkan dan menganalisis data pelanggan, mengelola interaksi pelanggan, dan
meningkatkan layanan pelanggan.
Beberapa manfaat dari CRM antara lain meningkatkan kepuasan pelanggan,
meningkatkan retensi pelanggan, meningkatkan efisiensi pemasaran dan penjualan,
meningkatkan efisiensi operasional perusahaan, dan membantu perusahaan untuk
memperoleh wawasan tentang pelanggan dan pasar.

6
2.4. TypeScript
TypeScript adalah bahasa pemrograman open-source yang dikembangkan oleh
Microsoft. TypeScript merupakan bahasa pemrograman yang berbasis pada JavaScript,
namun dengan penambahan fitur-fitur pengembangan perangkat lunak yang lebih lengkap
dan lebih kuat.
TypeScript menyediakan berbagai fitur tambahan untuk pengembangan aplikasi,
seperti sistem tipe yang kuat, pemrograman berorientasi objek, dukungan untuk module,
dan peningkatan fitur pengembangan perangkat lunak lainnya.
Sistem tipe yang kuat adalah fitur utama dari TypeScript. Ini memungkinkan
pengembang untuk mengontrol tipe data variabel, fungsi, dan objek pada saat kompilasi
kode. Ini membantu mencegah kesalahan kode seperti kesalahan penulisan variabel,
kesalahan penentuan tipe data, dan lain sebagainya.
TypeScript juga memungkinkan pengembang untuk menggunakan fitur pemrograman
berorientasi objek seperti inheritance, polymorphism, abstaction, da encapsulation. Hal ini
memungkinkan pengembang untuk membuat kode yang lebih bersih, lebih terorganisir,
dan lebih mudah untuk dipelihara.
Selain itu, TypeScript juga mendukung fitur module yang memungkinkan pengembang
untuk membagi kode ke dalam file terpisah dan import file yang diperlukan pada waktu
kompilasi. Ini membantu dalam manajemen kode yang lebih baik dan meningkatkan
reusabilitas kode.
TypeScript dapat digunakan dalam pengembangan aplikasi web, mobile, desktop, dan
game. TypeScript dapat diintegrasikan dengan berbagai framework JavaScript seperti
React, Angular, dan Vue.js. Dalam beberapa tahun terakhir, TypeScript semakin populer
di kalangan pengembang web dan terus berkembang sebagai alternatif yang lebih kuat dan
lebih aman untuk JavaScript.

7
2.5. Node.js
Node.js adalah platform perangkat lunak yang dikembangkan pada tahun 2009 oleh
Ryan Dahl. Node.js memungkinkan pengembang untuk menjalankan kode JavaScript pada
sisi server, yang sebelumnya hanya dapat dijalankan pada sisi klien (browser).
Node.js berjalan di atas mesin JavaScript V8 milik Google yang terkenal cepat dan
ringan. Mesin V8 ini juga digunakan oleh browser Google Chrome. Oleh karena itu,
Node.js sangat cepat dan efisien dalam menjalankan kode JavaScript, bahkan pada aplikasi
yang memerlukan kinerja tinggi dan skala besar.
Node.js memiliki fitur-fitur yang kuat, seperti non-blocking I/O, event-driven, dan
modular. I/O non-blocking memungkinkan program untuk tetap berjalan secara efisien
tanpa terhalang oleh proses I/O yang memerlukan waktu lama, seperti pengiriman dan
penerimaan data melalui jaringan atau file. Event-driven memungkinkan program untuk
merespons kejadian yang terjadi secara asinkronus dan mengeksekusi kode secara selektif,
yang memungkinkan program untuk berjalan dengan cepat dan efisien. Modular
memungkinkan pengembang untuk membagi program menjadi modul atau pustaka yang
dapat digunakan kembali, yang mempermudah pengembangan dan pemeliharaan program.
Node.js juga menyediakan npm (Node Package Manager), yang merupakan repositori
online terbesar untuk pustaka dan modul JavaScript. Dengan menggunakan npm,
pengembang dapat dengan mudah menemukan, menginstal, dan mengelola pustaka yang
diperlukan oleh program mereka.
Node.js digunakan untuk berbagai jenis aplikasi seperti aplikasi web, aplikasi desktop,
dan aplikasi perangkat lunak berbasis server. Beberapa framework dan teknologi populer
yang digunakan bersama dengan Node.js antara lain Express JS, Socket.IO, Meteor, dan
React.
Dalam beberapa tahun terakhir, Node.js semakin populer di kalangan pengembang
karena kemampuannya untuk menjalankan kode JavaScript di sisi server dan menyediakan
platform yang cepat, efisien, dan mudah digunakan untuk pengembangan aplikasi web dan
perangkat lunak berbasis server.

8
2.6. Express JS
Express JS adalah sebuah framework web yang dibangun di atas Node.js. Express JS
membantu pengembang web untuk membangun aplikasi web dengan mudah dan cepat.
Framework ini menyediakan fitur-fitur yang diperlukan untuk membangun aplikasi web
seperti routing, middleware, dan template engine.
Salah satu kelebihan utama dari Express JS adalah kemampuannya untuk memudahkan
pengembang dalam mengelola rute atau routing pada aplikasi web. Express JS
menyediakan metode yang sederhana dan intuitif untuk membuat dan mengelola rute pada
aplikasi web. Dengan mudah, pengembang dapat menentukan rute URL dan mengatur
respons yang harus dikirimkan ke pengguna ketika rute tersebut diakses.
Selain itu, Express JS juga memiliki kemampuan untuk memanfaatkan middleware,
yaitu fungsi-fungsi yang digunakan untuk memproses request dan response pada aplikasi
web. Middleware sangat berguna untuk mengecek, memodifikasi, dan menangani
request/response pada aplikasi web. Dalam Express JS, pengembang dapat menambahkan
middleware dengan mudah.
Express JS juga mendukung banyak template engine seperti Pug, EJS, dan Handlebars.
Template engine ini sangat berguna untuk membuat tampilan aplikasi web secara dinamis
dengan menggunakan data yang diberikan oleh pengguna atau dari sumber data lainnya.
Selain itu, Express JS juga menyediakan berbagai macam plugin dan ekstensi yang
dapat digunakan untuk meningkatkan fitur dan fungsionalitas dari aplikasi web yang
dibangun dengan menggunakan Express JS.
Dalam keseluruhan, Express JS adalah sebuah framework web yang populer dan efisien
untuk pengembangan aplikasi web menggunakan Node.js. Framework ini sangat cocok
untuk membangun aplikasi web yang kompleks dengan memanfaatkan banyak
fungsionalitas seperti routing, middleware, template engine, dan plugin-ekstensi.

9
2.7. PostgreSQL
PostgreSQL atau sering disebut Postgres adalah sistem manajemen basis data relasional
(RDBMS) yang open source dan gratis. PostgreSQL menyediakan penggunaan yang
efisien pada berbagai aplikasi berbasis web, server, desktop, dan mobile.
Salah satu kelebihan utama dari PostgreSQL adalah kemampuannya untuk menangani
data dalam jumlah besar dengan cepat dan akurat. PostgreSQL menyimpan data dengan
menggunakan sistem indexing yang canggih dan kompresi data. PostgreSQL juga
mendukung berbagai jenis indexing, termasuk B-tree, hash, dan GiST (Generalized Search
Tree), yang dapat membantu mempercepat operasi pencarian pada data yang disimpan.
Selain itu, PostgreSQL juga memiliki fitur yang memungkinkan pengguna untuk
melakukan operasi yang kompleks pada data seperti pengolahan teks, perhitungan
matematika, dan pemrosesan gambar. PostgreSQL juga mendukung fungsi-fungsi stored
procedure, trigger, dan view, yang dapat memudahkan pengguna dalam membuat operasi
pada data yang rumit.
PostgreSQL juga memiliki kemampuan untuk mengatur tingkat akses pada data dengan
menggunakan sistem keamanan yang terintegrasi. Pengguna dapat mengontrol akses data
berdasarkan pengguna, grup pengguna, dan objek-objek yang berhubungan dengan data.
PostgreSQL juga mendukung banyak bahasa pemrograman seperti C/C++, Java, Perl,
Python, Ruby, dan lain-lain. Hal ini membuat pengguna dapat menggunakan bahasa
pemrograman favorit mereka untuk mengembangkan aplikasi yang memanfaatkan
PostgreSQL.
Dalam keseluruhan, PostgreSQL adalah sistem manajemen basis data relasional yang
powerful, efisien, dan memiliki fitur yang lengkap. PostgreSQL cocok untuk digunakan
dalam aplikasi yang memerlukan pengolahan data dalam jumlah besar, operasi data yang
kompleks, dan keamanan data yang terintegrasi.

10
2.8. React JS
React JS adalah sebuah library JavaScript open-source yang digunakan untuk
membangun antarmuka pengguna pada aplikasi web. React JS dikembangkan oleh
Facebook dan menjadi salah satu teknologi terpopuler untuk membangun aplikasi web
modern.
Salah satu kelebihan React JS adalah kemampuannya untuk membangun aplikasi web
dengan performa yang tinggi dan responsif. Hal ini terjadi karena React JS menggunakan
teknologi virtual DOM (Document Object Model) yang memungkinkan aplikasi
melakukan update secara efisien pada tampilan tanpa harus merefresh keseluruhan halaman
web.
Selain itu, React JS juga menyediakan komponen-komponen yang dapat digunakan
untuk membangun antarmuka pengguna yang kompleks dengan lebih mudah dan
terstruktur. Komponen-komponen tersebut dapat digunakan secara reusable, sehingga
memudahkan pengembang untuk membuat aplikasi yang scalable dan mudah dipelihara.
React JS juga menggunakan paradigma pemrograman deklaratif, yang memungkinkan
pengembang untuk fokus pada apa yang harus dilakukan oleh aplikasi dan tidak perlu
terlalu memikirkan bagaimana cara melakukannya. Hal ini membuat pengembangan
aplikasi web menjadi lebih mudah dan cepat.
React JS juga memiliki ekosistem yang besar dan aktif, yang terdiri dari banyak
package dan library yang dapat digunakan untuk memperluas fitur dan kemampuan React
JS. Beberapa package dan library populer seperti Redux, React Router, dan Axios dapat
digunakan untuk membangun aplikasi yang lebih kompleks dan berbasis data.
React JS adalah library JavaScript yang sangat powerful dan populer untuk membangun
antarmuka pengguna pada aplikasi web modern. React JS menawarkan performa yang
tinggi, reusable components, paradigma pemrograman deklaratif, dan ekosistem yang besar
dan aktif.

11
2.9. Next JS
Next.js adalah sebuah framework open-source untuk mengembangkan aplikasi web
dengan React.js. Framework ini dirancang untuk mempermudah proses pengembangan
aplikasi web, dengan menyediakan berbagai fitur dan fungsi bawaan yang memungkinkan
pengembang untuk fokus pada pengembangan fungsionalitas dan tampilan website.
Salah satu kelebihan Next.js adalah dukungan terhadap server-side rendering (SSR).
SSR memungkinkan website untuk di-render di server sebelum dikirimkan ke browser
pengguna, sehingga mempercepat waktu loading website dan memberikan pengalaman
pengguna yang lebih baik. Next.js juga mendukung static site generation (SSG), yang
memungkinkan pengembang untuk menghasilkan halaman web statis pada waktu
kompilasi.
Selain dukungan SSR dan SSG, Next.js juga menyediakan fitur-fitur seperti code
splitting, automatic code optimization, dan pre-fetching. Code splitting memungkinkan
aplikasi web untuk memecah kode ke dalam bagian-bagian yang lebih kecil dan memuat
kode yang diperlukan secara dinamis, sehingga meningkatkan performa website.
Automatic code optimization memungkinkan framework untuk mengoptimalkan kode
secara otomatis, termasuk meminimalkan ukuran file dan mempercepat loading website.
Pre-fetching memungkinkan Next.js untuk memuat data secara asinkronus pada waktu
kompilasi, sehingga mempercepat waktu loading halaman.
Next.js juga menyediakan dukungan penuh terhadap React.js, sehingga pengembang
dapat menggunakan semua fitur dan fungsi yang telah disediakan oleh React.js. Selain itu,
framework ini juga memiliki integrasi yang baik dengan berbagai API, seperti Google
Analytics dan Stripe, yang memudahkan pengembang untuk mengintegrasikan aplikasi
web dengan layanan-layanan tersebut.
Secara keseluruhan, Next.js adalah sebuah framework yang kuat dan fleksibel untuk
mengembangkan aplikasi web dengan React.js. Dukungan terhadap SSR, SSG, dan
berbagai fitur bawaan lainnya membuat Next.js menjadi pilihan yang tepat untuk
pengembangan aplikasi web yang cepat dan efisien.

12
2.10. Tailwind CSS
Tailwind CSS adalah sebuah framework CSS yang dirancang untuk memudahkan
proses styling pada website. Framework ini menggunakan konsep utility-first CSS, di mana
pengembang dapat mengatur tampilan website dengan cara memanfaatkan class yang telah
disediakan oleh Tailwind CSS.
Salah satu kelebihan Tailwind CSS adalah efisiensi waktu. Dengan memanfaatkan class
yang telah disediakan oleh Tailwind CSS, pengembang dapat dengan mudah membuat
tampilan website yang konsisten dan cepat. Selain itu, Tailwind CSS juga menawarkan
banyak class yang memudahkan pengembang untuk mengatur margin, padding, ukuran
font, dan warna dengan cepat.
Tailwind CSS juga sangat fleksibel. Framework ini menyediakan banyak konfigurasi
dan opsi yang memungkinkan pengembang untuk menyesuaikan tampilan website sesuai
dengan kebutuhan. Pengembang juga dapat menambahkan class custom yang dibuat secara
khusus untuk mengatur tampilan website yang kompleks.
Dalam menggunakan Tailwind CSS, pengembang tidak perlu menuliskan CSS dari
awal, karena class yang telah disediakan oleh framework ini sudah memenuhi kebutuhan
styling pada website. Hal ini memungkinkan pengembang untuk fokus pada pengembangan
fitur dan fungsionalitas pada website, tanpa harus memikirkan desain tampilan secara
detail.
Dalam keseluruhan, Tailwind CSS adalah sebuah framework CSS yang sangat fleksibel
dan efisien waktu. Dengan menggunakan konsep utility-first CSS dan banyaknya class
yang disediakan oleh Tailwind CSS, pengembang dapat dengan mudah membuat tampilan
website yang konsisten dan cepat, serta menyesuaikan tampilan website sesuai dengan
kebutuhan.

13
2.11. Vercel
Vercel adalah sebuah platform cloud untuk deploy dan menghosting aplikasi web
modern, seperti Next.js, React.js, Vue.js, dan Angular. Platform ini didesain dengan fokus
pada performa dan skala, sehingga aplikasi web dapat berjalan dengan cepat dan aman
pada berbagai device dan platform.
Salah satu fitur utama dari Vercel adalah kemampuan untuk melakukan deployment
otomatis. Setiap kali ada perubahan pada kode aplikasi, Vercel akan melakukan build dan
deploy otomatis, sehingga pengembang tidak perlu khawatir tentang proses deployment
yang rumit dan memakan waktu.
Vercel juga menyediakan fitur-fitur bawaan yang memudahkan pengembang untuk
mengelola dan memantau aplikasi web. Fitur-fitur tersebut termasuk logging, performance
monitoring, error tracking, dan analisis pengguna. Semua data ini disajikan dalam
dashboard yang mudah digunakan, sehingga pengembang dapat memantau kinerja aplikasi
web secara real-time dan melakukan debugging secara cepat dan efektif.
Selain itu, Vercel juga memiliki integrasi yang baik dengan berbagai alat
pengembangan, seperti GitHub, GitLab, dan BitBucket. Pengembang dapat melakukan
deployment otomatis pada setiap kali terjadi perubahan pada kode di repositori, sehingga
mempercepat proses deployment dan memudahkan pengembangan kolaboratif.
Kelebihan Vercel lainnya adalah dukungan terhadap teknologi serverless dan lamba
(Lambda). Teknologi ini memungkinkan aplikasi web untuk berjalan pada infrastruktur
cloud yang fleksibel dan efisien, dengan hanya membayar untuk sumber daya yang
digunakan saat aplikasi web berjalan.
Vercel adalah sebuah platform hosting yang kuat dan fleksibel untuk mengelola dan
deploy aplikasi web modern dengan cepat dan efektif. Dukungan terhadap deployment
otomatis, serverless, dan lamba membuat Vercel menjadi pilihan yang tepat untuk
pengembangan aplikasi web yang efisien dan berkualitas tinggi.

14
2.12. Railway App
Railway adalah sebuah platform as a service (PaaS) yang dirancang khusus untuk
pengembangan dan deployment aplikasi web. Platform ini menyediakan berbagai fitur dan
alat yang memudahkan pengembangan aplikasi web, sehingga pengembang dapat fokus
pada kode aplikasi dan tidak perlu khawatir tentang infrastruktur dan deployment.
Salah satu fitur utama dari Railway adalah kemudahan dalam mengintegrasikan
berbagai teknologi dan alat yang biasa digunakan dalam pengembangan aplikasi web,
seperti Node.js, Python, Ruby, dan PostgreSQL. Pengguna dapat memilih teknologi yang
ingin digunakan, dan Railway akan menyediakan infrastruktur dan layanan yang
dibutuhkan untuk mengembangkan aplikasi web dengan teknologi tersebut.
Selain itu, Railway juga menyediakan fitur-fitur yang memudahkan dalam deployment
dan pengelolaan aplikasi web. Fitur-fitur tersebut meliputi deployment otomatis,
pengelolaan lingkungan (environment), logging, dan monitoring kinerja aplikasi. Semua
fitur ini disajikan dalam dashboard yang mudah digunakan, sehingga pengguna dapat
memantau kinerja aplikasi secara real-time dan melakukan debugging dengan cepat dan
efektif.
Fitur lain yang menarik dari Railway adalah kemampuan untuk melakukan scaling
otomatis. Platform ini akan menyesuaikan sumber daya yang dibutuhkan untuk menjaga
kinerja aplikasi web secara optimal, sehingga pengguna tidak perlu khawatir tentang
scaling manual yang rumit dan memakan waktu.
Selain itu, Railway juga memiliki integrasi yang baik dengan berbagai alat
pengembangan, seperti GitHub, GitLab, dan Bitbucket. Pengguna dapat melakukan
deployment otomatis pada setiap kali terjadi perubahan pada kode di repositori, sehingga
mempercepat proses deployment dan memudahkan pengembangan kolaboratif.
Kelebihan lain dari Railway adalah harga yang kompetitif dan fleksibel. Platform ini
menawarkan berbagai pilihan paket harga yang sesuai dengan kebutuhan pengguna,
sehingga pengguna dapat memilih paket yang sesuai dengan budget dan skala aplikasi web
yang akan dikembangkan.
Railway adalah sebuah platform as a service (PaaS) yang kuat dan fleksibel untuk
pengembangan dan deployment aplikasi web. Fitur-fitur seperti integrasi dengan berbagai
teknologi, deployment otomatis, pengelolaan lingkungan, dan scaling otomatis membuat
Railway menjadi pilihan yang tepat untuk pengembangan aplikasi web yang efisien dan
berkualitas tinggi.

15
 BAB III

ANALISIS DAN PERANCANGAN

3.1. Analisis Sistem

Bagian analisis sistem pada laporan akan membahas tentang pengumpulan informasi
mengenai kebutuhan aplikasi dan menganalisis informasi tersebut untuk mengidentifikasi
fitur-fitur utama yang dibutuhkan oleh aplikasi.
Analisis sistem merupakan tahap awal dalam pengembangan aplikasi yang bertujuan
untuk memahami masalah yang ingin dipecahkan oleh aplikasi dan mengidentifikasi solusi
terbaik untuk masalah tersebut. Proses analisis sistem melibatkan pengumpulan informasi
dari berbagai sumber, termasuk pengguna potensial aplikasi, stakeholder, dan analisis
pasar.
3.1.1. Tujuan perancangan sistem
Meningkatkan efisiensi dalam pengelolaan data pelanggan. Aplikasi CRM ini
dirancang untuk meningkatkan efisiensi dalam pengelolaan data pelanggan
dengan menyediakan fitur-fitur seperti pembuatan profil pelanggan,
pengelompokan pelanggan, dan manajemen hubungan pelanggan.
Meningkatkan layanan pelanggan. Aplikasi CRM ini dirancang untuk
meningkatkan layanan pelanggan dengan memberikan informasi yang lebih
akurat dan cepat tentang produk atau layanan yang ditawarkan kepada
pelanggan.
Meningkatkan efektivitas dalam komunikasi dengan pelanggan. Aplikasi
CRM ini dirancang untuk meningkatkan efektivitas dalam komunikasi dengan
pelanggan melalui integrasi WhatsApp Business yang memungkinkan
pelanggan untuk mengirim pesan langsung ke nomor WhatsApp bisnis Anda.
Meningkatkan keamanan data Aplikasi CRM ini dirancang untuk
meningkatkan keamanan data pelanggan dengan menyediakan fitur-fitur
keamanan yang canggih seperti otentikasi pengguna dan otorisasi akses.
Dengan tujuan perancangan sistem yang jelas, diharapkan aplikasi CRM yang
dibangun dapat membantu meningkatkan efisiensi, efektivitas, dan keamanan
dalam pengelolaan hubungan pelanggan dan manajemen tim dalam bisnis.

16
3.1.2. Gambaran umum yang diusulkan
Aplikasi yang diusulkan adalah sebuah aplikasi Customer Relationship
Management (CRM) yang akan dibangun dengan menggunakan teknologi web
dan WhatsApp Business. Aplikasi ini bertujuan untuk membantu perusahaan
dalam mengelola hubungan dengan pelanggan dengan lebih efektif dan efisien.
Aplikasi ini akan dibangun dengan menggunakan Express JS dan Next JS
sebagai kerangka kerja pengembangan web dan TypeScript sebagai bahasa
pemrograman. PostgreSQL akan digunakan sebagai basis data untuk
menyimpan dan mengelola informasi pelanggan serta informasi terkait
hubungan dengan pelanggan.
Aplikasi CRM ini akan terintegrasi dengan layanan WhatsApp Business API,
sehingga perusahaan dapat menghubungi pelanggan melalui WhatsApp untuk
memperkuat hubungan dengan pelanggan.
Aplikasi ini akan memiliki antarmuka pengguna yang responsif dan mudah
digunakan dengan bantuan Tailwind CSS sebagai framework styling. Aplikasi
juga akan di-deploy pada platform PaaS Vercel dan menggunakan platform
PaaS Railway sebagai sistem manajemen infrastruktur.
Dengan memanfaatkan teknologi web dan WhatsApp Business, aplikasi
CRM ini diharapkan dapat membantu perusahaan dalam meningkatkan
efektivitas dan efisiensi manajemen hubungan dengan pelanggan.

3.1.3. Perancangan prosedur yang diusulkan

Tahap pengembangan aplikasi ini terdiri dari beberapa proses yaitu analisis
kebutuhan pengguna, perancangan database, implementasi database,
perancangan antarmuka pengguna, implementasi antarmuka pengguna,
pengembangan aplikasi Express JS, integrasi WhatsApp Business API,
pengembangan aplikasi Next JS, pengujian dan validasi. Setiap tahap meliputi
pengujian dan validasi untuk memastikan sistem berfungsi dengan baik dan
memenuhi kebutuhan pengguna. Setelah tahap pelatihan dan implementasi,
sistem akan diuji dan divalidasi kembali untuk memastikan sistem berjalan
dengan baik di lingkungan production.

17
3.2. Perancangan Aplikasi
3.2.1. Use Case Diagaram

Actor:
• Business Client, Pengguna yang memiliki akses penuh untuk mengelola
dan memonitor sistem.
• Customer atau Contact, Pengguna yang menggunakan layanan
perusahaan dan berinteraksi dengan sistem melalui WhatsApp Business.

18
 Use Case Deskripsi
Complain Merupakan case untuk melakukan
complain memulai sesi helpdesk oleh
pelanggan atau kontak
Order Product Merupakan case untuk melakukan
order produk oleh pelanggan atau
kontak
Manage User Merupakan case untuk mengelola
user dari sebuah business
Manage Product Merupakan case untuk mengelola
produk dari business client
Campaign Merupakan case untuk melakukan
promosi dari produk business client

Flow Use Case:

• Business Client:
o Mengelelola Helpdesk Ticket Complain
o Mengelola Transaksi Produk
o Mengelola Produk
o Mengelola Campaign untuk promosi
o Mengelola pengguna selain business owner

• Customer atau Contact:

o Membuat order produk
o Membuat complain
o Menerima pesan campaign promosi

19
3.2.2. Entity Relationship Diagram

20
21
22
23
24
3.3. Analisis Jadwal Pengerjaan
Berikut adalah jadwal pengembangan dari pembuatan aplikasi sistem CRM dengan
mengunakan metode agile.

Sprint Progres
• Analisis kebutuhan pengguna
Sprint 1
• Perancangan struktur database
(09 – 15 Januari 2023)
• Implementasi database
• Perancangan tampilan antarmuka
pengguna
Sprint 2
• Implementasi antarmuka pengguna
(16 – 22 Januari 2023)
• Pengembangan aplikasi server
menggunakan Express JS
• Pengembangan aplikasi server
Sprint 3
menggunakan Express JS
(23 – 29 Januari 2023)
• Integrasi WhatsApp Business API
Sprint 4 • Pengembangan aplikasi client
(30 Januari – 05 Februari 2023) menggunakan Next JS
Sprint 5 • Pengembangan aplikasi client
(06 – 12 Januari 2023) menggunakan Next JS
• Implementasi sistem ke dalam
Sprint 6 lingkungan produksi
(13 – 19 Januari 2023) • Pengujian dan validasi setelah
implementasi

25
 BAB IV

PEMBAHASAN

4.1. Tampilan Aplikasi

4.1.1. Tampilan Client Business

(Halaman Login)

(Halaman Individual Conversation)

26
(Halaman Manage User Business)

(Halaman Manage Business)

27
4.1.2. Tampilan Alur Customer Order Produk WhatsApp Business

28
29
 BAB V

PENUTUP

5.1. Saran
Berdasarkan hasil perancangan aplikasi Customer Relationship Management
Menggunakan Express JS dan Next JS Berbasis Web dan WhatsApp Business, terdapat
beberapa saran yang dapat diberikan untuk meningkatkan kualitas aplikasi ini:
5.1.1. Pengembangan fitur
Setelah aplikasi berjalan secara stabil, tim pengembang dapat
mempertimbangkan pengembangan fitur baru yang lebih kompleks untuk
memenuhi kebutuhan pengguna dan memperluas fungsionalitas aplikasi.
5.1.2. Pelatihan pengguna
Pelatihan pengguna sangat penting untuk memastikan pengguna dapat
menggunakan aplikasi dengan optimal. Dalam hal ini, pelatihan dapat dilakukan
secara online atau offline dan diadakan secara berkala agar pengguna dapat
memahami cara menggunakan aplikasi yang benar.
5.1.3. Pemeliharaan sistem
Pemeliharaan sistem perlu dilakukan secara rutin untuk memastikan aplikasi
tetap berjalan dengan baik. Hal ini meliputi pemeriksaan sistem, perbaikan bug,
peningkatan keamanan, dan lain sebagainya.
5.1.4. Monitoring sistem
Monitoring sistem perlu dilakukan secara terus-menerus untuk mendeteksi
masalah atau potensi kerusakan pada aplikasi. Dalam hal ini, pengembang dapat
menggunakan tools monitoring sistem yang tersedia di pasar.

Dengan mempertimbangkan saran-saran di atas, diharapkan aplikasi Customer

Relationship Management Menggunakan Express JS dan Next JS Berbasis Web dan
WhatsApp Business dapat memberikan nilai tambah bagi pengguna dan dapat
meningkatkan produktivitas serta efektivitas bisnis.

30
5.2. Kesimpulan
Dalam laporan ini, telah dibahas mengenai perancangan aplikasi Customer
Relationship Management menggunakan Express JS dan Next JS berbasis web dan
WhatsApp Business. Melalui proses analisis kebutuhan pengguna, perancangan database
dan antarmuka pengguna, pengembangan aplikasi server menggunakan Express JS,
integrasi WhatsApp Business API, serta pengembangan aplikasi client menggunakan Next
JS, didapatkan sebuah sistem yang dapat membantu bisnis dalam menjalankan aktivitas
pelayanan pelanggan dengan lebih efektif.
Sistem ini dapat memudahkan pelanggan untuk berinteraksi dengan bisnis melalui
WhatsApp, serta memudahkan bisnis untuk memonitor dan mengelola percakapan
pelanggan melalui aplikasi web. Selain itu, penggunaan teknologi modern seperti React
JS dan Tailwind CSS memberikan pengalaman pengguna yang lebih baik dan responsif.
Secara keseluruhan, aplikasi ini diharapkan dapat membantu bisnis dalam
meningkatkan kualitas pelayanan pelanggan dan memperkuat hubungan dengan
pelanggan. Meskipun demikian, penulis menyadari bahwa masih terdapat kekurangan dan
keterbatasan pada sistem yang diusulkan, sehingga perlu dilakukan evaluasi dan
pengembangan lebih lanjut agar dapat memenuhi kebutuhan pengguna dengan lebih baik.

31
 DAFTAR PUSTAKA

https://en.wikipedia.org/wiki/Website

https://business.whatsapp.com

https://en.wikipedia.org/wiki/Customer_relationship_management

https://www.typescriptlang.org

https://nodejs.org

https://expressjs.com

https://www.postgresql.org

https://reactjs.org

https://nextjs.org

https://tailwindcss.com

https://vercel.com

https://railway.app

https://developers.facebook.com/docs/whatsapp/cloud-api

32