Как сделать мобильное приложение на javascript

Обновлено: 07.07.2024

Мы живем в эру мобильных устройств. Однажды нам в голову приходит идея создать супер-мега приложение для мобильных устройств и разместить его в магазине приложений. Однако, тут возникает одна небольшая проблема: мы всего лишь веб-разработчики. Мы не разбираемся в языках Java и Objective-C, и не располагаем лишним временем для их изучения.
Сегодня у нас появилась возможность воплотить свои мечты в реальность и улучшить мир, в котором мы живем, с помощью наших супер-мега приложений.

В этой статье мы опишем процесс создания гибридного приложения для операционной системы Андроид.

Гибридное приложение сочетает в себе свойства как нативных, так и веб-приложений. Как нативное приложение, оно может распространяться среди пользователей через магазин приложений, а также пользоваться преимуществами многочисленных функций мобильных устройств. Как веб-приложение, оно состоит из HTML, CSS и Javascript файлов.

Преимущества данного типа приложений заключаются в следующем:

почти все приложения могут быть написаны на языке JavaScript для всех мобильных платформ;
они могут использовать такие функции мобильного устройства, как камера, акселерометр, и др.;
все HTML, CSS и JavaScript файлы можно обновить, не ожидая утверждения новой версии приложения.

Однако, гибридное приложение все же работает медленнее нативного. Но это не такая большая проблема, потому что самую медленную часть приложения можно написать на Java или Objective-C и добавить при следующем обновлении.

Давайте приступим к созданию приложения, а заодно и к изменению мира к лучшему!

Шаг первый. Готовимся захватить мир

Итак, давайте приступим к воплощению нашей идеи и создадим наше первое приложение для андроид. Прежде всего, необходимо скачать Android SDK и другие инструменты для эмуляции различных Android-устройств либо драйверы для тестирования приложения на реальном устройстве. Это совсем несложно: просто загрузите пакет . Здесь вы найдете IDE Eclipse с уже встроенным расширением ADT, Android SDK, SDK Manager и другие.

SDK Tools. Этот пакет уже должен быть установлен, если же нет, то вы знаете, что делать;
SDK Platform-tools;
SDK для одной из версий Android. Ваше новое Android-приложение должно быть скомпилировано под какую-либо версию ОС Android. Мы использовали самую последнюю версию Android на момент написания статьи, чтобы иметь возможность использовать новые функции;
Драйверы. Если вы хотите протестировать свое приложение на андроид-устройстве, необходимо установить Web и USB-драйверы (если у вас возникают проблемы с отладкой приложений на реальных устройствах, можете поискать подсказки в этой статье или задать нам вопрос в комментариях).

Отлично! Мы закончили с самой скучной частью создания приложений для андроид. Давайте запустим Eclipse IDE, загруженную вместе с SDK, и начнем изменять мир. Кроме того, если хотите, можете загрузить Android Studio (IDE на базе IntelliJ IDEA). Должны вас предупредить, что она все еще работает в бета-версии и может доставить дополнительные неудобства.

Шаг второй. Создаем приложение

Если вы замените URL в параметре loadUrl на неверный, откроется страница, сообщающая об ошибке.

Спрашиваю, потому что раньше работал в конторе, где делали приложение для IPAD без знания Objective-C. Использовали только html css javascript и php. Как такое возможно? Еще, по-моему, покупали Битрикс-портал для этого. И, кстати, реально работало, сам видел, заходил с IPAD

Наверное, вам нужны кроссплатфоменные движки типа phonegap или cordova. Но php там необязателен, можно создавать мобильные приложения с HTML, JavaScript, CSS, jQuery и без PHP)

@ПавелИгорев, Что-нибудь вроде хеллоу ворлда и немного по-сложнее будет нормально работать. Для всего остального нужно нативно писать.

Можно написать на JavaScipt. Используя технологию PhoneGap,онаже Cordova. По скорости будет работать также как Ваш браузер на мобильном, потому, что в основе технологии компонент WebView. Проблемы будут только в тех случаях когда дело коснется железа, для этого придеться или искать или писать самому на NDK плугины.

Сейчас React Native заползает на сцену, позволяя писать логику на JS, но предоставляя интерфейс из родных для системы элементов. Но без работы с нативным кодом вы весьма стеснены в выборе элементов управления и доступной функциональности. Вот.

Насчет Битрикса я бы не советовал. Если судить по тому, что написано на сайте, эта примочка есть дополнение к веб-сайту. Да еще самостоятельно компилироваться "это" не может. Только по прямому запросу, да еще срок выполнения 1-2 недели.

2 ответа 2

На php нет, нельзя. На JS можно и тут есть два путя. Можно делать через WebView - это просто по сути приложение-сайт с применением html, css и т.д в т.ч. JS. Проект, который вам нужен в этом случае - Apache Cordova. А можно познакомиться с технологией React Native и делать нативные приложения на JS. Но инфы по этому вопросу очень немного, даже на английском языке.

А как без php или другого интерпретируемого языка будет происходить взаимодействие приложения с сервером?

@DanielKhoroshko есть официальная документация, сейчас много кто развивается в сторону реакта, так что шансы есть.

@ПавелИгорев мы говорим про само приложение, как отдельную единицу. Сервер можете писать на чём угодно, но для самого приложения php не подходит.

Фреймворк может стать отличным помощником для разработчиков при написании кода приложений. С ним вы сможете избавиться от мелких задач и сосредоточится на самом главном. Выбор в пользу того или иного фреймворка строго зависит от особенных нужд и предпочтений конкретного разработчика, а также от его уровня квалификации. Каждый фреймворк подходит лучше для каких-то одних задач, а для других обязательно подойдет другой. Однако, сегодня мы представляем фреймворк JavaScript для мобильной разработки.

Итак, давайте рассмотрим ТОП 5 лучших фреймворков для JavaScript-разработки мобильных приложений, которые помогут значительно упростить весь процесс разработки. Поехали!

Фреймворк JavaScript для мобильной разработки — ТОП 5 в 2017 году

Angular

В настоящий момент Angular все чаще воспринимается как фреймворк. Инструмент, предоставляемый командой Angular, это полноценное решение. В отличие от React, который представляет собой всего лишь библиотеку для рендеринга компонентов, с Angular можно легко создавать полноценные приложения без использования каких-либо сторонних решений. На ресурсе Stack Overflow недавно был проведен опрос среди веб-разработчиков о том, какой фреймворк они считают лучшим. Так вот, Angular занял второе место после Node.js. Этот фреймворк JavaScript пользуется доверием!

React Native

React Native – это специальный мобильный фреймворк, созданный на базе React JS. Собственно, это JavaScript-библиотека, которая используется для создания динамических пользовательских интерфейсов. С ней любые пользователи смогут легко создавать нативные приложения под iOS и Android, используя всего лишь один язык – JavaScript. С таким решением нет смысла отдельно изучать языки Java, Objective-C или Swift. Это полноценное кроссплатформенное решение, достойное вашего внимания.

jQuery Mobile

jQuery Mobile – отличный HTML5-фреймворк. Он позволяет вам избавиться от лишней работы по разработке приложений для каждой из платформ. Вместо этого вы сможете создать один крутой отзывчивый сайт или приложение, которое будет отлично работать на любом смартфоне, планшете, ноутбуке и ПК. Благодаря jQuery Mobile разработка под iOS, Android, Windows Phone, Symbian и т.д. стала полностью универсальной. Что примечательно, этот фреймворк JavaScript также совместим с другими мобильными фреймворками, такими как PhoneGap. Доступен в самой последней версии на сайте.

Фреймворк JavaScript для мобильной разработки — ТОП 5 в 2017 году

PhoneGap

PhoneGap – фреймворк для Android-разработки, поддерживаемый компаниями Adobe и Apache. Этот комплект разработчика отличается от других тем, что позволяет видеть внесенные изменения в режиме реального времени. Это кроссплатформенное приложение, которое поддерживает разработку на HTML5, CSS и JavaScript. Используя это решение, вы получаете полноценный доступ к обширной и надежной библиотеке плагинов, которые смогут расширить ваши возможности разработки гибридных мобильных приложений.

Всем доброго времени суток.

Многим из нас хотелось бы написать приложение для мобильного устройства, но учить Java или Objective C хочется далеко не всем. Теперь этот вопрос решается намного проще. PhoneGap — именно так называется библиотека для превращения веб-сайта в самое настоящее приложение для мобильного устройства, будь то iOS устройство, Android, Symbian, BlackBerry OS, Palm OS или Windows Mobile. Приложение на PhoneGap может использовать функции телефона, к примеру звонить или получать снимки с камеры.

В этой статье я расскажу как настроить среду для разработки и сделать простейшее приложение с использованием PhoneGap.

1. Установка инструментов

Первое, что нужно сделать — это установить инструменты для разработки. Нам понадобятся:

или выше; последней версии (32-битная версия, даже если ПК настроен на 64 бита); ; .

Загружаем разные SDK Platform, нам обязательно понадобится Android 2.2:

ADT Plugin устанавливается немного необычно: открываем Eclipse, нажимаем Help → Install New Software → Add.

Откроется диалоговое окно, в него необходимо ввести:

Теперь покажем Эклипсу, где проживает Android SDK: Window → Preferences, слева нажимаем Android → SDK Location → указываете адрес вашего Android SDK → Apply → Ok.

Теперь заходим в Мой компютер → (Правая кнопка мыши) → Дополнительные параметры системы → Переменные среды → Системные переменные → Создать:

Имя: JAVA_HOME
Значение: путь до jdk, к примеру (C:\Program Files (x86)\Java\jdk1.6.0_24)

Затем находите переменную Path и добавляете в конец: %JAVA_HOME%\bin;

2. Создание проекта

Теперь создаем проект: открываем Eclipse → File → New → Project → Android project и делаем все как на скриншоте:

В папке с вашим проектом создайте две новые папки:

Скачиваем PhoneGap. В новой версии PhoneGap 1.0 какие-то проблемы с переходами между локальными файлами — чтобы их избежать нужно создать вторую activity в AndroidMainfest.xml

Внимание: не пытайтесь заменить ваш activity (.App), вместо этого вставьте данный код сразу после закрывающего тега вашего изначального activity.

phonegap.js в папку /assets/www
phonegap.jar в папку /libs
папку xml в папку /res (только в версии 1.0)

Теперь в Eclipse откроем наш проект и покажем ему, где живет библиотека PhoneGap: нажимаем правой кнопкой мыши по libs → Build Path → Configure Build Path и далее как на скриншоте:

Открываем .java файл и вносим изменения: подключаем phonegap (строка 5), убираем скролбары (строки 12 и 13) и загружаем нашу главную страницу (строка 14).

Займемся файлом AndroidMainfest.xml:

Строки с uses permission включают взаимодействие с железом устройства. Все uses permission в данном файле будут показаны в android market. если вы будете загружать туда свое приложение, так что не переборщите.

3. Hello World!

Теперь пишем нашу страницу index.html:

Сохраняем в /assets/www/.

4. Запускаем

Правый клик по проекту и нажмите Run As → Android Application. Eclipse попросит создать эмулируемое устройство. Введите характеристики и запустите:

Что получилось в эмуляторе:

Чтобы запустить на устройстве, убедитесь, что USB debugging включено на вашем устройстве и подключите его к компютеру (Settings → Applications → Development). Правый клик по проекту и нажмите Run As → Android Application.

На сегодня все, успехов!

Да и еще статья о разработке приложений на iOS

Автор: Владимир Павлов

Mobile разработчик. Разбирается в Javascript, интересуется кроссбраузерным программированием с использованием PhoneGap. Создатель DTW Technologies.

Читайте также: