Согласитесь, без такого вида интеллектуальной деятельности как программирование уже давно не обходится ни одна сфера нашего общества. Прогресс в развитии мощностей современных вычислительных машин набирает всё большие и большие обороты, требуя огромное количество программного обеспечения. Ежедневно не покладая рук трудятся миллионы IT-специалистов, создаётся немыслимое количество ПО, и этому нет предела. Поэтому, чтобы помочь развитию новых поколений кодеров, мы решили подготовить подборку соответствующих приложений! Telegram-каналсоздателяТрешбоксапротехнологии

Среды программирования:

AIDE 3.2.191128 К тому же разработчик предоставляет широкий курс интерактивных уроков по изучению разработки на Java под Android. Пройдя такие курсы, вы сможете создавать неплохие приложения и даже игры для ОС Android. Конечно всё-таки стоит запастись полноценными учебниками (например, «Философия Java» Брюса Эккеля), так как теории уделяется мало внимания, а о практике, не имея теоретических знаний, можно не мечтать. AIDE Web 1.0.191127 Как и в случае с AIDE, в Web можно найти отличные уроки по HTML, JavaScript и CSS, в которых можно отточить свои навыки. Но хочется напомнить, что теории в них поставляется недостаточно, пользуйтесь учебниками по интересующим вас разделам веб-программирования.

Учебники и тесты:

С++ Programming 2.0 C++ остаётся одним из самых популярных и изучаемых языков программирования в мире, к тому же это родной язык Windows, популярнейшей ОС для ПК. Изучение C++ становится возможным благодаря множеству полезных книг, посвящённых проблемам языка, а также немалому количеству справочников, одним из которых и является следующее приложение. C++ Programming — отличный сборник туториалов, программ, FAQ и экзаменационных вопросов. Приложение оформлено в ярком Material Design, который способствует более комфортному получению информации. Java Programming 2.0.1 C Programming 3.0 Также у разработчика имеются ещё два аналогичных справочника: по C и Java, которые также стоит «полистать». Там вы также сможете отыскать интересные уроки, примеры программ, заковыристые вопросы и многое другое. Programming Hub 5.0.14 Если программа вам очень понравилась, то вы можете купить премиум версию, которая включает в себя более быструю развёртку обновлений, полноэкранный режим и отсутствие рекламы, весь же полезный материал поставляется совершенно бесплатно. Можете угостить разработчика за такую щедрость «чашкой кофе». Javvy 1.4.1 Ранее мы уже рассказывали вам об этой программе. Java — один из самых востребованных на данный момент языков, один тот факт, что Android использует в своей основе Java, говорит о многом. Javvy — отличный сервис для изучения Java, содержащий в себе множество разнообразных уроков по программированию. Хороший дизайн не обошёл Javvy стороной, «учебник» очень приятно читать. Первый урок доступен абсолютно бесплатно, но, к несчастью, за последующие придётся выложить денежку, хотя если вы действительно хотите хорошо разбираться в Java, то вам будет не жалко своих денег. Изучаем Java 1.20 P.S.: приложение является не только хорошим сборником тестов, но и великолепным генератором лестных выражений:) Учим C++ 4.8.1 Учим Java 3.8.1 Учим JavaScript 5.9.2 Учим HTML 5.8.1 Udacity 5.1.1 Мы с вами живём в 21-ом веке, и для многих из нас типичный формат получения знаний порядком устарел. Можно часами просиживать на лекциях и зубрить учебники, но в наше время знания можно получать в удобном для восприятия видео-формате. Приложение Udacity представляет из себя библиотеку видеоуроков по программированию практически на чём угодно: начиная с псевдокода и заканчивая модными языками программирования.

Другие:

F-Droid 0.104 Эта программа не похожа на другие, представленные в статье. F-Droid — открытый репозиторий, включающий в себя множество разнообразных проектов: начиная от малоизвестных и заканчивая «гигантами» вроде AdBlock. Но это не очередной Play Market — здесь каждое приложение имеет открытый исходный код, который вы при желании можете изучить в свободное время. Сама программа не имеет доступа к редактору кода, однако вы можете перейти по выделенной в каждом разделе ссылке и скачать исходники, открыв их с помощью того же AIDE. Linux Deploy 2.5.0 VNC Viewer 3.6.1 Всегда мечтали иметь устройство с полноценной OS Linux в кармане? Ваши мечты вполне осуществимы благодаря программе Linux Deploy, которая создаст образ диска, установит туда полноценный Linux-дистрибутив и затем запустит сервис VNC для доступа к рабочему столу с любого устройства: вашего смартфона, планшета или ПК. Telegram-каналпротехнологиисинсайдамиирозыгрышами Последнее изменение: 11 мая 2017 — 21:48

Источник: ITmentor

Udacity

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

Swifty

iOS-приложение для изучения языка программирования Swift, который разработан компанией Apple.

Swift Playgrounds

Приложение Swift Playgrounds — самый простой способ познакомиться с языком Swift. Создавайте собственные приложения прямо на планшете, используя существующие шаблоны или придумывая уникальные.

Codecademy Hour of Code

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

Lrn

Сервис, который поможет научить писать код на одном из популярных языков программирования: HTML, CSS, Python, Ruby, Javascript. Доступен в виде приложения для iOS (Android-версия в разработке).

Tynker

Tynker — это одна из самых популярных обучающих платформ для детей. Она используется более чем в 8 000 школ и помогает более чем 6 миллионам детей начать программировать. Также доступно iOS-приложение.

Khan Academy

Khan Academy, известный образовательный ресурс, выпустил приложения для Android и iOS, которые дадут вам возможность проходить курсы платформы где угодно.

Javvy

Интерактивное учебное пособие по языку программирования Java, благодаря которому можно получить базовые знания о языке и научиться основам программирования в целом. Весь курс обучения включает более 150 уроков. Доступно в Google Play и iTunes.

SoloLearn

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

Coursera: Online courses

Бесплатные курсы ведущих университетов мира на Coursera теперь доступны и в виде приложений для Android и iOS.

EdX — Online Courses

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

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

CodeCombat

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

CodeWars

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

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

Не смешно? А здесь смешно: @ithumor

Каждый разработчик периодически сталкивается с необходимостью искать свежие программы для повышения КПД собственной деятельности, упрощающие решение будничных задач или несущие в себе новое знание. Но почему-то мало кто задумывается о том, что карманный гаджет тоже может быть полезен как для совместного использования с компьютером, так и для удалённых правок. Ниже вы найдете несколько приложений, которые непременно сделают ваш рабочий день продуктивнее. Если вы только погружаетесь в веб-разработку, рекомендуем делать это на нашем бесплатном онлайн-интенсиве.

DrawExpress Diagram

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

DroidEdit

Как следует из названия, это текстовый редактор кода для проверки и вёрстки на ходу. Здесь можно найти стандартное подсвечивание данных, блоков и операций, возможность поиска и замены, а также «горячие клавиши» для быстрой навигации. DroidEdit обучен языкам, в числе которых C++, Java, Ruby и множество других. Имеются бесплатная версия и версия Pro за 149 рублей.

CppDroid — C/C++ IDE

По сути тоже самое, что и DroidEdit, но это приложение работает с выбранной группой языков, содержит пакеты примеров (в том числе обучения) и поддерживает DropBox, что крайне полезно для работы вдали от работы.

Programmer Keyboard

Любой человек IT-мира знает это чувство, когда на планшете или мобильном устройстве чертовски сильно не хватает под рукой старых добрых CTRL и ALT (хотя бы просто из-за проблемы копирования в стандартном браузере). На помощь вам придёт Programmer Keyboard, тут вам и все кнопки, и активная помощь Т9 в написании программ. Как альтернативу можете рассмотреть Hacker’s Keyboard.

AIDE

Здесь всё просто — приложение на Android для разработки Android-приложения. Главной особенностью является работа с DropBox, то есть вы сможете взаимодействовать с компьютером, вносить изменения, и выгружать обратно. Все необходимые функции вроде проверки ошибок, рефакторинга, автодополнения кода на месте. За платную версию придётся заплатить без малого 590 рублей, но, к счастью, все свои сомнения можно проверить на бесплатной версии. Кроме того, существует AIDE для работы с веб.

TeamViewer

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

Programmers Calculator Binary

Обычный калькулятор «программиста», оснащённый как математическими функциями, так и конвертацией. Как альтернативу можете рассмотреть Programmer Calculator — здесь есть ещё и логические функции.

Color Picker

Полезное приложение для тех, чья профессия наводить красоту в интернете (и биться за каждый полутон с заказчиком). Функция Color Picker проста — подобрать тот самый цвет и узнать его шестнадцатеричное значение. В дополнение обязательно скачайте Fontest — заодно подберёте шрифт.

WordPress for Android

Для тех, кто занимается созданием сайтов — не надо объяснять, что делает это приложение. Для остальных отметим, что с его помощью вы сможете редактировать записи на своём ресурсе, добавлять их, а также отслеживать статистику. Аналогичное приложение есть у Drupal (Drupal Editor) и у Joomla! (Joooid!).

WebMaster’s HTML Editor

Редактор исходных текстов, написанных на HTML, PHP, JS, CSS с функциями подсветки синтеза и дополнением кода. Кроме того, есть функции поиска и замены, «горячие клавиши» и крайне удобные в редактировании Undo/Redo. Бесплатная версия имеет приставку Lite и ограничивает лишь функции автодополнения (предоставляется лишь самый очевидный вариант) и предпросмотра. Полная версия обойдётся в 199 рублей.

Удачной работы!

Тем, кто хочет разобраться в веб-разработке, рекомендуем профессию «Веб-разработчик» от GeekBrains. «>

Каждый разработчик периодически сталкивается с необходимостью искать свежие программы для повышения КПД собственной деятельности, упрощающие решение будничных задач или несущие в себе новое знание. Но почему-то мало кто задумывается о том, что карманный гаджет тоже может быть полезен как для совместного использования с компьютером, так и для удалённых правок. Ниже вы найдете несколько приложений, которые непременно сделают ваш рабочий день продуктивнее. Если вы только погружаетесь в веб-разработку, рекомендуем делать это на нашем бесплатном онлайн-интенсиве.

DrawExpress Diagram

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

DroidEdit

Как следует из названия, это текстовый редактор кода для проверки и вёрстки на ходу. Здесь можно найти стандартное подсвечивание данных, блоков и операций, возможность поиска и замены, а также «горячие клавиши» для быстрой навигации. DroidEdit обучен языкам, в числе которых C++, Java, Ruby и множество других. Имеются бесплатная версия и версия Pro за 149 рублей.

CppDroid — C/C++ IDE

По сути тоже самое, что и DroidEdit, но это приложение работает с выбранной группой языков, содержит пакеты примеров (в том числе обучения) и поддерживает DropBox, что крайне полезно для работы вдали от работы.

Programmer Keyboard

Любой человек IT-мира знает это чувство, когда на планшете или мобильном устройстве чертовски сильно не хватает под рукой старых добрых CTRL и ALT (хотя бы просто из-за проблемы копирования в стандартном браузере). На помощь вам придёт Programmer Keyboard, тут вам и все кнопки, и активная помощь Т9 в написании программ. Как альтернативу можете рассмотреть Hacker’s Keyboard.

AIDE

Здесь всё просто — приложение на Android для разработки Android-приложения. Главной особенностью является работа с DropBox, то есть вы сможете взаимодействовать с компьютером, вносить изменения, и выгружать обратно. Все необходимые функции вроде проверки ошибок, рефакторинга, автодополнения кода на месте. За платную версию придётся заплатить без малого 590 рублей, но, к счастью, все свои сомнения можно проверить на бесплатной версии. Кроме того, существует AIDE для работы с веб.

TeamViewer

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

Programmers Calculator Binary

Обычный калькулятор «программиста», оснащённый как математическими функциями, так и конвертацией. Как альтернативу можете рассмотреть Programmer Calculator — здесь есть ещё и логические функции.

Color Picker

Полезное приложение для тех, чья профессия наводить красоту в интернете (и биться за каждый полутон с заказчиком). Функция Color Picker проста — подобрать тот самый цвет и узнать его шестнадцатеричное значение. В дополнение обязательно скачайте Fontest — заодно подберёте шрифт.

WordPress for Android

Для тех, кто занимается созданием сайтов — не надо объяснять, что делает это приложение. Для остальных отметим, что с его помощью вы сможете редактировать записи на своём ресурсе, добавлять их, а также отслеживать статистику. Аналогичное приложение есть у Drupal (Drupal Editor) и у Joomla! (Joooid!).

WebMaster’s HTML Editor

Редактор исходных текстов, написанных на HTML, PHP, JS, CSS с функциями подсветки синтеза и дополнением кода. Кроме того, есть функции поиска и замены, «горячие клавиши» и крайне удобные в редактировании Undo/Redo. Бесплатная версия имеет приставку Lite и ограничивает лишь функции автодополнения (предоставляется лишь самый очевидный вариант) и предпросмотра. Полная версия обойдётся в 199 рублей.

Удачной работы!

Тем, кто хочет разобраться в веб-разработке, рекомендуем профессию «Веб-разработчик» от GeekBrains.

Здравствуйте. Сегодня на глаза попался пост о курсе программирования под 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 редактора ввести следующее:

                lativeLayout> 

Обратите внимание на /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

Изучить новый язык и среду разработки — это минимум, что от тебя потребуется, если ты захочешь написать свое первое мобильное приложение. Чтобы с пониманием набросать элементарный 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://trashbox.ru/topics/91836/luchshie-android-prilozheniya-dlya-obucheniya-programmirovaniyu
• https://tproger.ru/digest/11-mobile-apps-to-learn-coding/
• https://geekbrains.ru/posts/apps_for_developers
• https://m.habr.com/ru/post/164853/
• https://xakep.ru/2014/09/24/phonegap/