MID Teknologi – AI sudah sangat berkembang pesat saat ini, mulai dari generate gambar dan mendapatkan informasi semua sudah dapat dilakukan dengan AI, oleh karena itu sangat penting bagi kita untuk dapat mengadopsi teknologi AI di website-website yang kita miliki sehingga web kita menjadi lebih kaya akan fitur dan menjadi lebih bermanfaat.
Di artikel ini kita akan membahas secara lengkap cara Menghubungkan WordPress dengan OPEN AI, untuk implementasinya sangat mudah sehingga dapat di terapkan oleh pemula sekalipun, Simak artikelnya sampai habis dan langsung terapkan di web wordpress anda ya.
Apa itu API?
API adalah singkatan dari “Application Programming Interface.” Ini adalah sekumpulan aturan dan protokol yang memungkinkan berbagai perangkat lunak atau sistem untuk berkomunikasi dan berinteraksi satu sama lain.
API memungkinkan software developer membuat aplikasi yang menggunakan fungsionalitas atau data dari sistem lain tanpa harus memahami detail internal dari sistem tersebut. Ini sangat mempermudah integrasi dan interaksi antara berbagai komponen perangkat lunak.
Apa itu API OPEN AI?
API (Application Programming Interface) OpenAI adalah interface perangkat lunak yang memungkinkan pengembang untuk menghubungkan aplikasi mereka dengan model bahasa buatan OpenAI, seperti GPT-3, GPT-3.5 hingga GPT-4.
Dengan menggunakan API dari OpenAI, software developer dapat memanfaatkan kemampuan model AI untuk melakukan berbagai tugas pemrosesan seperti penulisan teks, penerjemahan, pemeriksaan tata bahasa, generate gambar dan banyak lagi hal menakjubkan yang dapat anda hasilkan dengan bantuan Teknologi AI.
Persiapan Menghubungkan wordpress dengan OPEN AI
berikut ini adalah beberapa hal yang perlu anda persiapkan untuk mulai menghubungkan website wordpress anda dengan api dari open AI:
Baca Juga: Apa Itu ChatGPT dan Bagaimana Cara Menggunakannya?
Cara Menghubungkan WordPress dengan API Open AI
berikut ini ada beberapa langkah mudah untuk mengintegrasikan WordPress dengan API OPEN AI.
Pertama silahkan anda install plugin wpcode di wordpress anda
setelah itu silahkan anda login ke OpenAI dan pilih API
Lalu di sebalah kanan atas anda klik akun anda dan pilih dropdown menu view api key
kita akan diarahkan ke halaman open ai api key silahkan anda generate api key baru dan simpan api key nya dimana key ini nantinya akan kita gunakan untuk komunikasi dari website wordpress ke OPEN AI (detailnya lihat gambar dibawah ini)
Penting.!
Jangan pernah bagikan open ai api secret key dengan orang lain
Oke, sampai dengan tahapan ini kita sudah berhasil mengenerate OPEN AI Key, selanjutnya kita akan mulai menghubungkan wordpress dengan API OPEN AI.
Login ke web wordpress anda dan pilih menu code snippet dan pilih + Add Snippet
Pilih Add your custom code
Pada Form Custom code silahkan anda isi nama snippetnya contohnya Mikrotik Advice
Code Type pilih PHP Snippet
lalu pada code preview silahkan anda paste script prompt ini
function openai_generate_text2() {
// Get the topic from the AJAX request
$topic = $_POST['prompt'];
$prompt = "Anda adalah senior mikrotik engineer dengan pengalaman lebih dari 10 tahun di mikrotik router dan jaringan komputer sehingga anda sangat paham mengenai permasalahan terkait router mikrotik dan jaringan internet bantu saya berikan saran dan solusi terkait permasalahan jaringan dan router mikrotik mengenai topik " . $topic. "Tulis dengan gaya penulisan singkat dan padat dengan outputnya dalam bahasa indonesia";
// OpenAI API URL and key
$api_url = 'https://api.openai.com/v1/chat/completions';
$api_key = 'sk-JKakSg3ruyJhM3sdSc94T3Bl2887alsisjeKA22'; // Replace with your actual OpenAI API key
// Headers for the OpenAI API
$headers = [
'Content-Type' => 'application/json',
'Authorization' => 'Bearer ' . $api_key
];
// Body for the OpenAI API
$body = [
'model' => 'gpt-3.5-turbo',
'messages' => [['role' => 'user', 'content' => $prompt]],
'temperature' => 0.7
];
// Args for the WordPress HTTP API
$args = [
'method' => 'POST',
'headers' => $headers,
'body' => json_encode($body),
'timeout' => 120
];
// Send the request
$response = wp_remote_request($api_url, $args);
// Handle the response
if (is_wp_error($response)) {
$error_message = $response->get_error_message();
wp_send_json_error("Something went wrong: $error_message");
} else {
$body = wp_remote_retrieve_body($response);
$data = json_decode($body, true);
if (json_last_error() !== JSON_ERROR_NONE) {
wp_send_json_error('Invalid JSON in API response');
} elseif (!isset($data['choices'])) {
wp_send_json_error('API request failed. Response: ' . $body);
} else {
wp_send_json_success($data);
}
}
// Always die in functions echoing AJAX content
wp_die();
}
add_action('wp_ajax_openai_generate_text2', 'openai_generate_text2');
add_action('wp_ajax_nopriv_openai_generate_text2', 'openai_generate_text2');Catatan: Jangan Lupa ganti OPEN AI API Key dengan API Key Milik Anda
Device Type pilih Any devices
lalu klik save snippet (jangan lupa di enable kan snippet nya agar dapat digunakan)
Script lengkapnya silahkan download disini
disisi backend kita sudah selesai, selanjutnya kita buat disisi frontend (user interface) berikut ini gambaran tampilan user interfacenya:
saya sangat merekomendasikan anda untuk membuat user interface di wordpress menggunakan bantuan plugin seperti elemantor.
oke sekarang buat page baru dan edit menggunakan Elemenator
lalu tambahkan block html dan paste script html di bawah ini
<div id="text-generation-tool">
<textarea rows="4" cols="50" id="topic" placeholder="Ceritakan Detail Kendala Mikrotik dan Jaringan Anda!"></textarea>
<!-- Recaptcha -->
<div
class="g-recaptcha mb-2"
data-sitekey="6LdeNtIfkakaksa-qsaasjSh-Vhz_IKqvLO"
data-callback="onRecaptchaSuccess"
data-expired-callback="onRecaptchaResponseExpiry"
data-error-callback="onRecaptchaError"
></div>
<button id="generate-button">Get Advice</button>
<div id="result-container" style="display: none;">
<div class="result-wrapper">
<div class="result-content">
<textarea id="result" readonly></textarea>
</div>
<div class="copy-button-container">
<button id="copy-button">Copy</button>
</div>
</div>
</div>
<div id="loading" class="loader" style="display: none;"></div>
<div>
<p><b>Note: Mohon Berikan Informasi yang lengkap dan detail terkait masalah jaringan dan Mikrotik anda agar solusi yang diberikan oleh AI hasilnya lebih akurat! </b></p>
<p style="text-align:center"><b><i>Kasih Jajan Kreator👇 </i></b></p>
</div>
</div>
<style>
/* Basic styles for the text generation tool */
#text-generation-tool {
width: 100%;
max-width: 600px;
margin: 0 auto;
font-family: Arial, sans-serif;
}
#topic {
width: 100%;
padding: 15px;
margin-bottom: 20px;
font-size: 16px;
border-radius: 5px;
border: 1px solid #ddd;
}
#generate-button {
display: block;
width: 100%;
padding: 15px;
margin-bottom: 20px;
font-size: 16px;
border: none;
border-radius: 5px;
color: #fff;
background-color: #5a28de;
cursor: pointer;
transition: background-color 0.3s ease;
}
#generate-button:hover {
background-color: #3e1eca;
}
#result-container {
display: none;
margin-bottom: 20px;
}
.result-wrapper {
position: relative;
overflow: hidden;
}
.result-content {
display: flex;
}
#result {
flex: 1;
height: 400px;
padding: 15px;
font-size: 16px;
border-radius: 5px;
border: 1px solid #ddd;
background-color: #f9f9f9;
}
.copy-button-container {
margin-top: 10px;
text-align: right;
}
#copy-button {
padding: 8px 12px;
font-size: 14px;
border: none;
border-radius: 5px;
color: #fff;
background-color: #5a28de;
cursor: pointer;
transition: background-color 0.3s ease;
}
#copy-button:hover {
background-color: #3e1eca;
}
/* CSS for the loader */
.loader {
display: block;
margin: 50px auto;
border: 16px solid #735ef3; /* Light grey */
border-top: 16px solid #5a28de; /* Blue */
border-radius: 50%;
width: 50px;
height: 50px;
animation: spin 1s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
</style>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script src="https://www.google.com/recaptcha/api.js" async defer>
</script>
<script>
var captchaValidated = false;
// Fungsi dipanggil ketika captcha berhasil diverifikasi
function onRecaptchaSuccess() {
captchaValidated = true;
}
// Fungsi dipanggil ketika captcha gagal diverifikasi
function onRecaptchaError() {
captchaValidated = false;
}
document.getElementById("generate-button").addEventListener("click", function(e){
e.preventDefault();
var topic = document.getElementById('topic').value;
var prompt = topic;
var loading = document.getElementById('loading');
var result = document.getElementById('result');
var resultC = document.getElementById('result-container');
if (topic.trim() === "") {
Swal.fire({
title: 'Error!',
text: 'Text masih Kosong, Harap isi terlebih dahulu',
icon: 'error',
confirmButtonText: 'OK'
})
return; // Tidak melanjutkan proses generate jika nilai 'topic' kosong
}
if (!captchaValidated) {
Swal.fire({
title: 'Error!',
text: 'Silakan verifikasi captcha terlebih dahulu.',
icon: 'error',
confirmButtonText: 'OK'
});
return; // Tidak melanjutkan proses generate jika captcha belum diverifikasi
}
var generateButton = document.getElementById("generate-button");
if (generateButton.disabled) {
return; // Prevent multiple clicks while content is being generated
}
generateButton.disabled = true;
loading.style.display = 'block';
result.style.display = 'none'; // hide result textarea
resultC.style.display = 'none';
var formData = new FormData();
formData.append('action', 'openai_generate_text2');
formData.append('prompt', prompt);
fetch('/wp-admin/admin-ajax.php', {
method: 'POST',
body: formData
})
.then(response => response.json())
.then(data => {
loading.style.display = 'none';
if(data.success) {
result.value = data.data.choices[0].message.content;
result.style.display = 'block'; // show result textarea
resultC.style.display = 'block';
generateButton.disabled = false;
} else {
result.value = 'An error occurred: ' + data.data;
result.style.display = 'block'; // show result textarea
resultC.style.display = 'block';
generateButton.disabled = false;
}
})
.catch(error => {
loading.style.display = 'none';
result.value = 'An error occurred: ' + error.message;
result.style.display = 'block'; // show result textarea
resultC.style.display = 'block';
generateButton.disabled = false;
});
});
var copyButton = document.getElementById('copy-button');
copyButton.addEventListener('click', function() {
var result = document.getElementById('result');
result.select();
document.execCommand('copy');
Swal.fire({
title: 'Copied',
text: 'Copied to clipboard!',
icon: 'success',
confirmButtonText: 'OK'
})
});
</script>lalu save dan publish
Script lengkapnya silahkan download disini
Sampai dengan tahapan ini kita sudah berhasil mengintegrasikan web wordpress kita dengan API OPEN AI.
Silahkan lakukan uji coba jika ada kendala anda bisa tulis di kolom komentar di bawah ya.
Oh iya untuk uji coba form yang kita buat diatas silahkan test disini
Dapatkan Informasi Teknologi Terbaru di channel YouTube MID Teknologi
Kesimpulan
Dengan memahami cara integrasi OPEN AI dengan WordPress akan sangat membantu kita untuk membuat website wordpress kita menjadi lebih interaktif dan menarik minat pengunjung web anda.
Kita juga dapat berkreasi dengan fitur-fitur canggih yang dimiliki oleh OPEN AI seperti menambahkan tool, generate caption, emoji hingga gambar.
Adinata is a tech expert and content creator experience more than 5 years on networking, coding and managed cloud vps server