6 июня 2010 в 18:09

Chrome App. Создание приложения для chrome (пример)

Как все прекрасно помнят, на прошедшей IO, Google анонсировал свой Web Store. А для заполнения его представил т.н. web-приложения.
Сегодня речь пойдёт о том, как создать простенькое приложение и подготовится к открытию Web Store.
Для примера будем создавать приложение из ряда Hello World, а именно — калькулятор.
image


Для начала напомню, для того, что бы мы могли использовать web-приложения, мы должны запустить браузер (последнюю DEV-сборку Chrome ) с параметром --enable-apps.
Ну а теперь, собственно, приступим к написанию нашего калькулятора. Как и с расширениями для chrome, нам понадобится файлик manifest.json. У нас он будет выглядеть следующим образом:
{<br> "name": "calc lite",<br> "version": "0.1",<br> "icons": {<br>  "24": "24.png",<br>  "128": "128.png"<br> },<br> "permissions": [<br>  "unlimited_storage",<br>  "notifications"<br> ]<br> "launch": {<br>  "local_path": "index.html"<br> }<br>}<br><br>* This source code was highlighted with Source Code Highlighter.


Где name — название приложения
version — версия для идентификации
icons — в этом параметре мы указываем две иконки, которые будут отображаться у нас в браузере (рядом с табами и ссылкой на запуск)
permissions — параметр, в котором прописываем разрешение на доступ к «фишкам» (об этом чуть позже)
launch — в параметре local_path укажем нашу страницу с разметкой index.html
Содержание файла index.html — это, собственно, и есть, разработанное вами, web-приложение.
После того, как вы посчитаете, что ваше приложение готово — нужно его собрать. Делается это точно так же как и с расширениями: пункт меню расширенияупаковка расширений.
На выходе мы получим файл с расширением *.crx — это и есть наш готовый продукт, осталось только перетянуть его в браузер, ну или запустить по ссылке.
Если всё правильно — то появится следующее окно
image

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

а так же в панели быстрого запуска
image

как мы видели это на IO
image

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


Ну а вот и сам калькулятор:
image
image
image
image

Помните выше я говорил про доступ к фишкам. Недавно в chrome появились уведомления (спасибо, HTML5), так вот, notification требуют разрешения от пользователя на уведомление, что мы и дали в параметре permissions. И теперь каждый раз при делении на ноль наш калькулятор будет уведомлять нас об этом
image
Тут больше использовалась функция, что называется HTML5 ради HTML5. Однако приятная возможность работы с БД и прочее остаётся за нами!
Больше приложений, хороших и… хороших
Ссылка на calc_lite/ (слово лайт тут ключевое!!)
Похожие публикации
Самое читаемое Разработка

Комментарии (52)

  • 0
    Классно. Спасибо за статью.
    Пойду попробую написать что-нибудь.
  • 0
    А какие требования предъявляются к самим приложениям?
    Возможно ли написать расширение для Chrome с использованием Silverlight 4?
  • 0
    круто! этот рынок приложений обещает быть самым многообещающим следующие несколько лет из-за Chrome OS. Google подготавливает причину каждому пересесть на веб :)
    • +4
      Разрешите позанудствовать!

      НЕ каждому, а лишь части. Понятно, что те кому интересно пасьянс по раскладывать и по соц сетям и сайтикам полазить — вполне подойдет.

      Но вот незадачка- не всем и не всегда именно это нужно.

      Серверную часть любых приложений все равно будут разрабатывать явно не в браузере. Для работы с БД, с веб сервисами, играть современные игры типа того же Крайзис- я очень сомневаюсь, что сделают приложение вебовское. Ну хотя бы туже Eclipse или VS2010в браузер запихать ну не реально в ближайшее время, они на 4 ядерных монстрах умудряются тормозить. Многие приложения тяжелые- тоже не понятно как вытаскивать в браузер.

      Ах да, некоторые работают а офлайне… их все меньше, но все же.

      В общем с точки зрения булевой алгебры выше выражения НЕ ТОЖДЕСТВЕННО ВЕРНО, а лишь для некоторых приложений.
      • 0
        В игры может быть и будет возможно поиграть.
        Работа с БД тоже не особо тяжелая по нагрузке вещь.
        А вот разработка — да. Я пока что не видел даже нормального текстового редактора с веб-интерфейсом.
        Хотя, если большую часть вычислений перенести на сервер, то при хорошем канале в браузере можно будет оставить исключительно интерфейс для редактирования, так что и разработкой заниматься теоретически реально…
        • –1
          ТЕОРЕТИЧЕСКИ РЕАЛЬНО- Звучит как СУХАЯ ВОДА.

          Если есть терминал, на котором стоит серверная часть IDE, то зачем козе баян в виде веб интерфейса к ней? Проще сразу подключится терминальным доступом без всяких там лишних прослоек типа браузера.

          Расскажите, как вы понимаете под словом БД не особо тяжелая к нагрузке вещь?
          Мне действительно интересно.
          Как вообще сделать БД в браузере? То, что в html5 подразумевается как вебБД — это мягко говоря не mysql или mssql. Если покажете хотя бы наброски таких проектах вебовский, я сниму перед вам шляпу.

          База Гигайбайт в 50 таблиц и выборка джоином из 4-5 табличек, возвращающая пару тысяч записей — это как я понимаю все фигня? А теперь докрутить хоть чуть-чуть аналитики и любой браузер спасует.

          Зря что ли Oracle, MS выпускает кластерные версии своих БД. Когда народ там террабайты держат.
          • 0
            А кто сказал, что СУБД обязательно надо хостить в браузере?
          • 0
            Под «работой с БД» подразумевался интерфейс к ней (клиентская часть), а не серверная.
            БД хостится на сервере, в браузере… да хоть тот же phpMyAdmi
      • 0
        Насчет IDE — вполне coderun.com/ide/ работает. Конечно, ни intellisense, ни дебага нормального, но все же. Вопрос времени, я считаю. Гугл правы. Технологии — та сфера, в которой лучше не загадывать.
        • 0
          Уппс, простите, проверил — даже intellisense есть)
          • 0
            Лет через 10, я еще поверю что может быть появится вебаналог сегодняшней VS2010. Если Вы считаете ЭТО, конкурентом vs или eclipse, то далее я даже спорить не вижу смысла. Сделать игрушку с некоторыми функциями IDE-это одно, а сделать IDE-это на порядок более сложные вещи. 10 лет и поспорим.

            IDE без дебагера может использовать только последний оптимист. Не разу не помню, что бы программа длиннее 10 строк не содержала хотя бы логической или синтаксической ошибки я такого очень редко вижу. А представьте себе программку хотя бы в тысячу строк, причем не те, что кодогенерация из драганддропа сделал а честные тысячу строк, написанные самим. И вот как это чудо отлаживать без отладчика? Я лично не понимаю, как у людей, которые в блокнотах пишут, что то работает.

            В частности вот как из браузера снять метрики производительности приложения?
            Сейчас появилась такая замечательная штука-intellitrace, она же исторический отладчик. Для нормальной отладке чего то серьезного, гигабайты нужны жестком диске. Сделать аналог даже в Ajax стили по моему слишком круто на ближайшие лет 10.
            • +2
              Зря вы так, мы (http://ide.hivext.ru), к примеру уже работаем над этим вопросом, в java есть специальный механизм JPDA, который позволяет удаленно делать дебаг.
              • 0
                Кстати интересный проект. Зарегистрировался, посмотрел. Мне определенно нравится. Жаль, конечно, что я на Java пишу куда меньше чем на C#,C++. Успехов Вам в нем!
                А можно пару вопрос, как Вы его позиционируете? И какие преимущества, кроме того, что в нем я могу работать с совершенно не делеперской машины?
                Я просто видел у вас в списке БД по сути MySQL. Других нет. Механизмы экспорта из других бд какой-нибудь есть? БД, то обычно унаследованная, вместе с данными. Как их к вам то импортировать?
                • +1
                  позиционируем как облачная платформа следующего поколения, упор больше не на хостинг приложений, а на сервисно-ориентированную разработку. Online IDE позволяет уменьшить порог вхождения в нашу платформу, но писать можно и на обычных любимых offline IDE.
                  Преимущества в сокращении необходимых кол-ва рук, в уменьшении уровня требуемых знаний для реализации комплексных решений за счет использования отработанных специализированных сервисов.
                  БД на данный момент MySQL, дальше будет возможность выбрать из списка, мы используем ORM, это решает проблемы кросс-базности. Импортировать как обычно, у каждого приложения отдельная БД и к ней есть доступ через стандартный phpMyAdmin.
            • +1
              А vim может быть конкурентном vs?
            • +2
              Какая в трубу разница, все ваши дебагеры, стеки вызовов, метрики производительности. Все это без проблем делается в облаке. Клиентская часть ИДЕ получает только информацию, а отладка и работа приложения идет в облаке! Приложение пишется сразу для облака, там хранится, там отлаживается и там же крутится на этих же серверах это вы понимаете? Время когда приложение качали и ставили на комп уже уходит.
              • +1
                Вы сами в это верите? В приложения, которые отладить сразу в облаке? За облако между прочим платить надо, причем ДЕНЬГИ!

                Писали мы приложения для Windows Azure. В итоге все равно стоял эмулятор на компьютере. На нем все тестили и только потом публиковать можно было.
                Зачем внутри корпоративное приложение в облако, если ему не нужна динамическая расширяемость?

                Болтовня всяких рекламщиком от крупных компаний, мол купите у нас и будет у Вас счастье, лично на меня не действует. Писал я под cloud. Тоже приложение что и другие, со всеми радостями отладки, профилировке, пристального вглядывание в код и чтение манов. Только запускается на другом оборудовании.
                • 0
                  Конечно, разницы нет никакой, в облаке те же компы, просто модули отладки находятся в облаке, код прогоняется по ним, а в браузерное иде только результаты отладки приходят, также и точки останова можно ставить, ничего сложного.
                  • +1
                    А Вы писали приложение для облака или хотя бы с отладкой удаленной? Я писал, мне не понравилось!

                    Ну тогда зачем козе баян? Чем Удаленных терминал тогда хуже!
                    В отличии от браузера в который идет вывод IDE, удаленные отладчики уже есть, хотя с ними есть тоже свои проблемы, особенно при параллельной обработке? Я не против прогресса, я за то, что бы делать нужные вещи, а не что тоне пойми зачем just for fun!

                    p.s. глянте при покупке билетов в железнодорожных кассах на монитор. Скажите, когда от туда уйдет это миленькое черное окошко консоли
      • 0
        Вообще на Native Client можно писать приложения с использованием любых языков, не обязательно на джаваскрипте. Так што, имхо, любое толстое приложение может быть портировано.
  • НЛО прилетело и опубликовало эту надпись здесь
    • НЛО прилетело и опубликовало эту надпись здесь
    • 0
      Ну потому, что это «типо» калькулятор) Чтобы понять почему lite достаточно скачать, установить и посмотреть. Все вопросы сразу отпадут)
      • 0
        вот откроется store, к тому моменту калькулятор будет с графопостроителем ;)
        • 0
          Да это будет полезно)

          Я как только увидел приложения опд Хром, просто ими заболел. Было бынеплохо, если бы графостроитель 3-D графики тоже строил, а то недавно понадобилось, так и не нашел онлайн.

          Потом на хабре только про Sage узнал.
    • +1
      потому как набросал для примера, хотя и старался ;)
  • +1
    А когда Web Store откроется, вы не в курсе? Chrome OS пообещали к концу осени, Web Store интересно раньше будет доступен?
    • 0
      как тут уже где-то говорилось, обещают запустить вместе с Chrome OC
  • +3
    прикольно =)
    а зачем ID зарисовали на скринах то?))

    Кстате, вот ещо одна статья для чайников:
    uasc.org.ua/2010/04/google-chrome-addons/
    • 0
      А перевод можно? )))
      • +1
        конечно: translate.google:
        goo.gl/oDgn
        • +2
          Супер! ) Никогда не пытался перевести с украинского на русский =)))
          • 0
            Аналогично! Стоит отметить высокое качество перевода :)
          • –1
            Честно говоря, там не украинский, а суржик.
            • +1
              Эй, минусующий! Скажи, что не так :)
    • 0
      да просто так, для пущей типа важности ;)
  • –9
    А зачем в браузере калькулятор?
    • +1
      незачем) просто взяли калькулятор как пример приложения аля hello world)
      • –2
        Вот и правда не зачем…
    • +1
      и вправду зачем: он есть уже :)
      а вообще, за статью санк. Интересно будет попробовать.
  • 0
    а сам index.html где?
    • 0
      а там банальный js (jquery), не про селекторы же писать ))
    • 0
      вы таки не поверите, но вся логика в этом ;)
      switch(B){
        case "+" : D=A+C;break;
        case "-" : D=A-C;break;
        case "/" : N();break;
        case "*" : D=A*C;break;
        case "^" : D=Math.pow(A,C);break;
        default : D = 0;break;
      }


      * This source code was highlighted with Source Code Highlighter.

      остальное только css
      • 0
        Просто заголовок — разработка приложения, а пишите про то, как установить и что получится.
        Вот мне и интересно саму разработку-то посмотреть.
        Я тоже хочу чего-нить написать. Хочется пример.
        • 0
          так честно, обычный switch-case. Только перед ним я вытаскиваю значение A,B,C вот так
          $(".a").click(function(){
            A=$(this).text()*1;
          })


          * This source code was highlighted with Source Code Highlighter.
  • 0
    Спасибо, интересный пост

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