브릿지 호출 샘플 추가

This commit is contained in:
keymasroy
2021-08-23 20:16:02 +09:00
parent 09a2e09639
commit 44b682fb25
13 changed files with 424 additions and 4 deletions

View File

@@ -0,0 +1,19 @@
package sample.ustraframework.java.fo.config;
import java.io.IOException;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import com.gsitm.ustra.java.core.utils.UstraResourceUtils;
import com.gsitm.ustra.java.data.logging.interfaces.provider.InterfaceInfoProvider;
import com.gsitm.ustra.java.data.logging.interfaces.provider.XmlResourceInterfaceInfoProvider;
@Configuration
public class InterfaceConfiguration {
@Bean
public InterfaceInfoProvider interfaceInfoProvider() throws IOException {
return new XmlResourceInterfaceInfoProvider(UstraResourceUtils.getResourcesByPattern("classpath*:/data/interfaces-*.xml"));
}
}

View File

@@ -0,0 +1,26 @@
package sample.ustraframework.java.fo.sample.interfaces;
import java.util.List;
import java.util.stream.Collectors;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import com.gsitm.ustra.java.data.logging.interfaces.info.InterfaceInfo;
import com.gsitm.ustra.java.data.logging.interfaces.store.InterfaceInfoStore;
@RestController
public class InterfaceApiController {
@Autowired private InterfaceInfoStore interfaceInfoStore;
@RequestMapping("/api/interface/all")
public List<InterfaceInfo> interfaceStore() {
return this.interfaceInfoStore.getAll()
.entrySet().stream()
.map(e->e.getValue())
.collect(Collectors.toList());
}
}

View File

@@ -34,6 +34,9 @@ ustra:
driver-class-name: net.sf.log4jdbc.sql.jdbcapi.DriverSpy
username: ENC(p6rIPoShJklFLPxHKNJYFLooNCd2xnkayNZ2f+GexyA17qEMS77u8g==)
password: ENC(ohS/a1/Q/lKriwUq3rqJqht76fQ0Bnge)
logging:
interfaces:
enabled: true
mvc:
view:
api-prefix: api

View File

@@ -0,0 +1,31 @@
<?xml version="1.0" encoding="UTF-8"?>
<interfaceInfos>
<interfaceInfo>
<id>IF-INBOUD-MOBILE01</id>
<version>1.0</version>
<name>모바일 인바운드 API</name>
<type>MOBILE_BRIDGE</type>
<logType>ALL</logType>
<direction>INBOUND</direction>
<systemCode>FO</systemCode>
<rmk>샘플로 정의된 모바일 인바운드 API</rmk>
<keys>
<key id="key1">value1</key>
<key id="key2">value2</key>
</keys>
</interfaceInfo>
<interfaceInfo>
<id>IF-OUTBOUND-MOBILE01</id>
<version>1.0</version>
<name>모바일 아웃바운드 API</name>
<type>MOBILE_BRIDGE</type>
<logType>ALL</logType>
<direction>OUTBOUND</direction>
<systemCode>FO</systemCode>
<rmk>샘플로 정의된 모바일 아웃바운드 API</rmk>
<keys>
<key id="key1">value1</key>
<key id="key2">value2</key>
</keys>
</interfaceInfo>
</interfaceInfos>

View File

@@ -1,3 +1,155 @@
@font-face {
font-family: NotoSansKR;
font-weight: 100;
font-style: normal;
src: url('/fonts/NotoSansKR-Thin.woff') format('woff'), url('/fonts/NotoSansKR-Thin.woff2') format('woff2'), url('/fonts/NotoSansKR-Thin.otf') format('opentype');
}
@font-face {
font-family: NotoSansKR;
font-weight: 300;
font-style: normal;
src: url('/fonts/NotoSansKR-Light.woff') format('woff'), url('/fonts/NotoSansKR-Light.woff2') format('woff2'), url('/fonts/NotoSansKR-Light.otf') format('opentype');
}
@font-face {
font-family: NotoSansKR;
font-weight: 400;
font-style: normal;
src: url('/fonts/NotoSansKR-Regular.woff') format('woff'), url('/fonts/NotoSansKR-Regular.woff2') format('woff2'), url('/fonts/NotoSansKR-Regular.otf') format('opentype');
}
@font-face {
font-family: NotoSansKR;
font-weight: 500;
font-style: normal;
src: url('/fonts/NotoSansKR-Medium.woff') format('woff'), url('/fonts/NotoSansKR-Medium.woff2') format('woff2'), url('/fonts/NotoSansKR-Medium.otf') format('opentype');
}
@font-face {
font-family: NotoSansKR;
font-weight: 700;
font-style: normal;
src: url('/fonts/NotoSansKR-Bold.woff') format('woff'), url('/fonts/NotoSansKR-Bold.woff2') format('woff2'), url('/fonts/NotoSansKR-Bold.otf') format('opentype');
}
@font-face {
font-family: NotoSansKR;
font-weight: 900;
font-style: normal;
src: url('/fonts/NotoSansKR-Black.woff') format('woff'), url('/fonts/NotoSansKR-Black.woff2') format('woff2'), url('/fonts/NotoSansKR-Black.otf') format('opentype');
}
.sub-page-section {
padding: 50px 0;
}
html,
body,
#__nuxt,
#__layout {
width: 100%;
height: 100%;
}
#__layout {
display: flex;
}
body,
code,
input,
textarea,
select {
font-family: NotoSansKR !important;
font-weight: 400;
}
.container {
margin: 0 auto;
width: auto;
position: relative;
flex-grow: 1;
}
.sidebar.b-sidebar {
& .sidebar-content {
min-width: 260px;
width: revert;
padding: 5px;
}
}
.documentation {
position: relative;
&:after &:before {
box-sizing: inherit;
}
.docs-template-horizontal {
position: relative;
display: flex;
flex-direction: row;
flex: 1;
.sidebar {
display: flex;
flex-direction: column;
flex-shrink: 0;
// width: 16rem;
padding: 3rem 1rem;
background: #f5f5f5;
.sidebar-menu {
width: 100%;
}
}
.docs-main {
position: relative;
background: #fff;
overflow: hidden;
width: 100%;
.docs-main-container {
padding: 3rem;
}
}
}
.sidebar-bg {
position: absolute;
bottom: 0;
right: 50%;
left: 0;
top: 0;
background: #f5f5f5;
}
}
.section-top {
margin-top: 60px;
}
.ref-section {
padding: 60px;
display: flex;
flex-direction: column;
justify-content: center;
}
.page-enter-active,
.page-leave-active {
transition: all 0.25s ease-out;
}
.page-enter,
.page-leave-active {
opacity: 0;
transform-origin: 50% 50%;
}
.guide-index-button {
position: fixed;
bottom: 30px;
right: 30px;
}

View File

@@ -10,11 +10,13 @@
<b-navbar-item :active="isActiveHome" type="div" @click="goHome">Home</b-navbar-item>
<b-navbar-item :active="isActiveIntroduce" @click="$router.push('/introduce')">Introduce</b-navbar-item>
<b-navbar-item :active="isActiveCustomer" @click="$router.push('/customer')">Customer</b-navbar-item>
<b-navbar-item :active="isActiveSample" @click="$router.push('/sample')">Sample</b-navbar-item>
</template>
<template #end>
<b-navbar-item v-show="!isAuthenticated" @click="$router.push('/customer')">Login</b-navbar-item>
<b-navbar-item v-show="isAuthenticated" @click="logout">Logout</b-navbar-item>
<b-navbar-item v-if="isAuthenticated" type="div">{{ $ustra.auth.getTokenClaim().displayName }}</b-navbar-item>
<b-navbar-item v-if="!isAuthenticated" @click="$router.push('/customer')">Login</b-navbar-item>
<b-navbar-item v-if="isAuthenticated" @click="logout">Logout</b-navbar-item>
</template>
</b-navbar>
</template>
@@ -38,6 +40,10 @@ export default class extends CustomFoComponent {
return startsWith(this.$route.path, '/customer')
}
get isActiveSample() {
return startsWith(this.$route.path, '/sample')
}
get isAuthenticated() {
return this.$ustra.auth.isAutenticated()
}

View File

@@ -9,6 +9,10 @@
<b-input type="password" v-model="password" password-reveal> </b-input>
</b-field>
<article class="message is-primary">
<div class="message-body">샘플 로그인 화면입니다. sample/sample 계정을 사용하여 로그인이 가능합니다.</div>
</article>
<b-button type="is-primary" @click="login">Login</b-button>
</div>
</section>
@@ -37,7 +41,7 @@ export default class extends CustomFoComponent {
},
})
this.$router.push('/')
this.$router.push((this.$route.query.rtnUrl as string) || '/')
}
// #endregion
// #region watches

View File

@@ -0,0 +1,52 @@
<template>
<section class="documentation">
<!-- <div class="sidebar-bg"></div> -->
<div class="is-fullhd docs-template-horizontal">
<b-sidebar :open.sync="visibleSideBar" :can-cancel="true" :overlay="true" :fullheight="true" class="sidebar">
<div class="is-custom-mobile sidebar-menu">
<b-menu-list>
<b-menu-item @click="$router.push('/sample/mobile')">
<template #label>모바일 브릿지 호출</template>
</b-menu-item>
</b-menu-list>
</div>
</b-sidebar>
<b-button icon-left="grid-large" :rounded="true" class="guide-index-button" type="is-danger" @click="showSideBar"></b-button>
<nuxt-child :key="$route.fullPath" ref="child" />
</div>
<!-- </div> -->
</section>
</template>
<script lang="ts">
import { Component, PropSync } from 'vue-property-decorator'
import { CustomFoComponent } from '@/components/custom-fo-component'
@Component({
config: {
auth: {
required: true,
},
},
})
/**
* @vuese
* @group component group
* component description
*/
export default class extends CustomFoComponent {
// #region variables
visibleSideBar: boolean = false
// #endregion
// #region hooks
// #endregion
// #region methods
showSideBar() {
this.visibleSideBar = true
}
// #endregion
// #region watches
// #endregion
}
</script>
<style lang="scss"></style>

View File

@@ -0,0 +1,27 @@
<template>
<section class="mb-5 section-top" style="width: 100%">
<b-message title="Sample" type="is-success" has-icon :closable="false"> 코드 샘플 화면입니다. <br />우측 하단의 메뉴 아이콘을 선택하여 조회할 샘플 메뉴를 선택하십시오.</b-message>
</section>
</template>
<script lang="ts">
import { Component } from 'vue-property-decorator'
import { CustomFoComponent } from '@/components/custom-fo-component'
@Component({})
/**
* @vuese
* @group component group
* component description
*/
export default class extends CustomFoComponent {
// #region variables
// #endregion
// #region hooks
// #endregion
// #region methods
// #endregion
// #region watches
// #endregion
}
</script>
<style lang="scss"></style>

View File

@@ -0,0 +1,11 @@
```typescript
callOutbound() {
this.$ustra.mobile.bridge.callNative({
id: 'IF-OUTBOUND-MOBILE01',
callback: result => {
console.log('result', result)
},
timeout: 2000,
})
}
```

View File

@@ -0,0 +1,9 @@
```typescript
this.$ustra.mobile.bridge.addNativeListener('IF-INBOUD-MOBILE01', data => {
console.log('nativate inbound data', data)
})
// 브라우저 콘솔 창에서 아래와 같이 테스트 수행
window['IF_INBOUD_MOBILE01']({ data: { param1: 'value1' }})
```

View File

@@ -0,0 +1,63 @@
<template>
<section class="mb-5 section-top" style="width: 100%">
<b-message title="모바일 브릿지 호출" type="is-success" has-icon :closable="false">
모바일 브릿지 연계 기본 가이드는 http://guide.ustraframework.kro.kr/ref-doc/03/1GyLoOpEjmPqsz2PPArR 를 참조합니다.
</b-message>
<b-button @click="callOutbound">아웃바운드 브릿지 호출</b-button> <br />
<u-markdown-viewer :html="true">{{ mobile01 }}</u-markdown-viewer>
<b-message :closable="false"> 인바운드 브릿지는 addNativeListener 메소드를 사용하여 컴포넌트 initializing 시에 리스닝을 수행한다. 브라우저 상에서 테스트는 아래와 같이 수행할 있다. </b-message>
<u-markdown-viewer :html="true">{{ mobile02 }}</u-markdown-viewer>
</section>
</template>
<script lang="ts">
import { Component } from 'vue-property-decorator'
import { CustomFoComponent } from '@/components/custom-fo-component'
import UMarkdownViewer from '@ustra/nuxt/src/vue/components/ustra-markdown-viewer'
// @ts-ignore
import mobile01 from './md/mobile01.md'
// @ts-ignore
import mobile02 from './md/mobile02.md'
@Component({
components: {
UMarkdownViewer,
},
})
/**
* @vuese
* @group component group
* component description
*/
export default class extends CustomFoComponent {
// #region variables
mobile01 = mobile01
mobile02 = mobile02
// #endregion
// #region hooks
mounted() {
this.$ustra.mobile.bridge.addNativeListener('IF-INBOUD-MOBILE01', data => {
console.log('nativate inbound data', data)
})
}
// #endregion
// #region methods
callOutbound() {
this.$ustra.mobile.bridge.callNative({
id: 'IF-OUTBOUND-MOBILE01',
callback: result => {
console.log('result', result)
},
timeout: 2000,
})
}
// #endregion
// #region watches
// #endregion
}
</script>
<style lang="scss"></style>

View File

@@ -12,7 +12,7 @@ export default async () => {
title: 'U.STRA Node Framework Sample - FO',
auth: {
enabled: true,
loginUrl: '/',
loginUrl: '/customer',
jwt: {
useCookie: false,
accessTokenKey: 'sample-fo-token',
@@ -40,6 +40,7 @@ export default async () => {
css: true,
materialDesignIcons: true,
},
useMarkdown: true,
},
css: ['~/assets/global.scss'],
head: {
@@ -50,6 +51,22 @@ export default async () => {
generateDirPath: '../../../back/root/fo/src/main/resources/static',
generateProfiles: [env.Profile.DEV, env.Profile.STAGING, env.Profile.PRODUCTION],
},
interfaces: {
initialDataApiUrl: '/api/interface/all',
},
mobile: {
enabled: true,
hybrid: {
nativeAgent: {
android: 'client1',
ios: 'client2',
},
bridge: {
enabled: true,
useTokenSecurity: false,
},
},
},
},
}