2016년 2월 21일 일요일

[MEANI-Stack] - #7 (Ionic 2) Seed Project 생성 (미해결)

[MEANI-Stack] - #7 (Ionic 2) Seed Project 생성 (미해결)



하이브리드 어플리케이션은 웹앱을 만드는것처럼
HTML, CSS그리고 JavasScript를 이용하여 개발하며
한번의 개발로 Android, IOS모두 컨버팅 가능하다는 큰 장점이 있습니다.

이런 하이브리드를 가능케 해준것의 중심에는 apache cordova프로젝트가 있었습니다.



apache cordorva : http://cordova.apache.org/






그리고

가장 유명한 플랫폼 으로는 phone gap 이 있지요.

phonegap : http://phonegap.com/







개념 자체는 아주 신선하고 좋지만 어느정도 명백한 한계는 존재합니다.

출처 :https://developer.salesforce.com/page/Native,_HTML5,_or_Hybrid:_Understanding_Your_Mobile_Application_Development_Options




여러가지 갑론 을박이 있지만 제생각은 아래와 같습니다.


0.웹앱이 네이티브 영역을 넘나드는데는 한계가 있다.
  3D그래픽을 구현하는 모바일 어플리케이션을 제외하고 대부분 모바일 웹앱으로 대체 될 수 있을거라
  생각했지만 apple진영에서 마켓에서 버는 수익이 막대하다보니 api를 완전히 열 계획도, 앞으로 완전히
  열 가능성도 매우 적어보입니다.

1.네이티브 앱에 비해 퍼포먼스는 떨어질수밖에 없다.
 만약 그래픽적인 요소들을 많이 포함하고 있다면 하이브리드 앱은 고려 대상이 아니다.

2.초창기 스타트업의 경우 하이브리드 앱을 충분히 고려 해 볼만 하다.
 진입장벽이 확실히 낮아지는 장점이 있다.
 그러나 퍼포먼스 즉, 성능은 사용자 경험에 중대한 영향을 미치므로
 중장기적으로 최고의 퍼포먼스를 위해 결국 네이티브로 변환해야만 한다.


이러한 상황속에서도 Angular진영에서는 phonegap을 사용할수 없다보니
Angular를 메인 스택으로 가져가는경우 하이브리드 앱은 고려하기 힘든 대상이었지만

Ionic의 등장으로 AngularJS기반 하이브리드 앱 도입의 길이 열리게 되었죠







그리고 Angular2의 Beta버젼 등장과 함께 
혜성같이 등장한 Ionic2 Beta가 등장하자마자 다운받아 실행해보았지만!

실행이 안되어 낑낑... stack overflow에도 저와 같은 질문들만 수두룩하고 
답변은 아무도 없는 그런 아비규환의 1월을 보내고

이 글을 시점인 2월달에 새로 릴리즈된 Ionic2는 웹 버전은 잘 실행되더군요 
그래서 (ionic 2) Seed Project 태스크를 진행해야겠다 생각했습니다.




자 그럼 Ionic2 Seed Proejct를 시작해봅니다.

공식 홈페이지 에 나온대로 진행해봅니다.

1.ionic2 다운로드
$ npm install -g ionic@beta

2.ionic2 seed project 다운로드
$ ionic start cutePuppyPics --v2

3.cordova 설치
$ sudo npm install -g cordova

4.ios platform추가
$ ionic platform add ios

5.xCode 설치 (맥만 가능)
맥 소프트웨어 센터에서 xcode검색후 설치하면 됩니다.






6.android platform추가
$ ionic platform add android

7.android sdk설치
공식홈페이지 다운로드 링크 : http://developer.android.com/sdk/installing/index.html




우측의 stand-alone sdk tools를 눌러서 들어가니 download 링크를 한번 더 태우는군요





그냥 recommend 해주는데로 했어야 했습니다.

차마 여기 적지못하는 온갖 삽질을 다하고 결국 Android studio를 설치했습니다.
여러분 그냥 Android studio를 받으세요. 
여러분의 정신건강을 위해서...

바로 맥용을 다운받습니다.

제가 사용하는 개발환경 폴더로 이동시킨후 path설정을 해줍니다.

환변경수 설정을 잘 모르는경우 아래 글을 참고하세요.


[Linux, Mac] environment variable path / 환경변수 설정

[zsh, YADR, dotfiles] environment variable path / 환경변수 설정






이제 sdk를 실행시킨후 기본 체크된 사항들만 install 해줍니다


 







아래 명령어로 실행해봅니다.
$ ionic run android





이런!
android-22를 요구하는군요...

다시 22버전을 설치한후 다시 실행해봅니다







하...


그냥 recommend 해주는데로 했어야 했습니다.

차마 여기 적지못하는 온갖 삽질을 다하고 결국 Android studio를 설치했습니다.
여러분 그냥 Android studio를 받으세요. 
여러분의 정신건강을 위해서...


Android studio를 설치하고 아무 프로젝트나 하나 만든후
아래 스크린샷에 강조 표시한 avd manager를 이용해 virtual device를 하나 생성합니다.






$ ionic run android
다시 실행!!!



Launch Success!!!!!!!!!
드디어 실행성공!!!!!






그렇습니다. 1월에 이어서 2월의 아비규환이 또 찾아왔습니다.


사실 한번 실행되는것만 확인하면 이후부터는 웹으로 작업을 진행하면 되기때문에
문제가 안되는데 한번이!!!!!!!!!! 제대로 실행이 안되네요...
스택오버플로우 검색해보았지만 ionic2관련된것은 없군요...




휴... 답답한 마음 부여잡고 ios라도 해봅니다.




$ ionic build ios 

no target specified for emulate. Deploying to iPhone-6s-Plus 라고 뜨네요
하지만 빌드는 된거같군요.



$ ionic emulate ios



잘 나옵니다!
하지만... iPhone-6s-Plus의 엄청난 해상도가 모니터 절반을 집어삼켜서
디버깅엔 부적절하군요. 어쨋든 실행은 됩니다...






이번 태스크는 미완성으로 일단 여기서 마무리 짓고
애자일보드를 확인합니다.



이번 태스크를 진행하면서 느낀것은 지금 진행하는데 ionic 2가 꼭 필요한게 아니고
워낙 초창기 버전이다보니 릴리즈가 빨라서 서버 API를 작성하는 도중에 버그가 해결될수도 있는데 
이걸 이렇게 진행해야 하나 생각이 들었습니다.
그러다 문득 든생각이 연관관계에 따른 우선순위를 명시적으로 매기지 않고
애자일 보드를 사용하더라도 한번에 모든 태스크를 추가 하지 않고 진행하다보니
기능명세서의 필요성을 느껴 (Side-Jobs) 요구사항 및 기능 명세서 작성 태스크를 추가하였습니다.


다음 태스크는 (Side-Jobs) 요구사항 및 기능 명세서 작성 을 진행 하도록 하겠습니다.

댓글 없음:

댓글 쓰기