Submit Search
Upload
Phonegap 3.3.0
•
0 likes
•
2,006 views
용훈 정
Follow
phonegap 3.3.0을 설치하고 사용하는 방법. bootstrap을 기반으로 간단한 모바일 웹앱을 만들어 본다.
Read less
Read more
Technology
Report
Share
Report
Share
1 of 30
Download now
Download to read offline
Recommended
Phonegap 환경설정
Phonegap 환경설정
정호 이
Hands-on Vue Springboot Simple Admin
Hands-on Vue Springboot Simple Admin
월간 IT 슬라이드
[월간 슬라이드] 한시간안에 게시판 만들기 with 스프링부트
[월간 슬라이드] 한시간안에 게시판 만들기 with 스프링부트
월간 IT 슬라이드
Python, Development Environment for Windows
Python, Development Environment for Windows
Kwangyoun Jung
[웹기반시스템 3조]e govframe
[웹기반시스템 3조]e govframe
구 봉
VirtualBox를 통한 LAMP환경 구축
VirtualBox를 통한 LAMP환경 구축
sibalmonkeys
Introduce Yeoman
Introduce Yeoman
항희 이
1.develop environment
1.develop environment
이경주 이경주
Recommended
Phonegap 환경설정
Phonegap 환경설정
정호 이
Hands-on Vue Springboot Simple Admin
Hands-on Vue Springboot Simple Admin
월간 IT 슬라이드
[월간 슬라이드] 한시간안에 게시판 만들기 with 스프링부트
[월간 슬라이드] 한시간안에 게시판 만들기 with 스프링부트
월간 IT 슬라이드
Python, Development Environment for Windows
Python, Development Environment for Windows
Kwangyoun Jung
[웹기반시스템 3조]e govframe
[웹기반시스템 3조]e govframe
구 봉
VirtualBox를 통한 LAMP환경 구축
VirtualBox를 통한 LAMP환경 구축
sibalmonkeys
Introduce Yeoman
Introduce Yeoman
항희 이
1.develop environment
1.develop environment
이경주 이경주
Yeoman
Yeoman
ymtech
HTML5로 만드는 데스크탑 어플리케이션 (Node-Webkit)
HTML5로 만드는 데스크탑 어플리케이션 (Node-Webkit)
JinKwon Lee
Yeoman(모던웹 개발을 위한 관리도구)설치사용가이드
Yeoman(모던웹 개발을 위한 관리도구)설치사용가이드
수정 김
Electron 시작하기
Electron 시작하기
Hyeokjoo Yoon
프론트엔드 개발자
프론트엔드 개발자
jung kyunghwan
I know - Chrome and Plugin
I know - Chrome and Plugin
Taewoo Kim
make hybrid app.
make hybrid app.
jiseob kim
[Korea Linux Forum] Implementing web based online multiplayer tetris with Ope...
[Korea Linux Forum] Implementing web based online multiplayer tetris with Ope...
JinKwon Lee
게임 개발에 도움을 주는 CruiseControl.NET과 Windows Terminal
게임 개발에 도움을 주는 CruiseControl.NET과 Windows Terminal
OnGameServer
도구를 활용한 더 나은 웹 개발: Yeoman
도구를 활용한 더 나은 웹 개발: Yeoman
Jae Sung Park
Virtual Development Environment Setting
Virtual Development Environment Setting
Kwangyoun Jung
웹 디자이너의 도전: Vue.js 따라하기
웹 디자이너의 도전: Vue.js 따라하기
Seungmin Lee
10 Scrapping Javascript
10 Scrapping Javascript
Young Oh Jeong
JavaInstall&Basic
JavaInstall&Basic
용호 최
실시간으로 안드로이드 프론트엔드 작업하기
실시간으로 안드로이드 프론트엔드 작업하기
Haze Lee
Share some development
Share some development
Ji Heon Kim
꾸글 월간노하우 7월 그랑노마드입니다.
꾸글 월간노하우 7월 그랑노마드입니다.
종원 이
Grunt
Grunt
Dohoon Kim
Vue.js와 Firebase활용기
Vue.js와 Firebase활용기
Aria (In Suk) Kim
about IPhone and Mac OS X
about IPhone and Mac OS X
Jisu Park
Softcon_하재권_Only javascript의 하이브리드 앱서버 도전기
Softcon_하재권_Only javascript의 하이브리드 앱서버 도전기
hajaekwon
구글앱엔진+스프링+스프링datajpa+메이븐
구글앱엔진+스프링+스프링datajpa+메이븐
라한사 아
More Related Content
What's hot
Yeoman
Yeoman
ymtech
HTML5로 만드는 데스크탑 어플리케이션 (Node-Webkit)
HTML5로 만드는 데스크탑 어플리케이션 (Node-Webkit)
JinKwon Lee
Yeoman(모던웹 개발을 위한 관리도구)설치사용가이드
Yeoman(모던웹 개발을 위한 관리도구)설치사용가이드
수정 김
Electron 시작하기
Electron 시작하기
Hyeokjoo Yoon
프론트엔드 개발자
프론트엔드 개발자
jung kyunghwan
I know - Chrome and Plugin
I know - Chrome and Plugin
Taewoo Kim
make hybrid app.
make hybrid app.
jiseob kim
[Korea Linux Forum] Implementing web based online multiplayer tetris with Ope...
[Korea Linux Forum] Implementing web based online multiplayer tetris with Ope...
JinKwon Lee
게임 개발에 도움을 주는 CruiseControl.NET과 Windows Terminal
게임 개발에 도움을 주는 CruiseControl.NET과 Windows Terminal
OnGameServer
도구를 활용한 더 나은 웹 개발: Yeoman
도구를 활용한 더 나은 웹 개발: Yeoman
Jae Sung Park
Virtual Development Environment Setting
Virtual Development Environment Setting
Kwangyoun Jung
웹 디자이너의 도전: Vue.js 따라하기
웹 디자이너의 도전: Vue.js 따라하기
Seungmin Lee
10 Scrapping Javascript
10 Scrapping Javascript
Young Oh Jeong
JavaInstall&Basic
JavaInstall&Basic
용호 최
실시간으로 안드로이드 프론트엔드 작업하기
실시간으로 안드로이드 프론트엔드 작업하기
Haze Lee
Share some development
Share some development
Ji Heon Kim
꾸글 월간노하우 7월 그랑노마드입니다.
꾸글 월간노하우 7월 그랑노마드입니다.
종원 이
Grunt
Grunt
Dohoon Kim
Vue.js와 Firebase활용기
Vue.js와 Firebase활용기
Aria (In Suk) Kim
about IPhone and Mac OS X
about IPhone and Mac OS X
Jisu Park
What's hot
(20)
Yeoman
Yeoman
HTML5로 만드는 데스크탑 어플리케이션 (Node-Webkit)
HTML5로 만드는 데스크탑 어플리케이션 (Node-Webkit)
Yeoman(모던웹 개발을 위한 관리도구)설치사용가이드
Yeoman(모던웹 개발을 위한 관리도구)설치사용가이드
Electron 시작하기
Electron 시작하기
프론트엔드 개발자
프론트엔드 개발자
I know - Chrome and Plugin
I know - Chrome and Plugin
make hybrid app.
make hybrid app.
[Korea Linux Forum] Implementing web based online multiplayer tetris with Ope...
[Korea Linux Forum] Implementing web based online multiplayer tetris with Ope...
게임 개발에 도움을 주는 CruiseControl.NET과 Windows Terminal
게임 개발에 도움을 주는 CruiseControl.NET과 Windows Terminal
도구를 활용한 더 나은 웹 개발: Yeoman
도구를 활용한 더 나은 웹 개발: Yeoman
Virtual Development Environment Setting
Virtual Development Environment Setting
웹 디자이너의 도전: Vue.js 따라하기
웹 디자이너의 도전: Vue.js 따라하기
10 Scrapping Javascript
10 Scrapping Javascript
JavaInstall&Basic
JavaInstall&Basic
실시간으로 안드로이드 프론트엔드 작업하기
실시간으로 안드로이드 프론트엔드 작업하기
Share some development
Share some development
꾸글 월간노하우 7월 그랑노마드입니다.
꾸글 월간노하우 7월 그랑노마드입니다.
Grunt
Grunt
Vue.js와 Firebase활용기
Vue.js와 Firebase활용기
about IPhone and Mac OS X
about IPhone and Mac OS X
Similar to Phonegap 3.3.0
Softcon_하재권_Only javascript의 하이브리드 앱서버 도전기
Softcon_하재권_Only javascript의 하이브리드 앱서버 도전기
hajaekwon
구글앱엔진+스프링+스프링datajpa+메이븐
구글앱엔진+스프링+스프링datajpa+메이븐
라한사 아
Ionic으로 모바일앱 만들기 #1
Ionic으로 모바일앱 만들기 #1
성일 한
Sencha touch2-sdk-tools-window
Sencha touch2-sdk-tools-window
Byoung Do Ahn
Ionic project guide
Ionic project guide
Jong Woo Rhee
[NEXT] Android 개발 경험 프로젝트 4일차 (Networking)
[NEXT] Android 개발 경험 프로젝트 4일차 (Networking)
YoungSu Son
센차 터치2 시작하기 | Devon 2012
센차 터치2 시작하기 | Devon 2012
Daum DNA
구글앱엔진 스터디
구글앱엔진 스터디
소라 정
Light Tutorial Django
Light Tutorial Django
Kwangyoun Jung
패스트캠퍼스 프론트엔드 강의 오리엔테이션
패스트캠퍼스 프론트엔드 강의 오리엔테이션
Taegon Kim
Progressive Web Apps
Progressive Web Apps
jungkees
[W3C HTML5 2017] Electron과 TypeScript로 만드는 Visual Studio Code, 그리고 ProtoPie
[W3C HTML5 2017] Electron과 TypeScript로 만드는 Visual Studio Code, 그리고 ProtoPie
양재동 코드랩
[124] 하이브리드 앱 개발기 김한솔
[124] 하이브리드 앱 개발기 김한솔
NAVER D2
앱 디자인 시작하기
앱 디자인 시작하기
Sangho Lee
Sencha touch2-sdk-tools-mac
Sencha touch2-sdk-tools-mac
Byoung Do Ahn
About Html5
About Html5
anak7
ant로 안드로이드 앱을 자동으로 빌드하자
ant로 안드로이드 앱을 자동으로 빌드하자
Sewon Ann
[월간금융] 스마트워크 필수활용팁(1)
[월간금융] 스마트워크 필수활용팁(1)
규문 최
웹 Front-End 실무 이야기
웹 Front-End 실무 이야기
JinKwon Lee
프로그래머로 부터 배우는 코딩 기술 (プログラマから学ぶコーディングテクニック)
프로그래머로 부터 배우는 코딩 기술 (プログラマから学ぶコーディングテクニック)
Mayuko Sekiya
Similar to Phonegap 3.3.0
(20)
Softcon_하재권_Only javascript의 하이브리드 앱서버 도전기
Softcon_하재권_Only javascript의 하이브리드 앱서버 도전기
구글앱엔진+스프링+스프링datajpa+메이븐
구글앱엔진+스프링+스프링datajpa+메이븐
Ionic으로 모바일앱 만들기 #1
Ionic으로 모바일앱 만들기 #1
Sencha touch2-sdk-tools-window
Sencha touch2-sdk-tools-window
Ionic project guide
Ionic project guide
[NEXT] Android 개발 경험 프로젝트 4일차 (Networking)
[NEXT] Android 개발 경험 프로젝트 4일차 (Networking)
센차 터치2 시작하기 | Devon 2012
센차 터치2 시작하기 | Devon 2012
구글앱엔진 스터디
구글앱엔진 스터디
Light Tutorial Django
Light Tutorial Django
패스트캠퍼스 프론트엔드 강의 오리엔테이션
패스트캠퍼스 프론트엔드 강의 오리엔테이션
Progressive Web Apps
Progressive Web Apps
[W3C HTML5 2017] Electron과 TypeScript로 만드는 Visual Studio Code, 그리고 ProtoPie
[W3C HTML5 2017] Electron과 TypeScript로 만드는 Visual Studio Code, 그리고 ProtoPie
[124] 하이브리드 앱 개발기 김한솔
[124] 하이브리드 앱 개발기 김한솔
앱 디자인 시작하기
앱 디자인 시작하기
Sencha touch2-sdk-tools-mac
Sencha touch2-sdk-tools-mac
About Html5
About Html5
ant로 안드로이드 앱을 자동으로 빌드하자
ant로 안드로이드 앱을 자동으로 빌드하자
[월간금융] 스마트워크 필수활용팁(1)
[월간금융] 스마트워크 필수활용팁(1)
웹 Front-End 실무 이야기
웹 Front-End 실무 이야기
프로그래머로 부터 배우는 코딩 기술 (プログラマから学ぶコーディングテクニック)
프로그래머로 부터 배우는 코딩 기술 (プログラマから学ぶコーディングテクニック)
Phonegap 3.3.0
1.
Phonegap 3.3.0 jungkun
2.
폰갭을 써보자!!
3.
폰갭 설치방법이 나와
있습니다.!!! http://phonegap.com/install/ 전 mac에서 깔게요...
4.
폰갭 설치 전
node.js 를 설치하세요.
5.
설치 명령어 sudo npm
install -g phonegap
6.
설치 끝!!!! 이제 프로젝트를
만들어 봅시다.
7.
$ phonegap create
appName
8.
자, 이제 API문서
뒤지면서 만들면 됩니다. docs.phonegap.com
9.
뭔가 만들어 봅시다.
10.
그냥 제가 다니는
회사 소개하는 앱 만들게요. bcloud.kr 이거 모바일 웹용으로...
11.
대충 이렇게 생긴
웹 페이지를 모바일 용으로 바꿀게요.
12.
모바일 웹은 대세인
bootstrap을 써보도록 하겠습니다. getbootstrap.com에서 다운로드 받을 수 있습니다.
13.
프로젝트를 생성하면 아래의
그림처럼 만들어 집니다. www라 는 폴더에 html + js + css의 조합으로 앱을 만들 수 있습니다.
14.
다운받은 bootstrap폴더에서 js파일과
css파일을 www아래에 js와 css폴 더를 만들어 넣어 둡니다. js폴더는 프로젝트 생성 시 자동으로 만들어져 있습니다.
15.
폰갭을 적용한 index.html페이지를
만들어 보겠습니다.
16.
폰갭 사용을 위한
js파일을 include하고 <body>태그에 onload를 사용해서 onLoad()함수를 호출 합니다. 폰갭 이벤트 리스너가 실행되면 이제 폰갭으로 디바이스를 제어할 수 있습니다.
17.
하지만!!! 디바이스의 원하는 기능을
제어하기 위해서는 plugin을 설치해야 합니다.
18.
앱에 지도를 표시해
주기 위해서 Geolocation plugin을 설치 해 보겠습니다.
19.
● ● $ phonegap plugin
add org.apache.cordova.geolocation 설치 됐는지 확인해 보겠습니다. 잘 됐습니다….
20.
이제 다 만들었다
치고!!! 빌드해 보죠.
21.
$phonegap build android
22.
23.
이제 이클립스를 열어서
빌드한 소스를 프로젝트 폴더로 import해 줍니다.
24.
25.
플러그인 설치 했을
경우
26.
작성한 html, js,
css
27.
이클립스로 안드로이드 빌드하면
끝납니다!
28.
apk 다운로드 http://14.63.161.108:8010/download/
29.
간단하게 폰갭을 사용해서
안드로이드 앱을 만들어 보았습니 다. 이전 버전에 비해 달라진 점은 plugin! 예전에는 이미 디바이스 제어를 위한 기능들이 다 있었는데 지금은 필요한 기능 을 설치해서 쓰는 방식으로 바뀜!
30.
끝. 감사합니다.
Download now