По мере того, как я все больше интересуюсь работой с JavaScript в своей повседневной работе, я неизбежно вижу, как JS используется на «периферии» разработки веб-приложений в областях и на платформах, которые вы, возможно, не ожидаете от JS. Это настоящий подвиг для языка, который был хорош только в том, чтобы «заставлять вещи мелькать на странице» в течение многих лет после его выпуска Netscape.

Одной из областей, о которой я понятия не имел, что JS приземлился, была разработка настольных приложений. Я знал о PhoneGap/Cordova и других подобных фреймворках, которые позволяли веб-разработчикам использовать нативные мобильные API и создавать «нативный опыт», используя примерно тот же код, что и их веб-приложение. Распространение этого на рабочий стол не обсуждалось или, по крайней мере, обсуждалось там, где я искал новости JS.

В моем бесконечном стремлении узнать о лучших практиках, охватывающих мир JS, я получил ежемесячную подписку на Frontend Masters. Может быть, это бесстыдная затычка для них, но Frontend Masters находится в верхней части моего списка онлайн-школ кодирования, и в нем всегда регулярно обновляется свежий контент.

Одним из курсов, который привлек мое внимание, был Стив Кинни проводит презентацию о создании приложений для Electron. По какой-то причине создание настольных приложений казалось мне более увлекательным, чем создание мобильных приложений. Может быть, у меня сложилось впечатление, что большинство мобильных приложений — это просто веб-представление, застрявшее внутри оболочки пользовательского интерфейса и не делающее ничего интересного, но я просто не особо интересовался разработкой мобильных приложений.

Также может быть, что я сижу за экраном ноутбука гораздо чаще, чем за экраном мобильного телефона. Очевидно, я не согласен с остальным миром из-за тенденций веб-трафика, но как, черт возьми, я буду кодировать на своем смартфоне весь день?

Приложения строки меню

Одна тема, которой Стив восхищался в своем выступлении, поначалу не кажется такой уж интересной: приложения в строке меню. Вы говорите, что такое приложение строки меню?

Видите этот маленький кусочек пространства в верхней части пользовательского интерфейса вашей ОС, на котором есть несколько значков и который в основном пуст? Ну, по крайней мере, моя строка меню не такая уж загроможденная... пока. Ваш разум только что взорвался тоннами возможностей? Создание приложения строки меню с веб-представлением с помощью Electron — это немного хак, но, похоже, оно работает хорошо. Функциональность Electron использует собственные API-интерфейсы, которые позволяют приложениям иметь меню за пределами своего «экрана».

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

Если я нажму на значок, я увижу варианты подключения, отключения и перехода на страницу настроек, которая появляется в модальном режиме. Все эти параметры отображаются в виде обычных ссылок меню в неупорядоченном списке. У Electron есть Tray API, который позволяет вам создавать такие же меню; тем не менее, вы можете развить идею приложения строки меню еще на один шаг вперед.

Electron может использовать строку меню, чтобы показать веб-представление, объявив пустое меню и прокравшись в приложение, наложенное на то место, где «меню» обычно расширяется. Довольно умно, а? Используя эту технику, независимо от того, находитесь ли вы в полноэкранном режиме на Mac или на другом рабочем столе в Ubuntu, вы можете получить доступ к своему приложению одним щелчком мыши… или, как мы вскоре увидим, сочетанием клавиш ;)

В своем курсе Стив продемонстрировал «лучшее» приложение буфера обмена, которое упростило просмотр того, что вы ранее скопировали, и выбор его в будущем для вставки в поля ввода. Конечно, вы, вероятно, можете найти уже разработанное приложение, которое сделает то же самое за вас, но что происходит, когда они добавляют/удаляют/изменяют функцию, которая вам понравилась? Увеличить цену на приложение или переместить популярную функцию за платный доступ?

Кроме того, какое удовольствие использовать чужую вещь, когда вы можете научиться делать это самостоятельно? Я создаю два приложения Electron в основном для удовольствия… ну, а также для того, чтобы узнать, как получать деньги за работу с такими приложениями в будущем.

Два музыкальных приложения

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

Прежде всего, я хочу воспользоваться этой возможностью, чтобы сравнить реактивный фреймворк, который я уже знал, Vue.js, и тот, который я хочу изучить, React. Я вижу, что React все время упоминается в объявлениях о вакансиях и встречах. Vue набирает обороты, но все еще сильно отстает в признании и пунктах описания работы. Было забавно попробовать мой собственный Todo MVC.

Для приложения я решил создать музыкальный проигрыватель, который будет жить в строке меню. Я всегда слушаю музыку, когда работаю. Как ни странно, я использовал разные настройки и приложения в зависимости от того, какую машину я использую. Возврат к этому приложению, чтобы пропустить плохую песню или понравиться хорошей, может раздражать. Недавно я узнал больше о сопоставлении клавиш и сочетаниях клавиш и смог изменить или понравиться песни в течение нескольких секунд, используя два сочетания клавиш. Тем не менее, было много вещей, которые я мог придумать для включения в какое-нибудь музыкальное приложение, которое я всегда мог быстро найти в верхней части экрана.

Функции

Например, что, если вам интересно воспроизводить разные песни в зависимости от того, в каком приложении вы находитесь. Вы можете использовать плагины «активного окна», которые позволяют вам получать метаданные об активном окне, на которое реагирует ваше музыкальное приложение. Возможно, вы даже сможете получить расширение файла из окна IDE и воспроизводить разные жанры на основе разных расширений файлов. Файлы JS будут воспроизводить спагетти-вестерн Эннио Морриконе, а файлы PHP воспроизводят трэш-метал. Как круто (и бесполезно) это было бы.

Но почему бы не попробовать функцию активного переключения окон музыкального жанра/плейлиста? Кроме того, как насчет объединения множества различных источников потоковой передачи музыки в один поток? Многие приложения для агрегации музыки предоставляют эту функцию.

Но что, если мы возьмем песни из этих потоков и проанализируем звук по мере его поступления? Мы могли бы попытаться получить ключи, удары в минуту, ссылки на тексты песен и т. д. Иногда мне нравится пробовать делать каверы на песни, которые я впервые слышу в своих приложениях для интернет-радио, и мне нужна небольшая помощь с получением гитарных табулатур и текстов.

Множество случайных крутых идей и непослушный размах ползут, но что теперь?

Платформы

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

Я использую Spotify в течение дня, пока я работаю. Обычно мне нравится то, что предлагает плейлист Discover Weekly, и часто песни, которые я загружаю в свою библиотеку, берутся из этого плейлиста. Плейлист с новыми песнями каждый понедельник определенно помогает мне начать неделю. Я также использую вкладку «Открытие», чтобы попытаться найти музыку. Наконец, иногда я просто ищу исполнителя, который мне нравится. В наши дни большую часть музыки я слушаю случайным образом, но случайное прослушивание может быть немного рискованным, когда вы хотите сосредоточиться на работе или у вас плохой день.

Я использую Slacker Radio по ночам, в основном придерживаясь станций жанра «Chill». Моя самая популярная станция на самом деле «Chill -> Chill», если вы можете в это поверить. Это ооочень круто и круто, ребята. Очень рекомендую. У них также есть кураторские списки текущей музыки, которую они выбирают от новых исполнителей, и других просто запоминающихся мелодий. Точно так же, как вкладка «Обнаружение» Spotify и еженедельный плейлист, кураторские музыкальные станции Slacker часто дают мне возможность впервые познакомиться с артистом, которого я знаю и ценю. Они также прекрасно подходят для вашего настроения.

Я использую Google Play Music для хранения. Я до сих пор не могу преодолеть астрономическую норму в 50 000 песен на их серверах бесплатно. Я думаю, что у меня большая музыкальная библиотека, и пока у меня всего 32 345 песен. Мне также нравится прокрутка боковой панели в приложении для Android. В моей библиотеке более 32 000 песен, поэтому прокрутка по буквам может значительно сэкономить время.

Посмотрев на мои три потоковых сервиса, я вижу, что у Spotify на сегодняшний день лучшие API и документация для разработчиков. У них даже был какой-то пример кода с браузерной драм-машиной, составленной из сэмплов песен 1930-х годов, транслируемых из Spotify. В Google Play Music есть неофициальная библиотека, написанная на Python, и я думаю, что смогу украсть часть этого кода. У Slacker Radio, к сожалению, не было никаких API, которые я мог найти. Для случайной фоновой музыки мне, возможно, придется найти другой сервис, который заменит Slacker. Полагаю, это моя первая жертва API.

В следующем посте я расскажу о стартовом наборе, который буду использовать для создания своего приложения с панелью меню. Мы также столкнемся с несколькими ухабами на пути и будем уверены, что доберемся до этого волшебного сочетания клавиш ;) Жду не дождусь!