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

Создаём кросс-платформенный десктопный мессенджер из 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

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

Если вы в 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 или помочь вам сделать это самостоятельно

0
10 комментариев
Написать комментарий...
Александр Львов

Но зачем? 

Ответить
Развернуть ветку
Denis Kiselev

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

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

Ответить
Развернуть ветку
Александр Рязанов

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

Ответить
Развернуть ветку
Roman
Автор

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

Ответить
Развернуть ветку
Балкон.Ру

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

Ответить
Развернуть ветку
Андрей Фролов

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

Ответить
Развернуть ветку
Даниил Гусаров

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

Ответить
Развернуть ветку
Иван Монастырский

Да

Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
7 комментариев
Раскрывать всегда