Cara Membangun dan Menerapkan Aplikasi Kloning ChatGPT Dengan React dan OpenAI API

Karena penggunaan chatbot dan asisten virtual terus berkembang, banyak bisnis dan pengembang mencari cara untuk membuat chatbot bertenaga AI mereka sendiri. ChatGPT adalah salah satu chatbot yang dibuat oleh OpenAI, yang mampu terlibat dalam percakapan seperti manusia dan menjawab berbagai pertanyaan.

Apa yang Akan Anda Bangun

Dalam tutorial ini, Anda akan belajar cara membuat aplikasi klon ChatGPT menggunakan React dan OpenAI API. Jika Anda ingin mencoba proyek yang menyenangkan dan menarik selama akhir pekan, ini adalah kesempatan bagus untuk terjun ke React dan OpenAI.

Anda juga akan mempelajari cara menerapkan langsung dari repositori GitHub Anda ke platform Hosting Aplikasi Kinsta, yang menyediakan domain .kinsta.app gratis untuk membuat proyek Anda ditayangkan dengan cepat. Dan dengan uji coba gratis Kinsta dan Hobby Tier, Anda dapat memulai dengan mudah tanpa biaya apa pun.

Berikut adalah demo langsung dari aplikasi klon ChatGPT.

Jika Anda ingin memeriksa proyek ini lebih dekat, Anda dapat mengakses repositori GitHub-nya.

Sebagai alternatif, Anda juga dapat mengkloning proyek pemula aplikasi React, yang hadir dengan elemen dasar seperti gaya, tautan Font Awesome CDN, paket OpenAI, dan struktur dasar, untuk membantu Anda memulai.

Persyaratan/Prasyarat

Tutorial ini dirancang untuk menjadi pengalaman "mengikuti". Oleh karena itu, disarankan agar Anda memiliki kode berikut dengan mudah:

• Pemahaman dasar tentang HTML, CSS, dan JavaScript
• Beberapa keakraban dengan Bereaksi
• Node.js dan npm (Node Package Manager) atau benang terpasang di komputer Anda

Apa itu API OpenAI?

API OpenAI adalah platform berbasis cloud yang memberi pengembang akses ke model bahasa OpenAI, seperti GPT-3, melalui API. Ini memungkinkan pengembang untuk menambahkan fitur pemrosesan bahasa alami seperti penyelesaian teks, analisis sentimen, peringkasan, dan terjemahan ke aplikasi mereka tanpa mengembangkan dan melatih model mereka.

Untuk menggunakan API OpenAI, pengembang harus membuat akun di situs web OpenAI dan mendapatkan kunci API. Kunci API digunakan untuk mengautentikasi permintaan API dan melacak penggunaan.

Setelah kunci API diperoleh, pengembang dapat menggunakan API untuk mengirimkan teks ke model bahasa dan menerima respons.

Mengapa Bereaksi?

React adalah pustaka JavaScript populer untuk membuat antarmuka pengguna. Menurut survei pengembang Stack Overflow 2022, ini adalah teknologi web kedua yang paling umum digunakan, dengan 42,62% pangsa pasar.

Bereaksi memungkinkan pengembang untuk membuat komponen deklaratif yang mewakili berbagai bagian antarmuka pengguna. Komponen-komponen ini didefinisikan menggunakan sintaks yang disebut JSX, yang merupakan kombinasi dari JavaScript dan HTML.

Berkat ekosistem pustaka dan kit komponennya yang besar, pengembang dapat dengan mudah bekerja dengan dan mengintegrasikan API seperti OpenAI API, untuk membangun antarmuka obrolan yang rumit dan itulah yang menjadikannya pilihan yang sangat baik untuk membangun aplikasi klon ChatGPT.

Cara Mengatur Lingkungan Pengembangan React Anda

Cara terbaik untuk menginstal React atau membuat proyek React adalah menginstalnya dengan aplikasi create-react. Salah satu prasyaratnya adalah menginstal Node.js di mesin Anda. Untuk mengonfirmasi bahwa Anda telah menginstal Node, jalankan perintah berikut di terminal Anda.

 node -v

Jika muncul versi, maka itu ada. Untuk menggunakan npx, Anda harus memastikan versi Node Anda tidak kurang dari v14.0.0, dan versi NPM Anda tidak kurang dari v5.6; jika tidak, Anda mungkin perlu memperbaruinya dengan menjalankan npm update -g . Setelah Anda mengetahui npm, Anda sekarang dapat menyiapkan proyek React dengan menjalankan perintah di bawah ini:

 npx create-react-app chatgpt-clone

Catatan: "chatgpt-clone" adalah nama aplikasi yang kami buat, tetapi Anda dapat mengubahnya menjadi nama apa pun pilihan Anda.

Proses instalasi mungkin memakan waktu beberapa menit. Setelah berhasil, Anda dapat menavigasi ke direktori dan menginstal paket OpenAI Node.js, yang menyediakan akses mudah ke OpenAI API dari Node.js menggunakan perintah di bawah ini:

 npm install openai

Anda sekarang dapat menjalankan npm start untuk melihat aplikasi Anda langsung di localhost:3000 .

Ketika sebuah proyek React dibuat menggunakan perintah create-react-app , itu secara otomatis mengubah struktur folder. Folder utama yang menjadi perhatian Anda adalah folder src , tempat pengembangan berlangsung. Folder ini berisi banyak file secara default tetapi Anda hanya perlu memperhatikan file App.js , index.js dan index.css .

1. App.js : File App.js adalah komponen utama dalam aplikasi React. Ini biasanya mewakili komponen tingkat atas yang merender semua komponen lain dalam aplikasi.
2. index.js : File ini adalah titik masuk aplikasi React Anda. Ini adalah file pertama yang dimuat saat aplikasi dibuka dan bertanggung jawab untuk merender komponen App.js ke browser.
3. index.css : File ini bertanggung jawab untuk menentukan keseluruhan gaya dan tata letak aplikasi React Anda.

Cara Membuat Klon ChatGPT Dengan React dan OpenAI API

Aplikasi clone ChatGPT akan terdiri dari dua komponen untuk membuat aplikasi lebih mudah dipahami dan dipelihara. Kedua komponen tersebut adalah:

1. Bagian Formulir : Komponen ini mencakup bidang area teks dan tombol bagi pengguna untuk berinteraksi dengan chatbot.
2. Bagian Jawaban : Pertanyaan dan jawaban yang sesuai akan disimpan dalam array dan ditampilkan di bagian ini. Anda akan mengulang array secara kronologis, menampilkan yang terbaru terlebih dahulu.

Menyiapkan Aplikasi Clone ChatGPT

Dalam tutorial ini, mari kita mulai dengan membuat antarmuka aplikasi terlebih dahulu, lalu Anda dapat mengimplementasikan fungsionalitas sehingga aplikasi Anda berinteraksi dengan OpenAI API. Mulailah dengan membuat dua komponen yang akan Anda gunakan dalam tutorial ini. Untuk pengaturan yang tepat, Anda akan membuat folder komponen di folder src tempat semua komponen akan disimpan.

Komponen Bagian Formulir

Ini adalah bentuk sederhana yang terdiri dari textarea dan button kirim.

 // components/FormSection.jsx const FormSection = () => { return ( <div className="form-section"> <textarea rows="5" className="form-control" placeholder="Ask me anything..." ></textarea> <button className="btn"> Generate Response </button> </div> ) } export default FormSection;

Seperti inilah bentuk yang diharapkan saat Anda mengimpornya ke file App.js Anda:

Komponen Bagian Jawaban

Bagian ini adalah tempat semua pertanyaan dan jawaban akan ditampilkan. Seperti inilah tampilan bagian ini ketika Anda juga mengimpornya ke file App.js Anda.

Anda akan mengambil pertanyaan dan jawaban ini dari array dan loop untuk membuat kode Anda lebih mudah dibaca dan dipelihara.

 // components/AnswerSection.jsx const AnswerSection = () => { return ( <> <hr className="hr-line" /> <div className="answer-container"> <div className="answer-section"> <p className="question">Who is the founder of OpenAi?</p> <p className="answer">OpenAI was founded in December 2015 by Elon Musk, Sam Altman, Greg Brockman, Ilya Sutskever, Wojciech Zaremba, and John Schulman.</p> <div className="copy-icon"> <i className="fa-solid fa-copy"></i> </div> </div> </div> </> ) } export default AnswerSection;

Halaman Beranda

Anda sekarang telah membuat kedua komponen, tetapi tidak ada yang muncul saat Anda menjalankan aplikasi karena Anda perlu mengimpornya ke file App.js. Untuk aplikasi ini, Anda tidak akan mengimplementasikan bentuk perutean apa pun, artinya file App.js akan berfungsi sebagai komponen/halaman beranda aplikasi Anda.

Anda dapat menambahkan beberapa konten, seperti judul dan deskripsi aplikasi Anda, sebelum mengimpor komponen.

 // App.js import FormSection from './components/FormSection'; import AnswerSection from './components/AnswerSection'; const App = () => { return ( <div> <div className="header-section"> <h1>ChatGPT CLONE </h1> <p> I am an automated question and answer system, designed to assist you in finding relevant information. You are welcome to ask me any queries you may have, and I will do my utmost to offer you a reliable response. Kindly keep in mind that I am a machine and operate solely based on programmed algorithms. </p> </div> <FormSection /> <AnswerSection /> </div> ); }; export default App;

Pada kode di atas, kedua komponen tersebut diimpor dan ditambahkan ke aplikasi. Ketika Anda menjalankan aplikasi Anda, seperti inilah tampilan aplikasi Anda:

Menambahkan Fungsionalitas dan Mengintegrasikan OpenAI API

Anda sekarang memiliki antarmuka pengguna aplikasi Anda. Langkah selanjutnya adalah membuat aplikasi berfungsi sehingga dapat berinteraksi dengan OpenAI API dan mendapatkan respons. Pertama, Anda perlu mendapatkan nilai dari formulir Anda saat dikirimkan karena akan digunakan untuk mengkueri OpenAI API.

Mendapatkan Data Dari Formulir

Di React, cara terbaik untuk menyimpan dan memperbarui data adalah dengan menggunakan status. Dalam komponen fungsional, hook useState() digunakan untuk bekerja dengan status. Anda dapat membuat status, menetapkan nilai dari formulir Anda ke status, dan memperbaruinya setiap kali nilainya berubah. Mari mulai dengan mengimpor hook useState() ke dalam komponen FormSection.jsx lalu membuat status untuk menyimpan dan memperbarui newQuestions .

 // components/FormSection.jsx import { useState } from 'react'; const FormSection = ({ generateResponse }) => { const [newQuestion, setNewQuestion] = useState(''); return ( // Form to submit a new question ) } export default FormSection;

Selanjutnya, Anda dapat menetapkan nilai bidang textarea ke status dan membuat event onChange() untuk memperbarui status setiap kali nilai masukan berubah:

 <textarea rows="5" className="form-control" placeholder="Ask me anything..." value={newQuestion} onChange={(e) => setNewQuestion(e.target.value)} ></textarea>

Terakhir, Anda dapat membuat event onClick() , untuk memuat fungsi setiap kali tombol kirim diklik. Metode ini akan dibuat dalam file App.js dan diteruskan sebagai props ke dalam komponen FormSection.jsx dengan nilai newQuestion dan setNewQuestion sebagai argumen.

 <button className="btn" onClick={() => generateResponse(newQuestion, setNewQuestion)}> Generate Response </button>

Anda sekarang telah membuat status untuk menyimpan dan memperbarui nilai formulir, menambahkan metode yang diteruskan sebagai props dari file App.js dan event klik yang ditangani. Seperti inilah tampilan kode terakhir:

 // components/FormSection.jsx import { useState } from 'react'; const FormSection = ({ generateResponse }) => { const [newQuestion, setNewQuestion] = useState(''); return ( <div className="form-section"> <textarea rows="5" className="form-control" placeholder="Ask me anything..." value={newQuestion} onChange={(e) => setNewQuestion(e.target.value)} ></textarea> <button className="btn" onClick={() => generateResponse(newQuestion, setNewQuestion)}> Generate Response </button> </div> ) } export default FormSection;

Langkah selanjutnya adalah membuat metode di file App.js untuk menangani seluruh proses interaksi dengan OpenAI API.

Berinteraksi Dengan OpenAI API

Untuk berinteraksi dengan OpenAI API dan mendapatkan kunci API dalam aplikasi React, Anda harus membuat akun OpenAI API. Anda dapat mendaftar akun di situs web OpenAI menggunakan akun Google atau email Anda. Untuk membuat kunci API, klik Pribadi di pojok kanan atas situs web; beberapa opsi akan muncul; klik Lihat kunci API .

Klik tombol Buat kunci rahasia baru , salin kunci di suatu tempat seperti yang akan Anda gunakan di aplikasi ini untuk berinteraksi dengan OpenAI. Anda sekarang dapat melanjutkan untuk menginisialisasi OpenAI dengan mengimpor paket openai (yang sudah Anda instal) bersama dengan metode konfigurasi. Kemudian buat konfigurasi dengan kunci yang Anda buat dan gunakan untuk menginisialisasi OpenAI.

 // src/App.js import { Configuration, OpenAIApi } from 'openai'; import FormSection from './components/FormSection'; import AnswerSection from './components/AnswerSection'; const App = () => { const configuration = new Configuration({ apiKey: process.env.REACT_APP_OPENAI_API_KEY, }); const openai = new OpenAIApi(configuration); return ( // Render FormSection and AnswerSection ); }; export default App;

Pada kode di atas, kunci API OpenAI disimpan sebagai variabel lingkungan di file .env . Anda dapat membuat file .env di folder root aplikasi Anda dan menyimpan kunci ke variabel REACT_APP_OPENAI_API_KEY .

 // .env REACT_APP_OPENAI_API_KEY = sk-xxxxxxxxxx…

Anda sekarang dapat melanjutkan untuk membuat metode generateResponse di file App.js , dan meneruskan dua parameter yang diharapkan dari formulir yang sudah Anda buat untuk menangani permintaan dan mendapatkan respons dari API.

 // src/App.js import FormSection from './components/FormSection'; import AnswerSection from './components/AnswerSection'; const App = () => { const generateResponse = (newQuestion, setNewQuestion) => { // Set up OpenAI API and handle response }; return ( // Render FormSection and AnswerSection ); }; export default App;

Anda sekarang dapat mengirim permintaan ke OpenAI API. OpenAI API dapat melakukan banyak operasi, seperti tanya jawab (Q&A), koreksi tata bahasa, terjemahan, dan banyak lagi. Untuk setiap operasi ini, opsinya berbeda. Misalnya, nilai mesin untuk Q&A adalah text-davinci-00 , sedangkan untuk terjemahan SQL adalah code-davinci-002 . Jangan ragu untuk memeriksa dokumentasi contoh OpenAI untuk berbagai contoh dan pilihannya.

Untuk tutorial ini, kami hanya mengerjakan T&J, seperti inilah tampilan opsinya:

 { model: "text-davinci-003", prompt: "Who is Obama?", temperature: 0, max_tokens: 100, top_p: 1, frequency_penalty: 0.0, presence_penalty: 0.0, stop: ["\"], }

Catatan: Saya mengubah nilai prompt.

Prompt adalah pertanyaan yang dikirim dari formulir. Ini berarti Anda harus menerimanya dari input formulir yang Anda berikan ke metode generateResponse sebagai parameter. Untuk melakukan ini, Anda akan menentukan opsi dan kemudian menggunakan operator spread untuk membuat opsi lengkap yang menyertakan prompt:

 // src/App.js import { Configuration, OpenAIApi } from 'openai'; import FormSection from './components/FormSection'; import AnswerSection from './components/AnswerSection'; const App = () => { const configuration = new Configuration({ apiKey: process.env.REACT_APP_OPENAI_API_KEY, }); const openai = new OpenAIApi(configuration); const generateResponse = async (newQuestion, setNewQuestion) => { let options = { model: 'text-davinci-003', temperature: 0, max_tokens: 100, top_p: 1, frequency_penalty: 0.0, presence_penalty: 0.0, stop: ['/'], }; let completeOptions = { ...options, prompt: newQuestion, }; }; return ( // Render FormSection and AnswerSection ); }; export default App;

Pada titik ini, yang tersisa adalah mengirim permintaan melalui metode createCompletion ke OpenAI untuk mendapatkan respons.

 // src/App.js import { Configuration, OpenAIApi } from 'openai'; import FormSection from './components/FormSection'; import AnswerSection from './components/AnswerSection'; import { useState } from 'react'; const App = () => { const configuration = new Configuration({ apiKey: process.env.REACT_APP_OPENAI_API_KEY, }); const openai = new OpenAIApi(configuration); const [storedValues, setStoredValues] = useState([]); const generateResponse = async (newQuestion, setNewQuestion) => { let options = { model: 'text-davinci-003', temperature: 0, max_tokens: 100, top_p: 1, frequency_penalty: 0.0, presence_penalty: 0.0, stop: ['/'], }; let completeOptions = { ...options, prompt: newQuestion, }; const response = await openai.createCompletion(completeOptions); console.log(response.data.choices[0].text); }; return ( // Render FormSection and AnswerSection ); }; export default App;

Pada kode di atas, teks jawaban akan ditampilkan di konsol Anda. Jangan ragu untuk menguji aplikasi Anda dengan mengajukan pertanyaan apa pun. Langkah terakhir adalah membuat status yang akan menampung larik pertanyaan dan jawaban, lalu mengirimkan larik ini sebagai penyangga ke komponen AnswerSection . Seperti inilah tampilan kode akhir App.js :

 // src/App.js import { Configuration, OpenAIApi } from 'openai'; import FormSection from './components/FormSection'; import AnswerSection from './components/AnswerSection'; import { useState } from 'react'; const App = () => { const configuration = new Configuration({ apiKey: process.env.REACT_APP_OPENAI_API_KEY, }); const openai = new OpenAIApi(configuration); const [storedValues, setStoredValues] = useState([]); const generateResponse = async (newQuestion, setNewQuestion) => { let options = { model: 'text-davinci-003', temperature: 0, max_tokens: 100, top_p: 1, frequency_penalty: 0.0, presence_penalty: 0.0, stop: ['/'], }; let completeOptions = { ...options, prompt: newQuestion, }; const response = await openai.createCompletion(completeOptions); if (response.data.choices) { setStoredValues([ { question: newQuestion, answer: response.data.choices[0].text, }, ...storedValues, ]); setNewQuestion(''); } }; return ( <div> <div className="header-section"> <h1>ChatGPT CLONE </h1> <p> I am an automated question and answer system, designed to assist you in finding relevant information. You are welcome to ask me any queries you may have, and I will do my utmost to offer you a reliable response. Kindly keep in mind that I am a machine and operate solely based on programmed algorithms. </p> </div> <FormSection generateResponse={generateResponse} /> <AnswerSection storedValues={storedValues} /> </div> ); }; export default App;

Anda sekarang dapat mengedit komponen AnswerSection , sehingga menerima nilai props dari App.js dan menggunakan metode JavaScript Map() untuk melihat melalui array storedValues :

 // components/AnswerSection.jsx const AnswerSection = ({ storedValues }) => { return ( <> <hr className="hr-line" /> <div className="answer-container"> {storedValues.map((value, index) => { return ( <div className="answer-section" key={index}> <p className="question">{value.question}</p> <p className="answer">{value.answer}</p> <div className="copy-icon"> <i className="fa-solid fa-copy"></i> </div> </div> ); })} </div> </> ) } export default AnswerSection;

Ketika Anda menjalankan aplikasi Anda dan mengujinya dengan mengajukan pertanyaan, jawabannya akan ditampilkan di bawah ini. Tetapi Anda akan melihat tombol salin tidak berfungsi. Anda perlu menambahkan event onClick() ke tombol, sehingga memicu metode untuk menangani fungsionalitas tersebut. Anda dapat menggunakan metode navigator.clipboard.writeText() untuk menangani fungsionalitas tersebut. Seperti inilah tampilan komponen AnswerSection sekarang:

 // components/AnswerSection.jsx const AnswerSection = ({ storedValues }) => { const copyText = (text) => { navigator.clipboard.writeText(text); }; return ( <> <hr className="hr-line" /> <div className="answer-container"> {storedValues.map((value, index) => { return ( <div className="answer-section" key={index}> <p className="question">{value.question}</p> <p className="answer">{value.answer}</p> <div className="copy-icon" onClick={() => copyText(value.answer)} > <i className="fa-solid fa-copy"></i> </div> </div> ); })} </div> </> ) } export default AnswerSection;

Saat Anda menjalankan aplikasi, aplikasi klon ChatGPT Anda akan bekerja dengan sempurna. Anda sekarang dapat menggunakan aplikasi Anda untuk mengaksesnya secara online dan membaginya dengan teman.

Cara Men-deploy Aplikasi React Anda ke Kinsta

Membangun aplikasi ini dan meninggalkannya di komputer lokal Anda tidaklah cukup. Anda ingin membagikannya secara online, sehingga orang lain dapat mengaksesnya. Mari kita lihat bagaimana melakukannya menggunakan GitHub dan Kinsta.

Dorong Kode Anda ke GitHub

Untuk mendorong kode Anda ke GitHub, Anda dapat menggunakan perintah Git, yang merupakan cara yang andal dan efisien untuk mengelola perubahan kode, berkolaborasi dalam proyek, dan memelihara riwayat versi.

Langkah pertama untuk mendorong kode Anda adalah membuat repositori baru dengan masuk ke akun GitHub Anda, mengklik tombol + di pojok kanan atas layar, dan memilih Repositori baru dari menu dropdown.

Beri nama repositori Anda, tambahkan deskripsi (opsional), dan pilih apakah Anda ingin menjadikannya publik atau pribadi. Klik Buat repositori untuk membuatnya.

Setelah repositori Anda dibuat, pastikan Anda mendapatkan URL repositori dari halaman utama repositori Anda, yang Anda perlukan untuk mendorong kode Anda ke GitHub.

Buka terminal atau prompt perintah Anda dan arahkan ke direktori yang berisi proyek Anda. Jalankan perintah berikut satu per satu untuk mendorong kode Anda ke repositori GitHub Anda:

 git init git add . git commit -m "my first commit" git remote add origin [repository URL] git push -u origin master

git init menginisialisasi repositori Git lokal, git add . menambahkan semua file di direktori saat ini dan subdirektorinya ke repositori Git yang baru. git commit -m "my first commit" melakukan perubahan pada repositori dengan pesan singkat. git remote add origin [repository URL] menyetel URL repositori sebagai repositori jarak jauh dan git push -u origin master mendorong kode ke repositori jarak jauh (asal) di cabang master.

Terapkan Aplikasi ChatGPT Clone React Anda ke Kinsta

Untuk menyebarkan repositori Anda ke Kinsta, ikuti langkah-langkah berikut:

1. Masuk atau buat akun Kinsta Anda di dasbor My Kinsta.
2. Klik Applications di sidebar kiri lalu klik Add service .
3. Pilih Aplikasi dari menu dropdown untuk menerapkan aplikasi React ke Kinsta.
4. Pilih repositori yang ingin Anda gunakan dari modal yang muncul. Jika Anda memiliki banyak cabang, Anda dapat memilih salah satu yang ingin Anda gunakan dan memberikan nama untuk aplikasi tersebut. Pilih lokasi pusat data di antara 25 yang tersedia, dan Kinsta akan secara otomatis mendeteksi perintah mulai.
5. Terakhir, tidak aman untuk mengeluarkan kunci API ke host publik seperti GitHub, karena ditambahkan sebagai variabel lingkungan secara lokal. Saat menghosting, Anda juga dapat menambahkannya sebagai variabel lingkungan menggunakan nama variabel yang sama dan kunci sebagai nilainya.

Aplikasi Anda akan mulai menerapkan, dan dalam beberapa menit, tautan akan diberikan untuk mengakses versi aplikasi Anda yang diterapkan. Dalam hal ini, ini adalah https://chatgpt-clone-g9q10.kinsta.app/ Catatan: Anda dapat mengaktifkan penerapan otomatis, jadi Kinsta akan menerapkan ulang aplikasi Anda setiap kali Anda mengubah basis kode dan mendorongnya ke GitHub.

Ringkasan

OpenAI API dapat digunakan untuk membangun berbagai aplikasi potensial, mulai dari dukungan pelanggan dan asisten pribadi hingga terjemahan bahasa dan pembuatan konten.

Dalam tutorial ini, Anda telah mempelajari cara membuat aplikasi klon ChatGPT dengan React dan OpenAI. Anda dapat mengintegrasikan aplikasi/fitur ini ke dalam aplikasi lain untuk memberikan pengalaman percakapan seperti manusia kepada pengguna.

Masih banyak lagi yang bisa dilakukan dengan OpenAI API dan cara meningkatkan aplikasi klon ini. Misalnya, Anda dapat menerapkan penyimpanan lokal sehingga pertanyaan dan jawaban sebelumnya tidak hilang bahkan setelah Anda me-refresh browser.

Dengan uji coba gratis Kinsta dan Hobby Tier, Anda dapat dengan mudah memulai tanpa biaya apa pun di Hosting Aplikasi kami. Jadi mengapa tidak mencobanya dan lihat apa yang dapat Anda buat?

Bagikan proyek dan pengalaman Anda dalam komentar di bawah.