Конкурс инструкций

Создаём кросс-платформенный десктопный мессенджер из vc.ru в четыре строчки кода

Работать в «Комитете», понимать, как работает API «Основы», на которой построен vc.ru, и вообще быть программистом для этого необязательно.

В закладки

Шаг 1. Приложению нужна красивая иконка

Для этого нужен фотошоп и шаблон иконки приложения для iOS. Но я всё сделал за вас

Загрузите в полном размере к себе на компьютер и сохраните как «icon.png». Она пригодится нам позднее – мы добавим её к приложению, чтобы оно было красивое :)

Шаг 2. Нужно загрузить nativefier, который создаёт из сайта приложение на Electron

На самом деле это Chrome, внутри которого открывается заранее установленный сайт.

Как загрузить nativefier можно посмотреть на официальной страничке:

для этого требуется macOS 10.9+ / Windows 7+ / Linux (как повезёт)

Если вам повезло, и у вас есть npm или homebrew, установить его можно в одну команду:

npm i nativefier -g или brew install nativefier

На линукс npm так же просто поставить, как на мак homebrew

Поставить на мак: ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)" Поставить на линукс: sudo apt install npm

и затем выполните предыдущее действие.

Объявление на vc.ru

Если вы в Windows и не справились поставить, просто попробуйте то же самое в браузере :)

Шаг 3. Изменяем стиль

Если мы сейчас просто запустим nativefier, то получим обычный сайт vc.ru

Чтобы сделать его больше похожим на месенджер, необходимо с помощью javascript удалить шапку сайта и левую панель.

Для этого в той же папке, что и иконка, создадим файл «remove.js»

И запишем в него 4 простые команды – найти объект, удалить объект:

let sidebar = document.getElementsByClassName("layout__left-column")[0] let header = document.getElementsByClassName("site-header")[0] sidebar.parentNode.removeChild(sidebar) header.parentNode.removeChild(header)

Мы практически у цели! Нужно теперь запустить сам nativefier

nativefier https://vc.ru/m/ --name SiliconMessenger --icon ./icon.png --counter --bounce --inject ./remove.js --disable-context-menu --disable-dev-tools Дополнительные параметеры (нужны для кроссплатформенной сборки) --platform mac | win32 | linux ; нужен, если вы хотите собрать приложение для другой системы --arch x86 | x64 | arm ; нужен, если хотите собрать для другой архитектуры

--name SiliconMessenger укажет название для приложения, которое мы хотим задать

--counter --bounce нужны для того, чтобы уведомления страницы в браузере (которые обычно видны на вкладке) отображались на иконке приложения в доке или панели задач (см. api nativefier).

--inject. /remove.js подтянет команды для удаления лишних деталей интерфейса, которые мы написали выше.

--disable-context-menu --disable-dev-tools нужны чтобы никто не догадался, что это на самом деле Chrome: )

Шаг 4. Ура! Можно общаться!

Если вы всё сделали по инструкции, то должны были получить что-то такое (для Windows и линукс – аналогично, но с другим оформлением окна)

Это телеграм? Телеграм, да?

Поскольку сайт адаптивный – мы получили адаптивное приложение, изображения скачивать также удобно, как с сайта, а все ссылки внутри нашего «приложения» откроются отдельно в вашем стандартном браузере.

Можно запустить его слева столбиком, а справа работать

Плюсом, так как это Chrome, все стандартные команды ctrl(cmd)+C/+V/+R (чтобы перезагрузить страницу) и остальные продолжают работать, как вы привыкли.

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

На правах юмора. Если захотите, я могу выложить. exe /.dmg / исполняемый файл для linux или помочь вам сделать это самостоятельно

{ "author_name": "Roman Moskovskiy", "author_type": "self", "tags": ["selectel_\u0438\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u044f","electron"], "comments": 10, "likes": 17, "favorites": 39, "is_advertisement": false, "subsite_label": "dev", "id": 159960, "is_wide": true, "is_ugc": true, "date": "Mon, 21 Sep 2020 02:02:35 +0300", "is_special": false }
Объявление на vc.ru
0
10 комментариев
Популярные
По порядку
Написать комментарий...
6

Но зачем? 

Ответить
4

Все жду, когда в nativefier добавят стандартную возможность делать разделяемый runtime в объёме того же chrome.

Фактически, каждое такое приложение - это просто набор скриптов, картинок и тп. Оно легкое - если не считать runtime с chomium, но он нужен один в системе.

Ответить
1

Приложение на electron. Сколько оперативы ест? Гигабайт есть?)

Ответить
3

200 мб полный максимум (обычно 100-150). +- ест как vc.ru во вкладке в хроме

Ответить
1

Программисты - волшебники нашего времени 👏

Ответить
1

Круто, спасибо!

Ответить
0

А если хрома нет, будет работать?

Ответить
0

Бывшего Виндоуз пользователя видно издалека ))

Ответить
0

О исправили, так гораздо лучше )))

Ответить

Комментарии

null