기본 콘텐츠로 건너뛰기

하이브리드앱 개발 두번째 도전

폰갭으로 하이브리드 앱을 만들어보고자 

이클립스와 콘솔창을 활용해서 어렵사리 데모를 만들어봤었지만 반응성이 떨어지는듯하여 포기.. 

개발방법도 너무 피곤했다.. 이클립스로 작성하고.. 콘솔에서 빌드하고........ 


하지만 이번엔  Visual Studio 2015 를 사용해서 Apache Cordova 하이브리드앱을 만들어보려 한다. 

디바이스가 아이폰과 맥북(에어긴 하지만..)이 있으니 


일단 맥에 페럴렐즈를 깔고 그위에 윈도우를 깔고, 윈도우에 visual studio 2015를 깔고 visual studio에 Apache Cordova개발환경을 셋업했다. 

VS에 cordova 개발환경 셋팅은 클릭한번으로 되니까 별도로 설명하진 않겠다. 


빈 프로젝트를 만들어서 Android를 타겟으로 돌려본결과 크롬 브라우저위에서 테스트가 가능하다. 

IOS도 크롬브라우저로 테스트는 일단 가능 


아이폰에도 직접 올려보고 싶었다 

방법은 아래순서대로.. 사실 지금 하면서 적고있어서 실패하면 낭패다 

참고주소 : https://taco.visualstudio.com/en-us/docs/run-app-ios/#iOSDevice

참고주소 : https://taco.visualstudio.com/en-us/docs/ios-guide/#install

참고주소 : https://www.youtube.com/watch?v=_k9ZGXvV2PY


1. 윈도우에 아이튠즈 설치 (만약 맥에 연결된상태라면 아이튠즈 설치를 안해도 된다)


2. 맥에 node.js 설치 (https://nodejs.org)


3. 맥에 xcode 설치 & 실행

  1) 설치 및 실행 완료 후 

  2) 맥에 콘솔창에서 오른쪽 명령 입력 (복사 붙여넣기 말고 직접 타이핑해야 실행됨) : xcode-select --install  


4. 맥에 Remote Agent 설치 

  1) 맥 콘솔창에 오른쪽 명령 입력 : sudo npm install -g remotebuild


5. Remote Build 실행 

  1) 맥 콘솔창에 오른쪽 명령 입력 : remotebuild

     (보안설정을 끄고 원격서버를 실행하고 싶다면 오른쪽과 같이 입력 : remotebuild --secure false )


6. 윈도우에 설치한 visual studio 에서 원격지 설정진행

  1) 도구 > 옵션 > Apache Cordova용 도구 > IOS 구성  으로 이동  

  2) 원격에이전트 구성영역을 아래와같이 셋팅

     보안핀 : 자동으로 입력됨

     보안 모드 : False

     원격 IOS 처리 사용 : True

     포트 : ????

     호스트 : ????

  3) 위에서 물음표친 포트와 호스트 확인방법

    : 맥 콘솔을 열고 /Users/맥이름/.taco_home/ 로 이동

    : remotebuild saveconfig 명령 실행

    : cat RemoteBuild.config 으로 열어보면 포트, 호스트네임 등의 정보가 나올것이다.


 7. 비쥬얼스튜디오에서 Debug, IOS, 시뮬레이터로 빌드하면 맥에 시뮬레이터가 실행되면서 잘 될것이다. 


 8. 원격장치로 빌드하면 ? 코드사인 에러가 남 . (프로비저닝 파일이 없어서? ) 

   - Xcode 실행 -> 왼쪽위에 Xcode > preference > Accounts > Add Apple ID  (일단 유료로 개발자계정 사는것보단 애플계정으로 무료로 도전)

   개발자계정으로 할수있도록 해주는 설명과 애플아이디로 할수있는 두가지방법을 아래 주소에서 알려준다.

   http://taco.visualstudio.com/en-us/docs/ios-guide/#remoteAgent


   - File > new project 생성 (빈프로젝트로 아무거나)

   - General > Bundle identifier : com.test.cordova   뭐 이런식으로 식별할수있게 입력 (이부분은 좀있다가 다시 바꿀거다)

   - General > Team 부분을 조금전 추가한 내 애플계정으로 바꾸고

   - 좌측상단 디바이스도 내 아이폰으로 설정해준뒤 

   - Team 하단에 Fix 느낌표가 있으면 이걸 클릭해서 프로비저닝 파일이 생성되도록 한다.

   - 이제 런 ~! 하면 또 실패 ㅎ 이번엔 폰에서 실패가 날탠데 이유인즉슨 내 애플계정으로 생성된 개발자 프로파일을 허가하지 못하겠다는것 

   - 아이폰 > 설정 > 일반 > 프로파일 및 기기관리 > 내 애플계정이 개발자로 잇을것이다 허용해주자 


그럼 또다시 비쥬얼스튜디오에서 원격장치로 잡고 빌드를시도해보자 -> 역시 실패 

왜 ? 

지금 비쥬얼스튜디오에서 빌드하려고하는 프로젝트의 identifier 랑 일치하는 코드사인을 찾을 수없다는것 


해결방법은 ? 

비쥬얼스튜디오에 에러로그에 보면 

io.cordova.myapp940468 과 같은.. 이런 번들이름이 있을것이다 

위에서 xcode > General > Bundle identifier 부분에 아무렇게나 입력했던곳에 비쥬얼스튜디오에서 확인한 번들아이디를 입력

이때 또 fix 버튼이 뜰탠데 눌러주자 (그러면 엑스코드상에 저 번들이름에 대한 프로비저닝파일이 생긴다)

그상태로 엑스코드상에서 런 한번 해주고 

그러고나서 비쥬얼스튜디오에서 원격장치로 런 해보자 잘 뜰것이다. 


휴 한번 실행해보기 더럽게 어렵네 일단 개발환경은 구축된듯 하니 여기서 마무리 ! 



댓글

이 블로그의 인기 게시물

웹 개발하면서 보안을 유지하기 위한 기본지식

몇개월전에 만들었던 웹기반 (HTML5, CSS3, Flash Player(VideoJS)) VOD플레이어에서 보안이슈가 발생했다. 웹또한 서버를통해 통신을하지만 사용자의 PC에서 실행되는만큼 클라이언트의 개념이 있으며 Javascript 야말로 클라이언트에서 작업하게 되는 영역이라는 점에서 보안상에 이슈 발생.  이유인즉슨  무료로 제공되고 있는것과 유료로 제공되고있는 서비스에 대하여  javascript 단에서 서비스 허용여부를 결정하게될경우  해킹을 통해 이부분을 우회하여 서비스이용이 가능했다는점.. 모든 인증이나, 중요데이터는 java 로 코딩해서 서버단에서 결단이 나도록 했어야했는데 이건 너무 기본적이면서도 아쉬운 실수를 저지르고 말았다..  하하..  많은 분들이 이런 부분을 간과할수도있을듯하여 작성해봅니다.  요즘 보안이슈가 많을탠데 모두들 보안 화이팅 ! 

Android 스마트폰 기본 웹브라우저(Chrome:크롬) 호출하는 스키마(URL Scheme)

신용카드결제 페이지 주소를 카톡으로 던졌을때 카톡 내부에서 결제가 이루어지다보니 결제완료까지 정상적으로 처리되지 않는 경우가 발생한다더라 그래서 생각해본게.. 1) 카카오통 채팅방  2) 링크 전송  3) 링크를 클릭하면 스마트폰애 내장된 웹브라우저를 실행하는 URL스키마 실행  4) 실행된 웹브라우저에서 결제페이지로 이동 이 절차를 거치면 카톡 외부로 나와서 독립적인 웹브라우저상에서 결제를 진행하기때문에 정상처리가 가능할것이라고 판단 찾다 찾다가.. 알아낸것이 안드로이드 (가능) - 롤리팝부터 크롬 브라우저가 기본앱이다 - 크롬을 호출방법 intent://www.naver.com#Intent;scheme=http;package=com.android.chrome;end  아이폰 (조건부 가능) - 사파리를 호출하는 앱스키마가 없으며, 사파리를 통해서 검색어를 입력한 검색기능만 가능 - 크롬브라우저 앱이 설치되어있을경우 아래와같이 호출 가능 googlechrome:////www.naver.com <사용법> < html > < body > < script >      var currentOS = "else" ;      var mobile = ( /iphone | ipad | ipod | android/ i .test(navigator.userAgent.toLowerCase()));      if (mobile) {          var userAgent = navigator.userAgent.toLowerCase();          if (userAgent.search( "android" ) > - 1 )             currentOS = "android" ;          else if

flutter showDatePicker locale 설정을 통해 한국어로 표현되게 하는방법

제목 그대로.. showDatePicker 를 사용하면 아래와같은 형태로 사용할수가 있는데 Future<Null> _selectDate(BuildContext context) async { final DateTime picked = await showDatePicker( context: context , initialDate: selectedDate , firstDate: DateTime ( 2015 , 8 ) , lastDate: DateTime ( 2101 ) , initialDatePickerMode: DatePickerMode. year , //locale : const Locale('kr') ) ; if (picked != null && picked != selectedDate) setState(() { selectedDate = picked ; debugPrint( "_selectDate" ) ; debugPrint(selectedDate.toString()) ; }) ; } 위 소스처럼 locale을 직접 할당하면 datePicker 로딩부터 실패한다 그래서 해결방법을 찾아본 결과 아래와같이 MyApp에서 locale설정을 해주면 이곳에 설정한 locale옵션을 따라서 datepicker의 언어설정이 바뀌게된다 class MyApp extends StatelessWidget { @override Widget build (BuildContext context) { return MaterialApp ( title: 'Flutter Demo