Butterflynet. Обзор приложения с JS на Android
- среда, 17 мая 2023 г. в 00:00:46
Доброго времени суток, уважаемый читатель.
Чуть больше года назад у меня появилась идея сделать мобильное приложение, в котором можно будет писать код и смотреть результат прямо «не отходя от кассы». Для реализации такого «механизма» был выбран язык JS и HTML в качестве каркаса для представления. Т.к. сам я пишу на .net, разработка велась на Xamarin. Давайте посмотрим, что из этого вышло.
В Butterflynet есть три основных элемента, для которых можно написать код: сами приложения, интерфейсы и задачи.
Для приложений отдельно (пользователями) выдаются привилегии, которые расширяют их возможности. На данный момент это:
NoCors для получения файлов и их содержимого без CorsPolicy.
ViewAppSources для получения доступа к просмотру исходников других приложений из текущего.
EditAppSources для получения доступа к изменению исходников других приложений из текущего.
PackApps для упаковки/распаковки приложений в файлы-пакеты.
Интерфейсы - это лаунчеры для отображения списка приложений. На первом скриншоте показан пример default-лаунчера.
Задачи - это диспетчеры задач для работы со свернутыми приложениями, позволяющие либо вернуться к ним, либо закрыть их. На первом скриншоте также показан пример default диспетчера задач.
Default интерфейсы и задачи нельзя изменять, т.к. они являются базовым функционалом для работы программы. Но можно создавать свои, на любой вкус и в неограниченном количестве.
В Butterflynet предусмотрен довольно большой выбор языков. Также прямо из него всегда можно скачать актуальную версию apk из соответствующего пункта меню.
В разделе меню "Разработчикам" можно посмотреть полное описание всех api для текущей версии программы.
<html>
<head>
<meta charset='utf-8'>
<!--For work with save and load data-->
<script src='kernel.js' type='text/javascript'></script>
</head>
<br><br>
<div id='text'></div>
<form name='form'>
<br>Enter your name:<br>
<input type='text' name='textBox'><br>
<input type='button' value='Save' onClick='Save()'>
<input type='button' value='Clear' onclick='Clear()'>
<input type='button' value='Reload' onclick='Reload()'>
</form>
<script lang = 'JS'>
const dataName = 'username';
var greeting = ['Welcome', 'Hi', 'Have fun', 'Nice to meet you'];
Load();
function Load(){
// params:
// 1: dataName (onlylowercase)
// return json object { name: <someName>, value: <someValue>}
var userName = LoadData(dataName);
if (userName.value !== null){
document.getElementById('text').innerHTML = shuffleArray(greeting)[0] + ', ' + userName.value + '!';
}
else
{
document.getElementById('text').innerHTML = 'Hello world';
}
}
function Save(){
var userName = QuotedString(form.textBox.value);
// params:
// 1: dataName (onlylowercase); 2: dataValue
SaveDataAsync(dataName, userName).then(r => { Load(); });
}
function Clear(){
// params:
// 1: dataName (onlylowercase)
DeleteDataAsync(dataName).then(r => { Load(); });
}
function Reload(){
Load();
}
function shuffleArray(arr) {
return arr
.map(value => ({ value, sort: Math.random() }))
.sort((a, b) => a.sort - b.sort)
.map(({ value }) => value)
}
function QuotedString(inString){
var outString = '';
for (var i = 0; i < inString.length; i++){
var outputSign = inString[i];
if (outputSign == '\''){
outString += '\'';
} else {
outString += outputSign;
};
};
return '\'' + outString + '\'';
}
</script>
</html>
Собственно, здесь есть поле для ввода имени и три кнопки «Сохранить», «Сбросить» и «Перезагрузить». После того как пользователь ввел имя и нажал «сохранить» ему выдается случайное приветствие из массива. То же самое будет происходить при повторном запуске приложения. Если пользователь сбросит данные, то приложение снова начнет выдавать фразу «Hello world».
Работа с API приложения реализована через три функции: SaveDataAsync, DeleteDataAsync и LoadData. Они позволяют работать с сохраненными для текущего приложения данными.
В приложении добавлены два разрешения:
Доступ к памяти устройства (для работы с загрузкой/выгрузкой данных устройства).
Доступ к геолокации (если кто-то захочет написать приложения для работы с ней).
C Butterflynet можно работать не выдавая разрешений, они необязательны.
Прозрачность. Вы всегда можете посмотреть код приложения и понять как он работает.
Гибкость. В любой момент можно изменить приложение.
Размер приложений. По сути, приложения состоят из текстовых файлов с кодом и небольших изображений, поэтому весят считанные килобайты.
Большая функциональность. Можно написать различные виды приложений.
Кастомизация. Можно создавать не только свои приложения, но и свои лаунчеры и диспетчеры задач (внутри приложения).
В google play приложения нет. Думаю, причины того, почему его туда не пропустят, понятны. Поэтому отдельно прикрепляю ссылку на скачивание apk и архив с некоторым приложениями.
Для кого Butterflynet? Возможно, кто-то придумает как использовать Butterflynet в коммерческих целях, кто-то давно хотел написать небольшую утилиту или игру для себя, а возможно кто-то просто захочет побаловаться с JS, чтобы скоротать время.
Спасибо за прочтение и хорошего дня!