Web разработка под iPhone

    Пока все Интернет сообщество со всех сторон продолжает обсуждать, как же можно приспособить iPad для работы, я бы хотел все же вернуться к iPhone. По профессии я программист и люблю новые технологии. И очень мне уж хотелось сделать приложение для своего телефона, но вот как-то душа к Objective C не лежит пока что, да и макбука с лицензией разработчика тоже пока нет. И мне стало интересно, могу ли используя знания html и js написать что-нибудь. Оказалось что да, и способов очень даже много. О них – под катом.

    Способ первый – просто и со вкусом



    Само собой, можно просто написать веб сайт и его адаптировать. Об этом на Хабре уже писали. К написанному в той статье мне бы хотелось добавить две вещи.

    Во-первых, с появлением html 5 появилась возможность работы с локальными базами данных. И все браузере на движке WebKit (само собой последние апдейты) уже поддерживают эту возможность. Работать с ней более чем просто.
    db = openDatabase("TestDB", "1.0", "HTML5 Database", 200000);

    * This source code was highlighted with Source Code Highlighter.

    В функцию создания базы данных передаются следующие параметры:
    • Название базы данных
    • Ее версия
    • Отображаемое имя
    • Размер в байтах

    Далее открываем транзакцию и выполняем нужные нам действия
    db.transaction(function(tx)
        {
          tx.executeSql("DELETE FROM tbl_test WHERE id = ?", [item.id]);
        });

    * This source code was highlighted with Source Code Highlighter.


    Во-вторых, стоит сказать об оффлайновом режиме работы с помощью создания manifest-файла. Подробно об этом можно прочитать на сайте Apple.
    Вкратце что это такое. Манифест это обыкновенный файл, такой же, как например, css или js, содержащий в себе информацию о кэше приложения. Когда вы первый раз заходите на страницу, ресурсы, указанные в этом файле кэшируются.

    Теперь как все выглядит на деле:

    1. Указываем ссылку на файл на нужной нам странице

    <html manifest="demo.manifest">

    * This source code was highlighted with Source Code Highlighter.


    2. Создаем сам файл

    CACHE MANIFEST

    demoimages/clownfish.jpg
    demoimages/clownfishsmall.jpg
    demoimages/flowingrock.jpg
    demoimages/flowingrocksmall.jpg
    demoimages/stones.jpg
    demoimages/stonessmall.jpg


    И после этого все работает. С кэшем можно работать — апдейтить его, обрабатывать события и так далее.

    Все это мне очень понравилось, но мне стало интересно, а есть ли какие-то специальные фреймворки. Оказалось есть.

    Способ второй — jQTouch





    О jQTouch уже немного писали. Хочу рассказать немного подробнее о том, что он умеет.
    jQTouch — Это такой плагин к известному JavaScript-фреймворку jQuery, позволяющий очень просто создавать веб-приложения для тачфонов — телефонов с сенсорным экраном, причём с пальцеориентированным интерфейсом. Каким и является iPhone. А так же HTC Hero, Dream, Magic — на Android — и куча разных WM-коммуникаторов с оболочками. © (оригинал)


    Перечислю основные фишки:
    • Очень легко управлять поведением компонент
    • Есть возможность создавать темы
    • Есть небольшое взаимодействие с телефоном — например можно узнать его ориентацию
    • Поддерживается анимация и различные фишки интерфейса айфона
    • Это jQuery и этим все сказано


    Плагин очень приятный, но все таки на выходе мы имеем не полноценное приложение. Почему? У нас нет доступа к таким вещам как акселерометр, вибрация, звук и так далее. После этого я снова полез в гугл и нашел такую отличную вещь как PhoneGap.

    Способ третий — PhoneGap




    Суть данного фреймворка состоит в том, что написав один раз приложение с помощью html и js, мы сможем транслировать его в приложение под нужную платформу. А платформы он поддерживает вот такие: iPhone, Android, Blackberry (OS 4.5), Symbian, Windows Mobile, Palm, Maemo. В случае айфона мы опять возвращаемся к тому, с чего начали — нужен макбук, лицензия и все дела. Но фреймворк все равно отличный.

    Ниже представлен roadmap данного проекта.

    image

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

    Необходимость трансляции немного напрягала и дальнейшие поиски вывели меня на конкурента PhoneGap — MotherApp

    Способ четвертый — MotherApp





    Суть этого проекта такова:
    • Пишем приложение с использованием предложенной js-библиотеки
    • Устанавливаем все что нужно на сервер
    • И самое главное — отдаем ссылку на свое приложение парням из MotherApp, которые все за нас транслируют



    Как видите, сервис хорошо монетизирован =)
    А если серьезно вполне серьезная и мощная по своим возможностям вещь. По ссылке список возможностей с картинками.

    Как говорил один персонаж, становится все любопыственнее и любопытсвеннее. Уже из спортивного интереса, я нашел почти то что искал:
    • Возможность написания на html и js
    • Полное отсутствие трансляции
    • Возможность использовать функции телефона

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

    Способ пятый — Big5





    Здесь все еще проще.
    Пишем свое приложение с использованием js-библиотеки, скачиваем приложение из аппсторе и вводим адрес своего сайта.
    В своей сути, big5 — это альтернативный бразуер, но с доступом к нативным функциям телефона. Большой вопрос, как к этом отнесется Apple и не повторится ли здесь судьба PhoneGap. Но факт остается фактом, написав веб приложение, мы в итоге получаем полноценное приложение под айфон. Насколько полноценное зависит от пользователя, так как в аппстор есть две версии приложения big5: бесплатная lite и платная за 10$.
    На сайте big5 заявлено, что разработка под их приложение, это просто веб разработка, так что все что было описано в первом пункте так же справедливо и тут.

    Ну и в завершении, хочется представить еще одного кандидата. Но он, пожалуй, больше придется по душе тем, кто выбрал Ruby on rails. Итак, встречайте — Rhodes.

    Способ отдельный — Rhodes





    Этот продукт отчасти напоминает процессом своей разработки, который представлен ниже, MotherApp.



    Rhodes опять же работает со всеми нативными вещами, вплоть до файловой системы. Поддерживает он следующие платформы: iPhone, Windows Mobile, BlackBerry, Symbian и Android. Язык у данного фреймворка очень похож на ruby, так что рубисты дерзайте. Пока что сложно найти какие либо отзывы.

    И в завершении, тем, кого данная тема увлечет, хочу порекомендовать книгу от O`Reilly — Building iPhone Apps with HTML, CSS, and JavaScript
    Making App Store Apps Without Objective-C or Cocoa
    . По ссылке ее официальный электронный вариант.

    Спасибо за внимание!

    AdBlock похитил этот баннер, но баннеры не зубы — отрастут

    Подробнее
    Реклама

    Комментарии 35

      +2
      Еще есть appcelerator.com
        0
        Спасибо, интересный продукт.
        0
        Вот спасибо за такую подборку, попробую что-нибудь выбрать! Хочется писать приложения под различные мобильные платформы с наименьшими затратами и максимально эффективно, и если есть возможность писать на привычных и знакомых языках, то почему бы этого не делать. Будем пробовать :)
          0
          Хорошая подборка. А какой же вариант выбрал автор статьи?
            0
            Я пока что остановился на big5, но при наличии лицензии девелопера выбрал бы phonegap+jQTouch, благо они судя по последним новостям уже идут в связке.
            –2
            Я вот захотел iPhone сразу :). Ещё интересно на нём самом программировать, когда компа нет под ругой и делать нечего.
              0
              У меня такая проблема появилось, нижняя часть тачскрина около 8 мм вся строка не работает. Работает только при разблокировки телефона. Вот переключения в айпод режиме на видео, альбомы не получается и в режиме телефон нельзя переключиться на набор номера и другие.
              Отнес в ремонт, сказали надо менять экран и тач. предложили за 200 баксов.
              Так как телефончик iphone первого поколения жалко тратить столько денег.

              Теперь чтоб решить проблемы начал использовать альтернативные программы. Для камеры 5mpx в этой программе в любое место тыкаешь он сниает (кнопка с фотографировать тоже входить в нерабочий область в стандартном приложении), набора номера bubble app и др.

              Теперь у меня возник вопрос. Возможно ли связывать веб приложение с функциями телефона? Хочу создать альтернативные приложении которые не используют не рабочую область.

                0
                Можно, ради такого доступа все и затевалось. Рекомендую поставить себе lite версию big5 и поиграть с демо. В ней есть возможность получить текущие координаты, пофоткать. Так же, если не ошибаюсь, есть доступ к телефонной книге.
                  0
                  Телефонная книга не проблема. Приложения контакты справляеться.
                  Спасибо за рекомендацию, попробую изучить big5.
                0
                Спасибо, очень интересный пост. Вопрос дилетанта: все никак не могу понять преимущества загружаемых web apps по сравнению с обычными аяксовыми сайтами, но адаптированными для touch mobile web.

                Вот здесь об этом много рассказывается, но нет ответа на вопрос: если это загружаемое веб приложение (web widget) загружается на мобильное устройство один раз, то как оно может быть лучше полностью web-based приложения, которое в любой момент времени имеет новейшую версию (исправленные баги, новые фичи и т.п.)?

                И дополнительно: какой смысл разработчику использовать PhoneGap или подобные ему инструменты, если можно просто сделать адаптированный для touch мобильного дисплея сайт/ajax-приложение?

                P.S. Если речь о доступе к сенсорам/gps и т.п., то HTML5 тоже вроде это позволяет.
                  0
                  Главный PhoneGap и иже с ним — доступ к железу, то есть акселерометру, звукам и прочим фичам. Те кому это нужно, например разработчикам игр, выбирают PhoneGap`образные фрэймворки, если например нужно сделать что-то в стиле rss-ридера, то вполне хватит аякса. Но это чисто мое ИМХО.
                    0
                    А разве HTML5 не позволяет web based приложению получить доступ, например, к адресной книге устройства (с разрешения пользователя)?
                      0
                      Честно — не знаю. Например, пользователям Google Voice сначала приходится синхронизировать контакты из айфона в свой гугл аккаунт, а уже потом ими пользоваться. Так что наверное нет.
                  +2
                  на ту же тему: практика по допиливанию gwt приложения для айфона/андройда googlewebtoolkit.blogspot.com/2009/10/enterprise-apps-in-your-pocket.html
                    0
                    Подскажите, есть ли возможность сделать инсталятор кототорый просто добавит линк на iphone web application. Мне не нужно взаимодействие с железом iPhone. Приложение будет очень простое, но очень хотелосьбы иметь инсталятор к нему, а не объяснять юзверю куда ему нужно нажать чтобы добавить приложение на home screen
                      0
                      Вот этого точно не видел, все руководства указывают на способ через «Add to Home screen». Как вариант, можно почитать маны по сафари для айфона, может там есть возможность доступа к этой функции.
                        0
                        Такой возможности нет. Но можно рассмотреть идею и реализовать. Пользователь не хочет, чтобы сайты генерировали иконки сами по себе, поэтому возможно надо сделать, чтобы работало как шорткат для вызова окошка, где можно отредактировать название и ссылку.
                        0
                        jQTouch — наше все ^_^ В нем геолокация есть, кстати.
                          0
                          геолокация, кстати, это базовая возможность, и ее можно использовать без jQTouch. Кстати, альтернативой подобной работы с геолокацией является использование Google Gears. Там схожий механизм определения координат: сначала ищется доступ в интернет, потом пытается определить по ближайшим вай-фай и блютус точкам и по айпишнику. По крайне мере так пишут в руководствах.
                            0
                            я к тому, что это не уникальная фишка PhoneGap. В jQTouch просто проще (sic!) ею пользоваться.
                          0
                          Подскажите, я так и не понял точно из статьи — вы пытаетесь сделать web-приложение, которое каждый раз при запуске на iPhone грузилось бы с вашего сайта, но при этом имело бы доступ к железу iPhone?

                          И еще, при использовании какой-либо из этих вещей можно ли программировать html+js, затем оттранслировать получившийся сайтик и на выходе получить приложение, которое будет работать в iPhone (чтобы исключить необходимость разбираться в Objective-C, Cocoa и так далее)?
                            0
                            Подскажите, я так и не понял точно из статьи — вы пытаетесь сделать web-приложение, которое каждый раз при запуске на iPhone грузилось бы с вашего сайта, но при этом имело бы доступ к железу iPhone?

                            Именно так. Кроме того, если интернет соединение отсутствует, это не мешает работе приложения, а все действию будут отправлены на сервер, когда интернет будет.
                            И еще, при использовании какой-либо из этих вещей можно ли программировать html+js, затем оттранслировать получившийся сайтик и на выходе получить приложение, которое будет работать в iPhone (чтобы исключить необходимость разбираться в Objective-C, Cocoa и так далее)?

                            PhoneGap, MotherApp
                              0
                              И для того и для того все равно нужна SDK от Эппла — правильно?

                              И, если я хочу поиграться с программированием под айфон, то мне надо:
                              1) скачать sdk (можно свободно скачать без девелоперской лицензии, просто не смогу загружать в АппСтор свои поделки?)
                              2) обязательно компьютер с MacOs (если исключить Хакинтоши, то под Windows я не смогу собирать и тестировать на эмуляторе телефона результат?)

                              И еще подскажите, как вы тестировали промежуточные результаты разработки на настоящем телефоне — оно как-то может в один клик собираться и ставиться на телефон?
                                0
                                Про MotherApp ничего говорить не буду, так как не игрался с ней особо. Знаю лишь то, что там трансляцией занимаются ребята из самого MotherApp.
                                Теперь пара слов про ФонГап. Тестировал я все на их эмуляторе, который позволяет запускать еще html-файлы, причем как статические, так и по урлу. Эмулятор написан на AdobeAir, так что можно ставить на любую платформу. Для промежуточных результатов я нашел друга с макбуком, он транслировал код в приложение для айфона (вот тут описан этот процесс), и потом я скинул на свой jailbreak айфон уже это приложение. Иного способа пока не вижу.
                                0
                                Ах да, и в случае с MotherApp получаем не совсем удобный результат -необходимо ставить еще отдельное приложение для запуска своего.
                                  0
                                  Ну за удобство приходится чем-то расплачиваться)
                              0
                              Извиняюсь, может немного не в тему.
                              Я правильно понял, что если я напишу с использованием jQuery свое мобильное веб-приложение, его можно в дальнейшем транслировать кучей предложенных способов в нативный код?
                                0
                                С использованием jQuery и одного из озвученный фреймворков. После этого да, вы сможете транслировать в нативное приложение.
                                  0
                                  Хотел сказать, если написать используя jqTouch, phoneGap, например, сможет его транслировать?
                                  Или это излишне?
                                    +1
                                    Должен, судя по новостям с блога jQTouch, они даже уже сотрудничают.
                                0
                                Случайно не в курсе, где можно почитать про работу с локальными БД? Можно ли их кэшировать?
                                  0
                                  про локальные базы данных можно почитать вот тут. А что вы имеете ввиду под их кэшированием?
                                    0
                                    Ну чтобы приложение могло однажды создав локальную бд (взяв данные с сервера), работать с ней в дальнейшем в т.ч. в оффлайне
                                      0
                                      А они и так хранятся локально, так что никаких проблем возникнуть не должно.
                                  –1
                                  Посоветую хорошую книгу по теме: Building iPhone Apps with HTML, CSS, and Javascript.pdf
                                  Размещена в бесплатной доступе на сайте издателя
                                  building-iphone-apps.labs.oreilly.com

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

                                  Самое читаемое