Создаем приложение для ANDROID быстро и просто
Сегодня я хотел бы поделиться с Вами, как быстро и просто можно создать приложение для Android с базовыми знаниями HTML CSS и JS. По данному примеру код на Java для Android будет минимальным. Благодаря платформе XAMARIN приложения для мобильных телефонов можно делать в Visual Studio.
▍Шаг 1 — Переходим на сайт и Скачиваем бесплатную версию Community.
▍Шаг 2 — Запускаем установку и выбираем параметры. Нас интересует XAMARIN. Но Вы также можете выбрать другие параметры.
После успешной установки мы можем создать свой первый проект.
▍Шаг 3 — Запускаем Visual Studio. Создать проект. В фильтре пишем xamarin, платформа Android, язык c# (Если желаете другой язык можете его выбрать)
▍Шаг 4 — Далее. Указываете имя для своего приложения, выбираете каталог где его сохранить. Создать.
▍Шаг 5 — Указываем пустое приложение и выбираем минимальную версию андроида для запуска этого приложения.
▍Шаг 6 — Жмем ок. Visual Studio автоматически создает код для приложения
Мы можем его запустить в эмуляторе, который идет комплекте с Visual Studio нажав клавишу F5.
▍Шаг 7 — Теперь немного модифицируем код. В данном случае мы вообще не будем использовать Java. Так как мы будем кодить на C#.
Приводим код к такому виду. Здесь мы создаем 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.
▍Шаг 9 — Добавим в папку Content файл login.html
▍Шаг 10 — Далее уже пишем на привычном нам HTML CSS JS. Можем нажать на F5 и увидеть результат нашей работы.
По такому принципу можно создать приложение быстро и просто. Файлы html будут выглядеть одинаково на всех устройствах. То есть, Вы можете сделать приложения для Android и iOS с одинаковым интерфейсом. Не надо изучать сложные языки разметки, не надо изучать сложные макеты (сториборды) на iOS. Все можно сделать на HTML.
В идеале, вместо локальных файлов можно сделать загрузку со стороннего сайта. В этом случае Вы можете менять контент приложения без его обновления в AppStore и Google Play.
Q: Но как быть с функциями самой платформы? Пуш сообщения? Как взаимодействовать с самой платформой?
Все очень просто! JavaScript можно использовать для вызова функций Android:
▍Шаг 1 — Немного модифицируем наш файл MainActivity
//добавляем интерфейс для javascript mWebview.AddJavascriptInterface(new JavaScriptInterface(), "interface"); //▍Шаг 2 — Далее создаем класс JavaScriptInterface на который будет ругаться Visual Studio
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 — Добавим нужную библиотеку
▍Шаг 4 — В фильтре напишем mono
▍Шаг 5 — Найдем Export и поставим галочку
▍Шаг 6 — Жмем ок и видим что ошибка пропала.
Так вы можете подключать библиотеки если вдруг Visual Studio ругается на что то.
Toast.MakeText(Application.Context, data, ToastLength.Short).Show();Данная функция это показ всплывающей информации на экране. Она выполняется именно на платформе Андроида. То есть мы можем написать в HTML файле вызов функции Андроида. Получается полное дружелюбие двух платформ по JavaScript интерфейсу. Данные можно передавать туда сюда. Вызывать переход от одной активити в другую. Все через HTML + JavaScript.
Немного модифицируем файл login.htm:
h1 Привет мир
Теперь при нажатии на кнопку 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(); >> >
