Bu doküman, **kabuk uygulama** içerisinde **Web sayfa**larının açılmasını sağlayan **WebView Miniapp**'in **kabuk uygulama** ile iletişim kurmasını sağlayan yapıyı açıklar. Hem **iOS** hem de **Android** için desteklenen yöntemler aşağıda detaylı olarak anlatılmıştır.

**WebView Miniapp** içinde açılan web sayfaları, aşağıdaki **API**'leri kullanarak mobil uygulama ile etkileşime girebilir:
* **iOS** için: **window.webkit.messageHandlers.miniapp.postMessage(...)**,
* **Android** için: **window.miniapp.postMessage(..)**

Bu yapı kullanılarak aşağıdaki gibi işlemler yapılabilir:
* Kabuktan kullanıcıya ait bilgileri almak
* Native ödeme işlemini gerçekleştirmek

### :iphone: Desteklenen Platformlar

| Platform | Yöntem |
| -------- | ------------------------------------------------------ |
| iOS | window.webkit.messageHandlers.miniapp.postMessage(...) |
| Android | window.miniapp.postMessage(...) |

### ⚙️ Genel Kullanım Yapısı

#### iOS

window.webkit.messageHandlers.miniapp.postMessage(JSON.stringify({...payload});

#### Android

window.miniapp.postMessage(JSON.stringify({...payload}));

::: danger
**Android'de** postMessage fonksiyonu yalnızca **JSON string** alır. Bu nedenle **JSON.stringify()** kullanmanız gerekir.
:::

## ✅ Entegrasyon Adımları

### Webkit Handler'ların Kullanımı

Native tarafta aşağıdaki handler methodları tanımlıdır:

| Handler Adı | Çağırılan Method | Açıklama |
|:-----------:|:---------------------------:|:----------------------------------------------------------------------------------- |
| miniapp | GetIdentity | Kabuktan kullanıcının **bilgilerini** almayı sağlar **(async)** |
| miniapp | GetPhoneNumber | Kabuktan kullanıcının kayıtlı **Cep Telefonu Numarasını** almayı sağlar **(async)** |
| miniapp | GetMailAddress | Kabuktan kullanıcının kayıtlı **E-Mail Adresini** almayı sağlar **(async)** |
| miniapp | GetCustomerNumber | Kabuktan kullanıcının **Müşteri Numarasını** almayı sağlar **(async)** |
| miniapp | GetCommercialCustomerNumber | Kabuktan kullanıcının **Ticari Müşteri Numarasını** almayı sağlar **(async)** |
| miniapp | GetLocation | Kabuktan kullanıcının **Konum Bilgisini** almayı sağlar **(async)** |
| miniapp | sendPayment | Native **Ödeme** ekranını açar **(async)** |

### Kullanım Örnekleri

#### :card_file_box: GetIdentity Methodu İçin Kullanım Örneği

let payload = {
    "callFunction": {
        "functionName": “GetIdentity”,
        "param": {}
    }
}

#### :phone: GetPhoneNumber Methodu İçin Kullanım Örneği

let payload = {
    "callFunction": {
        "functionName": “GetPhoneNumber”,
        "param": {}
    }
}

#### :email: GetMailAddress Methodu İçin Kullanım Örneği

let payload = {
    "callFunction": {
        "functionName": “GetMailAddress”,
        "param": {}
    }
}

#### :bust_in_silhouette: GetCustomerNumber Methodu İçin Kullanım Örneği

let payload = {
    "callFunction": {
        "functionName": “GetCustomerNumber”,
        "param": {}
    }
}

#### :bust_in_silhouette: GetCommercialCustomerNumber Methodu İçin Kullanım Örneği

let payload = {
    "callFunction": {
        "functionName": “GetCommercialCustomerNumber”,
        "param": {}
    }
}

#### :world_map: GetLocation Methodu İçin Kullanım Örneği

let payload = {
    "callFunction": {
        "functionName": “GetLocation”,
        "param": {}
    }
}

#### :money_with_wings: sendPayment Methodu İçin Kullanım Örneği

let payload = {
    "callFunction": {
        "functionName": "sendPayment",
        "param": {
            "amount": 100.45,
            "orderId": "343432789721256274"
        }
    }
}

### Kabuktan Bilgi İstemek İçin Kullanılması Gereken Kod Örneği

if (window.webkit && window.webkit.messageHandlers && window.webkit.messageHandlers.miniapp) {
    // iOS
    window.webkit.messageHandlers.miniapp.postMessage(JSON.stringify(payload));
    } else if (window.miniapp && window.miniapp.postMessage) {
    // Android
    window.miniapp.postMessage(JSON.stringify(payload));
}

### Kabuktan Gelen Cevabı Karşılamak İçin Kullanılması Gereken Method

function functionCallback(functionName, result) {
    switch (functionName) {
        case "GetIdentity":
            // Dönen değeri işlemek için eklenebilir method örneği
            GetIdentityCallback(result);
            break;
        case "GetPhoneNumber":
            // Dönen değeri işlemek için eklenebilir method örneği
            GetPhoneNumberCallback(result);
            break;
        case "GetMailAddress":
            // Dönen değeri işlemek için eklenebilir method örneği
            GetMailAddressCallback(result);
            break;
        case "GetCustomerNumber":
            // Dönen değeri işlemek için eklenebilir method örneği
            GetCustomerNumberCallback(result);
            break;
        case "GetCommercialCustomerNumber":
            // Dönen değeri işlemek için eklenebilir method örneği
            GetCommercialCustomerNumberCallback(result);
            break;
        case "GetLocation":
            // Dönen değeri işlemek için eklenebilir method örneği
            GetLocationCallback(result);
            break;
        case "sendPayment":
            // Dönen değeri işlemek için eklenebilir method örneği
            sendPaymentCallback(result);
            break;
        default:
            break;
    }
}

### Kabuktan Gelen Cevabı Custom Method İçerisinde Kullanma Örnekleri

#### :card_file_box: GetIdentity İçin Gelen Cevabı Kullanma Örneği

function GetIdentityCallback(result) {
    try {
        let parsedResult = JSON.parse(result);
        if (parsedResult.isSuccess && parsedResult.retVal.isApproved) {
            document.getElementById(“name”).innerHTML = parsedResult.retVal.funcRetVal.Name;
            document.getElementById(“surname”).innerHTML = parsedResult.retVal.funcRetVal.Surname;
            document.getElementById(“identityNumber”).innerHTML = parsedResult.retVal.funcRetVal.TCKN;
        }
    } catch(error) {
        console.error('JSON verisi işlenirken bir hata oluştu:', error);
    }
}

#### :phone: GetPhoneNumber İçin Gelen Cevabı Kullanma Örneği

function GetPhoneNumberCallback(result) {
    try {
        let parsedResult = JSON.parse(result);
        if (parsedResult.isSuccess && parsedResult.retVal.isApproved) {
            document.getElementById(“phone”).innerHTML = parsedResult.retVal.funcRetVal.PhoneNumber;
        }
    } catch(error) {
        console.error('JSON verisi işlenirken bir hata oluştu:', error);
    }
}

#### :email: GetMailAddress İçin Gelen Cevabı Kullanma Örneği

function GetMailAddressCallback(result) {
    try {
        let parsedResult = JSON.parse(result);
        if (parsedResult.isSuccess && parsedResult.retVal.isApproved) {
            document.getElementById(“mail”).innerHTML = parsedResult.retVal.funcRetVal.Email;
        }
    } catch(error) {
        console.error('JSON verisi işlenirken bir hata oluştu:', error);
    }
}

#### :bust_in_silhouette: GetCustomerNumber İçin Gelen Cevabı Kullanma Örneği

function GetCustomerNumberCallback(result) {
    try {
        let parsedResult = JSON.parse(result);
        if (parsedResult.isSuccess && parsedResult.retVal.isApproved) {
            document.getElementById(“customerNumber”).innerHTML = parsedResult.retVal.funcRetVal.CustomerNumber;
        }
    } catch(error) {
        console.error('JSON verisi işlenirken bir hata oluştu:', error);
    }
}

#### :bust_in_silhouette: GetCommercialCustomerNumber İçin Gelen Cevabı Kullanma Örneği

function GetCommercialCustomerNumberCallback(result) {
    try {
        let parsedResult = JSON.parse(result);
        if (parsedResult.isSuccess && parsedResult.retVal.isApproved) {
            document.getElementById(“commercialCustomerNumber”).innerHTML = parsedResult.retVal.funcRetVal.CommercialCustomerNumber;
        }
    } catch(error) {
        console.error('JSON verisi işlenirken bir hata oluştu:', error);
    }
}

#### :world_map: GetLocation İçin Gelen Cevabı Kullanma Örneği

function GetLocationCallback(result) {
    try {
        let parsedResult = JSON.parse(result);
        if (parsedResult.isSuccess && parsedResult.retVal.isApproved) {
            document.getElementById("currentLocationResult").innerHTML = `Latitude: ${parsedResult.retVal.funcRetVal.coords.latitude}, Longitude: ${parsedResult.retVal.funcRetVal.coords.longitude}`;
        }
    } catch(error) {
        console.error('JSON verisi işlenirken bir hata oluştu:', error);
    }
}

#### :money_with_wings: sendPayment İçin Gelen Cevabı Kullanma Örneği

function sendPaymentCallback(result) {
    try {
        let parsedResult = JSON.parse(result);
        if (parsedResult.isSuccess) {
            document.getElementById(“paymentResult”).innerHTML = parsedResult.retVal;
        }
    } catch(error) {
        console.error('JSON verisi işlenirken bir hata oluştu:', error);
    }
}