Создайте гибридное мобильное приложение с Android

Код прост и создает полноэкранный WebView в своем контейнере. Обратите внимание на определение android: id , которое мы будем использовать для привязки этого элемента пользовательского интерфейса в нашем коде.

Настройка WebView в коде

Далее мы закончим настройку WebView, отредактировав файл ShopFragment.java . В методе onCreateView вставьте следующий код в Placeholder 1 :

mWebView = (WebView) rootView.findViewById(R.id.shop_webview);

Это связывает переменную класса mWebView с элементом пользовательского интерфейса, который мы только что создали в нашем макете. Теперь, когда мы можем получить доступ к WebView из кода, мы можем загрузить в него URL. Для этого введите следующий код в Placeholder 2 :

mWebView.loadUrl(APIRequest.BASE_URL);

Если вы проверяете APIRequest.BASE_URL , вы заметите веб-URL — это URL-адрес, который будет загружен в наш WebView, но вы также можете проверить его в своем браузере на рабочем столе.

Запустите приложение, чтобы увидеть, что мы имеем до сих пор. Обойдите продукты и перепрыгните, чтобы просмотреть корзину. Вы заметите, что кнопки «Добавить в корзину» не совсем работают, но мы вернемся к этому позже

Web

В этой демонстрации веб-компонент отображает все продукты в интерфейсе с возможностью просмотра. Проект построен на веб-фреймворке Django в Python, а внешний интерфейс построен на HTML / CSS и Javascript. Также есть несколько API, все они созданы для демонстрационных целей, поэтому они максимально упрощены. Имейте в виду, что вы можете использовать веб-фреймворки по вашему выбору, мы просто выбрали Django и стандартный JavaScript.

Получить код

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

Примечание . Веб-код находится в другом хранилище, чем упомянутый ранее нативный код.

Запустите его локально

Если вы хотите запустить веб-код локально, вы, безусловно, можете! Ознакомьтесь с документацией по Django, чтобы узнать немного больше и установить все на своем локальном компьютере.

Мы развернули этот демонстрационный код в Heroku по адресу http://critterretail.herokuapp.com/ . Вы можете изменить URL-адрес, используемый проектом в APIRequest.java, в переменной BASE_URL, если вы хотите указать его для своего собственного экземпляра.

Примечание. Если вы используете сервер локально в эмуляторе Genymotion, обязательно используйте BASE_URL по адресу http://10.0.3.2:8000/.

Соединение Сети и Android

Теперь у нас есть код, работающий на двух разных платформах, в Интернете и на Android — все в одном приложении. Чтобы создать отличный опыт для наших пользователей, нам нужно каким-то образом связать эти платформы.

В нашем демонстрационном приложении, когда вы добавляете товар в корзину (в WebView), он загружает товар в собственную базу данных для оформления заказа (на стороне Android). Мы покажем, что должно произойти с обеих сторон, чтобы добиться этого!

На веб-стороне

В веб-коде, если вы откроете critterretail / templates / index.html, вы увидите ссылку в строке 36-37. Это ключ к общению с приложением Android:

<a class="btn btn-success" style="width:100%;"
href="apprequest://addtocart#{{p.productJSON}}">Add to Cart</a>

apprequest://addtocart#{'productID':4}

@Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {

// Example request apprequest://addtocart#{'itemID':1}
if (url.startsWith("apprequest://")) {
Uri uri = Uri.parse(url);

// example host == apprequest
String command = uri.getHost();

// example fragment == {'itemID':1}
String jsonString = uri.getFragment();

try {
// parse the fragment and handle the full request
JSONObject json = new JSONObject(jsonString);
handleRequest(command, json);
} catch (JSONException e) {
Crittercism.logHandledException(e);
}

return true;
}
return false;
}