그래오늘은이거야

맥북 아이폰 cordova(코르도바) IOS 하이브리드 앱 플러그인 개발 javascript 연동 2 본문

세상 정보

맥북 아이폰 cordova(코르도바) IOS 하이브리드 앱 플러그인 개발 javascript 연동 2

jinhongstar 2017. 3. 13. 17:09
728x90
반응형

첫번째 맥북 아이폰 cordova(코르도바) 하이브리드를 셋팅을 했다면 이번 글은 plug-in을 연동 하는 방법에 대해서 작성하겠습니다.


맥북 아이폰 cordova(코르도바) IOS 하이브리드 앱 개발환경 쉽게 따라하기 : http://jinhongstar.tistory.com/22


들어가기 전에 : https://cordova.apache.org/docs/ko/3.1.0/guide/platforms/ios/plugin.html 사이트에 쉽게 설명이 안되어 있어,


제가 다시 한글로 이해하기 쉽게 작성한 내용입니다.


이제 plugines를 만들어 보겠습니다.




앱 개발환경을 잘 따라 오셨다면,  libCordova.a 라이브러리 파일이 생겼을 겁니다.






파일명은 MGPluginEcho.h,MGPluginEcho.m 파일로 만듭니다.


libCordova.a 를 설명한 이유는 Subclass of: CDVPlugin을 사용 해야 하기 때문입니다.



Class명을 정하고 생성 하십시오.


#import <Cordova/Cordova.h> (error)

#import <Cordova/CDV.h> (non error)


위 error 을 아래 코드로 변경하면 에러가 발생하지 않습니다.




//*********************************************************//

// MGPluginEcho.h 파일

//*********************************************************//

//

//  MGPluginEcho.h

//  SMGMobileBank

//

//  Created by jinhongstar on 2017. 3. 13..

//

//


#import <Cordova/CDV.h>


@interface MGPluginEcho : CDVPlugin


-(void)echo:(CDVInvokedUrlCommand *)command;


@end



//*********************************************************//

// MGPluginEcho.m 파일

//*********************************************************//

//

//  MGPluginEcho.m

//  SMGMobileBank

//

//  Created by jinhongstar on 2017. 3. 13..

//

//


#import "MGPluginEcho.h"


@implementation MGPluginEcho


- (void)echo:(CDVInvokedUrlCommand *)command

{

NSString* message = [command.arguments objectAtIndex:0];

NSLog(@"message : %@",message);

[[[UIAlertView alloc] initWithTitle:@"네이티브팝업창" message:message delegate:nil cancelButtonTitle:@"취소" otherButtonTitles:@"확인", nil] show];

}





@end



여기 까지 만들었다면 네이티브가 받을 수 있는 파일은 모두 만들었습니다.


html / js / javascript 부분을 이용하여 네이티브 코드와 연동을 해주면 됩니다.


연동중에 제일 중요한 부분이


config.xml 부분에


<!-- 플러그인 필수 연결 -->


<feature name="MGPluginEcho">

<param name="ios-package" value="MGPluginEcho" />

</feature>


코드를 입력 해주세요,


config.xml 파일이 두개로 되어있습니다.


./ www  (첫번째)

./ staging / www (두번째)


파일이 있는데 사전적 의미는 첫번째 같은데 실제로 빌드 해보면 두번째


 index.html / config.xml 의 위치에 있는 소스를 수정해야지 적용되는것을 확인 할 수 있습니다.



이제 js를 만들면 됩니다. js파일명은 js폴더안에 mg_plugin_echo.js 파일명 으로 만들었습니다.



//

//  mg_plugin_echo.js

//

//  Created by  jinhongstar on 2017. 3. 13..

//

//



function MGPluginEcho(){}


MGPluginEcho.prototype.echo = function(message){

cordova.exec(null, null, "MGPluginEcho", "echo", [message]);

}


cordova.exec  자세한 소스 설명은 아래 URL주소에 잘나와있습니다.

https://cordova.apache.org/docs/ko/3.1.0/guide/platforms/ios/plugin.html


저는 글을 다 읽어보고와서 환경셋팅에 오류없이 잘 진행되게 작성 중 입니다.


이제 마지막으로html을 작성하면  html 화면이 기동되면서 javascript 와 js 를 호출하여 아이폰 네이트브 소스의 함수를 호출 하는 내용을 확인 할 수 있습니다.


index.html 

<HTML소스>


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<!--

    Licensed to the Apache Software Foundation (ASF) under one

    or more contributor license agreements.  See the NOTICE file

    distributed with this work for additional information

    regarding copyright ownership.  The ASF licenses this file

    to you under the Apache License, Version 2.0 (the

    "License"); you may not use this file except in compliance

    with the License.  You may obtain a copy of the License at


    http://www.apache.org/licenses/LICENSE-2.0


    Unless required by applicable law or agreed to in writing,

    software distributed under the License is distributed on an

    "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY

     KIND, either express or implied.  See the License for the

    specific language governing permissions and limitations

    under the License.

-->

<html>

    <head>

        <!--

        Customize this policy to fit your own app's needs. For more guidance, see:

            https://github.com/apache/cordova-plugin-whitelist/blob/master/README.md#content-security-policy

        Some notes:

            * gap: is required only on iOS (when using UIWebView) and is needed for JS->native communication

            * https://ssl.gstatic.com is required only on Android and is needed for TalkBack to function properly

            * Disables use of inline scripts in order to mitigate risk of XSS vulnerabilities. To change this:

                * Enable inline JS: add 'unsafe-inline' to default-src

        -->

<meta charset="utf-8" />

<meta name="format-detection" content="telephone=no" />

<!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->

<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />

<link rel="stylesheet" type="text/css" href="css/index.css" />

<title>Hello World</title>


    </head>

   <body onload="onLoad()">

<div class="app">

<h1>PhoneGap</h1>

<div id="deviceready" class="blink">

<p class="event listening">Connecting to Device</p>

<p class="event received">Device is Ready</p>

</div>

</div>

<script type="text/javascript" charset="utf-8" src="cordova.js"></script>

<script type="text/javascript"  src="js/mg_plugin_echo.js"></script>

<script type="text/javascript" charset="utf-8">

function onLoad() {

document.addEventListener("deviceready", onDeviceReady, false);

}

function onDeviceReady() {

// Now safe to use device APIs

}

var runEcho = function(){

var pluginEcho = new MGPluginEcho();

pluginEcho.echo("javascript/네이트브연동 html에서보낸 내용 나타내기");

};

document.addEventListener('deviceready', runEcho, false);


</script>

    </body>

</html>





이렇게 소스를 완성 한 후 빌드하면 





팝업창이 나오는 것을 확인 할 수 있습니다.


플러그인연동만 알면 이제 스크립트에서 호출하는 내용별로 정리하여 네이티브 소스를 마음껏 customize 할 수 있습니다.

반응형
저작자표시 비영리

'세상 정보' 카테고리의 다른 글

[해킹/스팸] 요청하지 않은 [Apple ID 확인 코드 :] 애플 아이디 확인 코드 문자  (0) 2019.12.11
맥북 아이폰 cordova(코르도바) IOS 하이브리드 앱 개발환경 쉽게 따라하기 1  (7) 2017.03.09
티스토리 애드센스 광고수익 배너 달기 (콘텐츠 불충분 재신청 하기)  (10) 2017.02.07
디자인 못하는 개발자에게... 무료 아이콘 색상(hashCode) 제공  (0) 2017.01.18
[2017 투자 금융] EBS 자본주의 돈은 빚이다. 성투를 하려면 먼저 보세요.  (0) 2017.01.18
공유하기 링크
'세상 정보' Related Articles more
Comments