브릿지 호출 샘플 추가
This commit is contained in:
@@ -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"));
|
||||
}
|
||||
}
|
||||
@@ -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());
|
||||
}
|
||||
|
||||
}
|
||||
@@ -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
|
||||
|
||||
31
back/root/fo/src/main/resources/data/interfaces-sample.xml
Normal file
31
back/root/fo/src/main/resources/data/interfaces-sample.xml
Normal 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>
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
@@ -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()
|
||||
}
|
||||
|
||||
@@ -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
|
||||
|
||||
52
front/fo/client/pages/sample.vue
Normal file
52
front/fo/client/pages/sample.vue
Normal 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>
|
||||
27
front/fo/client/pages/sample/index.vue
Normal file
27
front/fo/client/pages/sample/index.vue
Normal 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>
|
||||
11
front/fo/client/pages/sample/md/mobile01.md
Normal file
11
front/fo/client/pages/sample/md/mobile01.md
Normal file
@@ -0,0 +1,11 @@
|
||||
```typescript
|
||||
callOutbound() {
|
||||
this.$ustra.mobile.bridge.callNative({
|
||||
id: 'IF-OUTBOUND-MOBILE01',
|
||||
callback: result => {
|
||||
console.log('result', result)
|
||||
},
|
||||
timeout: 2000,
|
||||
})
|
||||
}
|
||||
```
|
||||
9
front/fo/client/pages/sample/md/mobile02.md
Normal file
9
front/fo/client/pages/sample/md/mobile02.md
Normal 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' }})
|
||||
```
|
||||
|
||||
63
front/fo/client/pages/sample/mobile.vue
Normal file
63
front/fo/client/pages/sample/mobile.vue
Normal 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>
|
||||
@@ -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,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user