Android приложения прочно вошли в нашу жизнь. Мы каждый день ими пользуемся: картами, социальными сетями, мессенджерами, браузерами. Но каждый опытный пользователь смартфона на Android хоть раз задумывался о создании своего приложения. Сложился стереотип, что это очень сложно и нужно долго учить программирование, чтобы что-то качественное написать. Однако Google постоянно совершенствует свои инструменты разработки, делая их проще и удобнее. Сегодня мы создадим самое простое приложение для Android и запустим его на смартфоне.
Приложения для Android создаются на языке программирования Java. Сейчас как альтернатива Java продвигается еще и относительно новый более простой язык Kotlin (язык назван в честь острова? на котором расположен город Кронштадт). Наш пример будет на Java.
Сперва мы проверим, установлен ли на вашем компьютере (под управлением Windows) JDK. Java Development Kit – это комплект разработчика приложений от компании Oracle. Без него среда разработки не сможет правильно функционировать.
Для этого нажмите на клавиатуре Win + R. Введите cmd и нажмите Enter. Откроется командная строка. Далее в консоли необходимо набрать:
java -version
Скорее всего, вы увидите версию Java:
Это значит, что у вас уже установлен JDK. В противном случае его необходимо скачать (150 Мб).
После установки JDK переходим к основному инструменту разработки для ОС Android – Android Studio. Загрузить его можно здесь (944 Мб).
Android Studio – это свободно распространяемая среда разработки от Google. Это такой огромный комбайн для разработки приложений, в который вошли различные инструменты для тестирования, сборки приложений, а также шаблоны, удобный редактор макетов и многое другое. Android Studio постоянно обновляется, как и его многочисленные компоненты.
Версии Android Studio есть не только под Windows, но и для Mac OS и Linux. Системные требования для Android Studio: Windows 7/8/10, 3 Гб оперативной памяти минимум, 8 Гб RAM рекомендовано, 4 Гб на жестком диске.
Итак, вы скачали инсталлятор Android Studio.
Запускаем его.
Жмем Next, выбираем путь для установки. Настройки желательно не менять.
Затем запустится мастер настройки Android Studio. Здесь можно выбрать цветовую тему среды разработки, скачать дополнительные файлы. Тип установки выбираем стандартный.
После скачивания необходимых компонентов будет предложено выбрать тип вашего проекта. Выбираем Empty Activity и кликаем Next.
На следующем экране даем название проекту и выбираем, начиная с какой версии Android будет работать ваше приложение. Лучше всего выбрать – c Android 4.0.3 – так наше приложение будет работать на максимальном количестве устройств. Стоит отметить, что Android Studio настолько универсальна, что позволяет создавать приложения не только для смартфонов, но и для смарт-часов и телевизоров!
Далее у нас открывается основное окно Android Studio. Слева мы видим несколько разделов. Это структура нашего проекта. В папке manifests находится файл AndroidManifest.xml, который отвечает за информацию о приложении, импортируемые библиотеки, компоненты и другие параметры. В папке java находится непосредственно код (файл MainActivity в папке com.example.myapplication). В папке res находятся ресурсы приложения – кнопки, файлы, которые определяют дизайн интерфейса (например, activity_main.xml).
Acitivity – это отдельный экран, с которым взаимодействует пользователь. Примеры: экран с фото, набор номера, ввод текста. У нас будет один Acitivity (экран). Поэтому сразу идем по пути app – src – main – res – layout и открываем файл activity_main.xml. Переключаемся в режим Design.
Выбираем раздел Button и перетягиваем его на экран приложения. У нас появилась кнопка. Вводим текст на ней (kv.by).
Чтобы увеличить размер шрифта – переключаемся в режим Text и в коде в разделе Button добавляем такую строчку:
android:textSize=»25sp»
В режиме Design жмем правой кнопкой мыши и выбираем Constrain, далее выбираем все пункты по очереди. Это «привяжет» вашу кнопку, чтобы она не могла сместиться.
Далее редактируем надпись Hello, World – меняем на свою собственную («Мое первое приложение на Android»).
Следующий этап – добавляем картинку. Сначала мы должны ее добавить в проект. Картинка будет к примеру, эта:
Скачайте ее и перетяните прямо в проект в папку res – drawable. Она добавится в проект. Теперь открываем activity_main.xml и переключаемся в режим Design. Выбираем Common – ImageView. Перетягиваем на наш экран. Откроется окно выбора картинки. Переходим в раздел Project. Там видим логотип kv.by. Выбираем его и помещаем в середине окна нашего приложения. На картинке также применяем Constrain.
В итоге у вас должен получится такой код activity_main.xml:
<?xml version="1.0" encoding="utf-8" <android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".MainActivity"> <TextView android:layout_width="145dp" android:layout_height="53dp" android:layout_marginTop="262dp" android:layout_marginBottom="416dp" android:gravity="center" android:text="Мое первое приложение на Android" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintHorizontal_bias="0.552" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent" /> <Button android:id="@+id/button" android:layout_width="199dp" android:layout_height="113dp" android:text="kv.by" android:textSize="25sp" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" tools:layout_editor_absoluteY="114dp" /> <ImageView android:id="@+id/imageView" android:layout_width="216dp" android:layout_height="172dp" android:layout_marginStart="55dp" android:layout_marginLeft="55dp" android:layout_marginTop="380dp" android:layout_marginEnd="28dp" android:layout_marginRight="28dp" android:layout_marginBottom="51dp" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintHorizontal_bias="0.495" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent" app:srcCompat="@drawable/logo" /> </android.support.constraint.ConstraintLayout>
И, соответственно, такой код MainActivity (в папке com.example.myapplication):
package com.example.myapplication; import android.support.v7.app.AppCompatActivity; import android.os.Bundle; public class MainActivity extends AppCompatActivity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); } }
AndroidManifest.xml:
<?xml version="1.0" encoding="utf-8" <manifest xmlns:android="http://schemas.android.com/apk/res/android" package="com.example.myapplication"> <application android:allowBackup="true" android:icon="@mipmap/ic_launcher" android:label="App kv.by" android:roundIcon="@mipmap/ic_launcher_round" android:supportsRtl="true" android:theme="@style/AppTheme"> <activity android:name=".MainActivity"> <intent-filter> <action android:name="android.intent.action.MAIN" /> <category android:name="android.intent.category.LAUNCHER" /> </intent-filter> </activity> </application> </manifest>
А теперь пора проверить, все ли работает. Проверим на виртуальном смартфоне прямо у вас на компьютере.
Жмем вверху Tools – AVD Manager – Create Virtual Device.
Мы создаем виртуальное устройство (смартфон) под управлением Android. Выбираем Nexus 5X. Скачиваем сам эмулятор Android. Жмем Next. После всех манипуляций у вас в списке виртуальных устройств должен появиться «смартфон» Nexus 5X.
Теперь запустим приложение на виртуальном смартфоне – Run – Runapp.
Появится окно с выбором, на чем необходимо его протестировать. Разумеется, выберем Nexus 5X.
На смартфоне открываем список приложений и ищем там App kv.by
Вот что получилось:
Работает! Приложение готово. Теперь можно и на ваш реальный смартфон его загрузить.
Чтобы установить на смартфон наше первое приложение – нужно создать apk-файл. APK – Android Package Kit, это такой незашифрованный zip-архив, в котором содержатся скомпилированный код приложения, файлы ресурсов, файлы манифеста и другая информация. Именно в формате apk хранятся файлы в Google Play, из которого мы скачиваем приложения.
Поскольку они не зашифрованы, картинки и некоторую другую информацию можно легко извлечь из любых приложений. Для этого есть ресурс APKMirror.com. На нем можно скачать apk-файл нужного приложения из Google Play. Затем переименовать его в *.zip и открыть любым архиватором. Там можно увидеть структуру приложения, иконки, графику. Например, вот как выглядит приложение WhatsApp изнутри:
Apk-файлы можно скачивать себе на смартфон или обмениваться ими. Либо установить в качестве приложения. Это удобно и дает некоторую свободу.
Для того, чтобы установить apk на вашем смартфоне, нужно сначала это разрешить. Идем в Настройки – Приложения – Особые права доступа – Установка неизв. приложений и там выбираем «Разрешено» для вашего файлового менеджера (например, Total Commander).
Итак, наша задача сделать apk-файл из кода, который мы написали. Для этого в Android Studio выбираем Build – Build Bundle / APK – Build APK. Запустится скрипт для создания apk. В конце вам предложат открыть папку в которой будет apk-файл. Далее необходимо подключить смартфон к компьютеру и скопировать полученный apk-файл в память телефона. Затем уже на смартфоне открыть файловым менеджером папку с файлом и установить его. Теперь у вас собственное приложение в смартфоне!
Если вас заинтересовала эта тема – вы можете ознакомиться с исходным кодом некоторых простейших приложений на GitHub. Например, там есть галерея и файловый менеджер. Вы можете редактировать их код под собственные нужды. Много информации о разработке под Android вы также можете найти здесь.
Содержание
- Рубрики:
- Установка необходимых программ и утилит
- Запуск виртуального устройства
- Создание проекта
- Структура проекта
- Первые строки
- Определение победителя
- Видео готового приложения
- Четыре способа как сделать приложение для Андроид самому
- Видео инструкция по созданию приложения с помощью APK Creator
- Другие полезности PhoneGap
- UI-фреймворки
- Другие платформы
Рубрики:
Всего голосов: 4 Здравствуйте. Сегодня на глаза попался пост о курсе программирования под Android на сайте Linux Foundation, а вместе с ним — и немало комментариев о том, что хотелось бы видеть и перевод этих уроков. Поскольку я сейчас, после четырех лет разработки под микроконтроллеры, начал изучать и программирование для мобильных устройств, то параллельно решил сделать перевод первой части урока.
Программирование под Android для начинающих. Часть 1
Смартфоны и планшеты на Android все чаше встречаются в наших сумках и карманах, и программирование под Android также становится все популярнее. Это отличная платформа для разработки — API прекрасно документирован и прост в использовании, да и просто интересно создать что-то, что вы cможете запустить на своем смартфоне. Изначально вы можете обойтись и без него, создав и протестировав код с помощью эмулятора на вашем Linux ПК. В первой из двух частей этого введения объясняется как создать простое приложение с таймером, а также даются начальные сведения о Android API. Курс подразумевает наличие начальных представлений о Java, XML и технологиях программирования, но тем не менее не стесняйтесь попробовать даже если вы имеете об этом очень смутное представление.
Начало работы и среда разработки
Немного о версиях: последней версией Android является 4.2 (Jelly Bean), но, как можно выдеть по этой диаграмме, она еще недостаточно распространена. Лучше всего начинать разработку под одну из версий: 4.0 (Ice Cream Sandwich) или 2.3 (Gingerbeard), особенно с учетом того, что версии Android поддерживают обратную совместимость (т.е. ваш код для версии 2.3 будет работать и на 4.2), а приложения, разработанные для более поздней версии, не всегда будут работать и на старой. Приведенный здесь код должен работать на версиях 4.0 и 2.3. Простейший способ получить среду разработки — установить Android Bundle, который можно скачать здесь. Также вам понадобится JDK 6 (не только JRE). Не забудьте что Android не совместим с gcj. Если вы уже используете Eclipse или другую IDE, то вы можете попробовать настроить ее под Android. Как это сделать — описано здесь. Теперь создайте проект под именем Countdown с помощью Eclipse, или из командной строки. Я установил в настройках BuildSDK 4.0.3 и minimum SDK 2.2, и (в Eclipse) использовал шаблон BlankActivity.
Мой первый проект под Android: интерфейс
Первой нашей программой под Android будет таймер, показывающий обратный отсчет от 10 секунд после нажатия кнопки. Прежде чем писать код, нужно создать интерфейс — то, что пользователь увидит, запустив наше приложение. Нужно открыть res/layout/activity_countdown.xml и создать XML шаблон — с помощью редактора Eclipse или текстового/XML редактора ввести следующее:
Обратите внимание на /start и /__00_30. Их значения будут расположены в res/values/strings.xml:
Start 00:30
Это общепринятый способ обращения к ресурсам в Android: лучше использовать ссылки на строковые переменные, чем жестко заданные строки.
Мой первый проект под Android: код
Теперь откроем в редакторе файл CountdownActivity.java — и мы готовы писать код нашего приложения. Вы должны увидеть автоматически сгенерированную «заглушку» метода onCreate(). Он всегда вызывается как только создается объект Activity, и в него вы можете поместить какие-либо функции, которые должны выполняться при запуске приложения. (Eclipse также может создать пустой метод onCreateOptionsMenu(), но мы пока не будем обращать на него внимания). Введите следующий код:
public class CountdownActivity extends Activity { private static final int MILLIS_PER_SECOND = 1000; private static final int SECONDS_TO_COUNTDOWN = 30; private TextView countdownDisplay; private CountDownTimer timer; @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_countdown); countdownDisplay = (TextView) findViewById(R.id.time_display_box); Button startButton = (Button) findViewById(R.id.startbutton); startButton.setOnClickListener(new View.OnClickListener() { public void onClick(View view) { try { showTimer(SECONDS_TO_COUNTDOWN * MILLIS_PER_SECOND); } catch (NumberFormatException e) { // method ignores invalid (non-integer) input and waits // for something it can use } } }); } }
Вы видите как просто оказалось создать наш первый проект: Android API включает в себя CountDownTimer, который мы можем использовать. Мы объявили его и поле отображения обратного отсчета как закрытые (private) свойства класса Activity. В методе onCreate() мы использовали метод setContentView, чтобы подключить наш XML-шаблон. Такой R.foo.bar синтаксис — это стандартный способ обращения к XML-ресурсам в Android, и мы встретимся с ним еще много раз. findViewById — это еще один метод, который вы будете часто использовать. Здесь он возвращает ссылки на поле вывода таймера и кнопку Start, описанные в XML-шаблоне. Для кнопки, чтобы мы могли обработать ее нажатие, должен быть задан «перехватчик» OnClickListener, и его метод onClick(). Здесь он просто вызывает метод showTimer() c заданным числом миллисекунд (сейчас жестко заданным в коде). Итак, что делает showTimer():
private void showTimer(int countdownMillis) { if(timer != null) { timer.cancel(); } timer = new CountDownTimer(countdownMillis, MILLIS_PER_SECOND) { @Override public void onTick(long millisUntilFinished) { countdownDisplay.setText("counting down: " + millisUntilFinished / MILLIS_PER_SECOND); } @Override public void onFinish() { countdownDisplay.setText("KABOOM!"); } }.start(); }
Класс CountDownTimer делает за нас почти всю работу, что очень приятно. В начале мы проверяем, существует ли уже таймер, и, если он есть, то сбрасываем его. Далее мы создаем новый таймер с заданным числом миллисекунд для обратного отсчета (из параметра метода showTimer()) и с заданным числом миллисекунд между интервалами отсчета. По истечении времени между интервалами вызывается метод onTick(). CountDownTimer — абстрактный класс, и методы __onTick() и __onFinish() должны быть реализованы в его подклассе. Мы переопределяем метод onTick(), уменьшающий выводимое число на единицу по истечении каждого интервала, и метод onFinish(), выводящий на дисплей сообщение о окончании обратного отсчета. Потом start() запускает таймер. С помощью команды «Run» в Eclipse вы можете запустить созданное приложение, при этом будет автоматически запущен эмулятор Android. Посмотрите документацию по Android если вы хотите узнать больше о настройке эмулятора, или о запуске приложений из командной строки. Поздравляем, вы только что создали свое первое приложение под Android. Во второй части этого введения мы более подробно рассмотрим структуру Android-приложения, и сделаем некоторые улучшения нашей программы: ввод времени обратного отсчета, кнопку Stop и меню. Также мы запустим его на реальном устройстве, а не на эмуляторе. Более подробную информацию вы можете найти в разделе Android Development Training сайта The Linux Foundation’s Linux training website. Juliet KempОригинал статьи 1018 1072,8k 1018 В любом деле самое сложное — это начало. Часто бывает тяжело войти в контекст, с чем столкнулся и я, решив разработать свое первое Android-приложение. Настоящая статья для тех, кто хочет начать, но не знает с чего. Статья затронет весь цикл разработки приложения. Вместе мы напишем простенькую игру “Крестики-Нолики” с одним экраном (в ОС Android это называется Activity). Отсутствие опыта разработки на языке Java не должно стать препятствием в освоении Android. Так, в примерах не будут использоваться специфичные для Java конструкции (или они будет минимизированы на столько, на сколько это возможно). Если Вы пишете, например, на PHP и знакомы с основополагающими принципами в разработке ПО, эта статья будет вам наиболее полезна. В свою очередь так как, я не являюсь экспертом по разработке на Java, можно предположить, что исходный код не претендует на лейбл “лучшие практики разработки на Java”.
Установка необходимых программ и утилит
Перечислю необходимые инструменты. Их 3:
- JDK — набор для разработки на языке Java;
- Android SDK and AVD Manager — набор утилит для разработки + эмулятор;
- IDE c поддержкой разработки для Android:
- Eclipse + ADT plugin;
- IntelliJ IDEA Community Edition;
- Netbeans + nbandroid plugin;
Утилиты устанавливаются в определенном выше порядке. Ставить все перечисленные 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 строчками:
super.onCreate(savedInstanceState); setContentView(R.layout.main);
Метод setContentView (равносильно this.setContentView) устанавливает xml-макет для текущего экрана. Далее xml-макеты будем называть «layout», а экраны — «Activity». Layout в приложении будет следующий:
<?xml version="1.0" encoding="utf-8"
Для этого приложения идеально подойдет TableLayout. Id можно присвоить любому ресурсу. В данном случае, TableLayout присвоен id = main_l. При помощи метода findViewById() можно получить доступ к виду:
private TableLayout layout; // это свойство класса KrestikinolikiActivity public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); layout = (TableLayout) findViewById(R.id.main_l); buildGameField(); }
Теперь необходимо реализовать метод buildGameField(). Для этого требуется сгенерировать поле в виде матрицы. Этим будет заниматься класс Game. Сначала нужно создать класс Square для ячеек и класс Player, объекты которого будут заполнять эти ячейки.
Square.java
package com.example; public class Square { private Player player = null; public void fill(Player player) { this.player = player; } public boolean isFilled() { if (player != null) { return true; } return false; } public Player getPlayer() { return player; } }
Player.java
package com.example; public class Player { private String name; public Player(String name) { this.name = name; } public CharSequence getName() { return (CharSequence) name; } }
Все классы нашего приложения находятся в папке src.
Game.java
package com.example; public class Game { /** * поле */ private Square[][] field; /** * Конструктор * */ public Game() { field = new Square[3][3]; squareCount = 0; // заполнение поля for (int i = 0, l = field.length; i < l; i++) { for (int j = 0, l2 = field[i].length; j < l2; j++) { field[i][j] = new Square(); squareCount++; } } } public Square[][] getField() { return field; } }
Инициализация Game в конструкторе KrestikinolikiActivity.
public KrestikinolikiActivity() { game = new Game(); game.start(); // будет реализован позже }
Метод buildGameField() класса KrestikinolikiActivity. Он динамически добавляет строки и колонки в таблицу (игровое поле):
private Button[][] buttons = new Button[3][3]; //(....) private void buildGameField() { Square[][] field = game.getField(); for (int i = 0, lenI = field.length; i < lenI; i++ ) { TableRow row = new TableRow(this); // создание строки таблицы for (int j = 0, lenJ = field[i].length; j < lenJ; j++) { Button button = new Button(this); buttons[i][j] = button; button.setOnClickListener(new Listener(i, j)); // установка слушателя, реагирующего на клик по кнопке row.addView(button, new TableRow.LayoutParams(TableRow.LayoutParams.WRAP_CONTENT, TableRow.LayoutParams.WRAP_CONTENT)); // добавление кнопки в строку таблицы button.setWidth(107); button.setHeight(107); } layout.addView(row, new TableLayout.LayoutParams(TableLayout.LayoutParams.WRAP_CONTENT, TableLayout.LayoutParams.WRAP_CONTENT)); // добавление строки в таблицу } }
В строке 8 создается объект, реализующий интерфейс View.OnClickListener. Создадим вложенный класс Listener. Он будет виден только из KrestikinolikiActivity.
public class Listener implements View.OnClickListener { private int x = 0; private int y = 0; public Listener(int x, int y) { this.x = x; this.y = y; } public void onClick(View view) { Button button = (Button) view; } }
Осталось реализовать логику игры.
public class Game { /** * игроки */ private Player[] players; /** * поле */ private Square[][] field; /** * начата ли игра? */ private boolean started; /** * текущий игрок */ private Player activePlayer; /** * Считает колличество заполненных ячеек */ private int filled; /** * Всего ячеек */ private int squareCount; /** * Конструктор * */ public Game() { field = new Square[3][3]; squareCount = 0; // заполнение поля for (int i = 0, l = field.length; i < l; i++) { for (int j = 0, l2 = field[i].length; j < l2; j++) { field[i][j] = new Square(); squareCount++; } } players = new Player[2]; started = false; activePlayer = null; filled = 0; } public void start() { resetPlayers(); started = true; } private void resetPlayers() { players[0] = new Player("X"); players[1] = new Player("O"); setCurrentActivePlayer(players[0]); } public Square[][] getField() { return field; } private void setCurrentActivePlayer(Player player) { activePlayer = player; } public boolean makeTurn(int x, int y) { if (field[x][y].isFilled()) { return false; } field[x][y].fill(getCurrentActivePlayer()); filled++; switchPlayers(); return true; } private void switchPlayers() { activePlayer = (activePlayer == players[0]) ? players[1] : players[0]; } public Player getCurrentActivePlayer() { return activePlayer; } public boolean isFieldFilled() { return squareCount == filled; } public void reset() { resetField(); resetPlayers(); } private void resetField() { for (int i = 0, l = field.length; i < l; i++) { for (int j = 0, l2 = field[i].length; j < l2; j++) { field[i][j].fill(null); } } filled = 0; } }
Определение победителя
К. О. подсказывает, что в крестики-нолики выирывает тот, кто выстроет X или O в линию длиной, равной длине поля по-вертикали, или по-горизонтали, или по-диагонали. Первая мысль, которая приходит в голову — это написать методы для каждого случая. Думаю, в этом случае хорошо подойдет паттерн Chain of Responsobility. Определим интерфейс
package com.example; public interface WinnerCheckerInterface { public Player checkWinner(); }
Так как Game наделен обязанностью выявлять победителя, он реализует этот интерфейс. Настало время создать виртуальных «лайнсменов», каждый из которых будет проверять свою сторону. Все они реализует интерфейс WinnerCheckerInterface.
WinnerCheckerHorizontal.java
package com.example; public class WinnerCheckerHorizontal implements WinnerCheckerInterface { private Game game; public WinnerCheckerHorizontal(Game game) { this.game = game; } public Player checkWinner() { Square[][] field = game.getField(); Player currPlayer; Player lastPlayer = null; for (int i = 0, len = field.length; i < len; i++) { lastPlayer = null; int successCounter = 1; for (int j = 0, len2 = field[i].length; j < len2; j++) { currPlayer = field[i][j].getPlayer(); if (currPlayer == lastPlayer && (currPlayer != null && lastPlayer !=null)) { successCounter++; if (successCounter == len2) { return currPlayer; } } lastPlayer = currPlayer; } } return null; } }
WinnerCheckerVertical.java
package com.example; public class WinnerCheckerVertical implements WinnerCheckerInterface { private Game game; public WinnerCheckerVertical (Game game) { this.game = game; } public Player checkWinner() { Square[][] field = game.getField(); Player currPlayer; Player lastPlayer = null; for (int i = 0, len = field.length; i < len; i++) { lastPlayer = null; int successCounter = 1; for (int j = 0, len2 = field[i].length; j < len2; j++) { currPlayer = field[j][i].getPlayer(); if (currPlayer == lastPlayer && (currPlayer != null && lastPlayer !=null)) { successCounter++; if (successCounter == len2) { return currPlayer; } } lastPlayer = currPlayer; } } return null; } }
WinnerCheckerDiagonalLeft.java
package com.example; public class WinnerCheckerDiagonalLeft implements WinnerCheckerInterface { private Game game; public WinnerCheckerDiagonalLeft(Game game) { this.game = game; } public Player checkWinner() { Square[][] field = game.getField(); Player currPlayer; Player lastPlayer = null; int successCounter = 1; for (int i = 0, len = field.length; i < len; i++) { currPlayer = field[i][i].getPlayer(); if (currPlayer != null) { if (lastPlayer == currPlayer) { successCounter++; if (successCounter == len) { return currPlayer; } } } lastPlayer = currPlayer; } return null; } }
WinnerCheckerDiagonalRight.java
package com.example; public class WinnerCheckerDiagonalRight implements WinnerCheckerInterface { private Game game; public WinnerCheckerDiagonalRight(Game game) { this.game = game; } public Player checkWinner() { Square[][] field = game.getField(); Player currPlayer; Player lastPlayer = null; int successCounter = 1; for (int i = 0, len = field.length; i < len; i++) { currPlayer = field[i][len - (i + 1)].getPlayer(); if (currPlayer != null) { if (lastPlayer == currPlayer) { successCounter++; if (successCounter == len) { return currPlayer; } } } lastPlayer = currPlayer; } return null; } }
Проинициализируем их в конструкторе Game:
//(....) /** * "Судьи" =). После каждого хода они будут проверять, * нет ли победителя */ private WinnerCheckerInterface[] winnerCheckers; //(....) public Game() { //(....) winnerCheckers = new WinnerCheckerInterface[4]; winnerCheckers[0] = new WinnerCheckerHorizontal(this); winnerCheckers[1] = new WinnerCheckerVertical(this); winnerCheckers[2] = new WinnerCheckerDiagonalLeft(this); winnerCheckers[3] = new WinnerCheckerDiagonalRight(this); //(....) }
Реализация checkWinner():
public Player checkWinner() { for (WinnerCheckerInterface winChecker : winnerCheckers) { Player winner = winChecker.checkWinner(); if (winner != null) { return winner; } } return null; }
Победителя проверяем после каждого хода. Добавим кода в метод onClick() класса Listener
public void onClick(View view) { Button button = (Button) view; Game g = game; Player player = g.getCurrentActivePlayer(); if (makeTurn(x, y)) { button.setText(player.getName()); } Player winner = g.checkWinner(); if (winner != null) { gameOver(winner); } if (g.isFieldFilled()) { // в случае, если поле заполнено gameOver(); } }
Метод gameOver() реализован в 2-х вариантах:
private void gameOver(Player player) { CharSequence text = "Player "" + player.getName() + "" won!"; Toast.makeText(this, text, Toast.LENGTH_SHORT).show(); game.reset(); refresh(); } private void gameOver() { CharSequence text = "Draw"; Toast.makeText(this, text, Toast.LENGTH_SHORT).show(); game.reset(); refresh(); }
Для Java, gameOver(Player player) и gameOver() — разные методы. Воспользовавшись Builder’ом Toast.makeText, можно быстро создать и показать уведомление. refresh() обновляет состояние поля:
private void refresh() { Square[][] field = game.getField(); for (int i = 0, len = field.length; i < len; i++) { for (int j = 0, len2 = field[i].length; j < len2; j++) { if (field[i][j].getPlayer() == null) { buttons[i][j].setText(""); } else { buttons[i][j].setText(field[i][j].getPlayer().getName()); } } } }
Готово! Надеюсь, эта статья помогла Вам освоиться в мире разработки под OS Android. Благодарю за внимание!
Видео готового приложения
Исходники . PS: статья была опубликована по просьбе комментаторов этого поста. 791 460,5k 791
Операционная система Android на сегодня является одной из самых востребованных мобильных платформ во всем мире. Практически каждый обладатель Android смартфона хотел бы получить уникальное приложение, которое подойдет в конкретном случае именно ему, но не всегда можно найти такое приложение. В этой статье мы поговорим с вами о том, как сделать приложение для Андроид самому с помощью бесплатных способов.
Из-за стремительного развития платформы Андроид, некоторые функции описанных программ могут меняться, поэтому для уточнения каких либо деталей пишите в комментариях. Последняя редакция — 20.01.2018.
Естественно, прогресс не стоит на месте и с развитием ОС Android появляется все больше возможностей для создания разного рода приложений, которые подходят к ней. И если еще недавно, его мог создать только специалист который обучился этому в институте, то теперь этим может заняться любой владелец телефона или планшета Андроид в онлайн режиме.
Пользователи могут создать собственное приложение для того, чтобы порадовать себя уникальной программой. А могут сделать его для того, чтобы заработать немного денег. Сегодня интернет дает для этого все возможности.
Описанные ниже инструменты, позволят создать собственное приложение в несколько этапов.
Некоторые из представленных программ позволяют не просто сделать, но и сразу монетизировать его. Также любое из созданных приложений можно будет разместить в системе Google Play.
Четыре способа как сделать приложение для Андроид самому
Ниже вы найдете четыре «инструмента», которые позволят вам создать такое приложение быстро и без особых знаний. Такие программы напоминают конструкторы, которые по блокам позволяют создать все что вам нужно, хорошая аналогия со сборкой всем знакомого конструктора LEGO.
Все программы, представленные здесь подбирались по таким критериям:
- Удобное использование. Естественно пользоваться данными предложениями будет не обученные специалисты, а обычные пользователи, такие как мы с вами. Именно поэтому, приложение должно быть очень удобным, функциональным, и простым в ознакомлении.
- Интуитивно простой интерфейс. Если говорить логически, то данный пункт как будто вытекает из предыдущего, что значит программа должна быть не просто удобной, но и интуитивно понятной.
- Большой функционал. Большое разнообразие способов создания приложения это несомненный плюс. Хотя все представленные программы, в среднем, имеют одни и те же функции, за исключением некоторых мелочей.
Ниже познакомимся с подборкой инструментов, которые помогут вам создать свое самое первое приложение.
App Builder — простой инструмент для создания приложений
App Builder — Create own app ( FREE App maker ) Developer: Appy Pie LLP Price: Free Этот вариант является хорошим способом для создания собственных приложений быстро. Без сомнения, радует и то, что его можно использовать не вкладывая ни копейки, а значит бесплатно. Хотя тут, есть и минусы, как минимум в том, что он полностью на английском языке (после обновления в декабре 2017, добавили русский язык).
Возможности программы
- Представлен огромный выбор шаблонов для того, чтобы создать приложение. Если у вас в задумке какое-то простое приложение, то эта программа с легкостью поможет подобрать шаблон;
- После создания приложения, можно будет следить за его статистикой;
- Если вы создадите приложение и оно пройдет проверку, то его можно просто и довольно понятно разместить в магазине Google Play.
AppsGeyser — сайт для создания качественных приложений на Андроид своими силами
Сразу отметим, что AppsGeyser это не приложение, а сайт для их создания. Если в предыдущем варианте можно было создать программу с помощью вашего Андроид, то здесь понадобится компьютер.
Официальный сайт — https://www.appsgeyser.com
Этот инструмент более качественный чем предыдущий, ведь здесь намного больше возможностей для создания собственного приложения. Сайт дает возможность создать свою программу буквально за несколько минут. Этот редактор самый простой из всех, что нам встречались. Список приложений, которые он поможет вам сделать очень большой, начиная от обычного браузера и заканчивая собственным мессенджером.
Преимущества AppsGeyser
- Приложение пишется довольно быстро, буквально в пару кликов;
- Оно позволяет создать простые игры для Android, ведь согласитесь, что не каждый инструмент сегодня может это сделать;
- После того как приложение будет готово, его с легкостью можно будет разместить в магазине Гугл Плей;
- Кроме этого, можно монетизировать вашу программу непосредственно через сервис AppsGeyser. Это полезная функция, ведь проявив свою фантазию, вы можете еще и заработать на этом;
- Создавайте, редактируйте, публикуйте приложение в онлайн режиме в личном кабинете (чтобы сохранились результаты).
IbuildApp — мощный движок для разработки собственных проектов
Этот инструмент заслуживает действительно досконального рассмотрения. Как мы обсуждали выше, вам не нужно знать языка программирования, чтобы создавать Андроид приложения. Платформа разработки настолько проста, что создать свое собственное приложение будет очень просто. Процесс займет всего несколько минут, зато результат будет очевиден.
Сайт IbuildApp имеет как платные тарифы (разработка индивидуального приложения, с дальнейшим развитием) так и бесплатные шаблоны, которых очень много.
Русский официальный сайт — https://russia.ibuildapp.com
Давайте посмотрим, на что оно способно:
- Огромный архив тем на самые разные тематики: это могут быть рестораны, кафе, спортивные занятия, а также много других тем, позволяющих подобрать все что угодно. От вас потребуется только подобрать что-то конкретное, а далее отредактировать его под свои нужды;
- Также в нем есть встроенные способы продвижения созданного приложения. Программа не просто помогает быстро создать приложение, но и раскручивает его. В других случаях этот процесс занимает очень много времени;
- Кроме того, вы сможете подключить приложение к рекламной сети, а значит будете зарабатывать на нем деньги.
AppsMakerstore — платформа создания простых программ
Официальный сайт — https://appsmakerstore.com
Четвертая крутая платформа которая разработана для создания Android приложений. Наверно одним из самых главных преимуществ является то, что с помощью сайта AppsMakerStore можно создавать программы которые будут мультиплатформенными (к примеру, на Андроид, iOS и Windows Phone)
Давайте рассмотрим преимущества платформы:
- Работа с конструктором происходит в режиме онлайн;
- Возможность бесплатной регистрации;
- Написание приложений с помощью готовых макетов, при этом огромный выбор шаблонов по теме обеспечен каждому пользователю.
Видео инструкция по созданию приложения с помощью APK Creator
Изучить новый язык и среду разработки — это минимум, что от тебя потребуется, если ты захочешь написать свое первое мобильное приложение. Чтобы с пониманием набросать элементарный todo list для Android или iOS, не передирая пример из книжки, уйдет не меньше пары недель. Но можно не осваивать Objective-C или Java и при этом быстро разрабатывать приложения для смартфонов, если использовать такие технологии, как PhoneGap.
Другие статьи в выпуске:
Хакер #156. Взлом XML Encryption
Другие полезности 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. Приложение будет состоять из двух страниц: карты и списка точек.
- На карте устанавливается маркер твоего текущего положения. По клику на карте создается точка, к которой привязывается сообщение (вроде «машина рядом»). Точку можно удалить, кликнув на ней. Для перемещения маркера человека по карте используется геонавигационный API.
- На странице со списком точек должна иметься дополнительная кнопка «Удалить все точки», а рядом с каждой точкой — кнопка «Удалить эту точку». Если кликнуть по элементу в списке, соответствующая точка отобразится на карте. Настройки пользователя и список точек будем сохранять в localStorage.
UI-фреймворки
jQuery Mobile — это, конечно, не единственный фреймворк для создания мобильного интерфейса. На сайте PhoneGap приведен огромный список библиотек и фреймворков, которые ты можешь использовать (phonegap.com/tools): Sencha Touch, Impact, Dojo Mobile, Zepto.js и др.
Сразу объясняю, зачем мы будем использовать jQuery Mobile. Эта JS-библиотека предоставляет нам уже готовые элементы интерфейса мобильного приложения (максимально приближенные к нативным) для самых разных платформ. Нам ведь надо, чтобы на выходе было именно мобильное приложение, а не страничка из браузера! Так что качаем последнюю версию JQuery Mobile (jquerymobile.com/download) и переносим в рабочую папку первые файлы приложения, которые нам понадобятся:
- images/ (перенеси сюда все изображения из одноименной папки архива jq-mobile);
- index.css;
- index.html;
- index.js;
- jquery.js;
- jquery.mobile.min.css;
- jquery.mobile.min.js.
Нужно сделать ресурсы в основном локальными, чтобы пользователь в будущем не тратил мобильный интернет. Теперь создаем каркас страниц в файле index.html. Приведенный ниже код описывает верхнюю часть страницы с картой, надписью «Геонапоминалка» и кнопкой «Точки».
Страница с картой
Геонапоминалка
Точки
AppsGeyser — сайт для создания качественных приложений на Андроид своими силами
Сразу отметим, что AppsGeyser это не приложение, а сайт для их создания. Если в предыдущем варианте можно было создать программу с помощью вашего Андроид, то здесь понадобится компьютер.
Официальный сайт — https://www.appsgeyser.com
Этот инструмент более качественный чем предыдущий, ведь здесь намного больше возможностей для создания собственного приложения. Сайт дает возможность создать свою программу буквально за несколько минут. Этот редактор самый простой из всех, что нам встречались. Список приложений, которые он поможет вам сделать очень большой, начиная от обычного браузера и заканчивая собственным мессенджером.
Преимущества AppsGeyser
- Приложение пишется довольно быстро, буквально в пару кликов;
- Оно позволяет создать простые игры для Android, ведь согласитесь, что не каждый инструмент сегодня может это сделать;
- После того как приложение будет готово, его с легкостью можно будет разместить в магазине Гугл Плей;
- Кроме этого, можно монетизировать вашу программу непосредственно через сервис AppsGeyser. Это полезная функция, ведь проявив свою фантазию, вы можете еще и заработать на этом;
- Создавайте, редактируйте, публикуйте приложение в онлайн режиме в личном кабинете (чтобы сохранились результаты).
IbuildApp — мощный движок для разработки собственных проектов
Этот инструмент заслуживает действительно досконального рассмотрения. Как мы обсуждали выше, вам не нужно знать языка программирования, чтобы создавать Андроид приложения. Платформа разработки настолько проста, что создать свое собственное приложение будет очень просто. Процесс займет всего несколько минут, зато результат будет очевиден.
Сайт IbuildApp имеет как платные тарифы (разработка индивидуального приложения, с дальнейшим развитием) так и бесплатные шаблоны, которых очень много.
Русский официальный сайт — https://russia.ibuildapp.com
Давайте посмотрим, на что оно способно:
- Огромный архив тем на самые разные тематики: это могут быть рестораны, кафе, спортивные занятия, а также много других тем, позволяющих подобрать все что угодно. От вас потребуется только подобрать что-то конкретное, а далее отредактировать его под свои нужды;
- Также в нем есть встроенные способы продвижения созданного приложения. Программа не просто помогает быстро создать приложение, но и раскручивает его. В других случаях этот процесс занимает очень много времени;
- Кроме того, вы сможете подключить приложение к рекламной сети, а значит будете зарабатывать на нем деньги.
AppsMakerstore — платформа создания простых программ
Официальный сайт — https://appsmakerstore.com
Четвертая крутая платформа которая разработана для создания Android приложений. Наверно одним из самых главных преимуществ является то, что с помощью сайта AppsMakerStore можно создавать программы которые будут мультиплатформенными (к примеру, на Андроид, iOS и Windows Phone)
Давайте рассмотрим преимущества платформы:
- Работа с конструктором происходит в режиме онлайн;
- Возможность бесплатной регистрации;
- Написание приложений с помощью готовых макетов, при этом огромный выбор шаблонов по теме обеспечен каждому пользователю.
Видео инструкция по созданию приложения с помощью APK Creator
Изучить новый язык и среду разработки — это минимум, что от тебя потребуется, если ты захочешь написать свое первое мобильное приложение. Чтобы с пониманием набросать элементарный todo list для Android или iOS, не передирая пример из книжки, уйдет не меньше пары недель. Но можно не осваивать Objective-C или Java и при этом быстро разрабатывать приложения для смартфонов, если использовать такие технологии, как PhoneGap.
Другие статьи в выпуске:
Хакер #156. Взлом XML Encryption
Другие полезности 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. Приложение будет состоять из двух страниц: карты и списка точек.
- На карте устанавливается маркер твоего текущего положения. По клику на карте создается точка, к которой привязывается сообщение (вроде «машина рядом»). Точку можно удалить, кликнув на ней. Для перемещения маркера человека по карте используется геонавигационный API.
- На странице со списком точек должна иметься дополнительная кнопка «Удалить все точки», а рядом с каждой точкой — кнопка «Удалить эту точку». Если кликнуть по элементу в списке, соответствующая точка отобразится на карте. Настройки пользователя и список точек будем сохранять в localStorage.
UI-фреймворки
jQuery Mobile — это, конечно, не единственный фреймворк для создания мобильного интерфейса. На сайте PhoneGap приведен огромный список библиотек и фреймворков, которые ты можешь использовать (phonegap.com/tools): Sencha Touch, Impact, Dojo Mobile, Zepto.js и др.
Сразу объясняю, зачем мы будем использовать jQuery Mobile. Эта JS-библиотека предоставляет нам уже готовые элементы интерфейса мобильного приложения (максимально приближенные к нативным) для самых разных платформ. Нам ведь надо, чтобы на выходе было именно мобильное приложение, а не страничка из браузера! Так что качаем последнюю версию JQuery Mobile (jquerymobile.com/download) и переносим в рабочую папку первые файлы приложения, которые нам понадобятся:
- images/ (перенеси сюда все изображения из одноименной папки архива jq-mobile);
- index.css;
- index.html;
- index.js;
- jquery.js;
- jquery.mobile.min.css;
- jquery.mobile.min.js.
Нужно сделать ресурсы в основном локальными, чтобы пользователь в будущем не тратил мобильный интернет. Теперь создаем каркас страниц в файле index.html. Приведенный ниже код описывает верхнюю часть страницы с картой, надписью «Геонапоминалка» и кнопкой «Точки».
Страница с картой
Геонапоминалка
Точки
Атрибут страницы data-dom-cache=»true» необходим для того, чтобы она не выгружалась из памяти. Для кнопки «Точки» используется data-transition=»pop», чтобы страница «Список точек» открывалась с эффектом «Всплытие». Подробнее о том, как устроены страницы jQuery Mobile, можно почитать в хорошем мануале (bit.ly/vtXX3M). По аналогии создаем страницу со списком точек:
Страница со списком точек
Удалить все Точки
Карта
Для кнопки «Карта» тоже пропишем data-transition=»pop», но добавим атрибут data-direction=»reverse», чтобы страница «Карта» открывалась с эффектом «Затухание». Те же атрибуты пропишем в шаблоне точки. Все, наш каркас готов.
Теперь надо отобразить карту, для чего мы возьмем стандартный API Google Maps, который используется миллионами разных сайтов:
var latLng = new gm.LatLng( this.options.lat, this.options.lng); this.map = new gm.Map(element, { zoom: this.options.zoom, // Выбираем начальный зум center: latLng, // Устанавливаем начальный центр mapTypeId: gm.MapTypeId.ROADMAP, // Обычная карта disableDoubleClickZoom: true, // Отключаем автозум по тапу/двойному клику disableDefaultUI: true // Отключаем все элементы интерфейса });
Здесь Gm — это переменная, ссылающаяся на объект Google Maps. Параметры инициализации я хорошо закомментировал в коде. Следующий шаг — отрисовка маркера человечка на карте:
this.person = new gm.Marker({ map: this.map, icon: new gm.MarkerImage(PERSON_SPRITE_URL, new gm.Size(48, 48)) });
В качестве PERSON_SPRITE_URL используется адрес спрайта человечка из Google-панорам. Его статический адрес — maps.gstatic.com/mapfiles/cb/mod_cb_scout/cb_scout_sprite_api_003.png. Пользователь будет добавлять точки, кликая на карте, поэтому, чтобы их отрисовывать, мы будем слушать событие click:
gm.event.addListener(this.map, 'click', function (event) { self.requestMessage(function (err, message) { // Метод, возвращающий текст, введенный пользователем if (err) return; // Метод добавляет точку в список активных и // отрисовывает ее на карте self.addPoint(event.latLng, self.options.radius, message); self.updatePointsList(); // Перерисовываем список точек }); }, false);
Я привожу бОльшую часть кода — остальное ищи на диске. Дальше нам нужно научить приложение перемещать иконку пользователя по карте. В прототипе мы задействуем Geolocation API (тот, который используется в том числе в десктопных браузерах):
if (navigator.geolocation) { // Проверяем, поддерживает ли браузер геолокацию function gpsSuccess(pos) { var lat, lng; if (pos.coords) { lat = pos.coords.latitude; lng = pos.coords.longitude; } else { lat = pos.latitude; lng = pos.longitude; } self.movePerson(new gm.LatLng(lat, lng)); // Перемещаем иконку пользователя } // Каждые три секунды запрашиваем текущее // положение пользователя window.setInterval(function () { // Запрашиваем текущее положение navigator.geolocation.getCurrentPosition(gpsSuccess, $.noop, { enableHighAccuracy: true, maximumAge: 300000 }); }, 3000); }
Метод 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.
В первую очередь нужно подключить phonegap-1.2.0.js в твой индексный файл. PhoneGap позволяет ограничивать список доступных для посещения хостов. Предлагаю сразу настроить такой «белый список». В меню проекта открой Supporting Files/PhoneGap.plist, найди пункт ExternalHosts и добавь в него следующие хосты, к которым будет обращаться наше приложение (это сервера Google Maps): *.gstatic.com, *.googleapis.com, maps.google.com. Если их не указать, программа выдаст предупреждение в консоли и карта не отобразится. Для инициализации веб-версии нашего приложения мы использовали событие DOMReady или хелпер jQuery: $(document).ready(). PhoneGap генерирует событие deviceready, которое говорит о том, что мобильное устройство готово. Предлагаю этим воспользоваться:
document.addEventListener("deviceready", function () { new Notificator($("#map-canvas")[0]); // Если у пользователя нет интернета, // сообщаем ему об этом if (navigator.network.connection.type === Connection.NONE) { navigator.notification.alert("Нет интернет-соединения", $.noop, TITLE); } }, false);
Это событие проверяет, есть ли у пользователя хоть какое-нибудь интернет-соединение. Если его нет, выводим соответствующее сообщение. Вместо функции navigator.notification.alert можно использовать более привычную alert, но ее минус в том, что она выглядит менее естественно для мобильного приложения. Сейчас нам хватит и этих знаний, но ты можешь подробнее прочитать о network.connection (bit.ly/uEyRwz) и способах нотификации (bit.ly/tkvzE2).
Запретим скроллинг: document.addEventListener("touchmove", function (event) { event.preventDefault(); }, false);
Затем заменим все вызовы alert и confirm на нативные, которые предоставляет нам PhoneGap:
navigator.notification.confirm('Удалить точку?', function (button_id) { if (button_id === 1) { // Нажата кнопка OK self.removePoint(point); } }, TITLE);
Последнее, что нам нужно поменять, — это блок кода, перемещающий иконку пользователя по карте. Наш текущий код тоже работает, но работает менее оптимально (перемещает иконку, даже если координаты не изменились) и дает не такие богатые данные, как аналог в PhoneGap:
navigator.geolocation.watchPosition(function (position) { self.movePerson(new gm.LatLng( position.coords.latitude, position.coords.longitude)); }, function (error) { navigator.notification.alert( 'code: ' + error.code + 'nmessage: ' + error.message, $.noop, TITLE ); }, { frequency: 3000 });
Этот код более изящный — он генерирует событие только тогда, когда координаты изменились. Жмем кнопку Run и убеждаемся, что только что созданное нами приложение отлично работает в симуляторе iOS-устройства! Пора приступать к запуску на реальном устройстве.
Подсоедини iPhone, iPod или iPad к компьютеру, на котором запущен Xcode. Программа определит новое устройство и попросит разрешения использовать его для разработки. Нет смысла ей отказывать :). Повторю еще раз: чтобы запустить написанное приложение на iOS, необходимо быть авторизированным разработчиком iOS (другими словами, быть подписанным на iOS Developer Program). Этим придется заморочиться только в случае разработки приложений для продукции Apple, с другими платформами (Android, Windows Phone) все намного проще. У тех, кто обучается в вузе, есть шанс получить доступ к программе бесплатно благодаря каким-нибудь льготам. Все остальные должны платить $99 в год для участия в программе. Apple выдает сертификат, которым ты сможешь подписывать свой код. Подписанное приложение разрешается запускать на iOS и распространять в App Store. Если ты не студент, а $99 для невинных экспериментов тебе пока жалко, то есть и другой способ — обмануть систему. Ты можешь создать самоподписанный сертификат для верификации кода и запустить мобильную программу на джейлбрейкнутом iOS-устройстве (не буду на этом останавливаться, потому что все максимально подробно расписано в этой статье: bit.ly/tD6xAf). Так или иначе, ты вскоре увидишь работающее приложение на экране своего мобильного телефона. Останавливай секундомер. Сколько времени у тебя на это ушло?
Другие платформы
Кроме PhoneGap, существуют и другие платформы, позволяющие создавать мобильные приложения без использования нативных языков. Перечислим наиболее крутых игроков.
Appcelerator Titanium (www.appcelerator.com).
Titanium умеет собирать приложения в первую очередь под Android и iPhone, но в нем также заявлена поддержка BlackBerry. Кроме самого фреймворка, проект предоставляет набор нативных виджетов и IDE. Ты можешь разрабатывать приложения на Titanium бесплатно, однако за поддержку и дополнительные модули придется заплатить (от $49 в месяц). Цена некоторых сторонних модулей доходит до $120 за год. Разработчики Appcelerator Titanium утверждают, что на основе их фреймфорка написано более 25 тысяч приложений. Исходный код проекта распространяется под лицензией Apache 2.
Corona SDK (www.anscamobile.com/corona).
Эта технология поддерживает основные платформы — iOS и Android. Фреймворк нацелен в основном на разработку игр. Еще бы, ведь разработчики заявляют о высококачественной оптимизации на OpenGL. Бесплатной версии у платформы нет, а цена довольно-таки кусачая: $199 в год за лицензию для одной платформы и $349 в год для iOS и Android. Corona предлагает свою IDE и эмуляторы устройств. Приложения под Corona пишут на языке, похожем на JavaScript.
Мы создали простое мобильное веб-приложение и в несколько простых шагов портировали его на платформу iOS с помощью PhoneGap. Мы не написали ни строчки кода на Objective-C, но получили программу приличного качества, потратив минимум времени на перенос и изучение API PhoneGap. Если ты предпочитаешь другую платформу, например Android или Windows Mobile 7, то ты так же легко, без каких-либо изменений под эти платформы, сможешь собрать наше приложение (для каждой из них есть хороший вводный мануал и видеоурок: phonegap.com/start). Чтобы убедиться в состоятельности платформы, можно посмотреть на уже готовые приложения на PhoneGap, которые разработчики технологии собрали в специальной галерее (phonegap.com/apps). По факту PhoneGap — это идеальная платформа для создания как минимум прототипа будущего приложения. Ее главными преимуществами являются быстрота и минимум затратат, чем активно пользуются стартапы, которые во всех отношениях ограничены в ресурсах. Если приложение попрет, а внутренности на HTML+JS тебя по какой-то причине перестанут устраивать, всегда можно будет портировать приложение на нативный язык. Не могу не сказать, что PhoneGap изначально разрабатывался компанией Nitobi как открытый проект (репозиторий располагается на GitHub: github.com/phonegap). Исходники и дальше будут оставаться открытым, хотя в октябре прошлого года компанию Nitobi купил Adobe. Нужно ли говорить, какие перспективы появляются у проекта при поддержке в лице такого гиганта?
- https://www.kv.by/post/1056531-kak-sozdat-svoe-pervoe-prilozhenie-dlya-android-poshagovaya-instrukciya-dlya-novichkov
- https://m.habr.com/ru/post/164853/
- https://m.habr.com/ru/post/110247/
- https://gurudroid.net/kak-sdelat-prilozhenie-dlya-android-samomu.html
- https://xakep.ru/2014/09/24/phonegap/