Делаем из любого сайта приложения на телефон - full tutorial + Code

D2

D2

Администратор
Регистрация
19 Фев 2025
Сообщения
4,380
Реакции
0
Автор zebra0_0
Источник https://xss.is

Всем привет, в этой статье я хочу рассказать для людей которые не разбираются в Андроиде как превратить любой сайт в приложение на телефоне. Чтоб это сделать вам понадобится Android Studio и Java так как придётся писать код. Если её у вас нет что вероятнее всего то просто зайдите на YouTube и там вы найдёте много подробных гайдов, тут расписывать не буду чтоб не засорять статью водой.

Зачем оно надо: В цем такое приложение может быть полезно чтоб не надо было каждый раз заходить и логинется на пример на сайт потому-что с ним достаточно нажать по иконе или например можно за 5мин дописать пароль(Если не умеете то я к вашим услугам) и выйдет что у вас 1 сайт под паролем и никто не сможет в него залезть или если вы не хотите чтоб то что вы смотрите попадало к вам в историю браузера то приложение будет очень полезно так-как оно работает без входа в гугл акаунт.

Как это работает:
В андроиде есть такая вещь как WebView. WebView - это буквально поле в котором открывается браузер что и даёт нам возможность реализовать любой сайт в приложение.

Чтоб начать зайдите в папку по пути: res/layout и откройте activity_main.xml это файл с xml разметкой для файла MainActivity и определят внешний вид страницы.

activity_main.xml
XML: Скопировать в буфер обмена
Код: 
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

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

</RelativeLayout>
В этом коде
  • <RelativeLayout это поле в котором находится наш WebView
    • его мы растягиваем на весь экран с помощью: android:layout_width - ширина , android:layout_height - высота. В них мы ставим значения match_parent(соответствие родителю) то есть по размерам окна или либо другого окна в котором находится объект.
  • <WebView - то что было описано ранее
    • его мы растягиваем так-же как и поле <RelativeLayout
    • Ещё мы добавляем ему Id чтоб его можно было вызывать в коде
Это весь код который нам нужен осталось только прописать логику в Java классе MainActivivty

В MainActivity на нужно:
  • импортировать библиотеки
  • Сделать переменную и задать ей в значения ссылку на сайт который нужно открывать
  • Написать логику для WebView
  • Настроить WebView
  • создать обработчик назад
  • Настройки Прилоежния
  • Добавить логику для полноэкранного режима
Импорт библиотек:
Java: Скопировать в буфер обмена
Код: 
import android.os.Bundle;
import android.webkit.WebChromeClient;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import androidx.appcompat.app.AppCompatActivity;
  • Эти строки импортируют нужные классы из Android SDK.
  • Bundle — класс для хранения состояния приложения.
  • WebChromeClient и WebViewClient — классы для настройки поведения WebView.
  • WebSettings — класс для настройки параметров WebView.
  • AppCompatActivity — основной класс для создания активности с поддержкой старых версий Android.
Далее первым-же делом в public class MainActivity создайте переменную с любым название но лучше с правильным неймингом например: private String websiteUrl = "Ссылка на сайт";
Код: Скопировать в буфер обмена
private String websiteUrl = "";

Логику для WebView:
В java классе MainActivity в классе OnCreate который отвечает за то что произойдёт при создании Активити пишем такой код:
Java: Скопировать в буфер обмена
Код: 
@Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        WebView webView = findViewById(R.id.webview);
чтоб вы могли понять что в нём написано давайте я разберу всё по строкам логику для webView.
  • super.onCreate(savedInstanceState) - Вызывает реализацию метода onCreate() в классе-родителе (AppCompatActivity). Это важно для того, чтобы система могла выполнить стандартные операции инициализации, такие как создание интерфейса, работа с темами и стилями.
  • setContentView(R.layout.activity_main) - Тут мы устанавливаем какой xml файл будет использоваться для WebView
  • WebView webView = findViewById(R.id.webview) - Он находит и связывает элемент пользовательского интерфейса из XML-файла с кодом.
    • findViewById(R.id.webview): Метод findViewById() используется для поиска элемента интерфейса по его уникальному идентификатору. В данном случае ищется элемент с id равным webview который мы определяли ранее в xml файле.
    • WebView webView: Переменная webView теперь ссылается на элемент WebView, который определён в макете activity_main.xml.
Настройки WebView:
Теперь перейдём к настройкам WebView, и хоть можно без них но тогда вы не сможете полноценно передвигается по страницам вебсайта и полноценно с ним взаимодействовать.
Для полноценной работы сайта нам надо настроить такие параметры как:
  • поддержка хранения DOM
  • Включение JavaScript
  • Включение кеша
  • Доступ к файлам
  • Включение базы данных
  • Поддержка смешанного контента (HTTP+HTTPS)
  • Включение отображения JavaScript-алертов и других событий
  • Установка WebViewClient для обработки всех переходов внутри WebView
Поддержка хранения DOM:
Java: Скопировать в буфер обмена
webSettings.setDomStorageEnabled(true); // Включение поддержки хранения DOM

Включение JavaScript:
Java: Скопировать в буфер обмена
webSettings.setJavaScriptEnabled(true); // Включение JavaScript

Включение кеша:
Java: Скопировать в буфер обмена
webSettings.setDatabaseEnabled(true); // Включение кеша

Доступ к файлам:
Java: Скопировать в буфер обмена
webSettings.setAllowFileAccess(true); // Доступ к файлам

Включение базы данных:
Java: Скопировать в буфер обмена
webSettings.setDatabaseEnabled(true); // Включение базы данных

Поддержка смешанного контента (HTTP+HTTPS):
Java: Скопировать в буфер обмена
webSettings.setMixedContentMode(WebSettings.MIXED_CONTENT_ALWAYS_ALLOW); // Поддержка смешанного контента (HTTP+HTTPS)

Включение отображения JavaScript-алертов и других событий:

Java: Скопировать в буфер обмена
webView.setWebChromeClient(new WebChromeClient());// Включение отображения JavaScript-алертов и других событий

Установка WebViewClient для обработки всех переходов внутри WebView:

Java: Скопировать в буфер обмена
Код: 
// Установка WebViewClient для обработки всех переходов внутри WebView
        webView.setWebViewClient(new WebViewClient() {
            @Override
            public boolean shouldOverrideUrlLoading(WebView view, String url) {
                view.loadUrl(url); // Обработка переходов внутри WebView
                return true;
            }
        });

Всё в месте:
Java: Скопировать в буфер обмена
Код: 
// Настройки WebView
        WebSettings webSettings = webView.getSettings();
        webSettings.setJavaScriptEnabled(true); // Включение JavaScript
        webSettings.setDomStorageEnabled(true); // Включение поддержки хранения DOM
        webSettings.setDatabaseEnabled(true); // Включение кеша
        webSettings.setAllowFileAccess(true); // Доступ к файлам
        webSettings.setDatabaseEnabled(true); // Включение базы данных
        webSettings.setMixedContentMode(WebSettings.MIXED_CONTENT_ALWAYS_ALLOW); // Поддержка смешанного контента (HTTP+HTTPS)


        webView.setWebChromeClient(new WebChromeClient());// Включение отображения JavaScript-алертов и других событий

        // Установка WebViewClient для обработки всех переходов внутри WebView
        webView.setWebViewClient(new WebViewClient() {
            @Override
            public boolean shouldOverrideUrlLoading(WebView view, String url) {
                view.loadUrl(url); // Обработка переходов внутри WebView
                return true;
            }
        });
Обработчик назад:
Чтоб если вы случайно кликнули по рекламе или просто вернутся на прошлую страницу без надобности перезапуска приложения надо написать обработчик назад.
Java: Скопировать в буфер обмена
Код: 
@Override
    public void onBackPressed() {
        WebView webView = findViewById(R.id.webview);

        // Обработка кнопки "Назад" для возврата к предыдущей странице
        if (webView.canGoBack()) {
            webView.goBack();
        } else {
            super.onBackPressed();
        }
    }
}

Тут просто в новом классе прописано WebView webView = findViewById(R.id.webview) что предопределяет для чего будет работать метод, который вызывается, когда пользователь нажимает кнопку "Назад" на своём устройстве Android.
Настройки Прилоежния
Как и любому Android приложению этому нужно получать разрешения для работы, а именно для этого оно нужно всего 1. Это доступ к Интернету, его нужно прописать в файле manifests/AndroidManifest.xml после <manifest.
Разрешение:
XML: Скопировать в буфер обмена
<uses-permission android:name="android.permission.INTERNET" />
как это должно выглядеть:
Посмотреть вложение 98880

На это в целом всё если вас интересует открытие напрем форумов или чего-то подобного но если вы хотите смотреть видео то:

Поддержка полноэкранного режима для видео:
Если вы хотите внутри приложения открывать видео хостинг например YouTube то чтоб просматривать в нём видео в полноэкранном режиме недостаточно то что было написано ранее, нужно дописать ещё некоторый код:
  • Переменные для управления полноэкранным режимом
  • Обработка перехода в полноэкранный режим и выхода из него
  • Обработка кнопки "Назад" для выхода из полноэкранного режима
  • Задать конфигурацию активности для поддержки полноэкранного режима
Переменные для управления полноэкранным режимом:
Java: Скопировать в буфер обмена
Код: 
private View customView;
private WebChromeClient.CustomViewCallback customViewCallback;
private ViewGroup mainContainer;
  • customView: Представление, которое будет полноэкранным (например, видео).
  • customViewCallback: Коллбэк для вызова при выходе из полноэкранного режима.
  • mainContainer: Контейнер активности для добавления полноэкранного представления.
Обработка перехода в полноэкранный режим и выхода из него (WebChromeClient)
Полноэкранный режим настраивается с помощью методов WebChromeClient:
Java: Скопировать в буфер обмена
Код: 
webView.setWebChromeClient(new WebChromeClient() {
    @Override
    public void onShowCustomView(View view, WebChromeClient.CustomViewCallback callback) {
        // Переход в полноэкранный режим
        if (customView != null) {
            callback.onCustomViewHidden();
            return;
        }

        customView = view;
        customViewCallback = callback;

        mainContainer.addView(customView);
        webView.setVisibility(View.GONE);
    }

    @Override
    public void onHideCustomView() {
        // Выход из полноэкранного режима
        if (customView == null) {
            return;
        }

        mainContainer.removeView(customView);
        customView = null;
        webView.setVisibility(View.VISIBLE);
        customViewCallback.onCustomViewHidden();
    }
});
  • onShowCustomView(View view, WebChromeClient.CustomViewCallback callback):
    • Этот метод вызывается, когда WebView переходит в полноэкранный режим (например, при воспроизведении видео).
    • view — это вид, отображаемый в полноэкранном режиме.
    • callback — используется для уведомления, когда представление должно быть скрыто.
    • В этом методе текущий вид WebView скрывается (webView.setVisibility(View.GONE)), и вместо него добавляется полноэкранное представление customView в mainContainer.
  • onHideCustomView():
    • Этот метод вызывается при выходе из полноэкранного режима.
    • Полноэкранное представление удаляется из mainContainer с помощью mainContainer.removeView(customView).
    • customView сбрасывается, и стандартный WebView снова становится видимым (webView.setVisibility(View.VISIBLE)).
Обработка кнопки "Назад" для выхода из полноэкранного режима
Этот код нужен для того, чтобы при нажатии кнопки "Назад" пользователь мог выйти из полноэкранного режима:
Java: Скопировать в буфер обмена
Код: 
@Override
public void onBackPressed() {
    // Обработка возврата из полноэкранного режима
    if (customView != null) {
        onHideCustomView();
    } else if (webView.canGoBack()) {
        webView.goBack();
    } else {
        super.onBackPressed();
    }
}
  • Если customView не равен null, значит, мы находимся в полноэкранном режиме. Метод onHideCustomView() используется для выхода из этого режима.
  • Если WebView может вернуться на предыдущую страницу (например, есть история), то выполняется переход назад.
  • Если же нет ни customView, ни истории, вызывается стандартное поведение кнопки "Назад" с помощью super.onBackPressed().
Задаём конфигурацию активности для поддержки полноэкранного режима:
Для того чтоб это надо дописать в AndoidManifest.xml внутри <activity прописать активности для поддержки полноэкранного режима:

XML: Скопировать в буфер обмена
Код: 
    android:configChanges="orientation|screenSize"
    android:hardwareAccelerated="true">

Как это должно выглядеть:
1732392921121.png



Чтоб вам не пришлось собирать всё почестям оставляю фулл код для всех файлов:

main_avtivity.xml:

XML: Скопировать в буфер обмена
Код: 
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <WebView
        android:id="@+id/webview"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
        
</androidx.constraintlayout.widget.ConstraintLayout>

MainActivity:
Java: Скопировать в буфер обмена
Код: 
package com.example.nbsp;

import android.os.Bundle;
import android.view.View;
import android.view.ViewGroup;
import android.webkit.WebChromeClient;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import androidx.appcompat.app.AppCompatActivity;

public class MainActivity extends AppCompatActivity {

    private String websiteUrl = "https://rt.pornhub.com/"; // Укажите URL вашего сайта
    private WebView webView;
    private View customView;
    private WebChromeClient.CustomViewCallback customViewCallback;
    private ViewGroup mainContainer;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        webView = findViewById(R.id.webview);
        mainContainer = findViewById(android.R.id.content);

        // Настройки WebView
        WebSettings webSettings = webView.getSettings();
        webSettings.setJavaScriptEnabled(true); // Включение JavaScript
        webSettings.setDomStorageEnabled(true); // Включение поддержки хранения DOM
        webSettings.setDatabaseEnabled(true); // Включение базы данных
        webSettings.setAllowFileAccess(true); // Доступ к файлам
        webSettings.setMixedContentMode(WebSettings.MIXED_CONTENT_ALWAYS_ALLOW); // Поддержка смешанного контента (HTTP+HTTPS)

        // Включение JavaScript-алертов и обработка событий, включая полноэкранный режим
        webView.setWebChromeClient(new WebChromeClient() {
            @Override
            public void onShowCustomView(View view, WebChromeClient.CustomViewCallback callback) {
                // Переход в полноэкранный режим
                if (customView != null) {
                    callback.onCustomViewHidden();
                    return;
                }

                customView = view;
                customViewCallback = callback;

                mainContainer.addView(customView);
                webView.setVisibility(View.GONE);
            }

            @Override
            public void onHideCustomView() {
                // Выход из полноэкранного режима
                if (customView == null) {
                    return;
                }

                mainContainer.removeView(customView);
                customView = null;
                webView.setVisibility(View.VISIBLE);
                customViewCallback.onCustomViewHidden();
            }
        });

        // Установка WebViewClient для обработки всех переходов внутри WebView
        webView.setWebViewClient(new WebViewClient() {
            @Override
            public boolean shouldOverrideUrlLoading(WebView view, String url) {
                view.loadUrl(url); // Обработка переходов внутри WebView
                return true;
            }
        });

        // Загрузка начального URL
        webView.loadUrl(websiteUrl);
    }

    @Override
    public void onBackPressed() {
        // Обработка возврата из полноэкранного режима
        if (customView != null) {
            onHideCustomView();
        } else if (webView.canGoBack()) {
            webView.goBack();
        } else {
            super.onBackPressed();
        }
    }
}

AndroidManifest.xml:
XML: Скопировать в буфер обмена
Код: 
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.nbsp">

    <!-- Разрешения для доступа в интернет и проверки состояния сети -->
    <uses-permission android:name="android.permission.INTERNET" />
    <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />

    <application
        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.AppCompat">

        <!-- MainActivity - поддержка полноэкранного режима и ориентации -->
        <activity
            android:name=".MainActivity"
            android:configChanges="orientation|screenSize"
            android:hardwareAccelerated="true">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
        
    </application>

</manifest>
ВНИМАНИЕ: в файлах используется нейминг моих приложений поэтому после copy, paste замените в первой строке MainActivity .nbsp; на имя вашего файла и в andorid манифест соответственно все nbsp на имя вашего проекта. И убедитесь что имена файлов в вашем проекте как у меня

Для тех кто не разбирается в программирование или что-то не получается я пишу билд который будет делать всё сам, постараюсь зарелизить в течение пары дней.
Ну и на этом уже реально всё, большое спасибо за внимание. В комментариях с удовольствием по отвечаю на вопросы
 
Войдите или зарегистрируйтесь для ответа.
Сверху Снизу