REACT UI MECHANICS
React ile AI Uygulamaların Geliştirimi — 3(Server and OpenAI Integration)
React UI Mekaniklerinde bu blog yazi serisinde AI uygulamalarını ve ChatGPT , Gemini gibi Web ortamlarını nasıl geliştirebileceğimizi analiz edip , bu konuda örnekler geliştirip bunların mantıklarını anlatıyor olacağım.
Bu seriye ait blog yazıları;
- React ile AI Uygulamaların Geliştirimi — 1 (Örnek Uygulamaların Analizi)
- React ile AI Uygulamaların Geliştirimi — 2 (Menu & Page & Routing)
3ncü blog yazımızda React Uygulamamıza geliştireceğimiz bir API üzerinden React → API → OpenAI SDK çağırımlarının yapılması kısmını geliştireceğiz.
Aşağıda bu örneğin resmini görebilirsiniz. Linki de burada.
Bu arada artık AI App Menu’su altına KnowledgeMap (Bilgi Haritası) erişim düğmesi ekledim. Bu sayede AI Chat sayfasına ait tüm geliştirmelere hızlı bir şekilde erişim sağlayabileceksiniz.
Kısaca Nasıl Geliştirdim
1. Adım
Şimdi bu kısmı nasıl geliştirdiğimi kısaca anlatayım. Öncelikle Backend için hangi SDK’yı kullanabileceğimi inceledim.
OpenAI Platformuna üye oldum. Sizi aşağıdaki şekilde bir ekran karşılıyor.
Bu ekranda kısaca ChatGPT SDK ile nasıl konuşabileceğiniz. Bunun için nasıl API Key oluşturabilirsiniz ve kullanabilirsiniz bu anlatılıyor zaten.
node.js
import OpenAI from "openai";
const openai = new OpenAI();
const completion = await openai.chat.completions.create({
model: "gpt-4o",
messages: [
{"role": "user", "content": "write a haiku about ai"}
]
});2. Adım
Hono Web Application Framework kullanarak 1nci adımda oluşturduğum OpenAI SDK kullanma kısmını API’ye dönüştürdüm. Tabi bu kısmı oluştururken CORS tanımlaması yapmak gerekiyor çünkü aynı domain altında çalışmayacak.
import { Hono } from "hono";
import { cors } from "hono/cors";
import { runOpenAI } from "./openai";
const app = new Hono();
app.use(
"*",
cors({
origin: ["https://onurdayibasi.dev", "http://127.0.0.1:5173"],
})
);
app.post("/api/chat/:id", async (c) => {
const id = c.req.param("id");
const { content } = await c.req.json();
const response = await runOpenAI(content);
const result = { role: "assistant", content: response?.message?.content };
return c.json(result, 200);
});
app.get("/api/chat/:id", (c) => {
const id = c.req.param("id");
const response = {
version: "1.0.0",
messages: [
{
content: "Welcome to the chat!",
role: "assistant",
},
],
};
return c.json(response, 200);
});3. Adım
CloudFlare içerisinde bir hesap oluşturarak Hono bu adresteki adımlarını kullanarak Web uygulamamı CloudFlare üzerine deploy ettim.
Daha sonra main push , GitHub Actions ile deploy bağlayarak Main branch yapılan güncellemelerin otomatik deploy çalıştırması sağladım.
4. Adım
Frontend kısmında sunucu tarafında bu API çağırıp düzgün çalışıp çalışmadığını test etmem gerekiyordu. Önceden geliştirmiş olduğum. MSW ve Axios kod örneğini aldım.
Bunun bir benzerini oluşturacak şekilde klonunu oluşturup yeni bir Routing ile asıl örneğimizi oluşturdum.
Buradaki Axios örneğini incelediğimizde basit bir post yapıyoruz.
const handlePost = (apiURL, message) => {
setLoading(true);
axios
.post(apiURL, message)
.then(function (response) {
console.log('data post', response?.data);
})
.catch(function (error) {
console.log('request failed', error);
})
.finally(function () {
setLoading(false);
});
};5. Adım
Geçici olarak oluşturacağım bir TextArea üzerinden OpenAI Chat kısmına kullanıcı isteklerini gönderebilecek bir yapı oluşturdum.
Şimdilik Server Sync kısmını yaptık. Bir sonraki adım Sayfa Layout’unu oluşturarak bu TextArea ve düğmeyi sayfaya yerleştirmek olacak.
Okumaya Devam Et 😃
Bu yazının devamı veya yazı grubundaki diğer yazılara erişmek için bu linke tıklayabilirsiniz.
