Всем привет, сегодня я покажу, как мы увяжем нашу JS базу данных, созданную в Excel, с веб страницей и с Android приложением.

Напишем приложение в андроид студио, и покажу что мы можем сделать с нашей базы данных.

JS база данных и ANDROID STUDIO. Часть 3

Ранее была создана базу данных, по сути это JavaScript файл с расширением db, представляет собой массив, заполненный построчно, каждая запись или строка имеет 3 поля: имя, возраст и пол, дальше будем работать с этой базой данных. Выводились значения в виде таблички, в браузере это выглядело так, исходный код если посмотреть, то в принципе у нас ничего тут такого особо сложного нет, bootstrap стиль, наша база данных, табличка и скриптом отрисовываются поля, которые выводим из массива.

Внизу подключены скрипты: jquery и bootstrap, сейчас всё это закинем в Android Studio и там уже будем работать.

Давайте создадим новый проект, empty activity, Next, назовем проект js2db, пусть будет так. Ну вот у нас в принципе всё обработалось, подготовлен наш проект и давайте теперь поработаем с activity_main.xml.

Здесь у нас textview, изменим на webview, присвоим id webView и ширину и высоту слоя изменим на match_parent, что бы слой был на весь экран. webView получилась серая, но это так и должно.

< WebView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="@+id/webView"
 />

Теперь переходим в mainactivity, и нам нужно будет здесь написать обработчик открытия index страницы, по сути приложение становится веб браузером. Объявим переменную типа WebView wv.

WebView wv;

Далее пишем код в onCreate, объявляем переменную для настроек, обязательно подключаем JavaScript иначе не будет работать наш скрипт, продолжается настройки, делаем доступ к файлам. Указываем путь к index файлу из папки android_asset, создаем новый WebViewClient.

wv = findViewById(R.id.webView);

WebSettings settings = wv.getSettings();
settings.setJavaScriptEnabled(true);
settings.setAllowFileAccessFromFileURLs(true);
settings.setAllowUniversalAccessFromFileURLs(true);
settings.setJavaScriptCanOpenWindowsAutomatically(true);

wv.loadUrl("file:///android_asset/index.html");
wv.setWebViewClient(new WebViewClient());

Также мы допишем ниже обработчик нажатия на кнопку назад. Вот так мы будем обрабатывать нажатие на кнопку.

public void  onBackPressed() {
   if(wv.canGoBack()){
   wv.goBack();
   }else{
   super.onBackPressed();
  }
}

Теперь нужно создать папку assets, где мы будем хранить базу данных, CSS стили и JS скрипты.

В неё поместим наши файлы, которые мы создавали ранее, скопируем их, можно удалить вот этот файл *.log, он в любом случае будет потом создан автоматически.

JS база данных и ANDROID STUDIO

Теперь можно будет перейти в Android Studio, обновится проект, сохранили и откроем файл index.html.

Обратите внимание в mainactivity.java путь к файла вот такой file:///android_asset/index.html.

Значит в index.html изменим пути хранения CSS стилей, база данных и JS скрипты, для этого нужно добавить в путь file:///android_asset/, иначе страница будет отображаться не корректно.

JS база данных и ANDROID STUDIO

Добавляем его, сохраняемся и можно пробовать запускать эмулятор, и посмотреть, что у нас получилось.

JS база данных и ANDROID STUDIO

И как видите отобразилась таблица с данными из базы, можно в код скрипта добавить выбор по условию, как я показывал в прошлом видео, посмотрите его.

Ну и обработчик назад соответственно сворачивает приложения, чуть-чуть позже модифицируем это приложение.

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

Смотрите видео: JS база данных и ANDROID STUDIO. Часть 3




Понравилась статья? Поделитесь ею с друзьями и напишите отзыв в комментариях!

Связанные статьи

Предыдущие статьи

We use cookies on our website. Some of them are essential for the operation of the site, while others help us to improve this site and the user experience (tracking cookies). You can decide for yourself whether you want to allow cookies or not. Please note that if you reject them, you may not be able to use all the functionalities of the site.

Ok