Butterflynet. Обзор приложения с JS на Android / Хабр

Предисловие

Доброго времени суток, уважаемый читатель.

Чуть больше года назад у меня появилась идея сделать мобильное приложение, в котором можно будет писать код и смотреть результат прямо «не отходя от кассы». Для реализации такого «механизма» был выбран язык JS и HTML в качестве каркаса для представления. Т.к. сам я пишу на .net, разработка велась на Xamarin. Давайте посмотрим, что из этого вышло.

Внешний вид

Описание

В Butterflynet есть три основных элемента, для которых можно написать код: сами приложения, интерфейсы и задачи.

Для приложений отдельно (пользователями) выдаются привилегии, которые расширяют их возможности. На данный момент это:

NoCors для получения файлов и их содержимого без CorsPolicy.
ViewAppSources для получения доступа к просмотру исходников других приложений из текущего.
EditAppSources для получения доступа к изменению исходников других приложений из текущего.
PackApps для упаковки/распаковки приложений в файлы-пакеты.

Интерфейсы - это лаунчеры для отображения списка приложений. На первом скриншоте показан пример default-лаунчера.

Задачи - это диспетчеры задач для работы со свернутыми приложениями, позволяющие либо вернуться к ним, либо закрыть их. На первом скриншоте также показан пример default диспетчера задач.

Default интерфейсы и задачи нельзя изменять, т.к. они являются базовым функционалом для работы программы. Но можно создавать свои, на любой вкус и в неограниченном количестве.

В Butterflynet предусмотрен довольно большой выбор языков. Также прямо из него всегда можно скачать актуальную версию apk из соответствующего пункта меню.

В разделе меню "Разработчикам" можно посмотреть полное описание всех api для текущей версии программы.

Пример кода приложения "Hello World"

<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, чтобы скоротать время.

Спасибо за прочтение и хорошего дня!

Butterflynet. Обзор приложения с JS на Android