Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save anonymous/6dcd09bdf5dd9ad308a9786e3078585b to your computer and use it in GitHub Desktop.
Save anonymous/6dcd09bdf5dd9ad308a9786e3078585b to your computer and use it in GitHub Desktop.
Как сделать собственное приложение

Как сделать собственное приложение - Как создать свое прибыльное мобильное приложение



Изучить новый язык и среду разработки — это минимум, что от тебя потребуется, если ты захочешь написать свое первое мобильное приложение. Чтобы с пониманием набросать элементарный todo list для Android или iOS, не передирая пример из книжки, уйдет не меньше пары недель. Но можно не осваивать Objective-C или Java и при этом быстро разрабатывать приложения для смартфонов, если использовать такие технологии, как PhoneGap. Если ты внимательно изучал нововведения, которые ожидают нас в Windows 8, то, возможно, заметил, что под ней можно будет разрабатывать приложения на HTML5. Идея, на самом деле, не новая — технологии, реализующие тот же подход для мобильных платформ, развиваются семимильными шагами. Одним из таких фреймворков, позволяющим разрабатывать приложения для смартфонов с помощью связки привычных для нас HTML, JavaScript и CSS! Написанное с его помощью приложение подойдет для всех популярных платформ: Тебе не нужно будет изучать особенности программирования под каждую платформу например, Objective-C в случае с iOS , разбираться с различными API и средами разработки. Все, что потребуется для создания кросс-платформенного мобильного приложения, — это знание HTML5 и специального PhoneGap API. API фреймворка позволяет задействовать практически все возможности телефона, которые используются при разработке с помощью нативных инструментов: Наконец, такое приложение может безболезненно обращаться к любому кросс-доменному адресу. Ты можешь воссоздать нативные элементы управления с помощью фреймворков вроде jQuery Mobile или Sencha, и конечная программа будет выглядеть на мобильном телефоне так, как будто она написана на нативном языке ну или почти так. Лучше всего проиллюстрировать вышесказанное на деле, то есть написать приложение, поэтому предлагаю сразу приступить к практике. Засекай время — на все про все уйдет едва ли больше получаса. Под все платформы и в один клик! Ты можешь зарегистрироваться на сайте PhoneGap Build build. С его помощью ты вправе собрать неограниченное число приложений с открытым исходным кодом и одно приложение с закрытыми исходниками. Понятно, что если нужно скомпилировать больше закрытых приложений, то придется немного заплатить. Существует целый репозиторий github. Сейчас под iOS написано более 20 плагинов: BarcodeScanner сканер штрих-кодов , AdPlugin отображения рекламы iAd , NativeControls нативные для iOS контролы и другие. В качестве целевой платформы возьмем iOS — да-да, деньги лежат в AppStore, и монетизировать свои разработки пока лучше всего там: Но сразу внесу ясность: Долго думал, какой пример рассмотреть, так как писать очередную тулзу для учета списка дел совершенно не хотелось. Это почти то же самое, только чуть попроще. Ты сможешь указать на карте города точку, задать для нее определенный радиус и запрограммировать сообщение. Когда ты в следующий попадешь в пределы окружности с указанным радиусом, приложение выдаст тебе уведомление, а точка будет удалена. Будем действовать по такому плану: Очень важно написать в прототипе и протестировать в браузере на компьютере основную часть кода, поскольку отлаживать приложение в телефоне гораздо сложнее. В качестве каркаса мы возьмем JS-фреймворк jQuery c jQuery Mobile jquerymobile. Приложение будет состоять из двух страниц: На сайте PhoneGap приведен огромный список библиотек и фреймворков, которые ты можешь использовать phonegap. Sencha Touch, Impact, Dojo Mobile, Zepto. Каркас приложения Сразу объясняю, зачем мы будем использовать jQuery Mobile. Эта JS-библиотека предоставляет нам уже готовые элементы интерфейса мобильного приложения максимально приближенные к нативным для самых разных платформ. Нам ведь надо, чтобы на выходе было именно мобильное приложение, а не страничка из браузера! Так что качаем последнюю версию JQuery Mobile jquerymobile. Нужно сделать ресурсы в основном локальными, чтобы пользователь в будущем не тратил мобильный интернет. Теперь создаем каркас страниц в файле index. Подробнее о том, как устроены страницы jQuery Mobile, можно почитать в хорошем мануале bit. По аналогии создаем страницу со списком точек:. Те же атрибуты пропишем в шаблоне точки. Все, наш каркас готов. Теперь надо отобразить карту, для чего мы возьмем стандартный API Google Maps, который используется миллионами разных сайтов:. Здесь Gm — это переменная, ссылающаяся на объект Google Maps. Параметры инициализации я хорошо закомментировал в коде. Следующий шаг — отрисовка маркера человечка на карте:. Его статический адрес — maps. Пользователь будет добавлять точки, кликая на карте, поэтому, чтобы их отрисовывать, мы будем слушать событие click:. Я привожу бОльшую часть кода — остальное ищи на диске. Дальше нам нужно научить приложение перемещать иконку пользователя по карте. В прототипе мы задействуем Geolocation API тот, который используется в том числе в десктопных браузерах:. Метод movePerson с помощью простой процедуры getPointsInBounds проверяет, не находится ли пользователь в какой-нибудь активной точке. Последний вопрос — где хранить список точек? В HTML5 появилась возможность использовать localStorage, так что не будем ей пренебрегать предоставляю тебе самостоятельно разобраться с этими участками кода, которые я хорошо закомментировал. Итак, приложение, работающее в браузере, готово! Как я уже говорил, отладку в основном необходимо выполнять на компьютере. Самый подходящий браузер для тестирования веб-приложений на компьютере — это Safari или Chrome. Оба этих браузера совместимы с большинством мобильных веб-браузеров, поскольку точно так же, как и они, построены на основе движка WebKit. После устранения всех багов можно переходить к запуску мобильного веб-приложения непосредственно на телефоне. Для этого настрой свой веб-сервер пусть даже Denwer или XAMPP , чтобы он отдавал созданную страницу, и открой ее уже в браузере мобильного телефона. Приложение должно выглядеть примерно так, как показано на рисунке. Тут важно понимать, что будущее мобильное приложение, собранное для мобильной платформы с помощью PhoneGap, будет выглядеть почти один в один, за исключением того, что на экране не будет отображаться навигационная панель браузера. Если все хорошо, можно приступать к созданию из странички полноценного iOS-приложения. Заметь, что PhoneGap и IDE для мобильной разработки мы до этого момента даже не трогали. Для того чтобы собрать приложение под iOS, тебе нужен компьютер с операционной системой Mac OS Если у тебя не установлен SDK, придется скачать с сайта Apple образ диска, включающий в себя Xcode и iOS SDK developer. Имей в виду, что образ весит около 4 Гб. Кроме этого, тебе понадобится зарегистрироваться на сайте Apple в качестве разработчика если ты не собираешься публиковать свое приложение в AppStore, то это требование можно обойти. С помощью этого набора можно разрабатывать приложения на нативном для iOS языке Objective-C. Но мы решили пойти обходным путем и воспользоваться PhoneGap, поэтому нам еще нужно установить пакет PhoneGap iOS. Просто скачай архив с офсайта https: Когда установка завершится, в меню проектов Xcode должна появиться иконка PhoneGap. После запуска придется заполнить несколько форм, но уже очень скоро ты увидишь рабочую область IDE с твоим первым приложением. Собранная программа выдаст ошибку с сообщением о том, что index. Открой папку, в которой ты сохранил первичные файлы проекта, и найди в ней подпапку www. Если запустить программу еще раз, то все должно заработать. Теперь можно скопировать все файлы нашего прототипа в папку www. Пора подпилить наш прототип для работы на смартфоне в обработке PhoneGap. В первую очередь нужно подключить phonegap PhoneGap позволяет ограничивать список доступных для посещения хостов. Если их не указать, программа выдаст предупреждение в консоли и карта не отобразится. Для инициализации веб-версии нашего приложения мы использовали событие DOMReady или хелпер jQuery: PhoneGap генерирует событие deviceready, которое говорит о том, что мобильное устройство готово. Это событие проверяет, есть ли у пользователя хоть какое-нибудь интернет-соединение. Если его нет, выводим соответствующее сообщение. Сейчас нам хватит и этих знаний, но ты можешь подробнее прочитать о network. Последнее, что нам нужно поменять, — это блок кода, перемещающий иконку пользователя по карте. Наш текущий код тоже работает, но работает менее оптимально перемещает иконку, даже если координаты не изменились и дает не такие богатые данные, как аналог в PhoneGap:. Этот код более изящный — он генерирует событие только тогда, когда координаты изменились. Жмем кнопку Run и убеждаемся, что только что созданное нами приложение отлично работает в симуляторе iOS-устройства! Пора приступать к запуску на реальном устройстве. Подсоедини iPhone, iPod или iPad к компьютеру, на котором запущен Xcode. Программа определит новое устройство и попросит разрешения использовать его для разработки. Нет смысла ей отказывать: Этим придется заморочиться только в случае разработки приложений для продукции Apple, с другими платформами Android, Windows Phone все намного проще. У тех, кто обучается в вузе, есть шанс получить доступ к программе бесплатно благодаря каким-нибудь льготам. Apple выдает сертификат, которым ты сможешь подписывать свой код. Подписанное приложение разрешается запускать на iOS и распространять в App Store. Ты можешь создать самоподписанный сертификат для верификации кода и запустить мобильную программу на джейлбрейкнутом iOS-устройстве не буду на этом останавливаться, потому что все максимально подробно расписано в этой статье: Так или иначе, ты вскоре увидишь работающее приложение на экране своего мобильного телефона. Сколько времени у тебя на это ушло? Кроме PhoneGap, существуют и другие платформы, позволяющие создавать мобильные приложения без использования нативных языков. Перечислим наиболее крутых игроков. Titanium умеет собирать приложения в первую очередь под Android и iPhone, но в нем также заявлена поддержка BlackBerry. Кроме самого фреймворка, проект предоставляет набор нативных виджетов и IDE. Разработчики Appcelerator Titanium утверждают, что на основе их фреймфорка написано более 25 тысяч приложений. Исходный код проекта распространяется под лицензией Apache 2. Эта технология поддерживает основные платформы — iOS и Android. Фреймворк нацелен в основном на разработку игр. Еще бы, ведь разработчики заявляют о высококачественной оптимизации на OpenGL. Бесплатной версии у платформы нет, а цена довольно-таки кусачая: Corona предлагает свою IDE и эмуляторы устройств. Приложения под Corona пишут на языке, похожем на JavaScript. Заключение Мы создали простое мобильное веб-приложение и в несколько простых шагов портировали его на платформу iOS с помощью PhoneGap. Мы не написали ни строчки кода на Objective-C, но получили программу приличного качества, потратив минимум времени на перенос и изучение API PhoneGap. Если ты предпочитаешь другую платформу, например Android или Windows Mobile 7, то ты так же легко, без каких-либо изменений под эти платформы, сможешь собрать наше приложение для каждой из них есть хороший вводный мануал и видеоурок: Чтобы убедиться в состоятельности платформы, можно посмотреть на уже готовые приложения на PhoneGap, которые разработчики технологии собрали в специальной галерее phonegap. По факту PhoneGap — это идеальная платформа для создания как минимум прототипа будущего приложения. Ее главными преимуществами являются быстрота и минимум затратат, чем активно пользуются стартапы, которые во всех отношениях ограничены в ресурсах. Не могу не сказать, что PhoneGap изначально разрабатывался компанией Nitobi как открытый проект репозиторий располагается на GitHub: Исходники и дальше будут оставаться открытым, хотя в октябре прошлого года компанию Nitobi купил Adobe. Нужно ли говорить, какие перспективы появляются у проекта при поддержке в лице такого гиганта? PhoneGAp — это круто, но боюсь рынок некачественных девелоперов увеличится, коли так все просто. Еще, чувствую, прибегут разработчики и начнут кричать: Перенес в рабочую папку всё, что нужно, кроме index. Можно считать, что jquery. Чтобы оставить мнение, нужно залогиниться. Вардрайвингом всерьёз можно заниматься и со смартфона, но для этого мало встроенного радио…. Данные участников не передаются третьим лицам. Смотри во все глаза. Как создать программу для смартфона за полчаса. Содержание статьи Другие полезности PhoneGap UI-фреймворки Другие платформы. Далее по этой теме Ранее по этой теме. Интервью с Яковом Файном Яков Файн — организатор Princeton Java Users Group, является автором и соавтором большого …. Хорошая попытка, JavaScript, но… В этом выпуске: NativeScript, интересная библиотека для нативной разработки на JavaScript …. Что интересного могут рассказать бесплатные геоинформационные API Географические координаты — самая ценная инфа, которую веб-разработчик может получить от п…. Прототипируй правильно, верстай быстро! Подборка приятных полезностей для разработчиков Существует множество различных фреймворков или даже, правильнее сказать, тулкитов ExtJS, …. История мобильного вирусописательства на примере Android Содержание статьиДо нашей эры, или как написать вирус за 15 минутGeinimi и все-все-всеDroi…. Подборка приятных полезностей для разработчиков Мы живем в прекрасном мире, где программисты не стесняются выкладывать различные вкусности…. Обзор фрагментов кода самых популярных типов вирусов В коллекции вредоносных Android-приложений некоторых антивирусных лабораторий содержится у…. Обзор веб-инструментов для создания приложений без использования Android SDK Оказывается, для того, чтобы нормально кодить под Android, достаточно знаний HTML5, CSS3 и…. FAQ Отвечаем на вопросы читателей. Кто поможет создать программу? Как бы исходник увидеть? С каких это пор? Оставить мнение отменить Чтобы оставить мнение, нужно залогиниться. Взлом Wi-Fi со смартфона. Выполняем аудит точек доступа с Kali NetHunter и внешним Wi-Fi адаптером Вардрайвингом всерьёз можно заниматься и со смартфона, но для этого мало встроенного радио…. Выполняем аудит точек доступа с Kali NetHunter и внешним Wi-Fi адаптером 7 часов назад. Мошенники используют поддельный Tor браузер, заманивая пользователей в фальшивый даркнет 10 часов назад. В протоколе NTLM обнаружены две уязвимости, но исправлена только одна 21 час назад. Бывший директор по безопасности рассказал, как взломал Межштатную лотерейную ассоциацию 22 часа назад. Колонка Евгения Зобнина Google готовит замену Android? Что нужно знать хакеру для участия в конкурсных Bug Bounty Страх и ненависть MIUI. Последние новости 7 часов назад Вымогатель LeakerLocker угрожает разослать историю браузера всем контактам жертвы 9 часов назад Данные 14 клиентов Verizon хранились на неправильно настроенном сервере 10 часов назад Мошенники используют поддельный Tor браузер, заманивая пользователей в фальшивый даркнет 21 час назад В протоколе NTLM обнаружены две уязвимости, но исправлена только одна 22 часа назад Бывший директор по безопасности рассказал, как взломал Межштатную лотерейную ассоциацию. Вопросы по сайту, подписке, журналу: Хочешь годовую подписку в подарок?


Как лечить анемию у взрослых лекарства
М н олимпийский карта
Как сделать мобильное приложение самому
Видео пися и попка крупным планом
Доброе утро на украинском языке перевод
Дэу матиз где находится датчик кислорода
Что относится к характеристике товара
Расписание электричек с безенчука до 1004 км
График неполной квадратичной функции
Адрес поликлиники по месту жительства
Если работа не приносит результатов
Двумя способами первый способ
Как создать программу для смартфона за полчаса
Коды на tdp4 проект тьмы
Как правильно спланировать свадьбу
Открытие спорт бара
Каталог измерительного инструмента
Тесты основы противодействия коррупции
Как создать свое прибыльное мобильное приложение
Как сделать крышу беседки из поликарбоната
Как посадить саженцы клубники
Пигментация на руках фото
Делай 4 буквы
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment