Bu kılavuz, bir Kuika uygulamasını Web View elementini kullanarak harici bir uygulamaya nasıl entegre edeceğinizi adım adım açıklamaktadır. Entegrasyon, kimlik doğrulama (authentication) akışını da içermektedir ve popüler JavaScript kütüphaneleri için özel örnekler sunmaktadır.
Entegrasyonun ilk adımı olan kuika-mfe_1_0_0.js loader (yükleyici) script'ini projenize dahil etmek için iki seçeneğiniz bulunmaktadır:
Entegre edeceğiniz Kuika uygulamasının HTML etiketi, statik bir isme sahip değildir. Etiket adı, Kuika'daki workspace ve proje adınıza göre dinamik olarak oluşturulur.
Kural: workspace-ismi-proje-ismi şeklinde, tamamen küçük harf ve kelimeler arasına tire (-) konularak (kebab-case) isimlendirme yapılır.
Örnek:
Doğru Etiketi Nasıl Bulursunuz?
Eğer etiket adından emin değilseniz, en kesin yöntem şudur:
Bu komut, size uygulamanızı entegre etmek için gereken ve doğru etiket adını içeren basit bir HTML çıktısı verecektir. Aşağıdaki tüm kod örneklerinde <uygulamanizin-etiketi> olarak belirtilen yerlere bu komutla bulduğunuz etiketi yazmalısınız.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Host Application</title>
<script src="https://platform.kuika.com/assets/kuika-mfe_1_0_0.js"></script>
</head>
<body>
<h1>Host Uygulama</h1>
<div id="kuika-mfe-container">
<uygulamanizin-etiketi
external_access_token="<host_uygulamanin_access_tokeni>"
external_refresh_token="<host_uygulamanin_refresh_tokeni>"
external_username="user@example.com"
starting_screen="dashboardscreen"
></uygulamanizin-etiketi>
</div>
<script>
const kuikaAppConfig = {
frontEndUrl: '''https://<uygulamanizin-kuika-adresi>'''
};
if (window.CreateKuikaMfeApp) {
CreateKuikaMfeApp(kuikaAppConfig);
} else {
window.addEventListener('load', () => CreateKuikaMfeApp(kuikaAppConfig));
}
</script>
</body>
</html>
import React, { useEffect } from 'react';
const KuikaMfeWrapper = ({ accessToken, refreshToken, userEmail }) => {
useEffect(() => {
const scriptUrl = 'https://platform.kuika.com/assets/kuika-mfe_1_0_0.js';
const mfeAppUrl = '''https://<uygulamanizin-kuika-adresi>''';
const initializeMfe = () => {
if (window.CreateKuikaMfeApp) {
window.CreateKuikaMfeApp({ frontEndUrl: mfeAppUrl });
}
};
let script = document.querySelector(`script[src="${scriptUrl}"]`);
if (!script) {
script = document.createElement('script');
script.src = scriptUrl;
script.async = true;
document.head.appendChild(script);
script.onload = initializeMfe;
} else if (window.CreateKuikaMfeApp) {
initializeMfe();
} else {
script.addEventListener('load', initializeMfe);
}
return () => {
if (script) {
script.removeEventListener('load', initializeMfe);
}
};
}, []);
return (
<uygulamanizin-etiketi
external_access_token={accessToken}
external_refresh_token={refreshToken}
external_username={userEmail}
starting_screen="dashboardscreen"
></uygulamanizin-etiketi>
);
};
main.js Yapılandırması: Vue'ye custom elementleri tanıması için genel bir kural eklenmelidir. Bu kural, tire (-) içeren tüm etiketleri custom element olarak kabul eder.
app.config.compilerOptions.isCustomElement = (tag) => tag.includes('-');
KuikaMfeWrapper.vue Componenti:
<template>
<uygulamanizin-etiketi
:external_access_token="accessToken"
:external_refresh_token="refreshToken"
:external_username="userEmail"
:starting_screen="dashboardscreen"
></uygulamanizin-etiketi>
</template>
<script>
import { onMounted, onUnmounted } from 'vue';
export default {
name: 'KuikaMfeWrapper',
props: { accessToken: String, refreshToken: String, userEmail: String },
setup() {
const scriptUrl = 'https://platform.kuika.com/assets/kuika-mfe_1_0_0.js';
const mfeAppUrl = '''https://<uygulamanizin-kuika-adresi>''';
let script = null;
const initializeMfe = () => {
if (window.CreateKuikaMfeApp) {
window.CreateKuikaMfeApp({ frontEndUrl: mfeAppUrl });
}
};
onMounted(() => {
script = document.querySelector(`script[src="${scriptUrl}"]`);
if (!script) {
script = document.createElement('script');
script.src = scriptUrl;
script.async = true;
document.head.appendChild(script);
script.onload = initializeMfe;
} else if (window.CreateKuikaMfeApp) {
initializeMfe();
} else {
script.addEventListener('load', initializeMfe);
}
});
onUnmounted(() => {
if (script) {
script.removeEventListener('load', initializeMfe);
}
});
},
};
</script>
app.module.ts Yapılandırması: schemas: [CUSTOM_ELEMENTS_SCHEMA]
kuika-mfe-wrapper.component.ts Componenti:
import { Component, OnInit, OnDestroy, Input } from '@angular/core';
@Component({
selector: 'app-kuika-mfe-wrapper',
template: `
<uygulamanizin-etiketi
[attr.external_access_token]="accessToken"
[attr.external_refresh_token]="refreshToken"
[attr.external_username]="userEmail"
[attr.starting_screen]="dashboardscreen"
></uygulamanizin-etiketi>
`,
})
export class KuikaMfeWrapperComponent implements OnInit, OnDestroy {
@Input() accessToken: string;
@Input() refreshToken: string;
@Input() userEmail: string;
private script: HTMLScriptElement;
private readonly scriptUrl = 'https://platform.kuika.com/assets/kuika-mfe_1_0_0.js';
private readonly mfeAppUrl = '''https://<uygulamanizin-kuika-adresi>''';
private initializeMfe = () => {
if ((window as any).CreateKuikaMfeApp) {
(window as any).CreateKuikaMfeApp({ frontEndUrl: this.mfeAppUrl });
}
};
ngOnInit(): void {
this.script = document.querySelector(`script[src="${this.scriptUrl}"]`);
if (!this.script) {
this.script = document.createElement('script');
this.script.src = this.scriptUrl;
this.script.async = true;
document.head.appendChild(this.script);
this.script.addEventListener('load', this.initializeMfe);
} else if ((window as any).CreateKuikaMfeApp) {
this.initializeMfe();
} else {
this.script.addEventListener('load', this.initializeMfe);
}
}
ngOnDestroy(): void {
if (this.script) {
this.script.removeEventListener('load', this.initializeMfe);
}
}
}
