IT-инфраструктура для бизнеса и творчества
Разработка
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 или помочь вам сделать это самостоятельно

(function () { let cdnUrl = `https://specialsf378ef5-a.akamaihd.net/SelectelBranding/images/` let previousArticleNumber = null let currentArticleNumber = 0 let platform = 'Desktop' let articles = [ { name: 'camera', url: `${cdnUrl}CameraCat`, text: 'умную камеру для\u00A0наблюдения за\u00A0котиками', link: 'https://vc.ru/selectel/306690', num: 3 }, { name: 'chill', url: `${cdnUrl}ChillCat`, text: 'трекер, который подскажет, когда пора отдохнуть', link: 'https://vc.ru/promo/288561-eye-tracker', num: 1 }, { name: 'cloud', url: `${cdnUrl}CloudCat`, text: 'котика: даёшь ему «пять», а\u00A0он делает бэкап в облако', link: 'https://vc.ru/dev/294799-maneki-neko', num: 2 } ] let buttonCycle = document.querySelector('.button--cycle') let buttonChoose = document.querySelector('.button--choose') let buttonMobile = document.querySelector('.button--mobile') let textField = document.querySelector('.selectel-footer-subtitle') let imageAgent = document.querySelector('.image--agent') let banner = document.querySelector('.selectel-footer') buttonCycle.addEventListener('click', cycleClick) buttonChoose.addEventListener('click', () => sendEvent(`Promo ${articles[currentArticleNumber].num} Left`, 'Click')) buttonMobile.addEventListener('click', () => sendEvent(`Promo ${articles[currentArticleNumber].num} Left`, 'Click')) let media = window.matchMedia("(max-width: 570px)") media.addEventListener('change', matchMedia) function matchMedia() { if (media.matches) { platform = 'Mobile' } else { platform = 'Desktop' } update() } matchMedia() function cycleClick(event) { sendEvent(`Promo ${articles[currentArticleNumber].num} Right`, 'Click') if (event) { event.preventDefault() event.stopPropagation() } window.open('https://vc.ru/tag/selectelDIY', '_blank') //cycle(event) } function cycle(event) { // incrementArticleNumber() textField.innerHTML = generatedText() imageAgent.src = articles[currentArticleNumber].url + platform + '.svg?3' imageAgent.setAttribute("class", "") imageAgent.classList.add('image--agent', articles[currentArticleNumber].name) banner.href = articles[currentArticleNumber].link } function update() { banner.href = articles[currentArticleNumber].link imageAgent.src = articles[currentArticleNumber].url + platform + '.svg' textField.innerHTML = generatedText() } function incrementArticleNumber() { previousArticleNumber = currentArticleNumber if (currentArticleNumber >= articles.length - 1) { currentArticleNumber = 0 } else { currentArticleNumber++ } } const sendEvent = (label, action = 'Click') => { const value = `SelectelDIY — loc: Footer — ${label} — ${action}`; if (window.dataLayer !== undefined) { window.dataLayer.push({ event: 'data_event', data_description: value, }); } }; function generatedText() { let defaultText if (platform === 'Desktop') { defaultText = `Мы тут собрали %text%. Хотите научим?` } else { defaultText = `Мы тут собрали %text%.` } return defaultText.replace('%text%', articles[currentArticleNumber].text) } function getRandom(min, max) { min = Math.ceil(min) max = Math.floor(max) return Math.floor(Math.random() * (max - min + 1)) + min } (function create() { currentArticleNumber = getRandom(0, articles.length - 1) cycle() let page = document.querySelector('.page--entry') if (page) { function insertAfter() { let parents = page.querySelectorAll('[data-id="7"]') let referenceNode = parents[0] referenceNode.parentNode.insertBefore(banner, referenceNode.nextSibling); loaded() } setTimeout(() => insertAfter(), 0) } }()) function loaded() { banner.classList.add('loaded') } loadImages([ `${cdnUrl}CameraCatDesktop.svg`, `${cdnUrl}ChillCatDesktop.svg`, `${cdnUrl}CloudCatDesktop.svg`, `${cdnUrl}CameraCatMobile.svg`, `${cdnUrl}ChillCatMobile.svg`, `${cdnUrl}CloudCatMobile.svg?3`, ]) function loadImages(urls) { return Promise.all(urls.map(function (url) { return new Promise(function (resolve) { var img = document.createElement('img'); img.onload = resolve; img.onerror = resolve; img.src = url; }); })); } }())
0
10 комментариев
Популярные
По порядку
Написать комментарий...

Но зачем? 

6

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

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

4
Социологический бас

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

2

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

3

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

1

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

1

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

0
Социологический бас

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

0
Социологический бас

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

0
Читать все 10 комментариев
Хочу кухню как у подруги: зачем в Циан сделали поиск квартир по фото

Рассказывает Юлия Зыкова, руководитель команды «Аудитория» в Циан.

Как за 150 тыс. руб. мы увеличили продажи на 67 млн. руб. в месяц

Для нас эта история о том, как начать собирать базовые данные и работать с аналитикой. Для заказчика - это порочный круг из непонимания причин снижения продаж и отсутствия объективных решений.

Авито возглавила три рейтинга App Annie
Обновление лэндинга для клуба маркетологов

Основная ценность любого клуба – комьюнити, поэтому критически важно было отладить процесс привлечения новой аудитории и удержания старой. В этой статье мы расскажем о первом пункте. До этого был только лендинг, который редко продвигался в платной рекламе, был ориентирован на пользователей уже знакомых с брендом Convert Monster.

5 неожиданных сервисов Почты России, которые постоянно выручают меня в бизнесе

В прошлом году я открыл для себя совершенно удивительные фишки Почты России. С тех пор апка Почты у меня на главном экране в айфоне.

Что Tele2 предлагает клиентам в «черную пятницу»

На главной распродаже года клиентов компании ждут сразу несколько интересных предложений: скидки на смартфоны, пакеты SMS и безлимитный трафик на YouTube, Яндекс.Карты, Яндекс.Навигатор.

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

По данным Startup Genome, 9 из 10 стартапов терпят неудачу. Возможных причин «смерти» много: недостаточно протестированная гипотеза, неподтвержденная юнит-экономика, неверная стратегия или просто неудача в подходе к продажам.

@АнтиспамБот — когда ты реальная заноза в з@днице, или как давали отпор «П0шлым_Дев4енкам»

Прошло меньше двух недель с того дня, как в статье на vc.ru я рассказал про @antispamname_bot, предназначенный для борьбы со спамом в никнейме юзеров телеграмма вида «PEАЛЬНЫЕ_ZНAКОМСТVА» и «ПОИСК_PAPTHЕRОV». В новой статье я поделюсь тем, как прошли эти 10 дней: как бота подключили огромные чаты медиа изданий с аудиторией 100 000+ человек, чаты…

Wildberries обязал покупателей оплачивать возвраты товара, если те получены или уже переданы в доставку
Кнопка 112 - приложение с определением адреса и большой кнопкой вызова
null