Конкурс инструкций
Разработка
Roman Moskovskiy

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

{ "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": 41, "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 }
0
10 комментариев
Популярные
По порядку
Написать комментарий...
6

Но зачем? 

Ответить
4

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

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

Ответить

Небольшой Мурод

2

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

Ответить
3

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

Ответить
1

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

Ответить
1

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

Ответить
0

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

Ответить

Душевный дебаркадер

0

Комментарий удален по просьбе пользователя

Ответить

Душевный дебаркадер

Душевный
0

Комментарий удален по просьбе пользователя

Ответить
Читать все 10 комментариев
Подмена товара у Авито через Boxberry, два случая

Дублирую эту статью, сначала опубликовал в разделе "Статей" раздела товаров, но связавшись с поддержкой vc.ru, они рекоммендовали разместить статью в разделе "Приемной".

Петербуржцы шесть лет продавали персональные кондиционеры в США и только теперь вышли в Россию: путь Evapolar Статьи редакции

Компания продаёт 100 тысяч устройств в год, а популярна стала благодаря краудфандингу и Amazon. Но в России пока столкнулась с недоверием к небольшим кондиционерам, хотя аномальная жара помогла на старте.

Основатели Evapolar Евгений Дубовой и Владимир Левитин
Компания Palta Юрия Гурского, Алексея Губарева и Александра Фролова привлекла $100 млн на развитие healthtech-проектов Статьи редакции

В её портфолио — Flo, Prisma и другие. Инвестиции компания направит в том числе на новые проекты.

Как мы решили комплексные проблемы склада Lamoda всего одним приложением

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

Склад Lamoda
Кейс: как мы первыми на Twitch провели тест-драйв автомобиля и получили ER 19%
Как сделать рекламу у блогеров, которая точно достигнет цели?
Историческая хроника становится доступной для креативного сообщества
От SymbianOS до Android: как менялись доли мобильных ОС на рынке смартфонов с 2007 по 2021 годы Статьи редакции
Презентация нового сервиса Creative Russia Map и дискуссия о креативном предпринимательстве
Дайджест новых стилей и сайтов digital-компаний за июль, где много красоты от героев будущего времени

Всем привет! Это юбилейный, 10 дайджест о том, что важного и интересного происходит в мире стилей и сайтов digital-компаний. Сегодняшний выпуск за июль. За клавиатурой и редактором статей на vc.ru я, Вадим Орлов, основатель Embacy.

null