관련 파일.zip

 

안드로이드용 웹앱을 만들어 보겠습니다. 물론 Phonegap을 사용합니다.

 

1. Phonegap.com에서 최신버전을 구합니다.

    너무 최신버전인 경우에는 cordova.js와 cordova.jar파일일 있어야 하는데 cordova.jar 파일이 없기도 합니다.

    압축을 풀어 놓습니다.

 

2. 이클립스로 프로젝트를 하나 만들고 아래와 같이 준비를 합니다.

    - libs 폴더 밑에 cordova.jar 파일 복사해 넣기

    - xml폴더를 res 폴더 밑에 복사해 넣기

    - assets/www 폴더를 만들고 cordova.js 파일을 넣고 index.html 파일 만들어 넣기

 

3. index.html은 다음과 같을 수 있음

 

   <!DOCTYPE HTML>
   <html>
     <head>
       <title>Cordova</title>
       <script type="text/javascript" charset="utf-8" src="cordova-2.1.0.js"></script>
     </head>
     <body>
       <h1>Hello World</h1>
     </body>
   </html>

 

4. AndroidManifest.xml 수정하기

                            :

    <uses-sdk
        android:minSdkVersion="8"
        android:targetSdkVersion="15" />

    <!-- PhoneGap 을 위한 추가 - start -->
    <supports-screens
      android:largeScreens="true"
      android:normalScreens="true"
      android:smallScreens="true"
      android:resizeable="true"
      android:anyDensity="true" />
 
      <uses-permission android:name="android.permission.VIBRATE" />
      <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
      <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
      <uses-permission android:name="android.permission.ACCESS_LOCATION_EXTRA_COMMANDS" />
      <uses-permission android:name="android.permission.READ_PHONE_STATE" />
      <uses-permission android:name="android.permission.INTERNET" />
      <uses-permission android:name="android.permission.RECEIVE_SMS" />
      <uses-permission android:name="android.permission.RECORD_AUDIO" />
      <uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />
      <uses-permission android:name="android.permission.READ_CONTACTS" />
      <uses-permission android:name="android.permission.WRITE_CONTACTS" />
      <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
      <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" /> 
      <uses-permission android:name="android.permission.GET_ACCOUNTS" />
      <uses-permission android:name="android.permission.BROADCAST_STICKY" />
     <!-- PhoneGap 을 위한 추가 - end -->
 
    <application
        android:icon="@drawable/ic_launcher"
        android:label="@string/app_name"
        android:theme="@style/AppTheme" >
        <activity
            android:name=".MainActivity"
            android:label="@string/title_activity_main" 
            android:configChanges="orientation|keyboardHidden|keyboard|screenSize|locale">
            <intent-filter>
                    :

 

5. MainActivity.java 수정

   - 아래 public은 처음에 protected로 되어 있었다.

 

   import org.apache.cordova.*;

 

   public class MainActivity extends DroidGap {

      @Override
      public void onCreate(Bundle savedInstanceState) {
          super.onCreate(savedInstanceState);
          super.loadUrl("file:///android_asset/www/index.html");
      }
   }

 

6. 여기까지만 해도 되겠지만 jQuery Mobile라이브러리 파일을 추가하자.

   - http://jquerymobile.com/download에서 파일(jquery.mobile-1.4.0)을 다운로드 받고 아래 3개의 파일을 /assets/www안에 다음파일들을 복사해 넣자.

      - jquery.mobile-1.4.0.min.css

      - jquery-1.10.1.min.js

      - jquery.mobile-1.4.0.min.js

 

그리고 아래처럼 사용하면 되겠다.

<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>jQuery Mobile</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="jquery.mobile-1.4.0.min.css" />
<script src="jquery-1.10.1.min.js"></script>
<script src="jquery.mobile-1.4.0.min.js"></script>

</head>
<body>

     :

 

 

 

 

 

 

저작자 표시 비영리 변경 금지
신고

'안드로이드 > 안드로이드 강좌' 카테고리의 다른 글

웹앱 만들기 1  (0) 2014.01.10
안드로이드 개발 시작하기  (0) 2013.12.18
이클립스 단축키 (모든 단축키 모음)  (0) 2011.12.07
안드로이드 앱 개발 - 스토리보드  (0) 2011.11.14
Text Align  (0) 2011.10.26
이클립스 사용하기  (0) 2011.10.12
Posted by 천왕지짐


티스토리 툴바