PhoneGap. Как собрать свое приложение? Часть 2

В данном уроке, мы создадим приложение для Андроида используя PhoneGap.Изначально создадим структуру проекта, запрограммируем дизайн, соберем и отправим на устройство.

Шаг 0. Введение

Данный урок предполагает что у вас уже есть настроенная среда для разработки. Детально, как настроить свою ОС описано в первой части урока PhoneGap. Установка и конфигурация. Часть 1. Нашей основной задачей будет разобраться как работать с данной технологией для создания приложения на примере. Напоминаю, что внутри у нас будет локальный сайт.

 

Шаг 1. Постановка цели

Пришло время решить что будем делать. Настраивать мы уже умеем и кое-что даже знаем. Пора бы сделать что-то полезное.

Посоветовавшись с Александром мы решили что покажем как создать приложение, которое будет показывать погоду. Погоду будем подгружать с удаленного сервера, естественно. В конце урока, мы получим достаточно интересное приложение.

На данном шаге, мы создадим наше приложение,  его каркас, сделаем вывод погоды и навигацию. После чего построим приложение и отправим его на устройство.

 

Шаг 2. Проектирование приложения

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

Screenshot_6

 

Шаг 3. Создание View

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

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

phonegap create WeatherChecker

Дальше, открываем в этом месте проводник, там должна появиться директория WeatherChecker. Заходим в нее и открываем папку /www. Внутри именно и находиться наш сайт. Здесь мы и будем заниматься тем, чтобы построить вид и добавить нужный функционал.

Открываем index.html и начинаем создавать нашу главную страничку. Тут я уже не буду вдаваться в подробности. Здесь используется обычная HTML разметка, без использования дополнительных библиотек.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="format-detection" content="telephone=no" />
        <!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
        <link rel="stylesheet" type="text/css" href="css/index.css" />
        <title>Погода</title>
    </head>
    <body onLoad=startTime()>
        <div id="clock" class="weather-clock">
        </div>
		<div id="weather-icon">

		</div>
		<div class="weather-bottom">
			<div class="weather-info">
				<table width="100%">
					<tr>
						<td>Температура</td>
						<td>20</td>
					</tr>
					<tr>
						<td>Влажность</td>
						<td>80%</td>
					</tr>
					<tr>
						<td>Давление</td>
						<td>1400</td>
					</tr>
					<tr>
						<td>Направление ветра</td>
						<td>ЮГ</td>
					</tr>
					<tr>
						<td>Скорость ветра</td>
						<td>6м/с</td>
					</tr>
				</table>
			<div>

			<div class="weather-city">
				Николаев
			</div>
		</div>

        <script type="text/javascript" src="phonegap.js"></script>
        <script type="text/javascript" src="js/index.js"></script>
		<script type="text/javascript" src="js/core.js"></script>
        <script type="text/javascript">
            app.initialize();
        </script>
    </body>
</html>

Дальше, модифицируем стили, которые были созданы по умолчанию, а также, добавляем необходимые для работы. Меняем цвет фона и отключаем градиент для странички. Убираем лишнее. Я оставил только стиль для body и  описал только нужные стили:

* {
    -webkit-tap-highlight-color: rgba(0,0,0,0); /* make transparent link selection, adjust last value opacity 0 to 1.0 */
}

body {
    -webkit-touch-callout: none;                /* prevent callout to copy image, etc when tap to hold */
    -webkit-text-size-adjust: none;             /* prevent webkit from resizing text to fit */
    -webkit-user-select: none;                  /* prevent copy paste, to allow, change 'none' to 'text' */
    background: #626465;	
    background-attachment:fixed;
    font-family:'HelveticaNeue-Light', 'HelveticaNeue', Helvetica, Arial, sans-serif;
    font-size:12px;
    height:100%;
    margin:0px;
    padding:0px;
    text-transform:uppercase;
    width:100%;
}

.weather-clock {
	height: 50px;
	font-size: 70px;
	font-weight: bold;
	color: #d5d5d5;
	text-align: center;
	margin-top: 30px;
}

#weather-icon{
	margin-top: 44px;
	background: url(../weather-icons/sunny.png) no-repeat center;
	background-size: 256px;
	height: 256px;
	transparent: none
}

.weather-info {
	margin-top: 40px;
	font-size: 25px;
	color: #d5d5d5;
	text-transform: none;
}

.weather-city {
	margin-top: 30px;
	font-size: 40px;
	text-align: center;
	color: #9c9c9c;
	text-transform: none;	
}

.weather-bottom {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 10px;
}

background: url(../weather-icons/sunny.png) no-repeat center; — здесь мы подключаем нашу иконку, для погоды. Так что копируем внутрь нашего приложения, по указанному пути наши графические файлы.

Удаляем папку img. Она нам не понадобиться. У ней находиться лого для приложения по умолчанию.

Изначально, сделаем наше приложение только портретным. Так что идем по пути /platforms/android/ и открываем AndroidManifest.xml. В нем, в теге activity добавляем android:screenOrientation=»portrait».

<activity android:configChanges="orientation|keyboardHidden|keyboard|screenSize|locale" 
android:label="@string/app_name" 
android:name="HelloWorld" 
android:screenOrientation="portrait" 
android:theme="@android:style/Theme.Black.NoTitleBar">

Подпишем наше приложение по своему. Заходим в папку www и открываем там файл config.xml. Будем менять только пару слов в начальных строчках. Название нашего приложения внутри тега: <name>WeatherChecker</name>

<?xml version='1.0' encoding='utf-8'?>
<widget id="com.kriloleg" version="1.0.0" xmlns="http://www.w3.org/ns/widgets" xmlns:gap="http://phonegap.com/ns/1.0">
    <name>WeatherChecker</name>
    <description>
        Hello World sample application that responds to the deviceready event.
    </description>
    <author email="sauthor@mail.com" href="http://author.site">
        Author
    </author>
...

И как завершение в работе с графической частью, предлагаю поменять иконку на свою. Для этого идем по пути platforms/android/res/ и в директориях drawable меняем icon.png на свой. Внимательно смотрите за разрешением.

 

Шаг 4. Создание оффлайн функционала

У нас в приложении, по задумке, есть часы. Так что стоит написать маленький скрипт, который будет отображать часы. Наши скрипты, для приложения, будут находиться в файле core.js.

function startTime() {
	var today=new Date();
	var h=today.getHours();
	var m=today.getMinutes();
	var s=today.getSeconds();

	m=checkTime(m);
	s=checkTime(s);
	document.getElementById('clock').innerHTML=h+":"+m+":"+s;
	t=setTimeout(function(){startTime()},500);
};

function checkTime(i){
	if (i<10){
		i="0" + i;
	}
	return i;
};

 

Шаг 5. Строим наше приложение

После того, как мы настроили первичный вид, остается построить наше приложение и отправить его на устройство для теста. Переходим в консоли в корень нашего проекта, подключаем телефон и набираем команду:

phonegap run android

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

screenshot-1392406946752

В следующем уроке, мы подключим наше приложение к серверу и будем получать и выводить от туда погоду в нашем приложении.  Спасибо за внимание. Жду Вас в следующей части.

Урок создан: 15 февраля 2014 | Просмотров: 18163 | Автор: Олег Криль | Правила перепечатки


Добавить комментарий

Добавить комментарий

Ваш e-mail не будет опубликован.

Комментарии:

  • 12 февраля 2015 в 12:02

    hellomoto

    config.xml лежит не в www, по крайней мере у меня. Снабдите пожалуйста первую и вторую часть ссылками на следующую статью, а то не очень удобно. А в общем большое спасибо)

  • 28 февраля 2016 в 12:23

    qweqew

    http://devcolibri.com/4016 следующая часть

  • 06 июня 2016 в 15:58

    Анатолий

    После комманды phonegap run android просто запускается эмулятор, приложения нигде нет. Пробую запустить на устройстве:
    C:\Users\site\my-app>phonegap run android —device=0123456789ABCDEF
    (node:4752) fs: re-evaluating native module sources is not supported. If you are using the graceful-fs module, please update it to a more recent version.
    [phonegap] executing ‘cordova run android —device=0123456789ABCDEF’…
    Error: Unknown platforms: 0123456789ABCDEF