Создаем приложение для ANDROID быстро и просто

du0sj4mi0jmkgfmqvtxuxqezfms.jpeg

Сегодня я хотел бы поделиться с Вами, как быстро и просто можно создать приложение для Android с базовыми знаниями HTML CSS и JS. По данному примеру код на Java для Android будет минимальным. Благодаря платформе XAMARIN приложения для мобильных телефонов можно делать в Visual Studio.
▍Шаг 1 - Переходим на сайт и Скачиваем бесплатную версию Community.

hgmnqtsojhxzhc14gtbue5fdm-i.jpeg

▍Шаг 2 - Запускаем установку и выбираем параметры. Нас интересует XAMARIN. Но Вы также можете выбрать другие параметры.

cfiwvoithfcaadtjtd0gdafw1vc.png

После успешной установки мы можем создать свой первый проект.

▍Шаг 3 - Запускаем Visual Studio. Создать проект. В фильтре пишем xamarin, платформа Android, язык c# (Если желаете другой язык можете его выбрать)
ahj4fsp4qip8um4tbguffpd1etu.png

▍Шаг 4 - Далее. Указываете имя для своего приложения, выбираете каталог где его сохранить. Создать.
efruo7bk9d_dtlyjhka9hnmxxiu.png

▍Шаг 5 - Указываем пустое приложение и выбираем минимальную версию андроида для запуска этого приложения.
g273x9roqc3ss9vopeizeivvc5s.png

▍Шаг 6 - Жмем ок. Visual Studio автоматически создает код для приложения

esfkgqbch3x7oapmpqz7mshullc.png

Мы можем его запустить в эмуляторе, который идет комплекте с Visual Studio нажав клавишу F5.

q56hhp9f3rhaurbop_jx6f-vlao.png

▍Шаг 7 - Теперь немного модифицируем код. В данном случае мы вообще не будем использовать Java. Так как мы будем кодить на C#.

bqmdox1ltnngnfnahhl_5t1dfu4.png

Приводим код к такому виду. Здесь мы создаем WebView контейнер который будет грузить локальный HTML файл, который находится в проекте в папке Assets.

public class MainActivity : AppCompatActivity
    {
        WebView mWebview; //это контейнер для просмотра HTML
        protected override void OnCreate(Bundle savedInstanceState)
        {
            base.OnCreate(savedInstanceState);
            Xamarin.Essentials.Platform.Init(this, savedInstanceState);           

            mWebview = new WebView(this);
            mWebview.Settings.JavaScriptEnabled = true; //это разрешение работа JS скриптов
            mWebview.Settings.DomStorageEnabled = true; //это разрешение на запись в память браузера
            mWebview.Settings.BuiltInZoomControls = true; //это разрешение на масштабирование пальцами щипком
            mWebview.Settings.DisplayZoomControls = false; //это запрет вывода кнопок масштаба
            mWebview.Settings.CacheMode = CacheModes.NoCache; //это отключает либо включает кэширование данных 

            mWebview.LoadUrl($"file:///android_asset/Content/login.html"); //это загрузка локального файла из папки Asset/Content
            SetContentView(mWebview); 
        }
        public override void OnRequestPermissionsResult(int requestCode, string[] permissions, [GeneratedEnum] Android.Content.PM.Permission[] grantResults)
        {
            Xamarin.Essentials.Platform.OnRequestPermissionsResult(requestCode, permissions, grantResults);

            base.OnRequestPermissionsResult(requestCode, permissions, grantResults);
        }
    }

▍Шаг 8 - Создадим там папку Content.

wurjnodw1x6qs6p8sx9e8ifsr44.png

▍Шаг 9 - Добавим в папку Content файл login.html

vrovy1-aecmwif7x3mhzqppaxqw.png

▍Шаг 10 - Далее уже пишем на привычном нам HTML CSS JS. Можем нажать на F5 и увидеть результат нашей работы.

si7lqacul_npj0ar0pqrzejlwne.png

По такому принципу можно создать приложение быстро и просто. Файлы html будут выглядеть одинаково на всех устройствах. То есть, Вы можете сделать приложения для Android и iOS с одинаковым интерфейсом. Не надо изучать сложные языки разметки, не надо изучать сложные макеты (сториборды) на iOS. Все можно сделать на HTML.

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

Q: Но как быть с функциями самой платформы? Пуш сообщения? Как взаимодействовать с самой платформой?
Все очень просто! JavaScript можно использовать для вызова функций Android:

▍Шаг 1 - Немного модифицируем наш файл MainActivity

egi8etnfketoyyqf1g8zap76tlq.png

//добавляем интерфейс для javascript
            mWebview.AddJavascriptInterface(new JavaScriptInterface(), "interface");             
 //

▍Шаг 2 - Далее создаем класс JavaScriptInterface на который будет ругаться Visual Studio

vgytdc39bsrr4kxwwg7lq91hqw8.png

  public class JavaScriptInterface : Java.Lang.Object
    {
        [JavascriptInterface]
        [Export("alert")]  //здесь мы указываем название функции вызываемой из html файла interface.alert('сообщение пользователю');
        public void alert(string data)
        {
            Toast.MakeText(Application.Context, data, ToastLength.Short).Show();//здесь Андроид выведет сообщение посредством Toast
        }
    }

Мы видим, что теперь программа ругается на Export так как не знает что это такое.

▍Шаг 3 - Добавим нужную библиотеку

rkgc6ugvmx9klldzoerbym5etwg.png

▍Шаг 4 - В фильтре напишем mono

6jq35dtjkhqnwzufh9brufy9tze.png

▍Шаг 5 - Найдем Export и поставим галочку

ejdq7nhyjbxov9jaiclvcyw1b1y.png

▍Шаг 6 - Жмем ок и видим что ошибка пропала.

Так вы можете подключать библиотеки если вдруг Visual Studio ругается на что то.

Toast.MakeText(Application.Context, data, ToastLength.Short).Show();

Данная функция это показ всплывающей информации на экране. Она выполняется именно на платформе Андроида. То есть мы можем написать в HTML файле вызов функции Андроида. Получается полное дружелюбие двух платформ по JavaScript интерфейсу. Данные можно передавать туда сюда. Вызывать переход от одной активити в другую. Все через HTML + JavaScript.

Немного модифицируем файл login.htm:

thsn2e0c_zztaeqx3jklwii8dkw.png



    


    

Привет мир


жмем F5

0yr9pifgmtyoj6pnt8cbh-smwp4.png

Теперь при нажатии на кнопку HTML вызывается функция Toast андроида и выводиться сообщение пользователю.

Спасибо за внимание.

P.s. Полный листинг MainActivity

using Android.App;
using Android.OS;
using Android.Runtime;
using Android.Webkit;
using Android.Widget;
using AndroidX.AppCompat.App;
using Java.Interop;

namespace MyFirstApp
{
    [Activity(Label = "@string/app_name", Theme = "@style/AppTheme", MainLauncher = true)]
    public class MainActivity : AppCompatActivity
    {
        WebView mWebview; //это контейнер для просмотра HTML
        protected override void OnCreate(Bundle savedInstanceState)
        {
            base.OnCreate(savedInstanceState);
            Xamarin.Essentials.Platform.Init(this, savedInstanceState);

            mWebview = new WebView(this);
            mWebview.Settings.JavaScriptEnabled = true; //это разрешение работа JS скриптов
            mWebview.Settings.DomStorageEnabled = true; //это разрешение на запись в память браузера
            mWebview.Settings.BuiltInZoomControls = true; //это разрешение на масштабирование пальцами щипком
            mWebview.Settings.DisplayZoomControls = false; //это запрет вывода кнопок масштаба
            mWebview.Settings.CacheMode = CacheModes.NoCache; //это отключает либо включает кэширование данных

            //добавляем интерфейс для javascript
            mWebview.AddJavascriptInterface(new JavaScriptInterface(), "interface");             
            //

            mWebview.LoadUrl($"file:///android_asset/Content/login.html"); //это загрузка локального файла из папки Asset/Content
            SetContentView(mWebview);
        }
        public override void OnRequestPermissionsResult(int requestCode, string[] permissions, [GeneratedEnum] Android.Content.PM.Permission[] grantResults)
        {
            Xamarin.Essentials.Platform.OnRequestPermissionsResult(requestCode, permissions, grantResults);

            base.OnRequestPermissionsResult(requestCode, permissions, grantResults);
        }
    }
    public class JavaScriptInterface : Java.Lang.Object
    {
        [JavascriptInterface]
        [Export("alert")]
        public void alert(string data)
        {
            Toast.MakeText(Application.Context, data, ToastLength.Short).Show();
        }
    }
}

tyb7fdkkt98xbfhc-jlqbuybdda.jpeg
oug5kh6sjydt9llengsiebnp40w.png

© Habrahabr.ru