---
title: 'Webivew Konfigürasyon & Versiyonlama'
---

# Webivew Konfigürasyon & Versiyonlama

:::info
Bu döküman sadece webview MiniApp'ler içindir.
:::

Bu dokümanda **SuperPortal Webview Miniapp** için gerekli yapılandırmaları, bu yapılandırmaların ne işe yaradığını ve Webview MiniApp yapılandırma sürümlendirmesini bulabilirsiniz.

## Konfigürasyon Adımları


- **Konfigürasyonu Aç** buton'una tıklayın.
- Açılan pencere aşağıdaki gibi olacak.


**Bu sayfada gözüken konfigürasyon alanları sırasıyla:**

| Konfigürasyon Parametresi | Amacı |
| ------------------------- | ---------------------------------------------------------------------------------------------------- |
| Webview Adresi | Ulaşılmak istenen webview adresinin girileceği alan. |
| Uygulama Adı | Webview uygulamasında bulunan başlık kısmında Webview İkon yoksa gözükecek olan uygulama ismi alanı. |
| Uygulama Adının Rengi | Başlık kısmında gözükecek uygulama adının renk seçimi. |
| Geri Butonu Var Mı? | Webview uygulamasında sayfalar arasında geri buton'unu açma/kapama bölümü. |
| Geri Butonu Rengi | Seçili olan geri butonunun renk seçimi. |
| Yenile Butonu Var Mı? | Webview uygulamasında içinde bulununan yenile buton'unu açma/kapama bölümü. |
| Yenile Butonu Rengi | Seçili olan yenile butonunun renk seçimi. |
| Appbar Arkaplan Rengi | Başlık kısmında bulunan appbar'ın renk seçimi için bulunan kısım. |
| Webview İkon | Uygulama Adı boş olduğunda AppBar'da gözükecek olan logonun yüklendiği alan. |
| Superapp İkon | SuperApp uygulamasına geri dönüş yapmak için kullanılan buton'un ikon. |

- Gerekli parameterleri girdikten sonra konfigürasyonları kaydetmek için **Güncelle** butonuna tıklayın.

## Versiyonlama Adımları

- Miniapp Kart bölümündeki hamburger buton'a tıklayarak miniapp menüsünü açın.


- **Versiyonlama** seçin.

- Seçtiginiz alandan sonra Webview konfigürasyonlarının bulunduğu ekranı göreceksiniz.


- Bu alanda istediğiniz konfigürasyonları seçin ve **Mini Uygulamayı Versiyonla** butonuna tıklayın.


- Açılan pop-up ekranında:
- Açıklama
- Versiyon sürümü (Major,Minor,Patch)
- Webview Miniapp'i için Superapp'ten istenen izinleri seçin.

- **Versiyonla** butonuna tıklayın.

# Mobil ile WebView İletişimi (postAppMessage)

HTML içerisindeki **`postAppMessage`** fonksiyonu, WebView üzerinden mobil cihazda bulunan native katman ile iletişim kurmayı sağlar. Bu fonksiyon, gönderilen mesajın mobil cihazda ilgili işleme yönlendirilmesi için kullanılır.

function postAppMessage(msg) {
    if (window.webkit != undefined) {
        if(window.webkit.messageHandlers.miniapp != undefined) {
            window.webkit.messageHandlers.miniapp.postMessage(msg)
        }
    }
    if (window.miniapp != undefined) {
        window.miniapp.postMessage(msg)
    }
}

## Native Fonksiyonlara Erişim ve Callback Yönetimi

Mobil uygulamada tanımlı native fonksiyonlara, HTML içerisindeki JavaScript fonksiyonları üzerinden erişim sağlayabilirsiniz.

- İlgili fonksiyonun adı JSON içinde belirtilir.
- Parametreler iletilir.
- Dönüş değerleri, callback fonksiyonuyla alınır.

function getData() {
    try {
        let message = {
            "callFunction": {
                "functionName": "GetClientIp",
                "param": {},
                "callback": "getClientIpCallback"
            }
        }
        postAppMessage(JSON.stringify(message))
    } catch (err) {
        console.log('Error occured calling native method');
    }
}

function getClientIpCallback(result) {
    try {
        let parsedResult = JSON.parse(result);
        if (parsedResult.isSuccess && parsedResult.retVal.isApproved) {
            document.getElementById("info").innerHTML = parsedResult.retVal.funcRetval.ClientIp;
        }
    } catch(error) {
        console.error('JSON verisi işlenirken bir hata oluştu:', error);
    }
}

## Ödeme İşlemi: sendPayment

**`sendPayment`** fonksiyonu, WebView içerisinde yer alan JavaScript kodu aracılığıyla mobil uygulamaya ödeme işlemi başlatma talebi gönderir.

Fonksiyon, ödeme işlemine dair gerekli bilgileri içeren bir JSON nesnesini parametre olarak alır ve işlemin sonucunu, **`getPaymentResultCallback`** adlı **callback** fonksiyonu aracılığıyla geri bildirir.

function pay() {
    try {
        let message = {
            "callFuntion": {
                "functionName": "sendPayment",
                "param": {
                    "amount": 100.45,
                    "orderId": "343432789721256274"
                },
                "callback": "getPaymentResultCallback"
            }
        }
        postAppMessage(JSON.stringify(message))
    } catch(err) {
        console.log('Error occured calling native method')
    }
}

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

### Kullanım Örnekleri

HTML içerisinde bulunan örnek butonları, yukarıda açıklanan fonksiyonları çağırmak için kullanılabilirsiniz:

<button onClick="getData()" style="width: 200px; height: 120px;" class="">Get Client Ip</button>
<button onClick="pay()" style="width: 200px; height: 120px;" class="">Send Payment</button>

:::info
- Fonksiyonların sorunsuz çalışması için mobil uygulamada ilgili native fonksiyonların tanımlanmış ve hazır olması gerekir.
- Dönüş değerleri her zaman JSON formatında işlenmeli ve olası hatalar kontrol edilmelidir.
- Callback fonksiyonları içinde alınan veriler parse edilerek DOM veya başka bir işlemle kullanılabilir.
:::

----------------------