พัฒนา Android Apps กับ HTML และ JavaScript ใช้ Phonegap

ถ้าคุณไม่คุ้นเคยกับ Java แต่ต้องการที่จะพัฒนาแอพพลิเคสำหรับ Android แล้วคุณจะอยู่ที่สถานที่ที่เหมาะสม พัฒนาแอป Android โดยใช้ HTML, JS และ CSS ใช้ Phonegap

A+ A-

กวดวิชานี้จะเน้นเรื่องการพัฒนาที่ไม่คุ้นเคยกับ Java แต่ต้องการที่จะพัฒนาแอพพลิเคสำหรับ Android กวดวิชานี้คุณจะต้องมีพื้นฐาน HTML และ JavaScript ทักษะ ในการกวดวิชานี้เราจะมาสร้างแอป Android ง่ายโดยใช้ HTML และ JavaScript มันจะเป็นความเรียบง่าย `สวัสดี App world`

พัฒนา Android Apps โดยใช้ Phonegap

คุณจะได้รับคุ้นเคยกับ:

  • การติดตั้ง Eclipse และ SDK
  • การกำหนดค่าเครื่องของคุณสำหรับการพัฒนา Android
  • สร้างโครงการ Android โดยใช้ Eclipse
  • การกำหนดค่าของโครงการที่จะทำงานร่วมกับ Phonegap
  • ทำงานโครงการ Android Emulator ใช้ (หรือบนอุปกรณ์ Android ของจริง)
  • แก้จุดบกพร่องแอป

ในการกวดวิชานี้เราจะใช้สก์ท็อปที่ใช้ Windows 7 (64 บิต) พร้อมกับ Xperia L ทำงาน 4.1.2 นดรอยด์ (อุปกรณ์ Android เป็นตัวเลือก)

การตั้งค่า SDK Android

แรกดาวน์โหลด SDK Android จาก http://developer.android.com/sdk/index.html ดาวน์โหลดรุ่น approapriate นี้ (32 บิตหรือ 64 บิต)

ให้แน่ใจว่าคุณมีการติดตั้ง JDK 6 คุณสามารถดาวน์โหลดได้จากพวกเขา เว็บไซต์อย่างเป็นทางการ SDK ที่มาพร้อมแล้วกับ:

  • Eclipse IDE
  • ADT ปลั๊กอิน
  • เครื่องมือ SDK
  • เครื่องมือแพลตฟอร์ม Android
  • ล่าสุดแพลตฟอร์ม Android
  • ภาพระบบ Android สำหรับจำลอง

เมื่อคุณดาวน์โหลด SDK ได้ดึงมันใน `ไดเรกทอรี Downloads` ของคุณ คุณควรจะได้รับโครงสร้างไดเรกทอรีที่คล้ายกัน:

ไดเรกทอรีของแฟ้ม

คำว่า `ADT-กำ-Windows-x86_64-20130717` สกัดใน` ไดเรกทอรี Downloads` คำว่า `` eclipse` และ sdk` ไดเรกทอรีจะอยู่ในไดเรกทอรี ADT

การสร้างโครงการ Android

ตอนนี้เปิดตัวที่ตั้งอยู่ในไดเรกทอรี eclipse.exe คราส และคุณควรจะได้รับหน้าจอยินดีต้อนรับ:

ยินดีต้อนรับ Adt

ตอนนี้คลิกที่ปุ่ม `Android ใหม่ Application` ระบุชื่อสำหรับโปรแกรมประยุกต์ของคุณที่นี่เราจะสร้างแอพลิเคชันที่มีชื่อ `สวัสดี world` ให้ตั้งค่าเริ่มต้นในขณะที่มันอยู่ที่นี่ และคลิก Next

สร้างโปรแกรมประยุกต์

คราสจะสร้างโครงการในพื้นที่ทำงาน คลิกถัดไป

สร้างโปรแกรมประยุกต์การกำหนดค่า

ที่นี่คุณสามารถกำหนดค่าตัวเรียกใช้งานของคุณ คลิกถัดไป

สร้างโปรแกรมประยุกต์กำหนดค่าไอคอนเปิดตัว

ที่นี่คุณจะสามารถตั้งค่าหน้าจอกิจกรรม หน้าจอเลือกกิจกรรมที่เหมาะสมสำหรับโครงการของคุณ และคลิก Next

สร้างโปรแกรมประยุกต์ - สร้างกิจกรรม

คลิกที่เสร็จสิ้น และคุณได้สร้างโปรแกรมหุ่นยนต์ที่ประสบความสำเร็จ

สร้างโปรแกรมประยุกต์เสร็จสิ้น

การกำหนดค่าโครงการการทำงานกับ Phonegap:

PhoneGap เป็นกรอบฟรีและเปิดแหล่งที่ช่วยให้คุณสามารถสร้างแอพพลิเคมือถือโดยใช้ HTML, CSS และ JavaScript ดาวน์โหลดติดตั้ง Phonegap จาก ที่นี่ สารสกัดจากการตั้งค่าใน Phonegap `ไดเรกทอรี workspace` ของคุณ คุณควรจะมีโครงสร้างไดเรกทอรีที่คล้ายกัน -

โครงสร้าง PhoneGap ไดเรกทอรี

ในขณะนี้จาก PhoneGap-2.9.0 -> lib -> ไดเรกทอรีหุ่นยนต์คัดลอก `Cordova-2.9.0.jar` ไป` ไดเรกทอรี libs` ของ `โครงการ helloWorld` ของคุณ ตอนนี้คัดลอก `ไดเรกทอรี xml` จาก PhoneGap-2.9.0 ให้ผู้อื่น -> lib -> หุ่นยนต์ไปยัง` ไดเรกทอรี res` ของ `helloWorld` ของคุณ สร้าง `ไดเรกทอรี www` ใน` `assets` ของโครงการ helloWorld` ของคุณ คัดลอก `cordova.js` นี้` ไดเรกทอรี www`

ไฟล์คัดลอก

สร้าง `index.html` ใน` ไดเรกทอรี www` และวางรหัสต่อไปในนั้น

<html>
<head>
	<title>Hello world!</title>
	<script src="cordova.js" type="text/javascript"></script>
</head>
<body>
	<h1>Hello world!</h1>
</body>
</html>

คุณควรจะมีโครงสร้างแฟ้มต่อไปนี้:

โครงสร้างโครงการไฟล์

อัพเดท `` MainActivity.java` ในไดเรกทอรี src` ด้วยรหัสต่อไปนี้:

package com.example.helloworld;

import android.os.Bundle;
import android.app.Activity;
import android.view.Menu;

// import DroidGap
import org.apache.cordova.DroidGap;

public class MainActivity extends DroidGap {

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

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.main, menu);
        return true;
    }
    
}

เพิ่มแอตทริบิวต์ต่อไปนี้ในแฟ้ม `AndroidManifest.xml` ระหว่าง` ใช้-sdk` และแอตทริบิวต์ `application`

<supports-screens
	    android:largeScreens="true"
	    android:normalScreens="true"
	    android:smallScreens="true"
	    android:resizeable="true"
	    android:anyDensity="true"
	/>
	
	<uses-permission android:name="android.permission.CAMERA" />
	<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" />

แฟ้ม `AndroidManifest.xml` ของคุณควรมีลักษณะเช่นนี้

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.helloworld"
    android:versionCode="1"
    android:versionName="1.0" >

    <uses-sdk
        android:minSdkVersion="8"
        android:targetSdkVersion="17" />
	
	<supports-screens
	    android:largeScreens="true"
	    android:normalScreens="true"
	    android:smallScreens="true"
	    android:resizeable="true"
	    android:anyDensity="true"
	/>
	
	<uses-permission android:name="android.permission.CAMERA" />
	<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" />

    <application
        android:allowBackup="true"
        android:icon="@drawable/ic_launcher"
        android:label="@string/app_name"
        android:theme="@style/AppTheme" >
        <activity
            android:name="com.example.helloworld.MainActivity"
            android:label="@string/app_name" >
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

</manifest>

เรียกใช้โปรแกรมประยุกต์ของคุณ

ที่นี่เราจะได้รับการปรับใช้การประยุกต์ใช้ Android บนอุปกรณ์ Android ของจริง หากคุณกำลังมองหาที่จะปรับใช้โปรแกรมประยุกต์ในโปรแกรมจำลองกรุณาอ้างถึง http://developer.android.com/tools/devices/emulator.html

เชื่อมต่ออุปกรณ์ Android ของคุณเพื่อการพัฒนาของเครื่อง กรุณาตรวจสอบให้แน่ใจว่าคุณมีโปรแกรมควบคุมที่จำเป็น คุณสามารถดาวน์โหลดโปรแกรมควบคุมที่จำเป็นสำหรับการผลิตของคุณจาก http://developer.android.com/tools/extras/oem-usb.html เลือกการกำหนดค่าการเรียกใช้จาก `Run` ตัวเลือกในแถบชื่อเรื่อง ตอนนี้เรียกดูและเลือกโครงการ Android ตอนนี้คลิก Apply และ OK และคุณเสร็จสิ้น ตอนนี้คลิก Run และคุณควรจะได้รับแจ้งอุปกรณ์ของคุณ (ชื่ออุปกรณ์ของคุณ / รุ่นจะปรากฏ)

เลือกอุปกรณ์ Android

เลือกอุปกรณ์และคลิกตกลง และการประยุกต์ใช้ของคุณจะทำงานบนอุปกรณ์ Android ของคุณ

ภาพหน้าจอ

คุณสามารถดาวน์โหลดซอร์สโค้ดของแอปตัวอย่าง ที่นี่ กรุณาแจ้งให้เรารู้ว่าถ้าคุณกำลังเผชิญปัญหาใด ๆ โดยการแสดงความคิดเห็นด้านล่าง

Ads

หุ้น

เมื่อเร็ว ๆ นี้

ทางเลือกที่ดีที่สุดอูบุนตูที่มองหาถ้าคุณเป็นคนรักของลินุกซ์

ขอเริ่มต้นโดยได้รับคุ้นเคยกับบางสิ่งบางอย่าง; พื้นฐาน แต่บิ...

วิธีการเพิ่มลายเซ็นใน Gmail กล่องขาเข้า - เพิ่มลายเซ็นของ Google ใน Gmail

กล่องขาเข้าโดย Google เป็นหนึ่งในสิ่งที่ดีที่สุดของ Google ...

Weekly Tech News: Nokia, Google และนินเทน

สวัสดีครับทุกคนก็ศุกร์ 3 มีนาคมและเช่นเดียวเสมอเรากลับมาพร้...

โครงการ Pi ราสเบอร์รี่สำหรับมือใหม่ - คุณสามารถทำอะไรกับราสเบอร์รี่ Pi

ราสเบอร์รี่ Pi เป็นชุดของพลังงานต่ำคอมพิวเตอร์บอร์ดเดียวที่...

VPN ที่ดีที่สุดสำหรับ Android 2017 - วิธีการใช้ VPN ใน Android

ไปเป็นวันเมื่อ VPNs เพียงสำหรับเทคโนโลยี savvies และแฮกเกอร...

ความคิดเห็น