Создал свою облачную ОС на javascript и опубликовал в "яндекс для жизни"

Всем привет. Я создал свою облачную ОС на javascript, которая запускается в интернете, и главная фишка, что все ваши данные хранятся в облаке на серверах яндекса. То есть вы можете создавать разные файлы, заметки, списки и все это синхронизируется между вашими устройствами.

Эта статья предназначена как для потенциальных пользователей, так и для программистов, которым в конце статьи расскажу устройство моей ОС.

Для того, чтобы продемонстрировать работу моей ОС в кратце я подготовил видео выше.

Как вы видите основные элементы моей ОС, это окна и виджеты, которые можно перетаскивать между разными окнами.

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

Синхронизация происходит автоматически, в течении 10 секунд после ваших действий. Этой происходит при помощи YandexSDK и доступа к вашим данным у меня нет, но есть у админов яндекса.

Какие программы и возможности есть у моей ОС, в кратце:

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

✅ Имеется текстовый редактор. На заметки можно ставить пароль.

✅ Имеется редактор списка дел. На список можно ставить пароль.

✅ Имеется календарь, который также позволяет отсчитывать количество дней от заданной вами даты, а также он может считать количество дней, через сколько дней наступит заданная вами дата.

✅ Имеется калькулятор.

✅ Имеется секундомер.

✅ Имеется рандомайзер, который работает в диапазоне от -9000000 до 9000000.

✅ Имеются различные обои для вашего виртуального рабочего стола.

Также за различные ваши действия вы будите получать очки, накопив определенное количество очков, вы перейдете на новый уровень. Чем выше ваш уровень, тем выше вы будите в таблице лидеров.

В общем можете сами протестировать, очень много полезного функционала. Потестить можно тут:

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

Давайте начнем с ядра. Естественно точка входа в мою облачную ос - это index.html файл, в который подключены js скрипты ядра нашего ОС, ну также prompt оверлей, ну это чисто оверлей для быстрого запроса ввода строки от пользователя.

Как вы видите в ядро входят такие файлы как

yquery.js - библиотека для манипуляций с DOM (можно было и без неё, но мне она нравится)

yagames.js - это скрипт, в котором я интегрирую YandexSDK в свою ОС. В том числе в нем я реализовал основные функции, для хранения данных в облаке

adv.js - это рекламный таймер, который показывает рекламу по таймеру

config.js - конфигурация

input.js - тут происходит перехват кнопок мыши, кнопок клавятуры и тут есть функции, которые определяют на каком конкретно окне произошел клик или нажатия клавиш, так как окна можно перемешать и они будут перекрывать друг друга.

user.js - функции для работы с профилем и настройками пользователя.

render.js - скрипт, который создает главный canvas и в нем реализован так называемый mainloop, который происходит каждый кадр, когда моя ос отображается на экран. В нем из интересного мы отрисовываем открытые приложения, в зависимости от их расположения на слоях и если есть контекстное меню, оно отрендариться.

loader.js - это самый интересный скрипт. Он содержит функции loadImages, loadScripts, которые принимают массив из url'ов для динамической подгрузки изображений и скриптов по мере надобности, но не это самое интересное. Самое интересное в нем, что он сразу после загрузки страницы, вызывает инициализацию YandexSDK, подгружает главный скрипт приложения меню (рабочий стол) и запускает это приложение, а затем запускает рендер.

Теперь давйте разберем вторую часть ядра нашей ос, это api - то есть основные кирпичики, из которых будут состоять приложения в нашей ОС. То есть звено между приложениями и ос.

Начнем с первого файла в api - это App.js. Данный файл содержит функции для работы с приложениями и класс App

На классе App будут базироваться все приложения. У обьектов этого класса будут разные поля. Интересные из них это images и includes. После вызова метода Start() будут загружены сначала изображения, затем зависимые скрипты и произойдет запуск приложения.

WinApp.js - данный класс наследуется от App и представляет что-то типо Windows Forms API для приложений, которые будут от него наследоваться. То есть достаточно будет приложению унаследоваться у этого класса, чтобы приложение было окнонным, его можно было перетаскивать, сворачивать, разворачивать и тд. В него же встроена сразу система вкладок из WinAppTab.js и TabSelectButton.js. Приложению останется только добавить виджеты на влкадки и на виджеты надписи и кнопки (кнопки реализованы в WinAppButton).

Widget.js - это то из чего будут состоять наши приложения. Предоставляет класс наследования с цель создания виджета. Виджеты можно переносить между приложениями, можно данные на них сохранить, загрузить с облака, у всех есть уникальные индификаторы.

Также есть класс для спецефических приложений HTMLApp, наследуется от App. Он предоставляет возможность создавать приложения одновременно на html,css,js и рисовать их оверлеем поверх основного canvas'а. Благодаря чему можно создавать приложения с всеми фишками html5, благодаря чему если захотеть можно создать браузер через iframe или плеер через теги video, audio. Но я в основном этот класс буду использовать для заметок, чтобы использовать input'ы и textarea

Также api предоставляет возможность поверх всех окон отрисовать контекстное меню для выбора (файл ContextMenu.js).

Наконец-то мы можем перейти к приложеням. Все приложения располагаются в папке aps и изначально не подгружены.

На после загрузки страницы, loader.js подгружает приложение menu - а это наш рабочий стол. Он как полноэкраное приложение подгружает все свои скрипты, а также подгружает только main.js из других приложений, чтобы создать их ярлыки для запуска (а уже при запуске тех приложений, они полностью подгружают свои скрипты и ресурсы).

Детальнее Menu рассматривать не хочу, так что поехали дальше.

Рассмотрим оконое приложение "календарь". Понятное дело мы наследуется от WinApp сначала и подключаем все зависимости.

Приложение имеет 3 виджета, два нижних из которых можно перенести на рабочий стол.

Также подпишемся на событие AddNewTab, которое вызваеться из api/WinApp.js когда приложение запускается и нету вкладок, либо для добавления новой вкладке. В этом событии создадим вкладку, инициализируем и расставим виджеты по сетки приложения, также сделаем, чтобы после переноса виджеты появлялись заново хитрым костылем.

Саму реализацию каждого виджета мне рассказывать лень, так что поехали дальше.

Давайте из интересного ещё расмаотрим Notepad (заметки). Данное приложение наследуется от HTMLApp, для того чтобы использовать такие элементы как textarea, input. В начале перечислили зависимости в том числе и css файл :)

Так как это html app переопределный метод GetMainLayout должен вернуть базовому классу html верстку. Элементы создаются через JQuery для компактности.

Сама реализация приложения:

Также, чтобы была возможность показывать на рабочем столе виджеты с заметок я сделал класс notepad_widget, который дает при нажатии кнопки в приложении Notepad, создает виджет с заметкой и прености его на рабочий стол.

Вот результат, как вы видите наш блокнот отображается оверлеем по верх других окон, и его можно свернуть

Также мы можем нашу запику венести на рабочий стол. Как и список из приложения "список задач"

И все это напоминаю через YandexSDK автоматом синхронизируется между вашими устройствами, которые открыты на вашем яндекс аккаунте.

Хотел реализовать ещё свою IDE, чтобы можно было программы писать прямо внутри ОС для ос, свой playmarket, но мне сейчас лень это делать, я и так на это 2 недели потратил по 10 часов в день :)

В общем, кого заинтересовало можете потестить.

Спасибо!