Разработка Android-приложений с помощью HTML и JavaScript Использование PhoneGap

Если вы не знакомы с Java, но хотите разрабатывать приложения для Android, то вы на правильном месте. Разработка Android приложений с использованием HTML, JS и CSS с помощью PhoneGap.

A+ A-

Этот учебник ориентирован на разработчиков, которые не знакомы с Java, но хотят разрабатывать приложения для Android. Этот урок требует от вас , чтобы иметь базовые HTML, JavaScript и навыки. В этом уроке мы будем создавать простое приложение для Android, с помощью HTML и JavaScript. Это будет простой `Hello world` приложение.

Разработка Android-приложений с помощью PhoneGap

Вы познакомитесь с:

  • Установка Eclipse, и SDK.
  • Настройка устройства для разработки Android.
  • Создание проекта с помощью Android Eclipse.
  • Настройка проекта для работы с PhoneGap.
  • Запуск Android проекта с помощью эмулятора (или на реальном устройстве Android).
  • Отладка приложения.

В этом уроке мы будем использовать настольный компьютер под управлением Windows 7 (64 бит) наряду с Xperia L работает Android 4.1.2 (Android устройства не является обязательным).

Настройка Android SDK

Сначала скачайте Android SDK от http://developer.android.com/sdk/index.html , скачать approapriate версию (32 бит или 64 бит).

Убедитесь, что у вас есть JDK 6 установлен. Вы можете скачать с их официального сайта . SDK поставляется уже в комплекте с:

  • Eclipse IDE
  • ADT Plugin
  • SDK Tools
  • инструменты платформы Android
  • Новые Android-платформы
  • образ системы Android для эмулятора

После того, как вы загрузили SDK, распаковать его в каталог `Downloads`. Вы должны получить структуру, аналогичную структуре каталогов:

Каталог файлов

`ADT-пачке окна-x86_64-20130717` извлекается в каталог` Downloads`. В `` eclipse` и sdk` каталоги будут находиться в каталоге ADT.

Создание проекта Android

Теперь запустите eclipse.exe находится в каталоге Eclipse. И вы должны получить экран приветствия:

Добро пожаловать Adt

Теперь нажмите на кнопку `Новый Android Application`. Укажите имя для вашего приложения, здесь мы создадим приложение с именем `привет world`. Не изменяя настройки по умолчанию, как здесь. И нажмите кнопку Далее.

Создание приложения

Eclipse, создаст проект в рабочем пространстве. Нажмите "Далее.

Создание конфигурации приложения

Здесь вы можете настроить пусковой установки для вашего приложения. Нажмите "Далее.

Создание приложений Настройка запуска Icon

Здесь вы сможете настроить экран активности. Выберите соответствующий экран активности для вашего проекта. И нажмите кнопку Далее.

Создать приложение - Создать активность

Нажмите на Finish. И вы успешно создали приложение для Android.

Создание приложения Готово

Настройка проекта для работы с PhoneGap:

PhoneGap является свободным и открытым исходным кодом, база позволяет создавать мобильные приложения с использованием HTML, CSS и JavaScript. Загрузите настройки PhoneGap от здесь . Извлечение установки PhoneGap в вашем файле `workspace` каталога. Вы должны иметь аналогичную структуру каталогов -

Структура PhoneGap Справочник

Теперь из PhoneGap-2.9.0 -> Lib -> Android каталог скопировать `Cordova-2.9.0.jar` к` libs` директории вашего проекта `helloWorld`. Теперь скопируйте каталог `xml` из PhoneGap-2.9.0 -> Lib -> Android в` 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 из `опции Run` строки заголовка. Теперь Вы можете просмотреть и выбрать Android проекта. Теперь нажмите кнопку Применить и ОК. И вы сделали. Теперь нажмите RUN и вам будет предложено ваше устройство. (Ваше имя устройства / модель появится)

Android-устройства Выберите

Выберите устройство и нажмите кнопку OK. И ваше приложение будет работать на вашем Android устройстве.

Скриншот

Вы можете скачать исходный код для образца приложения здесь . Пожалуйста, дайте нам знать, если вы столкнулись любые проблемы, комментируя ниже.

Ads

Поделиться

последний

Лучшие альтернативы Ubuntu искать, если вы Linux Lover

Давайте начнем знакомство с чем-то; простой, но немного не ...

Как добавить подпись в Gmail Входящие - Добавить подпись Google в Gmail

Входящие с помощью Google была одна из лучших вещей, которы...

Еженедельно Tech News: Nokia, Google и Nintendo

Привет всем, это Пятница, 3 марта, и так же, как всегда, мы...

Raspberry Pi Проекты для начинающих - Что вы можете сделать с Raspberry Pi

Raspberry Pi представляет собой серию малой мощности, одноп...

Лучший VPN для Android 2017 года - Как использовать VPN в Android

Прошли те дни, когда виртуальные частные сети были только д...

Комментарии