Bina "chat-bot" dengan Next.js, Tailwind CSS dan Strapi API - Bahagian 1

Apakah itu chat-bot ?

Ringkasnya chatbot ialah aplikasi perisian yang digunakan untuk menjalankan perbualan sembang dalam talian melalui teks atau text-to-speech. Ia juga boleh digunakan untuk menggantikan simulasi perbualan sebenar dengan manusia secara langsung. Dan ia telah digunakan dalam pelbagai situasi dan senario, tidak terhad kepada sokongan pelanggan, tempahan tiket, e-commerce, e-perbankan dan ciri-ciri lain.

Untuk entri kali ini, saya akan berkongsi kepada anda cara membina pembantu Chatbot dengan menggunakan Next.js + CSS Tailwind sebagai 'front-end stack' dan Strapi API sebagai headless CMS.

Pra-syarat

Sebelum memulakan tutorial ini, pastikan anda:

• Telah memuat turun Node.js (v12 atau v14) di dalam komputer anda - Semak pautan ini untuk mengetahui tentang cara memuat turun dan install Node.js di dalam komputer anda
• Pemahaman asas tentang Strapi - Mulakan dengan panduan ringkas ini
• Pengetahuan asas Next.js
• Pengetahuan asas tentang Tailwind CSS

Apa itu Next.js

Next.js ialah framework React yang hebat untuk membina aplikasi yang sangat dinamik. Ia datang dengan pre-rendering, automatic code-splitting dan banyak ciri hebat lain.

NextJS memberikan para developers keupayaan untuk membina aplikasi web dengan keupayaan 'server side rendering' tanpa konfigurasi tambahan yang memeningkan. Dalam erti kata lain, masa yang diambil untuk memaparkan keseluruhan web page akan menjadi lebih pantas berbanding biasa apabila aplikasi tersebut di bina dengan menggunakan NextJS.

Apa itu Tailwind CSS?

Tailwind CSS ialah CSS framework yang mengutamakan utiliti untuk membina antara muka pengguna dengan pantas. Dengan Tailwind CSS, kita hanya perlu menulis kelas CSS secara terus dalam element kelas HTML, tanpa perlu mengimport external style sheet atau menggunakan library berasingan untuk menghasilkan sesebuah reka bentuk UI.

Apa itu Strapi?

Strapi ialah sebuah headless CMS yang dibina secara open-source dengan menggunakan Node.js, dimana ia membolehkan kita untuk membina API (application program interface) dan mengurus kandungan web kita dengan lebih mudah, tanpa perlu runsing untuk memikirkan bagaimana hendak membina sebuah sistem CMS itu sendiri dari peringkat awal.

Kini, kita boleh membina API dengan lebih pantas dan menggunakan kandungan data secara terus melalui Strapi dari mana-mana klien API seperti REST API atau GraphQL.

Sebelum kita mula, install aplikasi Strapi terlebih dahulu.

Untuk permulaan, buka Terminal (bagi pengguna Mac) atau Command Prompt (bagi pengguna Windows). Kemudian, taip kod arahan di bawah di dalam Terminal/Command Prompt anda dan tekan butang "Enter"

npx create-strapi-app YOUR_PROJECT_NAME --quickstart

P/s: Tukarkan YOUR_PROJECT_NAME kepada nama projek yang bersesuaian dengan anda.

Dengan kod ini, ia akan memuat turun segala pakej yang diperlukan bagi mencipta aplikasi Strapi CMS anda, dan juga ia menyediakan projek anda untuk siap berfungsi dalam persekitaran "local" (boleh berfungsi dari komputer anda sahaja).

Sebaik sahaja selesai, buka browser anda dan layari ke URL http://localhost:1337/admin untuk membuka portal CMS anda sebagai admin. Atau anda boleh ke http://localhost:1337 untuk melihat status pelayan (server) Strapi anda.

Gambaran adalah seperti berikut:

• Admin view - anda harus log masuk ke dalam akaun Strapi anda. Klik di sini untuk ketahui dengan lebih lanjut.

• Server status view

Tahniah, anda kini mempunyai headless CMS dan pembina API sendiri dengan menggunakan Strapi!

Tamat untuk bahagian pertama.

Sampai di sini sahaja terlebih dahulu perkongsian saya. Nantikan bahagian seterusnya untuk entri ini di masa yang akan datang.

Terima kasih kerana sudi membaca!

Sekian sahaja dari saya, Abdullah Fitri