Мобильные веб-сайты прошли долгий путь, но если вы хотите в полной мере использовать аппаратное обеспечение смартфона или попасть в список iTunes App Store, вам необходимо скомпилировать код. В этом уроке мы покажем вам, как создать мобильное веб-приложение с внешним видом iPhone с помощью jQTouch, а затем превратить его в собственное приложение iPhone с помощью Phonegap. Нет необходимости в C-C.
Учебное пособие
- Программа : Phonegap
- Версия : 0.80
- Сложность: Средняя
- Расчетное время завершения: 1 час
Требования
Для завершения этого урока вам понадобится следующее:
- Mac OS X
- XCode (входит в Mac OS X, но устанавливается отдельно)
- iPhone SDK (требуется регистрация)
- PhoneGap 0,80
Введение в PhoneGap
PhoneGap — это платформа с открытым исходным кодом, которая может превратить любое веб-приложение в нативное приложение для iPhone, BlackBerry и Android. Это тянет
этот трюк, запустив ваш веб-код в UIWebView , встроенный экземпляр Safari без
Панели инструментов и кнопки автономного приложения Safari. Затем PhoneGap расширяет эту базовую функциональность, сопоставляя функции
iPhone SDK к объектам JavaScript, которые вы можете вызывать в своем веб-коде, чтобы вы могли легко добавлять такие функции, как GPS, камера, контакты, вибрация,
SQLLite и поддержка акселерометра. А когда вы готовы распространять свое приложение, PhoneGap 0.80 одобрен Apple !
В дистрибутив PhoneGap включено все, что вам нужно для создания и запуска приложения для iPhone. Включенный проект XCode в комплекте
с примером кода, показывающим, как использовать многие встроенные функции, и всеми вспомогательными файлами, необходимыми для компиляции приложения, и
запустите его в iPhone Simulator или на вашем телефоне.
Сборка и запуск приложения для iPhone
Чтобы проверить, готов ли ваш Mac для запуска кода, давайте попробуем пример проекта, включенного в PhoneGap.
Сначала откройте папку iPhone и дважды щелкните PhoneGap.xcodeproj :
Это должно открыть XCode с загруженным проектом. Хотя здесь много чего происходит, нам, как веб-разработчикам, нужно только
позаботиться о папке www . Он содержит веб-код, который станет интерфейсом и логикой
наше приложение.
Теперь, когда мы загрузили наш проект, пришло время принять его к сведению. В комплект поставки iPhone SDK входит симулятор iPhone, который
подключается прямо к XCode. Все, что нам нужно сделать, это нажать «Построить и запустить».
Создание вашего веб-приложения
Для этого урока я собрал простое приложение с нативным чувством, которое отображает мой канал Tumblr со слайдом «О программе».
экран. Это приложение основано на превосходной инфраструктуре jQTouch , библиотеке пользовательского интерфейса на основе jQuery.
элементы, анимации и расширения, которые позволяют быстро разрабатывать мобильные веб-приложения с естественным внешним видом и интерфейсом. Давайте быстро посмотрим
при составлении веб-приложения с помощью jQTouch, прежде чем мы импортируем это приложение в наш проект Phonegap.
Сначала мы загружаем jQuery, jQTouch и некоторые связанные файлы тем в тег <head>; наши стили будут выглядеть так
родные виджеты пользовательского интерфейса iPhone:
|
01
02
03
04
05
06
07
08
09
10
11
|
<head>
<script src=»jqtouch/jquery.1.3.2.min.js» type=»application/javascript» charset=»utf-8″></script>
<script src=»jqtouch/jqtouch.min.js» type=»application/x-javascript» charset=»utf-8″></script>
<style type=»text/css» media=»screen»>@import «jqtouch/jqtouch.min.css»;</style>
<style type=»text/css» media=»screen»>@import «jqtouch/themes/apple/theme.min.css»;</style>
<style type=»text/css» media=»screen»>@import «master.css»;</style>
<script type=»text/javascript»>
$.jQTouch();
</script>
</head>
|
Затем мы создаем скелет нашего приложения:
|
1
2
3
4
5
6
7
8
|
<body id=»stage» class=»theme»>
<div id=»home» class=»current»>
</div>
<div id=»about»>
</div>
</body>
|
jQTouch берет любого прямого потомка тега <body> и преобразует его в полноэкранный «вид». Это означает, что каждый
<div> в приведенном выше коде займет весь экран, а смена экранов означает переключение между <div> с помощью ссылки
им по их id :
|
1
|
<a href=»#about»>About</a>
|
JQTouch включает в себя множество интересных способов перехода между этими экранами, и их можно включить, просто добавив классы CSS.
Например, чтобы превратить эту ссылку на страницу «О программе» в слайд-переход, добавьте следующее:
|
1
|
<a class=»slideup» href=»#about»>About</a>
|
Затем на самой странице «О программе» мы добавляем кнопку, чтобы «закрыть» панель, сдвинув ее назад:
|
1
|
<a href=»#» class=»grayButton goback»>Close</a>
|
На экране по умолчанию мы добавим панель инструментов с вышеупомянутой кнопкой «О программе» и место для встраивания канала Tumblr:
|
1
2
3
4
5
6
7
8
9
|
<div class=»toolbar»>
<h1>Home</h1>
<a class=»button slideup» href=»#about»>About</a>
</div>
<h2>Live Stream</h2>
<div id=»timeline»>
<script type=»text/javascript» src=»http://YOUR_TUMBLR_USERNAME.tumblr.com/js»>
</script>
</div>
|
Наконец, несколько CSS-классов, которые будут стилизовать вывод канала Tumblr в соответствии с нашей темой «Apple»:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
|
ol {
color: black;
background: #fff;
border: 1px solid #B4B4B4;
font: bold 17px Helvetica;
padding: 0;
margin: 15px 10px 17px 10px;
-webkit-border-radius: 8px;
}
ol > li {
color: #666;
border-top: 1px solid #B4B4B4;
list-style-type: none;
padding: 10px 25px 10px 25px;
}
|
Это оно! После добавления некоторого контента на нашу страницу «О нас» мы заменим файлы в папке www нашего проекта PhoneGap
с нашим новым веб-приложением и запустите его снова:
Вывод
Наше веб-приложение теперь скомпилировано и может быть упаковано для распространения в iTunes Store. Это простое начало, но
за очень короткое время у нас появилось нативное приложение, которое выглядит как собственное Apple, работает на любом iPhone и может быть расширено для различных целей.
В следующих руководствах я расскажу, как расширить ваше приложение с поддержкой камер и геолокации. А пока можно
Узнайте больше о PhoneGap в PhoneGap Wiki . Документация не полностью оформлена,
так что после долгой охоты вы можете копаться в git-репозиториях.
Чтобы отправить приложение в iTunes App Store, зарегистрируйтесь в программе для разработчиков iPhone .
После регистрации вам будут предоставлены инструменты для цифровой подписи и отправки приложения в iTunes Store.
Написать Плюс Учебник
Знаете ли вы, что вы можете заработать до 600 долларов за написание учебника PLUS и / или скринкаст для нас? Мы ищем подробные и хорошо написанные учебники по HTML, CSS, PHP и JavaScript. Если у вас есть такая возможность, пожалуйста, свяжитесь с Джеффри по адресу [email protected].
Обратите внимание, что фактическая компенсация будет зависеть от качества окончательного урока и скринкаста.
- Подпишитесь на нас в Твиттере или подпишитесь на ленту Nettuts + RSS для получения лучших учебных материалов по веб-разработке.