---
# System prepended metadata

title: Webivew Konfigürasyon & Versiyonlama
tags: [SuperApp_TR]

---

---
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ı

![image](https://hackmd.io/_uploads/ByHTb-9Myx.png)

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

![image](https://hackmd.io/_uploads/Hy-UM-qfJx.png)

**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.

![image](https://hackmd.io/_uploads/SJIkLW5G1g.png)

- **Versiyonlama** seçin.

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

![image](https://hackmd.io/_uploads/S1BXI-9z1g.png)

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

![image](https://hackmd.io/_uploads/S19_8b5Mke.png)

- 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.

```typescript!
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.

```typescript!
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.

```typescript!
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:

```html!
<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.
:::

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