Компьютерапия

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

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

• Ютуб
• ВК видео
• Рутуб

Ранее была создана базу данных, по сути это 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, он в любом случае будет потом создан автоматически.

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

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

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

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

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

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

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

• Ютуб
• ВК видео
• Рутуб