Selamat datang! Dalam panduan ini, kami akan menjelaskan langkah demi langkah cara mengatur proyek Express menggunakan TypeScript. Kami akan memberikan instruksi terminal yang diperlukan untuk memulai proyek ini. Mari kita mulai!
Deskripsi Proyek
Proyek ini memanfaatkan API dari Anthropic, dikenal juga sebagai Claude.AI, khususnya model Opus-3, yang mampu menganalisis gambar, teks dan berbagai jenis input lainnya, serta layanan informasi gizi dari API Ninjas. Berikut adalah diagram alir proyek ini.
Gambar 0.1. Diagram Alir pada aplikasi Back-end
——————————————————–
Table of Contents
Langkah 1: Inisiasi Proyek dan Buat `package.json`
Pertama, buka terminal dan arahkan ke direktori tempat Anda ingin membuat proyek. Di sini saya menggunakan path: C:\Users\devel\Downloads\project-salim\NutriVis
Jalankan perintah berikut untuk memulai proyek Node.js baru:
npm init –y
Perintah ini akan membuat file `package.json` dengan pengaturan default. File ini menjadi komponen pertama dalam setiap proyek Express.
Gambar 1.1. File package.json dibuat
Langkah 2: Instal Dependensi
Selanjutnya, instal dependensi yang diperlukan seperti Express dan TypeScript:
npm install express dotenv
npm install –save-dev @types/express @types/node ts-node typescript
Penjelasan Dependensi:
- `express`: Framework untuk membangun aplikasi web
- `dotenv`: Untuk mengelola variabel lingkungan
- `@types/express`, `@types/node`: Definisi tipe untuk TypeScript
- `ts-node, typescript`: Alat untuk pengembangan dengan TypeScript
Setelah menjalankan perintah di atas, Anda akan melihat folder `node_modules`, file `package-lock.json`, dan perubahan pada `package.json`.
{
“name”: “nutrivis”,
“version”: “1.0.0”,
“main”: “index.js”,
“scripts”: {
“test”: “echo \”Error: no test specified\” && exit 1″
},
“keywords”: [],
“author”: “”,
“license”: “ISC”,
“description”: “”,
“dependencies”: {
“dotenv”: “^16.4.5”,
“express”: “^4.19.2”
},
“devDependencies”: {
“@types/express”: “^4.17.21”,
“@types/node”: “^20.12.12”,
“ts-node”: “^10.9.2”,
“typescript”: “^5.4.5”
}
}
Maka sekarang terdapat dua file dan satu folder dalam proyek.
Gambar 2.1. Dependensi yang terinstall untuk memulai proyek.
Langkah 3: Buat Struktur Direktori Proyek
Buat struktur direktori dan file yang diperlukan untuk proyek:
mkdir src
type nul > app.ts
Penjelasan:
- `mkdir src`: Membuat direktori `src` untuk menyimpan kode sumber
- `type nul > app.ts`: Membuat file `app.ts` (metode pembuatan file bisa berbeda tergantung sistem operasi, di sini saya menggunakan `nul > <nama_file>`)
Gambar 3.1. Struktur awal folder dan file proyek.
Komponen Penting
- Folder `node_modules`, file `package-lock.json`, dan `package.json` adalah bagian penting dari proyek `Node.js`
- `node_modules` menyimpan semua dependensi yang diunduh melalui `npm`
- `package.json` berisi metadata proyek seperti nama, versi, dan daftar dependensi
- `package-lock.json` mencatat versi tepat dari setiap dependensi yang diinstal
- `app.ts` adalah entry point utama untuk aplikasi Express yang ditulis dalam TypeScript. File ini menginisialisasi server Express, mengatur middleware, menentukan rute, dan memulai server pada port yang ditentukan.
Langkah 4: Konfigurasi TypeScript
Buat file `tsconfig.json` di folder root proyek:
type nul > tsconfig.json
dan tambahkan konfigurasi berikut:
{
“compilerOptions”: {
“target”: “ES6”,
“module”: “commonjs”,
“strict”: true,
“esModuleInterop”: true,
“skipLibCheck”: true,
“forceConsistentCasingInFileNames”: true,
“outDir”: “./dist”
},
“include”: [“src/**/*.ts”, “app.ts”],
“exclude”: [“node_modules”]
}
Penjelasan Konfigurasi:
- `target`: Menentukan versi ECMAScript yang akan dikompilasi
- `module`: Menentukan sistem modul yang digunakan
- `strict`: Mengaktifkan pemeriksaan tipe yang ketat
- `esModuleInterop`: Memungkinkan interoperabilitas dengan modul ES
- `skipLibCheck`: Mengabaikan pemeriksaan tipe dalam file deklarasi
- `outDir`: Menentukan direktori keluaran untuk file yang dikompilasi
- `include`: Memasukkan file dalam proses kompilasi oleh TypeScript
- `exclude`: Mengecualikan file pada proses kompilasi oleh TypeScript
Gambar 4.1. Melakukan konfigurasi untuk tsconfig.json
File `tsconfig.json` pada proyek TypeScript ini dirancang untuk memastikan kode berjalan efisien dan sesuai standar modern dengan target kompliasi ECMAScript 6 (ES6). Format modul yang digunakan adalah CommonJS, yang umum dipakai di Node.js. Hal ini mempermudah integrasi dengan pustaka Node.js lain yang juga menggunakan format tersebut.
Pemeriksaan ketat (strict) diaktifkan untuk memastikan kualitas kode lebih baik. Fitur ini membantu mendeteksi kesalahan sejak dini dengan memvalidasi tipe data pada variabel dan parameter secara detail. Pengaturan esModuleInterop memungkinkan integrasi yang lebih mudah antara pustaka berbasis CommonJS dan ES6. Sementara itu, skipLibCheck diaktifkan untuk mempercepat proses kompilasi dengan mengabaikan pemeriksaan tipe pada file deklarasi.
Langkah 5: Tulis Kode Aplikasi Express
Sekarang saatnya Anda mulai melakukan coding! Buka file `app.ts` dan tambahkan konten berikut:
Gambar 5.1. Kode awal pada app.ts untuk menjalankan program
Setelah berhasil membuat folder, file, dan konfigurasi awal seperti pada gambar sebelumnya, Anda dapat menjalankan program pada port 3000 dengan menjalankan beberapa skrip dan membuka browser.
Penjelasan Kode:
import express from ‘express’;
const app = express();
app.use(express.json());
app.get(‘/’, (req, res) => {
res.send(‘Welcome to Nutri-Vis. The server is running.’)
});
app.listen(3000, () => {
console.log(‘Welcome to Nutri-Vis’);
console.log(‘Server is running on http://localhost:3000‘);
});
- `dotenv.config()`: Memuat variabel lingkungan dari file `.env`
- `app.use(express.json()) `: Middleware untuk mengurai JSON
<h2> Langkah 6: Menjalankan Aplikasi Anda </h2>
Sebelum menjalankan aplikasi, tambahkan beberapa skrip ke dalam `package.json` untuk memudahkan proses pembangunan dan menjalankan proyek. Buka file `package.json` dan modifikasi bagian skrip sebagai berikut:
Setelah mengedit `package.json`, tampilan file Anda akan terlihat seperti di bawah ini:
Gambar 6.1. Menambahkan script pada package.json untuk menjalankan program
Untuk menjalankan aplikasi, gunakan perintah berikut
`npm start`
di terminal dan aplikasi akan berjalan seperti gambar dibawah:
Gambar 6.2. Program yang telah dijalankan
Setelah itu, Anda dapat membuka browser dan mengakses alamat berikut: http://localhost:3000 atau http://127.0.0.1:3000
Gambar 6.3. Program setelah dijalankan pada browser
Jika berhasil, Anda akan melihat tampilan yang menandakan aplikasi telah berjalan dengan baik. Langkah berikutnya adalah memanggil API dari Anthropic (Claude.ai) untuk menganalisis gambar. Setelah hasil analisis diperoleh, API Ninjas akan digunakan untuk mengambil informasi gizi dari makanan berdasarkan data yang dihasilkan.
Langkah 7: Menambahkan Environment untuk Mempermudah Pengelolaan Variabel
Pada tahap ini memungkinkan developer untuk mengelola dan mengakses variabel penting yang dibutuhkan aplikasi, seperti API-key, string koneksi database, dan pengaturan konfigurasi lainnya.
Dengan menggunakan file environment seperti `.env`, variabel-variabel ini dapat disimpan secara terpisah dari kode sumber, meningkatkan keamanan dan fleksibilitas. Developer juga dapat menyesuaikan konfigurasi aplikasi untuk berbagai lingkungan dengan cepat (seperti pengembangan, pengujian, dan produksi) tanpa harus mengubah kode aplikasi itu sendiri.
Pertama, buat `file .env` dengan perintah: type nul > .env
Gambar 7.1. Membuat file .env
Setelah berhasil, tambahkan beberapa variabel konfigurasi yang diperlukan. Sebagai contoh, tambahkan variabel `TYPES_EXPRESS_NAME` dan `TYPES_EXPRESS_PORT` untuk menyimpan nama dan port aplikasi.
“scripts”: {
“build”: “tsc”,
“start”: “tsc && ts-node dist/app.js”,
“test”: “echo \”Error: no test specified\” && exit 1″
}
#define apps property
TYPES_EXPRESS_NAME=NutriVis
TYPES_EXPRESS_PORT=3000
Gambar 7.2. Menulis dan menambahkan variabel ke dalam file .env
Selanjutnya, buat folder helpers di dalam folder `src`, yang akan menyimpan file `helper.environment.ts` dan `helper.types.ts.` Gunakan perintah berikut:
cd src
mkdir helpers
type nul > helpers/helper.environment.ts
type nul > helpers/helper.types.ts
Gambar 7.3. Membuat folder helpers dengan isi file helper.environment.ts dan helper.types.ts
Setelah kedua file tersebut dibuat, diperlukan konfigurasi `.env` agar dapat berfungsi dengan baik. Pertama, buka file `helper.types.ts` dan tambahkan kode berikut untuk mendeklarasikan interface setiap variabel:
export interface Environment {
APP_NAME: string
PORT: number
}
Gambar 7.4. Mengisi kode file helper.types.ts
Kemudian, buka file `helper.environment.ts` dan tambahkan kode berikut:
// Import the environment interface
import { Environment } from ‘./helper.types’;
// Load environment variables from .env
import * as dotenv from ‘dotenv’;
dotenv.config();
// Export the environment variable
export const PORT = process.env.TYPES_EXPRESS_PORT as unknown as Environment;
export const APP_NAME = process.env.TYPES_EXPRESS_NAME as unknown as Environment;
Gambar 7.5. Mengisi kode file helper.environment.ts
Penjelasan Kode:
- Kode ini mengimpor interface environment dari file `helper.types.ts`
- Pustaka `dotenv` digunakan untuk memuat variabel-variabel lingkungan dari `file .env`
- Variabel `PORT` dan `APP_NAME` diekspor dengan tipe yang sesuai
Setelah mengonfigurasi environment, lakukan perubahan pada file `app.ts` menggunakan variabel yang telah didefinisikan. Berikut adalah perubahan yang dapat dilakukan:
Selanjutnya, jalankan kembali aplikasi dan akses browser di: http://127.0.0.1:3000. Jika semua konfigurasi sudah benar, Anda akan melihat pesan sambutan yang menunjukkan aplikasi berjalan dengan baik.
Gambar 7.6. Mengubah kode pada app.ts dan menjalankannya
Gambar 7.7. Program berhasil dijalankan
import express from ‘express’;
import { PORT, APP_NAME } from ‘./src/helpers/helper.environment’;
const app = express();
app.use(express.json());
app.get(‘/’, (req, res) => {
res.send(`Welcome to ${APP_NAME}. The server is running.`)
});
app.listen(PORT, () => {
console.log(`Welcome to ${APP_NAME}`);
console.log(`Server is running on http://localhost:${PORT}`);
});
Langkah 8: Membuat Akun untuk API Anthropic
Proyek ini menggunakan package `@anthropic-ai/sdk` yang disediakan oleh Anthropic untuk Express. Package ini memungkinkan aplikasi terhubung dengan layanan AI berbasis GPT dari Anthropic, yaitu Claude.ai, yang menggunakan model Opus-3.
Model Opus-3 adalah model multi-modal yang mampu menerima input dan menghasilkan output dalam berbagai format, seperti teks, gambar, atau audio. Dengan integrasi ini, aplikasi dapat memanfaatkan kecanggihan Claude.ai untuk berbagai kebutuhan analisis dan pemrosesan data.
Gambar 8.1. Tampilan layanan ChatGPT milik Anthropic AI/Claude.ai
Namun, dalam proyek ini kita akan menggunakan layanan API Anthropic yang terpisah dari layanan chat GPT Claude.ai. Untuk mengaksesnya, Anda dapat membuka konsol di API di https://console.anthropic.com. Setelah itu, Anda akan diarahkan ke halaman seperti pada ilustrasi berikut:
Gambar 8.2. Tampilan layanan ChatGPT milik Anthropic AI/Claude.ai
Langkah pertama adalah mendaftar dan masuk ke layanan konsol API menggunakan email Anda. Proses ini akan membawa Anda ke halaman login seperti berikut:
Gambar 8.3. Masuk menggunakan email untuk mengakses layanan API Anthropic
Setelah berhasil masuk, Anda akan diminta untuk mengisi data dasar, seperti:
Nama lengkap dan nama panggilan
Gambar 8.4. Mengisi nama lengkap dan nama panggilan
Informasi organisasi
Gambar 8.5. Mengisi informasi organisasi
Setelah semua informasi selesai diisi, Anda akan diarahkan ke dashboard konsol API Anthropic, seperti pada gambar berikut:
Gambar 8.6. Tampilan dashboard konsol API Anthropic
Pada tahap ini, Anda dapat membuat dan mendapatkan API-key yang diperlukan untuk mengakses layanan API dari Anthropic. Dengan API-key tersebut, Anda bisa mulai mengintegrasikan layanan mereka ke dalam aplikasi Anda.
Langkah 9: Membuat API-key Anthropic
Setelah mendaftar dan membuat akun, Anda dapat membuat API-key dengan memilih menu “Get API-keys”. Halaman yang muncul akan menampilkan tampilan seperti berikut:
Gambar 9.1. Tampilan dashboard konsol API Anthropic
Penting untuk diketahui model AI Opus-3 yang digunakan bersifat premium. Oleh karena itu, akses ke API ini menggunakan skema Pay as You Go. Artinya, setiap permintaan (request) ke layanan akan dikenakan tarif sesuai penggunaan.
Kabar baiknya, Anthropic memberikan kredit gratis sebesar $5 untuk setiap akun baru. Kredit ini dapat diklaim dengan melakukan verifikasi OTP melalui SMS ke nomor handphone aktif Anda. Kredit tersebut berlaku selama 14 hari sejak OTP berhasil dikonfirmasi dan cukup untuk melakukan ratusan request.
Langkah Mengklaim Kredit $5
Masukkan nomor handphone aktif Anda dan pilih kode regional (misalnya, Indonesia).
Gambar 9.2. Masukkan nomor HP aktif Anda
Tekan “Send Code” untuk menerima OTP SMS. Masukkan kode OTP enam digit yang diterima dan tekan “Confirm”.
Gambar 9.3. Masukkan kode OTP SMS
Jika berhasil, jumlah kredit Anda akan bertambah menjadi $5, dan halaman “Plans & Billing” akan diperbarui.
Gambar 9.4. Tampilan plans & billing jika OTP berhasil
Membuat API-key Baru
Akses submenu “API-keys” dan pilih opsi untuk membuat key baru. Berikan nama pada API-key Anda, misalnya `iccom-secret-key`.
Gambar 9.5. Memberi nama pada secret key
Setelah key berhasil dibuat, salin dan simpan API-key tersebut dengan aman. Perlu diingat, API-key hanya dapat dilihat sekali.
Gambar 9.6. Secret key berhasil dibuat
Dengan API-key ini, Anda sudah siap untuk terhubung ke layanan Anthropic dan memanfaatkan model AI mereka. Untuk detail biaya per model, Anda dapat mengunjungi laman berikut:
https://docs.anthropic.com/id/docs/models-overview#model-comparison.
Langkah 10: Membuat API-key API Ninjas
API Ninjas digunakan sebagai penyedia layanan informasi gizi dari bahan makanan. Layanan ini berfungsi untuk mengintegrasikan hasil analisis gambar atau foto makanan (dengan bantuan API Anthropic) dan menyediakan informasi detail seperti kandungan kalori, protein, lemak, dan lainnya.
Untuk mendapatkan API-key dari API Ninjas, ikuti langkah-langkah berikut:
Registrasi akun API Ninjas
Buka website pendaftaran dan buat akun baru.
Gambar 10.1. Register akun API Ninjas
Login ke akun Anda
Setelah registrasi berhasil, login ke akun API Ninjas.
Gambar 10.2. Login ke API Ninjas
Akses Dashboard API
Setelah masuk, Anda akan diarahkan ke dashboard API Ninjas.
Gambar 10.3. Tampilan dashboard API Ninjas
Mendapatkan API-key
API-key akan tersedia di dashboard Anda. Salin dan simpan API-key tersebut dengan aman.
Gambar 10.4. API-key API Ninjas yang diberikan
Dengan API-key dari API Ninjas, Anda dapat mulai mengintegrasikan layanan ini untuk mengambil informasi gizi dari gambar makanan yang telah dianalisis sebelumnya.
Langkah 11: Integrasi Aplikasi dengan Layanan AI Anthropic dan API Ninjas melalui API-key
Pada tahap ini, kita akan mengintegrasikan layanan Anthropic dan API Ninjas ke dalam aplikasi backend untuk melakukan analisis gambar bahan makanan serta mendapatkan informasi gizinya.
Instalasi Paket yang Diperlukan
Pertama, instal paket-paket berikut menggunakan perintah npm: `npm install @anthropic-ai/sdk axios cors`.
Penjelasan Paket:
- `@anthropic-ai/sdk`: SDK dari Anthropic AI untuk memudahkan integrasi layanan API mereka
- `axios`: Pustaka HTTP client untuk melakukan request ke server/API (GET, POST, PUT, DELETE)
- `cors`: Middleware untuk Node.js yang mengaktifkan Cross-Origin Resource Sharing (CORS)
Output Instalasi: Ketiga paket akan ditambahkan ke folder `node_modules` dan daftar dependensi di file `package.json`.
Gambar 11.1. Menginstal @anthropic-ai/sdk, axios dan cors
Konfigurasi File Environment dan Helper
Sebelum melanjutkan, lakukan pembaruan pada file konfigurasi yaitu `. env`, `helper.types.ts`, dan `helper.environment.ts`. Berikut adalah pembaruan yang perlu dilakukan:
Gambar 11.2. Memperbarui variabel pada file .env
Perbarui kode pada file `helper.types.ts` seperti berikut:
Gambar 11.3. Memperbarui kode pada file helper.types.ts
Perbarui juga kode pada file `helper.environment.ts` seperti berikut:
Gambar 11.4. Memperbarui kode pada file helper.environment.ts
Membuat Struktur Folder dan File
Setelah melakukan pembaruan pada file, buatlah folder services dan controllers. Folder ini digunakan untuk menyimpan fungsi-fungsi pemanggilan dan manajemen API yang akan dijalankan dalam proyek ini.
#define apps property
TYPES_EXPRESS_NAME=“NutriVis”
TYPES_EXPRESS_PORT=7777
#define image recognition property
TYPES_EXPRESS_CLAUDEAI_API_KEY=“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”
TYPES_EXPRESS_CLAUDEAI_PROMPT=“As the nutritionist assessing the food image, please identify the foods depicted without providing detailed descriptions. Use a single word for each food item. If you recognize multiple food items in the image, connect them with the word `and`. For example, if you recognize fried chicken breast, fried tofu, and boiled eggs, express it as ‘chicken and tofu and egg’. Additionally, include the names of each food item in both English and Bahasa Indonesia, separated by a `-`. For example, if you recognize tofu and vegetable, express it as ‘tofu and vegetable – tahu dan sayuran’.”
#define food nutrition information
TYPES_EXPRESS_API_NINJAS_NUTRITION_API_KEY=“w563vZTnToVYCrwron8+8w==gGTFMDaxYvieT2cW”
TYPES_EXPRESS_API_NINJAS_NUTRITION_API_URL=“https://api.api-ninjas.com/v1/nutrition”
export interface Environment {
PORT: number
APP_NAME: string
CLAUDEAI_API_KEY: String
CLAUDEAI_PROMPT: String
NUTRITION_API_KEY: String
NUTRITION_API_URL: String
}
// Import the environment interface
import { Environment } from ‘./helper.types’;
// Load environment variables from .env
import * as dotenv from ‘dotenv’;
dotenv.config();
// Export the environment variable
export const PORT = process.env.TYPES_EXPRESS_PORT as unknown as Environment;
export const APP_NAME = process.env.TYPES_EXPRESS_NAME as unknown as Environment;
//claude AI
export const CLAUDEAI_API_KEY = process.env.TYPES_EXPRESS_CLAUDEAI_API_KEY as unknown as Environment;
export const CLAUDEAI_PROMPT = process.env.TYPES_EXPRESS_CLAUDEAI_PROMPT as unknown as Environment;
//Api Ninjas – Nutrition
export const NUTRITION_API_KEY = process.env.TYPES_EXPRESS_API_NINJAS_NUTRITION_API_KEY as unknown as Environment;
export const NUTRITION_API_URL = process.env.TYPES_EXPRESS_API_NINJAS_NUTRITION_API_URL as unknown as Environment;
Gambar 11.5. Menambahkan folder controllers dan services
Kemudian, buat dua file di dalam folder services, yaitu `service.food-information-detail.ts` dan `service.food-recognizer.ts`. Kedua file ini akan menyimpan fungsi-fungsi pemanggilan API dan menyimpan hasilnya dalam bentuk respons.
Gambar 11.6. Menambahkan file service.food-recognizer.ts dan service.food-information-detail.ts
Menambahkan Kode pada File
Pada file `service.food-information-detail.ts`, tambahkan kode untuk mengakses API Ninjas. Kode ini akan menyajikan informasi gizi dari makanan berdasarkan kata kunci bahan makanan dalam bahasa Inggris (query). Jika Anda ingin menghasilkan informasi dari beberapa jenis bahan makanan, Anda dapat menggunakan kata hubung ‘and’, contohnya ‘tofu and tempeh’.
Gambar 11.7. Menambahkan file service.food-recognizer.ts dan service.food-information-detail.ts
Setelah memahami bentuk query dan respons dari API tersebut, tuliskan kode yang sesuai seperti di bawah ini:
import axios from ‘axios’;
//import nutrition credential
import { NUTRITION_API_KEY, NUTRITION_API_URL } from ‘../helpers/helper.environment’;
const foodInformationDetailService = async(query: String)=>{
const modifiedQuery = query.split(” “).join(” “)
const finalResult = await axios
.get(`${NUTRITION_API_URL}`, {
params: { query: modifiedQuery},
headers: {
‘X-Api-Key’: `${NUTRITION_API_KEY}`,
},
timeout: 10000
})
.then((axiosResponse) => {
const result = axiosResponse.data;
return result;
});
return finalResult;
}
export default foodInformationDetailService
Menambahkan Kode pada File `service.food-recognizer.ts`
Pada bagian ini, kita akan mengintegrasikan API Ninjas dengan Claude AI untuk menganalisis gambar bahan makanan. Prosesnya meliputi:
- Mengirim URL gambar ke Claude AI, yang kemudian akan diteruskan ke server mereka untuk analisis
- Menggunakan prompt statis untuk memberikan instruksi spesifik kepada Claude AI mengenai tugas yang harus dilakukan terhadap gambar tersebut
Kriteria Output
Claude AI harus menghasilkan nama bahan makanan dengan format berikut:
- Nama dalam Bahasa Inggris dan Bahasa Indonesia.
- Jika gambar memuat lebih dari satu bahan makanan, pisahkan nama-nama tersebut dengan: “and” untuk Bahasa Inggris, “dan” untuk Bahasa Indonesia. Contoh output: ‘tofu and tempeh – tahu dan tempe’.
\ .
Menambahkan Kode pada File Controller
Selanjutnya, tuliskan kode pada folder controllers, yakni file `controller.food-information-details.ts` dan `controller.food-recognizer.ts`. Di kedua file ini, kita akan memanggil service yang telah dibuat sebelumnya untuk digunakan pada file utama `app.ts`.
import axios from ‘axios’;
//import services
import foodInformationDetailService from ‘./service.food-information-detail’;
//import Vision Package and credential
import { Anthropic } from ‘@anthropic-ai/sdk’;
import { CLAUDEAI_API_KEY, CLAUDEAI_PROMPT } from ‘../helpers/helper.environment’;
// Inisialisasi client Anthropics
const anthropic = new Anthropic({ apiKey: `${CLAUDEAI_API_KEY}` });
const foodRecognizerServices = async (imageUrl: any, foodWeight: number) => {
// Unduh gambar dari URL menggunakan Axios
const recognizedFood = await axios
.get(imageUrl, { responseType: ‘arraybuffer’, timeout: 10000 })
.then(async (result: any) => {
// Konversi data gambar ke format base64=
const imageData = Buffer.from(result.data).toString(‘base64’);
// Determine the image media type dynamically
const mediaType: any =
getImageMediaType(result.headers[‘content-type’]) || ‘image/jpeg’;
// Kirim permintaan pengenalan gambar ke Anthropics
const imageRecognized: any = await anthropic.messages.create({
model: ‘claude-3-opus-20240229’,
max_tokens: 2048,
messages: [
{
role: ‘user’,
content: [
{
type: ‘image’,
source: {
type: ‘base64’,
media_type: mediaType, // Ganti dengan tipe media gambar yang benar jika perlu
data: imageData,
},
},
{
type: ‘text’,
text: `${CLAUDEAI_PROMPT}`,
},
],
},
],
});
return imageRecognized;
})
.then(async (finalResult: any) => {
let foodSummary: any = {};
const nutritions = await foodInformationDetailService(
finalResult.content[0].text.toLowerCase().split(‘ – ‘)[0]
);
const modifiedNutritionArrayOfObject = nutritions.map((nutrition: any, indexNutritionKeysOfObject: number)=>{
const modifiedFoodObjectKeys = [
‘nama_bahan_makanan’,
‘kalori_kkal’,
‘protein_gr’,
‘serat_gr’,
‘gula_gr’,
‘karbohidrat_total_gr’,
‘lemak_total_gr’,
‘lemak_jenuh_gr’,
‘kolesterol_mg’,
‘sodium_mg’,
‘potassium_mg’
]
const nutritionKeys = Object.keys(nutrition).map((nutritionKey: any)=>{
return nutritionKey
})
const modifiedFoodObject = modifiedFoodObjectKeys.reduce((acc, modifiedFoodObjectKey, indexModifiedFoodObject) => {
const nameOfEachFood = finalResult.content[0].text.toLowerCase().split(‘ – ‘)[1].split(‘ dan ‘)[indexNutritionKeysOfObject]
const nutritionValue = (nutritions[indexNutritionKeysOfObject][`${nutritionKeys[indexModifiedFoodObject]}`]/100) * foodWeight
return {
…acc,
[modifiedFoodObjectKey]:nutritionKeys[indexModifiedFoodObject] === ‘name’ ? nameOfEachFood : parseFloat(nutritionValue.toFixed(1))
};
}, {});
return modifiedFoodObject
})
return (foodSummary = {
makanan_terdeteksi: finalResult.content[0].text.toLowerCase().split(‘ – ‘)[1],
berat_tiap_makanan: `${foodWeight} gram`,
rincian_gizi: modifiedNutritionArrayOfObject,
});
})
.catch((error: any) => {
console.error(‘Error recognizing image:’, error);
});
return recognizedFood;
};
// Function to determine the image media type dynamically
const getImageMediaType = (contentType: string): string => {
// Example implementation, adjust as needed
if (contentType.startsWith(‘image/jpeg’)) {
return ‘image/jpeg’;
} else if (contentType.startsWith(‘image/png’)) {
return ‘image/png’;
} else if (contentType.startsWith(‘image/gif’)) {
return ‘image/gif’;
} else {
// Default to ‘image/jpeg’ if the format cannot be determined
return ‘image/jpeg’;
}
};
export default foodRecognizerServices;
Gambar 11.8. Menambahkan file controller.food-information-detail.ts dan controller.food-recognizer.ts
import { Request, Response } from ‘express’;
//import services
import foodInformationDetailService from ‘../services/service.food-information-detail’;
interface Nurtrition {
foodName: String
}
const controllerFoodInformationDetail = {
getFoodInformationDetail: async (request: Request, response: Response) => {
try {
const nutrition: Nurtrition = request.body;
const query: String = nutrition.foodName || ‘tofu and tempeh’;
const finalResult = await foodInformationDetailService(query);
// Send the response from the API to the client
response.status(200).json(finalResult);
} catch (error: any) {
// Handle errors
console.error(‘Error:’, error);
response.status(500).json({ error: ‘Internal server error’ });
}
},
};
export default controllerFoodInformationDetail;
import { Request, Response } from ‘express’;
import foodRecognizerServices from ‘../services/service.food-recognizer’;
const controllerFoodRecognizer = {
getFoodName: async (request: Request, response: Response) => {
// Pastikan request body memiliki properti ‘imageData’ yang berisi data gambar dalam format base64
// Pastikan request body memiliki properti ‘imageUrl’ yang berisi URL gambar
const { imageUrl, foodWeight = request.body.foodWeight ? request.body.foodWeight : 100 } = request.body;
try {
const finalResult = await foodRecognizerServices(imageUrl, foodWeight);
console.log(“foodSummary”, finalResult);
// Tanggapi hasil pengenalan gambar
response.status(200).json(finalResult);
} catch (error) {
console.error(‘Error getFoodName function:’, error);
response.status(500).json({ error: ‘Internal Server Error’ });
}
},
};
export default controllerFoodRecognizer;
Memperbarui File `app.ts`
Setelah semua file siap, perbarui file `app.ts` agar dapat memanggil fungsi-fungsi yang telah dibuat.
import express from ‘express’;
import cors from ‘cors’;
// Import environment variables
import { PORT, APP_NAME } from ‘./src/helpers/helper.environment’;
// Import controllers
import controllerFoodRecognizer from ‘./src/controllers/controller.food-recognizer’;
import controllerFoodInformationDetail from ‘./src/controllers/controller.food-information-detail’;
const app = express();
// CORS configuration
const corsOptions = {
origin: ‘*’, // Allow all origins
methods: [‘GET’, ‘POST’, ‘PUT’, ‘DELETE’, ‘OPTIONS’], // Allow common methods
allowedHeaders: [‘Content-Type’, ‘Authorization’] // Allow common headers
};
app.use(cors(corsOptions));
// Middleware to parse request bodies as JSON
app.use(express.json());
const { getFoodName } = controllerFoodRecognizer;
const { getFoodInformationDetail } = controllerFoodInformationDetail;
app.post(‘/food-image-recognize’, getFoodName);
app.get(‘/food-information-detail’, getFoodInformationDetail);
app.get(‘/’, (req, res) => {
res.send(
`Welcome to ${APP_NAME}. The server is running.
Route lists:
[Route 1] [POST] ${‘/food-image-recognize’}
[Route 2] [GET] ${‘/food-information-detail’}`
);
});
app.listen(PORT, () => {
console.log(‘Welcome to’, APP_NAME);
console.log(`Server is running on http://localhost:${PORT}`);
});
Pengujian Terhadap API
Semua persiapan telah selesai. Langkah terakhir adalah menguji API yang telah diintegrasikan dan memastikan sistem backend yang Anda bangun berfungsi dengan baik. Proses pengujian ini penting untuk memastikan setiap komponen bekerja sesuai dengan yang diharapkan.
Langkah 12: Pengujian Hasil Respons dan Performa Aplikasi Backend
Pada tahap terakhir ini, kita akan melakukan pengujian aplikasi secara lokal dengan menjalankan server backend dan mengirimkan request ke API yang telah diintegrasikan sebelumnya. Salah satu cara yang direkomendasikan adalah menggunakan Postman untuk menguji server lokal.
Dalam pengujian ini, kita akan menggunakan beberapa foto makanan sebagai input, di antaranya:
- Single Object: Foto nasi dan dada ayam
- Multiple Object: Foto yang berisi tempe, tahu, dan beberapa sayuran
Semua foto uji telah diunggah ke platform Firebase dan dapat diakses melalui link yang dihasilkan secara otomatis oleh Firebase.
Skema Pengujian
Aplikasi ini memungkinkan pengguna untuk memasukkan berat makanan dalam gram. Untuk saat ini, berat makanan disamaratakan pada setiap objek baik untuk single object maupun multiple object. Dalam pengujian ini, berat yang digunakan adalah 600 gram.
Hasil Pengujian
- Single Object: Nasi
Gambar 12.1. Hasil pengujian single object dengan nasi
Hasil Respons Object:
{
“makanan_terdeteksi”: “nasi”,
“berat_tiap_makanan”: “600 gram”,
“rincian_gizi”: [
{
“nama_bahan_makanan”: “nasi”,
“kalori_kkal”: 764.4,
“protein_gr”: 600,
“serat_gr”: 1.8,
“gula_gr”: 0.6,
“karbohidrat_total_gr”: 16.2,
“lemak_total_gr”: 6,
“lemak_jenuh_gr”: 252,
“kolesterol_mg”: 0,
“sodium_mg”: 170.4,
“potassium_mg”: 2.4
}
]
}
- Single Object: Dada Ayam
Gambar 12.2. Hasil pengujian single object dengan dada ayam
Hasil Respons Object:
{
“makanan_terdeteksi”: “ayam”,
“berat_tiap_makanan”: “600 gram”,
“rincian_gizi”: [
{
“nama_bahan_makanan”: “ayam”,
“kalori_kkal”: 1335.6,
“protein_gr”: 600,
“serat_gr”: 77.4,
“gula_gr”: 22.2,
“karbohidrat_total_gr”: 142.2,
“lemak_total_gr”: 432,
“lemak_jenuh_gr”: 1074,
“kolesterol_mg”: 552,
“sodium_mg”: 0,
“potassium_mg”: 0
}
]
- Multiple Object: Tempe, Tahu, dan Sayuran
[Gambar 12.3. Hasil pengujian single object dengan tempe, tahu, dan sayuran]
Hasil Respons Object:
{
“makanan_terdeteksi”: “tempe dan tahu”,
“berat_tiap_makanan”: “600 gram”,
“rincian_gizi”: [
{
“nama_bahan_makanan”: “tempe”,
“kalori_kkal”: 490.2,
“protein_gr”: 600,
“serat_gr”: 31.2,
“gula_gr”: 5.4,
“karbohidrat_total_gr”: 60,
“lemak_total_gr”: 18,
“lemak_jenuh_gr”: 666,
“kolesterol_mg”: 0,
“sodium_mg”: 7.2,
“potassium_mg”: 6
},
{
“nama_bahan_makanan”: “tahu”,
“kalori_kkal”: 490.2,
“protein_gr”: 600,
“serat_gr”: 31.2,
“gula_gr”: 5.4,
“karbohidrat_total_gr”: 60,
“lemak_total_gr”: 18,
“lemak_jenuh_gr”: 666,
“kolesterol_mg”: 0,
“sodium_mg”: 7.2,
“potassium_mg”: 6
}
]
}
Analisis Hasil Pengujian
Single Object: Aplikasi menunjukkan hasil yang sangat akurat dalam mengenali objek sederhana seperti nasi dan dada ayam.
Multiple Object: Pada kasus ini, akurasi pengenalan objek juga cukup baik. Namun, terdapat beberapa keterbatasan yang memengaruhi interpretasi model, antara lain:
- Resolusi gambar: Kualitas foto yang rendah dapat menurunkan akurasi
- Bentuk objek yang ambigu: Contoh kasus adalah tahu yang umumnya berbentuk segi empat, namun pada foto uji berbentuk segitiga sehingga meningkatkan potensi halusinasi model
Meski demikian, model Opus-3 dari Anthropic terbukti memiliki kecerdasan tinggi dalam mengenali dan membedakan gambar, baik pada objek tunggal maupun objek yang lebih kompleks.
Kesimpulan
Pengujian aplikasi menunjukkan hasil yang memuaskan dengan tingkat akurasi yang tinggi. Adapun kekurangan yang ditemukan masih dapat diatasi melalui optimasi kualitas input gambar. Secara keseluruhan, aplikasi ini berhasil menjalankan fungsinya dengan baik.
Terima Kasih.
