как написать приложение на телефон

Как сделать приложение для Android самостоятельно

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

как написать приложение на телефон. Смотреть фото как написать приложение на телефон. Смотреть картинку как написать приложение на телефон. Картинка про как написать приложение на телефон. Фото как написать приложение на телефон

как написать приложение на телефон. Смотреть фото как написать приложение на телефон. Смотреть картинку как написать приложение на телефон. Картинка про как написать приложение на телефон. Фото как написать приложение на телефон

Язык программирования для мобильной разработки на Android очень простой — это Java. Сейчас Google активно продвигает Kotlin как язык, который сможет заменить Java. Приложения пишут и на C++.

Создание простейшего приложения состоит из нескольких этапов:

А пока мы описываем азы, студенты курса «Профессия Мобильный разработчик» уже получают деньги за свои приложения.

как написать приложение на телефон. Смотреть фото как написать приложение на телефон. Смотреть картинку как написать приложение на телефон. Картинка про как написать приложение на телефон. Фото как написать приложение на телефон

Пишет про разработку в Skillbox. Работал главным редактором сайта «Хабрахабр», ведет корпоративные блоги.

Необходимые инструменты

Первым делом установите программу Android Studio. Это официальная среда разработки (IDE) для Android, она работает на Windows, macOS и Linux. Хотя при разработке программ для Android можно использовать и другие среды, кроме Android Studio.

как написать приложение на телефон. Смотреть фото как написать приложение на телефон. Смотреть картинку как написать приложение на телефон. Картинка про как написать приложение на телефон. Фото как написать приложение на телефон

Если на компьютере не установлены Android SDK и другие компоненты, то Android Studio автоматически скачает их. Android SDK — это среда программирования, в которую входят библиотеки, исполняемые файлы, скрипты, документация и т.д.

как написать приложение на телефон. Смотреть фото как написать приложение на телефон. Смотреть картинку как написать приложение на телефон. Картинка про как написать приложение на телефон. Фото как написать приложение на телефон

Полезно установить и эмулятор Android, чтобы запускать и тестировать приложения. Эмулятор поставляется в комплекте с Android Studio.

как написать приложение на телефон. Смотреть фото как написать приложение на телефон. Смотреть картинку как написать приложение на телефон. Картинка про как написать приложение на телефон. Фото как написать приложение на телефон

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

Из чего состоит приложение
на Android

Android-приложение состоит из четырёх компонентов. Каждый компонент — это точка входа, через которую система или пользователь может получить доступ.

Теперь попробуем сделать своё приложение для Android.

Создаём Android-приложение
в Android Studio

Шаг 1

Выбираем название приложения, домен компании, путь к проекту и название пакета. Указываем, включить ли поддержку опциональных языков программирования C++ и Kotlin.

Шаг 2

Задаём одну или несколько целевых платформ для сборки. Для этого используется SDK и AVD, менеджер виртуальных устройств Android. Инструмент позволяет устанавливать в SDK пакеты, которые поддерживают несколько версий ОС Android и несколько уровней API (интерфейсов программирования приложений).

как написать приложение на телефон. Смотреть фото как написать приложение на телефон. Смотреть картинку как написать приложение на телефон. Картинка про как написать приложение на телефон. Фото как написать приложение на телефон

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

Шаг 3

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

как написать приложение на телефон. Смотреть фото как написать приложение на телефон. Смотреть картинку как написать приложение на телефон. Картинка про как написать приложение на телефон. Фото как написать приложение на телефон

Шаг 4

После нескольких минут сборки Android Studio открывает интерфейс IDE. Здесь три основных момента.

Источник

Пишем первое приложение для Android

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

Статья затронет весь цикл разработки приложения. Вместе мы напишем простенькую игру “Крестики-Нолики” с одним экраном (в ОС Android это называется Activity).

Отсутствие опыта разработки на языке Java не должно стать препятствием в освоении Android. Так, в примерах не будут использоваться специфичные для Java конструкции (или они будет минимизированы на столько, на сколько это возможно). Если Вы пишете, например, на PHP и знакомы с основополагающими принципами в разработке ПО, эта статья будет вам наиболее полезна. В свою очередь так как, я не являюсь экспертом по разработке на Java, можно предположить, что исходный код не претендует на лейбл “лучшие практики разработки на Java”.

Установка необходимых программ и утилит

Утилиты устанавливаются в определенном выше порядке. Ставить все перечисленные IDE смысла нет (разве только если Вы испытываете затруднения с выбором подходящей). Я использую IntelliJ IDEA Community Edition, одну из самых развитых на данный момент IDE для Java.

Запуск виртуального устройства

Запустив AVD Manager и установив дополнительные пакеты (SDK различных версий), можно приступить к созданию виртуального устройства с необходимыми параметрами. Разобраться в интерфейсе не должно составить труда.

как написать приложение на телефон. Смотреть фото как написать приложение на телефон. Смотреть картинку как написать приложение на телефон. Картинка про как написать приложение на телефон. Фото как написать приложение на телефон

Список устройств

как написать приложение на телефон. Смотреть фото как написать приложение на телефон. Смотреть картинку как написать приложение на телефон. Картинка про как написать приложение на телефон. Фото как написать приложение на телефон

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

Мне всегда не терпится приступить к работе, минимизируя подготовительные мероприятия, к которым относится создание проекта в IDE, особенно, когда проект учебный и на продакшн не претендует.

Итак, File->New Project:

как написать приложение на телефон. Смотреть фото как написать приложение на телефон. Смотреть картинку как написать приложение на телефон. Картинка про как написать приложение на телефон. Фото как написать приложение на телефон

как написать приложение на телефон. Смотреть фото как написать приложение на телефон. Смотреть картинку как написать приложение на телефон. Картинка про как написать приложение на телефон. Фото как написать приложение на телефон

как написать приложение на телефон. Смотреть фото как написать приложение на телефон. Смотреть картинку как написать приложение на телефон. Картинка про как написать приложение на телефон. Фото как написать приложение на телефон

как написать приложение на телефон. Смотреть фото как написать приложение на телефон. Смотреть картинку как написать приложение на телефон. Картинка про как написать приложение на телефон. Фото как написать приложение на телефон

как написать приложение на телефон. Смотреть фото как написать приложение на телефон. Смотреть картинку как написать приложение на телефон. Картинка про как написать приложение на телефон. Фото как написать приложение на телефон

как написать приложение на телефон. Смотреть фото как написать приложение на телефон. Смотреть картинку как написать приложение на телефон. Картинка про как написать приложение на телефон. Фото как написать приложение на телефон

как написать приложение на телефон. Смотреть фото как написать приложение на телефон. Смотреть картинку как написать приложение на телефон. Картинка про как написать приложение на телефон. Фото как написать приложение на телефон

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

Структура проекта

На предыдущем скриншоте видна структура проекта. Так как в этой статье мы преследуем сугубо практические цели, заострим внимание лишь на тех папках, которые будем использовать в процессе работы. Это следующие каталоги: gen, res и src.

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

Папка res предназначена для хранения ресурсов, таких как картинки, тексты (в том числе переводы), значения по-умолчанию, макеты (layouts).

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

Первые строки

Как только создается Activity (экран приложения), вызывается метод onCreate(). IDE заполнила его 2 строчками:

Метод setContentView (равносильно this.setContentView) устанавливает xml-макет для текущего экрана. Далее xml-макеты будем называть «layout», а экраны — «Activity». Layout в приложении будет следующий:

Для этого приложения идеально подойдет TableLayout. Id можно присвоить любому ресурсу. В данном случае, TableLayout присвоен При помощи метода findViewById() можно получить доступ к виду:

Теперь необходимо реализовать метод buildGameField(). Для этого требуется сгенерировать поле в виде матрицы. Этим будет заниматься класс Game. Сначала нужно создать класс Square для ячеек и класс Player, объекты которого будут заполнять эти ячейки.

Square.java

Player.java

Все классы нашего приложения находятся в папке src.

Game.java

Инициализация Game в конструкторе KrestikinolikiActivity.

Метод buildGameField() класса KrestikinolikiActivity. Он динамически добавляет строки и колонки в таблицу (игровое поле):

В строке 8 создается объект, реализующий интерфейс View.OnClickListener. Создадим вложенный класс Listener. Он будет виден только из KrestikinolikiActivity.

Осталось реализовать логику игры.

Определение победителя

К. О. подсказывает, что в крестики-нолики выирывает тот, кто выстроет X или O в линию длиной, равной длине поля по-вертикали, или по-горизонтали, или по-диагонали. Первая мысль, которая приходит в голову — это написать методы для каждого случая. Думаю, в этом случае хорошо подойдет паттерн Chain of Responsobility. Определим интерфейс

Так как Game наделен обязанностью выявлять победителя, он реализует этот интерфейс. Настало время создать виртуальных «лайнсменов», каждый из которых будет проверять свою сторону. Все они реализует интерфейс WinnerCheckerInterface.

WinnerCheckerHorizontal.java

WinnerCheckerVertical.java

WinnerCheckerDiagonalLeft.java

WinnerCheckerDiagonalRight.java

Проинициализируем их в конструкторе Game:

Победителя проверяем после каждого хода. Добавим кода в метод onClick() класса Listener

Метод gameOver() реализован в 2-х вариантах:

Для Java, gameOver(Player player) и gameOver() — разные методы. Воспользовавшись Builder’ом Toast.makeText, можно быстро создать и показать уведомление. refresh() обновляет состояние поля:

Готово! Надеюсь, эта статья помогла Вам освоиться в мире разработки под OS Android. Благодарю за внимание!

Видео готового приложения

PS: статья была опубликована по просьбе комментаторов этого поста.

Источник

Создаем приложение для ANDROID быстро и просто

как написать приложение на телефон. Смотреть фото как написать приложение на телефон. Смотреть картинку как написать приложение на телефон. Картинка про как написать приложение на телефон. Фото как написать приложение на телефон

как написать приложение на телефон. Смотреть фото как написать приложение на телефон. Смотреть картинку как написать приложение на телефон. Картинка про как написать приложение на телефон. Фото как написать приложение на телефон

как написать приложение на телефон. Смотреть фото как написать приложение на телефон. Смотреть картинку как написать приложение на телефон. Картинка про как написать приложение на телефон. Фото как написать приложение на телефон

После успешной установки мы можем создать свой первый проект.

как написать приложение на телефон. Смотреть фото как написать приложение на телефон. Смотреть картинку как написать приложение на телефон. Картинка про как написать приложение на телефон. Фото как написать приложение на телефон

Мы можем его запустить в эмуляторе, который идет комплекте с Visual Studio нажав клавишу F5.

как написать приложение на телефон. Смотреть фото как написать приложение на телефон. Смотреть картинку как написать приложение на телефон. Картинка про как написать приложение на телефон. Фото как написать приложение на телефон

как написать приложение на телефон. Смотреть фото как написать приложение на телефон. Смотреть картинку как написать приложение на телефон. Картинка про как написать приложение на телефон. Фото как написать приложение на телефон

Приводим код к такому виду. Здесь мы создаем WebView контейнер который будет грузить локальный HTML файл, который находится в проекте в папке Assets.

как написать приложение на телефон. Смотреть фото как написать приложение на телефон. Смотреть картинку как написать приложение на телефон. Картинка про как написать приложение на телефон. Фото как написать приложение на телефон

как написать приложение на телефон. Смотреть фото как написать приложение на телефон. Смотреть картинку как написать приложение на телефон. Картинка про как написать приложение на телефон. Фото как написать приложение на телефон

как написать приложение на телефон. Смотреть фото как написать приложение на телефон. Смотреть картинку как написать приложение на телефон. Картинка про как написать приложение на телефон. Фото как написать приложение на телефон

По такому принципу можно создать приложение быстро и просто. Файлы html будут выглядеть одинаково на всех устройствах. То есть, Вы можете сделать приложения для Android и iOS с одинаковым интерфейсом. Не надо изучать сложные языки разметки, не надо изучать сложные макеты (сториборды) на iOS. Все можно сделать на HTML.

В идеале, вместо локальных файлов можно сделать загрузку со стороннего сайта. В этом случае Вы можете менять контент приложения без его обновления в AppStore и Google Play.

Q: Но как быть с функциями самой платформы? Пуш сообщения? Как взаимодействовать с самой платформой?

Все очень просто! JavaScript можно использовать для вызова функций Android:

как написать приложение на телефон. Смотреть фото как написать приложение на телефон. Смотреть картинку как написать приложение на телефон. Картинка про как написать приложение на телефон. Фото как написать приложение на телефон

как написать приложение на телефон. Смотреть фото как написать приложение на телефон. Смотреть картинку как написать приложение на телефон. Картинка про как написать приложение на телефон. Фото как написать приложение на телефон

Мы видим, что теперь программа ругается на Export так как не знает что это такое.

как написать приложение на телефон. Смотреть фото как написать приложение на телефон. Смотреть картинку как написать приложение на телефон. Картинка про как написать приложение на телефон. Фото как написать приложение на телефон

как написать приложение на телефон. Смотреть фото как написать приложение на телефон. Смотреть картинку как написать приложение на телефон. Картинка про как написать приложение на телефон. Фото как написать приложение на телефон

как написать приложение на телефон. Смотреть фото как написать приложение на телефон. Смотреть картинку как написать приложение на телефон. Картинка про как написать приложение на телефон. Фото как написать приложение на телефон

Так вы можете подключать библиотеки если вдруг Visual Studio ругается на что то.

Данная функция это показ всплывающей информации на экране. Она выполняется именно на платформе Андроида. То есть мы можем написать в HTML файле вызов функции Андроида. Получается полное дружелюбие двух платформ по JavaScript интерфейсу. Данные можно передавать туда сюда. Вызывать переход от одной активити в другую. Все через HTML + JavaScript.

Немного модифицируем файл login.htm:

как написать приложение на телефон. Смотреть фото как написать приложение на телефон. Смотреть картинку как написать приложение на телефон. Картинка про как написать приложение на телефон. Фото как написать приложение на телефон

как написать приложение на телефон. Смотреть фото как написать приложение на телефон. Смотреть картинку как написать приложение на телефон. Картинка про как написать приложение на телефон. Фото как написать приложение на телефон

Теперь при нажатии на кнопку HTML вызывается функция Toast андроида и выводиться сообщение пользователю.

Источник

Пишем своё первое приложение на Android

как написать приложение на телефон. Смотреть фото как написать приложение на телефон. Смотреть картинку как написать приложение на телефон. Картинка про как написать приложение на телефон. Фото как написать приложение на телефон

Предисловие

Подготовка к разработке

Установка среды разработки Eclipse

Тут всё просто. Идём в раздел Downloads на официальном сайте и качаем версию Classic. Далее просто распакуйте архив, куда вам хочется, я же решил это сделать в почетную директорию C:\Eclipse

Установка ADT плагина к Eclipse

Запускаем Eclipse, и открываем диалог установки плагина через меню Help → Install new software. В поле Work with вписываем адрес загрузки плагина dl-ssl.google.com/android/eclipse (если не получилось, то плагин можно скачать и установить вручную по ссылке http://developer.android.com/sdk/eclipse-adt.html), далее в таблице ниже появится Developer Tools, отмечаем его и идем далее.

как написать приложение на телефон. Смотреть фото как написать приложение на телефон. Смотреть картинку как написать приложение на телефон. Картинка про как написать приложение на телефон. Фото как написать приложение на телефон
После успешной установки, можно перезапустить среду Eclipse.

Установка среды для Java: JDK и JRE

Если у вас еще не установлены Java Development Kit (JDK) и Java Runtime Environment (JRE), то их необходимо установить. Сделать это можно на сайте Oracle. Скачайте и установите JDK и JRE.

как написать приложение на телефон. Смотреть фото как написать приложение на телефон. Смотреть картинку как написать приложение на телефон. Картинка про как написать приложение на телефон. Фото как написать приложение на телефон

Установка Android SDK

Дело осталось за малым — это скачать и установить свежий Android SDK. Это делается на сайте для Android разработчиков. Я лично установил SDK опять-таки в почётную директорию C:\Android. После этого необходимо добавить платформы и прочие дополнительные элементы SDK. Я добавил все доступные версии, так как планирую делать приложения и для ранних платформ, а также USB-драйвер и примеры приложений.

как написать приложение на телефон. Смотреть фото как написать приложение на телефон. Смотреть картинку как написать приложение на телефон. Картинка про как написать приложение на телефон. Фото как написать приложение на телефон

Подготовка к разработке завершена. Теперь следующий этап — создание приложения.

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

Перед тем как создать своё первое приложение, можно создать виртуальное Android-устройство, чтобы быстро тестировать на нём свой свеженаписанный софт. Вначале я хочу сказать вам несколько слов по поводу Android Virtual Device (AVD). Это виртуальный смартфон с ОС Android, на котором вы с легкостью сможете запускать созданную вами программу. Как можно заметить, преимущество Android Virtual Device состоит в том, что наглядно можно увидеть как будет работать Ваша программа на разных смартфонах с Android, а не покупать весь модельный ряд и тестировать приложение на каждом из них.

Приступим к созданию виртуального устройства Android. Следуем в меню по пути Window → Android SDK and AVD Manager.

как написать приложение на телефон. Смотреть фото как написать приложение на телефон. Смотреть картинку как написать приложение на телефон. Картинка про как написать приложение на телефон. Фото как написать приложение на телефон

Выбираем New в правой части окна, в появившемся окне вписываем имя виртуального устройства, платформу (допустим Android 2.1), размер карты памяти (допустим 512 Mb), тип дисплея (допустим HVGA). Затем жмем внизу на кнопку Create AVD.

Теперь создадим проект. Для этого идем по пути в меню File → New → Other, в появившемся списке Android → Android Project.

как написать приложение на телефон. Смотреть фото как написать приложение на телефон. Смотреть картинку как написать приложение на телефон. Картинка про как написать приложение на телефон. Фото как написать приложение на телефон

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

Подробно останавливаться на разметке элементов управления не буду, так как это всё достаточно подробно описано в мануале и вообще интуитивно понятно, особенно тому, кто имел дело с html/css-вёрсткой и/или разработкой в какой-либо визуальной среде (например, Delphi). Единственное, обратите внимание как я загрузил произвольное изображение в ImageView. В поле src указывается путь, начинающийся с символа @ и далее указываете адрес по дереву. В папке res я заблаговременно создал подпапку drawable и «закинул» туда логотип, а затем просто указал ImageView путь. Легко? По мне так очень.

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.widget.TextView;
import android.widget.Button;
import java.io.InputStreamReader;
import java.net.URL;
import java.net.URLConnection;
import java.util.regex.*;

public class UfaTermometr extends Activity
<

@Override
public void onCreate(Bundle savedInstanceState)
<
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
final Button button = (Button) findViewById(R.id.refrbutton);
button.setOnClickListener( new Button.OnClickListener() <
public void onClick(View v) // клик на кнопку
<
RefreshTemper();
>
>);

RefreshTemper(); // при запуске грузим температуру сразу
>;
//—————————————————————-
public String GetTemper(String urlsite) // фукция загрузки температуры
<
String matchtemper = «» ;
try
<
// загрузка страницы
URL url = new URL(urlsite);
URLConnection conn = url.openConnection();
InputStreamReader rd = new InputStreamReader(conn.getInputStream());
StringBuilder allpage = new StringBuilder();
int n = 0;
char [] buffer = new char [40000];
while (n >= 0)
<
n = rd.read(buffer, 0, buffer.length);
if (n > 0)
<
allpage.append(buffer, 0, n);
>
>
// работаем с регулярками
final Pattern pattern = Pattern.compile
( » [^-+0]+([-+0-9]+)[^ [^(а-яА-ЯёЁa-zA-Z0-9)]+([а-яА-ЯёЁa-zA-Z ]+)» );
Matcher matcher = pattern.matcher(allpage.toString());
if (matcher.find())
<
matchtemper = matcher.group(1);
>
return matchtemper;
>
catch (Exception e)
<

>
return matchtemper;
>;
//—————————————————————-
public void RefreshTemper()
<
final TextView tTemper = (TextView) findViewById(R.id.temper);
String bashtemp = «» ;
bashtemp = GetTemper( «be.bashkirenergo.ru/weather/ufa» );
tTemper.setText(bashtemp.concat( «°» )); // отображение температуры
>;
>
После того как приложение написано, можно уже его отлаживать и тестировать.

Запуск и тестирование приложения

Вспоминаем про нашу виртуальную машину и запускаем привычной кнопкой или менюшкой Run → Run

Вот такую картину мы можем затем созерцать:

как написать приложение на телефон. Смотреть фото как написать приложение на телефон. Смотреть картинку как написать приложение на телефон. Картинка про как написать приложение на телефон. Фото как написать приложение на телефон

Заключение

В заключении хотелось бы сказать, что безусловно разработка приложений для Android приятна, достаточно проста и интересна. Конечно, мы рассмотрели лишь верхушку айсберга, но я надеюсь, что в умах тех из вас, кто раньше не пробовал делать ничего подобного «загорелась лампочка» и вполне возможно, что когда-то вашим приложением будут пользоваться миллионы.

Источники, ссылки

UPD: Устранение возможных ошибок

ERROR: Unable to open class file C:\workspace\Test\gen\com\example\test\R.java: No such file or directory

emulator: ERROR: no search paths found in this AVD’s configuration. Weird, the AVD’s config.ini file is malformed. Try re-creating it

— это следствие того, что у Вас кириллица в имени пользователя. Решается: идем в Компьютер → Свойства системы → Дополнительные параметры системы → Переменные среды. Создаем новую переменную с именем ANDROID_SDK_HOME и значением – путем, где находится папка AVD (например, C:\Android\). Создаем, далее ищем там же переменную Path, открываем и в поле значений через точку с запятой добавляем путь до папки tools Android SDK (например, C:\Android\tools). Сохраняем. Запускаем Eclipse, запускаем программу.

UPD 05.10.2011, во что превратилось данное приложение можно лицезреть на следующих скринах:
как написать приложение на телефон. Смотреть фото как написать приложение на телефон. Смотреть картинку как написать приложение на телефон. Картинка про как написать приложение на телефон. Фото как написать приложение на телефон

Это результат развития той самой болванки, которая выше дана в качестве примера.
Разработка и создание Android-приложений
Создание сайтов

Источник

Как создать программу для смартфона за полчаса

Содержание статьи

Изучить новый язык и среду разработки — это минимум, что от тебя потребуется, если ты захочешь написать свое первое мобильное приложение. Чтобы с пониманием набросать элементарный todo list для Android или iOS, не передирая пример из книжки, уйдет не меньше пары недель. Но можно не осваивать Objective-C или Java и при этом быстро разрабатывать приложения для смартфонов, если использовать такие технологии, как PhoneGap.

как написать приложение на телефон. Смотреть фото как написать приложение на телефон. Смотреть картинку как написать приложение на телефон. Картинка про как написать приложение на телефон. Фото как написать приложение на телефон Запуск приложения в симуляторе iOS

Хакер #156. Взлом XML Encryption

Если ты внимательно изучал нововведения, которые ожидают нас в Windows 8, то, возможно, заметил, что под ней можно будет разрабатывать приложения на HTML5. Идея, на самом деле, не новая — технологии, реализующие тот же подход для мобильных платформ, развиваются семимильными шагами. Одним из таких фреймворков, позволяющим разрабатывать приложения для смартфонов с помощью связки привычных для нас HTML, JavaScript и CSS!, как раз и является PhoneGap. Написанное с его помощью приложение подойдет для всех популярных платформ: iOS, Android, Windows Phone, Blackberry, WebOS, Symbian и Bada. Тебе не нужно будет изучать особенности программирования под каждую платформу (например, Objective-C в случае с iOS), разбираться с различными API и средами разработки. Все, что потребуется для создания кросс-платформенного мобильного приложения, — это знание HTML5 и специального PhoneGap API. При этом на выходе получится не тупая HTML-страница, «обрамленная» в интерфейс приложения, нет! API фреймворка позволяет задействовать практически все возможности телефона, которые используются при разработке с помощью нативных инструментов: доступ к акселерометру, компасу, камере (запись видео и фотосъемка), списку контактов, файловой системе, системе нотификаций (стандартных уведомлений на телефоне), хранилищам и т. д. Наконец, такое приложение может безболезненно обращаться к любому кросс-доменному адресу. Ты можешь воссоздать нативные элементы управления с помощью фреймворков вроде jQuery Mobile или Sencha, и конечная программа будет выглядеть на мобильном телефоне так, как будто она написана на нативном языке (ну или почти так). Лучше всего проиллюстрировать вышесказанное на деле, то есть написать приложение, поэтому предлагаю сразу приступить к практике. Засекай время — на все про все уйдет едва ли больше получаса.

Другие полезности PhoneGap

Кроме потрясающей платформы для мобильных приложений, PhoneGap также предоставляет сервис для сборки твоего приложения в «облаке». Под все платформы и в один клик! Сборщик условно бесплатный. Ты можешь зарегистрироваться на сайте PhoneGap Build (build.phonegap.com) и получить доступ к сборщику. С его помощью ты вправе собрать неограниченное число приложений с открытым исходным кодом и одно приложение с закрытыми исходниками. Понятно, что если нужно скомпилировать больше закрытых приложений, то придется немного заплатить.

Если тебе не хватает какого-нибудь функционала в «базовой комплектации» PhoneGap, то ты можешь расширить его возможности с помощью плагинов. Существует целый репозиторий (github.com/phonegap/phonegap-plugins), который включает в себя четыре раздела iPhone, Android, Palm, BlackBerry. Сейчас под iOS написано более 20 плагинов: BarcodeScanner (сканер штрих-кодов), AdPlugin (отображения рекламы iAd), NativeControls (нативные для iOS контролы) и другие.

Что мы будем создавать

В качестве целевой платформы возьмем iOS — да-да, деньги лежат в AppStore, и монетизировать свои разработки пока лучше всего там :). Но сразу внесу ясность: все то же самое, без изменений, можно провернуть, скажем, для Android. Долго думал, какой пример рассмотреть, так как писать очередную тулзу для учета списка дел совершенно не хотелось. Поэтому я решил создать приложение под названием «Геонапоминалка», навигационную прогу, назначение которой можно описать одной фразой: «Сообщи мне, когда я снова тут окажусь». В AppStore есть немало утилит, которые позволяют «запомнить» место, где пользователь припарковал машину. Это почти то же самое, только чуть попроще. Ты сможешь указать на карте города точку, задать для нее определенный радиус и запрограммировать сообщение. Когда ты в следующий попадешь в пределы окружности с указанным радиусом, приложение выдаст тебе уведомление, а точка будет удалена. Будем действовать по такому плану: сначала создадим простое веб-приложение, проверим его в браузере, а затем перенесем с помощью PhoneGap на платформу iOS. Очень важно написать в прототипе и протестировать в браузере на компьютере основную часть кода, поскольку отлаживать приложение в телефоне гораздо сложнее. В качестве каркаса мы возьмем JS-фреймворк jQuery c jQuery Mobile (jquerymobile.com), а в качестве движка карт — Google Maps v3. Приложение будет состоять из двух страниц: карты и списка точек.

UI-фреймворки

jQuery Mobile — это, конечно, не единственный фреймворк для создания мобильного интерфейса. На сайте PhoneGap приведен огромный список библиотек и фреймворков, которые ты можешь использовать (phonegap.com/tools): Sencha Touch, Impact, Dojo Mobile, Zepto.js и др.

Каркас приложения

Сразу объясняю, зачем мы будем использовать jQuery Mobile. Эта JS-библиотека предоставляет нам уже готовые элементы интерфейса мобильного приложения (максимально приближенные к нативным) для самых разных платформ. Нам ведь надо, чтобы на выходе было именно мобильное приложение, а не страничка из браузера! Так что качаем последнюю версию JQuery Mobile (jquerymobile.com/download) и переносим в рабочую папку первые файлы приложения, которые нам понадобятся:

Нужно сделать ресурсы в основном локальными, чтобы пользователь в будущем не тратил мобильный интернет. Теперь создаем каркас страниц в файле index.html. Приведенный ниже код описывает верхнюю часть страницы с картой, надписью «Геонапоминалка» и кнопкой «Точки».

Страница с картой

как написать приложение на телефон. Смотреть фото как написать приложение на телефон. Смотреть картинку как написать приложение на телефон. Картинка про как написать приложение на телефон. Фото как написать приложение на телефон Страница с картой, открытая в мобильном браузере. Это еще не iOS приложение.

Атрибут страницы data-dom-cache=»true» необходим для того, чтобы она не выгружалась из памяти. Для кнопки «Точки» используется data-transition=»pop», чтобы страница «Список точек» открывалась с эффектом «Всплытие». Подробнее о том, как устроены страницы jQuery Mobile, можно почитать в хорошем мануале (bit.ly/vtXX3M). По аналогии создаем страницу со списком точек:

Страница со списком точек

Для кнопки «Карта» тоже пропишем data-transition=»pop», но добавим атрибут data-direction=»reverse», чтобы страница «Карта» открывалась с эффектом «Затухание». Те же атрибуты пропишем в шаблоне точки. Все, наш каркас готов.

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

Теперь надо отобразить карту, для чего мы возьмем стандартный API Google Maps, который используется миллионами разных сайтов:

Здесь Gm — это переменная, ссылающаяся на объект Google Maps. Параметры инициализации я хорошо закомментировал в коде. Следующий шаг — отрисовка маркера человечка на карте:

В качестве PERSON_SPRITE_URL используется адрес спрайта человечка из Google-панорам. Его статический адрес — maps.gstatic.com/mapfiles/cb/mod_cb_scout/cb_scout_sprite_api_003.png. Пользователь будет добавлять точки, кликая на карте, поэтому, чтобы их отрисовывать, мы будем слушать событие click:

Я привожу бОльшую часть кода — остальное ищи на диске. Дальше нам нужно научить приложение перемещать иконку пользователя по карте. В прототипе мы задействуем Geolocation API (тот, который используется в том числе в десктопных браузерах):

Метод movePerson с помощью простой процедуры getPointsInBounds() проверяет, не находится ли пользователь в какой-нибудь активной точке. Последний вопрос — где хранить список точек? В HTML5 появилась возможность использовать localStorage, так что не будем ей пренебрегать (предоставляю тебе самостоятельно разобраться с этими участками кода, которые я хорошо закомментировал). Итак, приложение, работающее в браузере, готово!

Запуск веб-приложения

Как я уже говорил, отладку в основном необходимо выполнять на компьютере. Самый подходящий браузер для тестирования веб-приложений на компьютере — это Safari или Chrome. После отладки в этих браузерах ты можешь быть уверен в том, что твое приложение не «поедет» в браузере мобильного телефона. Оба этих браузера совместимы с большинством мобильных веб-браузеров, поскольку точно так же, как и они, построены на основе движка WebKit. После устранения всех багов можно переходить к запуску мобильного веб-приложения непосредственно на телефоне. Для этого настрой свой веб-сервер (пусть даже Denwer или XAMPP), чтобы он отдавал созданную страницу, и открой ее уже в браузере мобильного телефона. Приложение должно выглядеть примерно так, как показано на рисунке. Тут важно понимать, что будущее мобильное приложение, собранное для мобильной платформы с помощью PhoneGap, будет выглядеть почти один в один, за исключением того, что на экране не будет отображаться навигационная панель браузера. Если все хорошо, можно приступать к созданию из странички полноценного iOS-приложения. Заметь, что PhoneGap и IDE для мобильной разработки мы до этого момента даже не трогали.

Подготовка

Для того чтобы собрать приложение под iOS, тебе нужен компьютер с операционной системой Mac OS 10.6+ (или виртуальная машина на Mac OS 10.6), а также среда разработки Xcode с установленным iOS SDK. Если у тебя не установлен SDK, придется скачать с сайта Apple образ диска, включающий в себя Xcode и iOS SDK (developer.apple.com/devcenter/ios/index.action). Имей в виду, что образ весит около 4 Гб. Кроме этого, тебе понадобится зарегистрироваться на сайте Apple в качестве разработчика (если ты не собираешься публиковать свое приложение в AppStore, то это требование можно обойти). С помощью этого набора можно разрабатывать приложения на нативном для iOS языке Objective-C. Но мы решили пойти обходным путем и воспользоваться PhoneGap, поэтому нам еще нужно установить пакет PhoneGap iOS. Просто скачай архив с офсайта (https://github.com/callback/phonegap/zipball/1.2.0), распакуй его и в папке iOS запусти программу установки. Когда установка завершится, в меню проектов Xcode должна появиться иконка PhoneGap. После запуска придется заполнить несколько форм, но уже очень скоро ты увидишь рабочую область IDE с твоим первым приложением. Чтобы проверить, все ли работает, нажми кнопку Run — должен запуститься эмулятор iPhone/iPad с шаблонным приложением PhoneGap. Собранная программа выдаст ошибку с сообщением о том, что index.html не найден, — это нормально. Открой папку, в которой ты сохранил первичные файлы проекта, и найди в ней подпапку www. Перетащи ее в редактор, кликни на иконке приложения в списке слева и в появившемся окне выбери «Create folder references for any added folders». Если запустить программу еще раз, то все должно заработать. Теперь можно скопировать все файлы нашего прототипа в папку www. Пора подпилить наш прототип для работы на смартфоне в обработке PhoneGap.

Перенос прототипа

как написать приложение на телефон. Смотреть фото как написать приложение на телефон. Смотреть картинку как написать приложение на телефон. Картинка про как написать приложение на телефон. Фото как написать приложение на телефон Прописываем ExternalHosts

Это событие проверяет, есть ли у пользователя хоть какое-нибудь интернет-соединение. Если его нет, выводим соответствующее сообщение. Вместо функции navigator.notification.alert можно использовать более привычную alert, но ее минус в том, что она выглядит менее естественно для мобильного приложения. Сейчас нам хватит и этих знаний, но ты можешь подробнее прочитать о network.connection (bit.ly/uEyRwz) и способах нотификации (bit.ly/tkvzE2).

Затем заменим все вызовы alert и confirm на нативные, которые предоставляет нам PhoneGap:

Последнее, что нам нужно поменять, — это блок кода, перемещающий иконку пользователя по карте. Наш текущий код тоже работает, но работает менее оптимально (перемещает иконку, даже если координаты не изменились) и дает не такие богатые данные, как аналог в PhoneGap:

Этот код более изящный — он генерирует событие только тогда, когда координаты изменились. Жмем кнопку Run и убеждаемся, что только что созданное нами приложение отлично работает в симуляторе iOS-устройства! Пора приступать к запуску на реальном устройстве.

как написать приложение на телефон. Смотреть фото как написать приложение на телефон. Смотреть картинку как написать приложение на телефон. Картинка про как написать приложение на телефон. Фото как написать приложение на телефон Нативные уведомления в iOS

Запуск на устройстве

как написать приложение на телефон. Смотреть фото как написать приложение на телефон. Смотреть картинку как написать приложение на телефон. Картинка про как написать приложение на телефон. Фото как написать приложение на телефон Работающее PhoneGap-приложение

Другие платформы

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

Appcelerator Titanium (www.appcelerator.com).

Corona SDK (www.anscamobile.com/corona).

Источник

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *