Modern web uygulamalarında doğal dil ile etkileşim ve harita tabanlı servisler, kullanıcı deneyimini ciddi anlamda ileri taşıyor. Bu makalemde, Next.js App Router mimarisini kullanarak, kullanıcıların sesli komut ile rota istemesi, bu komutun anlamlandırılması ve harita üzerinde alternatif yolların gösterilmesi sürecini anlatmaya çalışacağım.

Bu uygulama; erişilebilirlik, gerçek hayatta kullanım ve teknik açıdan hem portföy hem de ürünleşebilir bir örnektir.

Proje Senaryosu

Kullanıcı uygulamayı açar ve mikrofona şu komutu söyler;

"Bana Ankara ile İstanbul arasındaki alternatif yolları haritada göster."

Uygulama bu komutu şöyle işler:

• Ses -> Metin dönüşümü,
• Metinden başlangıç ve varış noktalarının çıkarılması,
• Harita servisinden alternatif rotaların alınması,
• Bu rotaların harita üzerinde görselleştirilmesi.

Kullanılan Teknolojiler

Proje Mimarisi

    /app
    ├─ page.tsx
    ├─ api
    │ └─ routes
    │    └─ route.ts
    /components
    ├─ VoiceCommand.tsx
    └─ MapView.tsx
    /lib
    └─ parseRoute.ts

Bu yapı sayesinde:

• Client ve Server birbirinden ayrılır,
• App Router'ın sunduğu performans avantajı korunur.

Sesli Komut Alma (Client Component)

Ses tanıma işlemi client-side çalışır. Bunun nedeni tarayıcı API'ların server ortamında erişilebilir olmamasıdır.

    "use client";

    import SpeechRecognition, { useSpeechRecognition } from "react-speech-recognition";

    export default function VoiceCommand({ onResult }) {
        const { transcript, resetTranscript } = useSpeechRecognition();

        const startListening = () => {
            resetTranscript();
            SpeechRecognition.startListening({ language: "tr-TR" });
        };

        const stopListening = () => {
            SpeechRecognition.stopListening();
            onResult(transcript);
        };

        return (
            <div>
                <button onClick={startListening}>Dinle</button>
                <button onClick={stopListening}>Durdur</button>
                <p>{transcript}</p>
            </div>
        );
    }

Prompt Analizi (Metinden Lokasyon Çıkarma)

Regex Kullanımı

Türkçe rota cümleleri genellikle X ile Y arası formatındadır.

export function parseRoute(text: string) {
    const match = text.match(/(.+?) ile (.+?) arası/i);

    if (!match) return null;

    return {
        from: match[1].trim(),
        to: match[2].trim()
    };
}

Not: Bu yöntem hızlıdır, fakat cümle çeşitliliği arttıkça yetersiz kalabilir.

Server Route (Alternatif Rotaları Alma)

    import { NextResponse } from "next/server";

    export async function POST(req: Request) {
        const { from, to } = await req.json();

        const url = `https://api.mapbox.com/directions/v5/mapbox/driving/${from};${to}?alternatives=true&geometries=geojson&access_token=${process.env.MAPBOX_TOKEN}`;

        const response = await fetch(url);
        const data = await response.json();

        return NextResponse.json(data.routes);
    }

Not: alternatives=true parametresi, birden fazla rotanın gösterilmesini sağlar.

Harita Üzerinde Rotaların Çizilmesi

Mapbox React bileşenleri ile alternatif yollar farklı renklerde gösterilebilir.

    {routes.map((route, index) => (
        <Source
            key={index}
            type="geojson"
            data={{ type: "Feature", geometry: route.geometry }}
        >
        <Layer
            type="line"
            paint={{
                "line-color": index === 0 ? "#ff0000" : "#999",
                "line-width": 4
            }}
        />
        </Source>
    ))}

Bu sayede kullanıcı ana rota ve alternatif rotalar arasındaki farkı net bir şekilde görebilir.

Erişilebilirlik

Bu proje özellikle:

• Görme engelli kullanıcılar,
• Araç kullanırken etkileşim,
• Mobil kullanım

gibi senaryolarda ciddi avantaj sağlayabilir.

Sonuç

Bu makalemde:

• Next.js App Router,
• Sesli komut işleme,
• Doğal dil analizi,
• Harita ve rota servisleri

bir araya getirilerek gerçek hayatta kullanılabilir, erişilebilir ve modern bir web uygulaması geliştirdik.