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

 

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

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

 

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

 

 

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

 

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

 

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

 

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

 

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

 

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

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

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

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

1
phonegap create WeatherChecker

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
<!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 и  описал только нужные стили:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
* {
    -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».

1
2
3
4
5
<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>

1
2
3
4
5
6
7
8
9
10
<?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="Этот адрес электронной почты защищён от спам-ботов. У вас должен быть включен JavaScript для просмотра." href="http://author.site">
        Author
    </author>
...

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

 

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
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. Строим наше приложение

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

1
phonegap run android

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

http://devcolibri.com/3990