Найти в Дзене

Создание Андроид приложений без навыков программирования. Конвертируем html-страницу в apk-файл

В этом руководстве/инструкции, пойдет речь об ответе на следующие вопросы: -Как конвертировать html в apk приложение Андроид? -Как конвертировать веб-страницу в андроид приложение? -Как конвертировать веб-сайт в apk-файл (Андроид приложение), через Android Studio -Как создать Андроид-приложение без программирования? Сами веб-сайты и веб-страницы, можно создать и без программирования, используя такие программы как WYSIWYG Web Builder. Она легка в использовании, и создает веб сайты/страницы, которые легко поддерживаются смартфоном при конвертации в APK-файл Андроид-приложения. Важное примечание: При создании html-сайта/страницы для конвертации в APK приложение , надо учесть что смартфоны не поддерживают такие технологии как webgl (3d графика), php и т.д. При конвертации  сайта/страницы с использование этих и подобных  технологий, содержимое html-страницы может не отображаться или некорректно работать. Спокойно конвертируются и корректно работают html-страницы с простыми js-файлами(скрипт

В этом руководстве/инструкции, пойдет речь об ответе на следующие вопросы:

-Как конвертировать html в apk приложение Андроид?

-Как конвертировать веб-страницу в андроид приложение?

-Как конвертировать веб-сайт в apk-файл (Андроид приложение), через Android Studio

-Как создать Андроид-приложение без программирования?

Сами веб-сайты и веб-страницы, можно создать и без программирования, используя такие программы как WYSIWYG Web Builder.

Она легка в использовании, и создает веб сайты/страницы, которые легко поддерживаются смартфоном при конвертации в APK-файл Андроид-приложения.

Важное примечание:

При создании html-сайта/страницы для конвертации в APK приложение , надо учесть что смартфоны не поддерживают такие технологии как webgl (3d графика), php и т.д.

При конвертации  сайта/страницы с использование этих и подобных  технологий, содержимое html-страницы может не отображаться или некорректно работать.

Спокойно конвертируются и корректно работают html-страницы с простыми js-файлами(скриптами).

Алгоритм конвертации html-сайта в APK файл андроид-приложения:

1. Запускаем Android Studio , и в меню File выбираем New-New project

В появившемся окне выбираем вариант - Empty Activity

В меню File выбираем New-New project - Empty Activity
В меню File выбираем New-New project - Empty Activity

2. Когда мы выделим вариант Empty Activity , и нажмем кнопку Next , появится следующее окно с заголовком New project .

Здесь обязательно, в пункте Language (Язык) , надо выбрать вариант Java , а не Kotlin .

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

В пункте Name (Имя) , пишите название своего проекта/приложения ,но только на латинице/английскими буквами. В данном случае мы написали краткое слово: Kota.

Параметр Minimum SDK , в данном случае, трогать не нужно.

Параметр Package name , тоже не нужно трогать, т.к он автоматически подстроится под написанное вами имя в пункте Name.

Параметр Save location , показывает и решает, где будет храниться ваш проект/приложения со всеми его файлами.

Далее нажимаем кнопку Finish

Окно с заголовком New project ,в Android Studio
Окно с заголовком New project ,в Android Studio

3. Открываем файл MainActivity.java , найдя его в каталоге проекта в папке "java" , и в ее под-папке com.example

Файл MainActivity.java
Файл MainActivity.java

Оставляем только строку:

package com.example.kota;

В вашем случае, вместо слова kota , в конце строки , будет название вашего проекта!

Остальное содержимое ниже этой строки надо убрать, и вместо этого, под строкой:

package com.example.kota;

Надо разместить следующий код, чтобы получилось в итоге как на скриншоте выше:

import android.webkit.WebView;
//import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;

import androidx.appcompat.app.AppCompatActivity;

public class MainActivity extends AppCompatActivity {
protected WebView myWeb;
@override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.
activity_main);

/* Находим наш браузер */
myWeb= (WebView) findViewById(R.id.webView);

/* Настраиваем наш браузер */
myWeb.getSettings().setUseWideViewPort(true);
myWeb.setInitialScale(1);
myWeb.getSettings().setJavaScriptEnabled(true);

/* Загружаем страничку */
myWeb.loadUrl("file:///android_asset/index.html");

}

}

Справочное пояснение (можно пропустить):

Чтобы объявить объект класса WebView, выполняются действия:

1) К списку импортов (
import) дописывается:

import android.webkit.WebView;

2) Объявляется объект myWeb внутри класса MainActivity:
protected WebView myWeb;

Строка:

//import android.support.v7.app.AppCompatActivity;

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

Символы // , отключают эту строку, по факту превращая ее из кода в текстовый комментарий, чтобы активировать строку кода-достаточно убрать символы // .

4. Откройте файл AndroidManifest.xml , расположенный в папке Manifest

Файл AndroidManifest.xml
Файл AndroidManifest.xml

Далее:

Первый вариант:

Допишите сразу под определением «application» следующую строку:android:hardwareAccelerated="true"

Второй вариант:

Выделяем весь код в файле AndroidManifest.xml , и вставляем вместо него следующий код, чтобы получилось примерно как на скриншоте выше:

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.example.kota"
>

<application
android:hardwareAccelerated="true"
android:allowBackup="true"
android:icon="@mipmap/ic_launcher"
android:label="
@string/app_name"
android:roundIcon="@mipmap/ic_launcher_round"
android:supportsRtl="true"
android:theme="
@STYLE/Theme.Kota">
<
activity
android:name=".MainActivity"
android:exported="true"
>
<
intent-filter>
<
action android:name="android.intent.action.MAIN" />

<category android:name="android.intent.category.LAUNCHER" />
</
intent-filter>
</
activity>
</
application>

</manifest>

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

Вот эти фрагменты кода, содержащие название проекта (на скриншоте выше они выделены в прямоугольник):

package="com.example.kota">

и

android:theme="@STYLE/Theme.Kota">

(здесь название проекта должно быть с большой буквы, потому написано Kota, а не kota).

5. Откройте файл activity_main.xml , расположенный в каталоге: res\layout

Выбираем режим Code (Код) вместо режима Design (графический вид приложения), кнопки находятся в правой части интерфейса приложения AndroidStudio

Удаляете весь код, и вставляете следующий код:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="
http://schemas.android.com/tools" android:layout_width="fill_parent"
android:layout_height="fill_parent"
tools:context=".MainActivity"
>

<WebView
android:id="@+id/webView"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:clickable="true"
android:scrollbars="none"
/>
</
RelativeLayout>

6. В главном меню File выбираем: New - Folder - Assets folder

New - Folder - Assets folder
New - Folder - Assets folder

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

New Android Component
New Android Component

7. В каталоге app найдите папку assets. Кликните по ней правой кнопкой мыши, и в появившемся меню выберите пункт -  Open in , а в подменю выберите пункт - Explorer.

app- assets- Open in - Explorer
app- assets- Open in - Explorer

Откроется проводник WIndows, открыв ту самую папку assets , в которую нужно положить файлы вашего html-сайта или веб-страницы.

папка assets , в которую нужно положить файлы вашего html-сайта или веб-страницы.
папка assets , в которую нужно положить файлы вашего html-сайта или веб-страницы.

8. Теперь можно запустить приложение , выбрав в главном меню Run - Run app , или нажав сочетание клавиш Shift+F10 , и ваша html-страница или html-сайт, откроется на весь экран эмулятора смартфона.

9. Сборка Андроид-приложения и подпись Андроид-приложения в Android Studio.

В главном меню выбираем Build - Generate Signed APK

Откроется окно с заголовком Generate Signed Bundle or APK

Далее нажмите «Create New»

Generate Signed Bundle or APK
Generate Signed Bundle or APK

Откроется окно-форма New Key Store

Первое поле Key Store Patch , это путь к папке, в которой будет сохранен ключ.

Key Store Patch
Key Store Patch

При нажатии на значок папки в поле поле Key Store Patch , выйдет форма с заголовком Choose keystore file , где выбираем папку для сохранения ключа, и имя для файла ключа.

Choose keystore file
Choose keystore file

Нажав на кнопку ОК , вы снова попадете в окно Key Store Patch , и здесь надо заполнить остальные поля. Пример заполнения , показан на скриншоте ниже.

Обозначения:

Alias - псевдоним

Password - пароль , который должен состоять из не менее шести символов

Confirm - подтвердить пароль, введя ранее указанный пароль

First and Last Name - Имя и фамилия

Organizaional Unit - Организационное подразделение

Organizaion - организация

State or Province - Штат или Провинция

После заполнения полей, нажимаем на кнопку ОК.

New Key Store
New Key Store

Поле этого, снова откроется окно  с заголовком Generate Signed Bundle or APK , где ряд полей будет уже заполнен. Нажимаем здесь кнопку: Next

Generate Signed Bundle or APK
Generate Signed Bundle or APK

Появится окно с заголовком Generate Signed Bundle or APK , где надо заполнить два поля:

Destination folder - папка, куда будет сохранено собранное APK-приложение.

Build Variants - (Варианты сборки) , где надо выбрать вариант Release (релиз, выпуск).

Далее, нажимаем кнопку Finish

Generate Signed Bundle or APK
Generate Signed Bundle or APK

Затем , вы можете наблюдать  полосу состояния сборки приложения  - Gradle Build Running , в нижнем правом углу программы Android Studio.

Gradle Build Running
Gradle Build Running

Когда процесс сборки закончится, в этом же нижнем правом углу появится всплывающее сообщение с заголовком Generate Signed APK содержащее текст:

APK(s) generated successfully for module'Kota. app' with 1 build variant:…

Generate Signed APK: APK(s) generated successfully for module' .... app' with 1 build variant:…
Generate Signed APK: APK(s) generated successfully for module' .... app' with 1 build variant:…

Кликаем по этому сообщению, чтобы развернуть его , и нажимаем на слово locate ,чтобы открылась папка с созданным apk-файлом андроид-приложения.

Generate Signed APK
Generate Signed APK

Если всплывающее сообщение  со словом locate исчезло, то можно нажать на  фразу - Event Log , которая находится тоже в нижнем правом углу, и тогда откроется лог-список с нужным вам словом locate.

release/app-release.apk
release/app-release.apk

Данный apk-файл можно скопировать на смартфон, и открыв его - запустить установку вашего собранного приложения на смартфон.