github 에서 ionic sample project 를 다운받아서 실행시켜보기

ionic framework 를 처음 접한 후로, Hello World 수준으로 테스트를 해봤었는데, 이번에는 GitHub 에 등록되어 있는 starter project 중에서 하나를 테스트 삼아서 실행시켜보기로 했습니다.

먼저, GitHub 에서 ionic project 로 검색한 후에, 있어보이는 프로젝트 하나를 임의로 선정해 봤습니다

https://github.com/loicknuchel/ionic-starter

아래의 순서대로 실행하면 된다고 했는데,

• install nodejs, npm, gulp, bower, cordova, ionic & sass (if not already done)
• git clone git@github.com:loicknuchel/ionic-starter.git : clone this repo
• cd ionic-starter : go to folder
• bower install : install app dependencies
• npm install : install build dependencies
• ionic setup sass : use sass
• ionic serve : start the app on your browser

실행 첫 줄에서 부터 문제가 발생하네요... 흑흑...

우선, nodejs, npm, bower, cordova, ionic 은 설치를 한게 확실한데, gulp / sass 는 처음보는 모듈인데, 뭔지는 잘 모르지만, 일단 다음줄을 실행해 봅니다.

git clone git@github.com:loicknuchel/ionic-starter.git 

nodejie commandline prompt 에서실행했더니, 아래와 같은 Error Message 가 보입니다.

C:\Users\newhwang\ionic-starter>git clone git@github.com:loicknuchel/ionic-starter.git

Cloning into 'ionic-starter'...

Permission denied (publickey).

fatal: Could not read from remote repository.

Please make sure you have the correct access rights

and the repository exists.

아마도, Permission 문제이고 Publickey 가 어쩌고 하는걸 보니, GitHub 쪽 계정문제인 듯 합니다. 그래서, GitHub 에서 직접 zip 파일을 다운로드 받아서 압축을 해제한 후, ionic 프로젝트 폴더에 복사해서 붙여 넣었네요

• install nodejs, npm, gulp, bower, cordova, ionic & sass (if not already done)
• git clone git@github.com:loicknuchel/ionic-starter.git : clone this repo
• cd ionic-starter : go to folder
• bower install : install app dependencies
• npm install : install build dependencies
• ionic setup sass : use sass
• ionic serve : start the app on your browser

그런후에, 세번째 명령으로 해당 프로젝트 폴더로 이동하고, bower install , npm install 을 차례로 실행하는데, gulp 가 설치되지 않았다고 Error Message 가 뜨네요, 그래서 npm install -g gulp  명령으로 gulp 를 설치한 후에 다시 실행하니까 Error 없이 진행이 됩니다. 

다음 ionic setup sass  실행한 후에 ionic serve 를 실행하니까 바로 , 브라우저 상에서 실행이 됩니다.

로그인을 하라고 나오길래, 과감하게 콜사인을 Bigboss 로 했지말입니다 ㅎㅎ 비번까지 입력하고 로그인버튼을 클릭하니까 Timeline 이 표시가 됩니다. 아마도 Twitter 형식의 SNS 프로그램인 듯 합니다.

그런데, 테스트 데이터를 입력하고 Enter 키를 쳐도, 아무런 변화가 없네요.... 역시나, 한번에 끝나는게 없네요... 쩝.... 그래서, phonegap desktop 에서 돌려보면 어떨까 싶어서, phonegap desktop 에 해당 프로젝트를 import 시킨 후에, 브라우저에서 실행시키니 제대로 동작을 하는데, 스마트폰의 phonegap 화면에서는 뭐가 잘못되었는지 깨져나옵니다

일단 오늘은 github 에서 프로젝트를 다운로드 받아서 브라우저 상에서 실행시켜봤다는 데에 의미를 두고 여기에서 포스팅을 마감할까 합니다. 좀더 Study 가 진행된 후에 제대로된 ionic 정복기를 올려볼까 합니다.