Горячее
Лучшее
Свежее
Подписки
Сообщества
Блоги
Эксперты
Войти
Забыли пароль?
или продолжите с
Создать аккаунт
Я хочу получать рассылки с лучшими постами за неделю
или
Восстановление пароля
Восстановление пароля
Получить код в Telegram
Войти с Яндекс ID Войти через VK ID
Создавая аккаунт, я соглашаюсь с правилами Пикабу и даю согласие на обработку персональных данных.
ПромокодыРаботаКурсыРекламаИгрыПополнение Steam
Пикабу Игры +1000 бесплатных онлайн игр
Классическая игра в аркадном стиле для любителей ретро-игр. Защитите космический корабль с Печенькой (и не только) на борту, проходя уровни.

Arkanoid Pikabu

Арканоид, Аркады, Веселая

Играть

Топ прошлой недели

  • Rahlkan Rahlkan 1 пост
  • Tannhauser9 Tannhauser9 4 поста
  • alex.carrier alex.carrier 5 постов
Посмотреть весь топ

Лучшие посты недели

Рассылка Пикабу: отправляем самые рейтинговые материалы за 7 дней 🔥

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

Спасибо, что подписались!
Пожалуйста, проверьте почту 😊

Помощь Кодекс Пикабу Команда Пикабу Моб. приложение
Правила соцсети О рекомендациях О компании
Промокоды Биг Гик Промокоды Lamoda Промокоды МВидео Промокоды Яндекс Директ Промокоды Отелло Промокоды Aroma Butik Промокоды Яндекс Путешествия Постила Футбол сегодня
0 просмотренных постов скрыто
20
HTC2000
HTC2000
5 лет назад
Лига программистов

Что в Smart TV тебе моем? Или что можно запихнуть в телевизор?⁠⁠

Вместо предисловия


Добрый день, коллеги! Меня зовут Алексей и я занимаюсь телевизорами, а именно, разработкой Smart TV приложений («давайте похлопаем Алексею»).


Но что такое Smart TV? Какое оно, сферическое Smart TV приложение в вакууме?


Не буду томить вас ожиданием: в основном такого рода приложения предназначены для показа видео-контента. В любых вариациях. Записанное, живое вещание, телепередачи, фильмы, мультфильмы, рекламные ролики, и прочая, и прочая... Тысячи их!


Но разве Smart TV только для этого?

Что в Smart TV тебе моем? Или что можно запихнуть в телевизор? Длиннопост, Смарт ТВ, Дополненная реальность, Виртуальная реальность, Javascript, Nodejs, Гифка

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


(Сейчас все счастливые владельцы приставок и HDMI-кабелей кинут в меня свои тухлые помидоры, скажут «Отписка!» и счастливые уйдут, а мы продолжим.)


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


О моих (и не только) скромных потугах речь и пойдет ниже.

ТВ — Игра?


Действительно, первое, что приходит на ум — игра! Большой экран, возможность кроссдоменных запросов (так как Smart TV приложение, по сути, локальная HTML страница), и худо-бедно стандартное управление (пульт) позволяют нам реализовать игровой сценарий.


В большинстве своем это казуальные игры типа «1024», либо вариации на тему «Tower Defence». Негусто. К сожалению, накрутить супер 3D с шейдерами, тенями и динамическим освещением, получится разве что только на самых последних моделях... следующего года. Ибо в ТВ обычно размещена не самая совершенная версия браузера и, что хуже всего, она или обновляется крайне редко или не обновляется вовсе. Кроме того, разница между мощностью ТВ даже прошлогодними и текущими может быть кратной.


Поэтому, если вы хотите охватить максимальное количество моделей, готовьтесь к кровавой оптимизации всего и вся. Чистый, нативный Canvas станет вашим лучшим другом. Обертки над ним работают, но крайне прожорливо. Особенно удручает неудовлетворительная работа методов rotate и transform, поэтому анимацию планируйте спрайтовую и повороты спрайтов реализуйте только в самом крайнем случае.


Однажды мы делали игру на Ночь Карьеры. С ней удалось съездить к замечательным коллегам из Web Standarts Days и выступить с докладом.


Визуально игра представляет из себя игровое поле, вмещенное в размер экрана, не скролла, без преград. Задний фон разделен на несколько слоев, чтобы реализовать эффект 3d. На сцене генерируются летающие мишени (утки), по которым пользователь может стрелять.

Что в Smart TV тебе моем? Или что можно запихнуть в телевизор? Длиннопост, Смарт ТВ, Дополненная реальность, Виртуальная реальность, Javascript, Nodejs, Гифка
Что в Smart TV тебе моем? Или что можно запихнуть в телевизор? Длиннопост, Смарт ТВ, Дополненная реальность, Виртуальная реальность, Javascript, Nodejs, Гифка

Рис. 1. Общий вид приложения.


Главная задача состояла в том, чтобы дать возможность играть в игру кому угодно и как угодно, что сразу исключало взаимодействие с пультом. Пульт один, а игроков много. Управление реализовали с помощью телефона, а для максимального охвата мобильных устройств было решено реализовать клиент в виде адаптивного сайта. Реализовали мы его на WebSockets, и добавили фишку — управление через изменение положение телефона.


Тогда всплыло много интересных особенностей, некачественных датчиков ориентации и других глюков. Нам пришлось применить алгоритмы подавления шумов, иначе «прицел» игрока на экране телевизора страдал жутким тремором, Также выяснилось, что в игре «дует ветер»: в расчетах на телефонах накапливалась ошибка и прицелы постепенно «сдувало» в одну сторону, что вынуждало игроков постепенно поворачиваться. Некоторые играли, стоя спиной к ТВ.

Мораль: используйте датчики ориентации в браузерах телефонов как можно реже.
Что в Smart TV тебе моем? Или что можно запихнуть в телевизор? Длиннопост, Смарт ТВ, Дополненная реальность, Виртуальная реальность, Javascript, Nodejs, Гифка

Рис. 2. Убийцы уток за работой


В приложении используется анимация посредством замены спрайтов. Такой способ оказался достаточно производительным. Мы тестировали приложение с сотней и более летающих уток. В реальности в игре их было всего 10. Проблемы с производительностью возникли, когда прибежала дизайнер с возопила: «Хочу, чтобы планета крутилась»!


Закрутить спрайт проблем не составило. Проблема случилась, когда мы запустили приложение на относительно старом ТВ. Оказалось, что поворот спрайта 900×900 пикселей он не вывозит чуть более, чем никак. В итоге, самый глазастый пользователь может заметить, что планета на заднем фоне разрезана на 9 частей, которые вращаются вокруг одного центра. Это решило проблему с производительностью.

Отсюда другая мораль: не вращайте большие спрайты.

Ещё одна фишка проекта заключалась в том, что игровая логика обсчитывается... на ТВ. В этом случае сервер выступает выступает просто в роли передатчика данных между клиентами и ТВ. Сделали мы это для того, чтобы даже в случае потери соединения, утки продолжали летать по экрану, и после восстановления Интернета не требовалось перезапускать приложение. Любопытный кейс, но все же, необязательный.

ТВ — Экран?


Казалось бы, это уже банально, но нет. Как обычно всё скрывается в деталях. Экран для чего? Какую функцию несёт? Для чего предназначен?


Приведу лишь несколько примеров.


Поздравлялка.

Однажды мы решили на день святого Валентина запилить онлайн поздравлялку в компании, и использовать имеющиеся телевизоры в качестве трансляторов поздравлений. Приложение было реализовано в минималистичном варианте с одним запросом к серверу, возвращающим список поздравлений. Главная проблема заключалась в неприятной особенности телевизоров уходить в спящий режим. Если Samsung разрешает отключать эту функцию с помощью метода setScreenSaver, то остальные платформы не особо позволяют это делать. Как вариант, можно запускать в фоновом режиме любое зацикленное видео — ТВ в режиме показа видео выключается намного реже. В итоге приложение свою функцию выполнило: во всех частях офиса на нескольких этажах онлайн транслировались поздравления сотрудников.


Карта.

Если быть совсем точным — карта боевых действий со списком лучших игроков.


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


Более подробно о драконах, истребляющих принцесс, можно узнать тут.

Что в Smart TV тебе моем? Или что можно запихнуть в телевизор? Длиннопост, Смарт ТВ, Дополненная реальность, Виртуальная реальность, Javascript, Nodejs, Гифка
Что в Smart TV тебе моем? Или что можно запихнуть в телевизор? Длиннопост, Смарт ТВ, Дополненная реальность, Виртуальная реальность, Javascript, Nodejs, Гифка

Рис. 3. Общий вид стенда.


Приложение для ТВ обеспечивало демонстрацию общей сцены боя для всех желающих .


В этом проекте мы столкнулись с необходимостью оптимизации ранее стабильно и хорошо работающего кода. При увеличении количества игроков заметно ухудшались показатели производительности приложения. Выделили основные пути оптимизации:


— уменьшение объема передаваемой информации с сервера на клиенты и с клиентов на сервер;

— минимизация создания новых объектов в приложении.


Создание каждого нового экземпляра класса заметно глазу, поэтому все экземпляры должны быть созданы заранее и показываться пользователю по мере необходимости.


На ТВ слева — вид из VR-очков, на ТВ по центру — карта сцены.

Что в Smart TV тебе моем? Или что можно запихнуть в телевизор? Длиннопост, Смарт ТВ, Дополненная реальность, Виртуальная реальность, Javascript, Nodejs, Гифка

Рис. 4. Игровой процесс. На ТВ слева - вид из VR-очков, на ТВ по центру - карта сцены.


Интерактивный задний фон.

Вы совершенно справедливо можете спросить: «Ты там вообще работаешь, не?!». На что я с искренним недосыпом на лице отвечу: «Конечно, работаю!». Но об этом чуть позже. А пока нам снова не сиделось и захотелось реализовать интерактивный задний фон для квадрокоптера.

Что в Smart TV тебе моем? Или что можно запихнуть в телевизор? Длиннопост, Смарт ТВ, Дополненная реальность, Виртуальная реальность, Javascript, Nodejs, Гифка
Что в Smart TV тебе моем? Или что можно запихнуть в телевизор? Длиннопост, Смарт ТВ, Дополненная реальность, Виртуальная реальность, Javascript, Nodejs, Гифка

Идея была в том, чтобы показывать в телевизоре саму усадьбу деда Мороза, которая бы реагировала на отлет/прилет квадрокоптера.


Основной интерес был в том, чтобы «растянуть» картинку на три телевизора. Разных производителей.


Сделали мы это путем разбиения всей сцены на «комнаты». Каждый телевизор показывал «комнату» со своим номером. Номера «комнат» можно было менять, таким образом, телевизоры, в принципе, могли показывать одинаковые части одной сцены, но мы показывали всю сцену последовательно. Команды на перемещение окружения сцен (зверушек, движение Луны и дым из труб) передавались с сервера по любимым WebSockets.

Что в Smart TV тебе моем? Или что можно запихнуть в телевизор? Длиннопост, Смарт ТВ, Дополненная реальность, Виртуальная реальность, Javascript, Nodejs, Гифка

Поскольку мы знали время прилета/отлета квадрокоптера, появилась идея сделать «ветер» в телевизорах, который бы «сдувал» дым из труб при близкой работе винтов.


Опять-таки команда на взлет с квадрокоптера через сервер спускалась на клиенты.


И тут тоже у нас возникли сложности с производительностью. «Старый» webOS 2013 года крайне тяжело рендерил большую картинку (5760×1080). Пришлось специально для него нарезать задник в размер экрана и подставлять строго его.

Мораль: не пытайтесь рисовать картинки существенно большего размера, нежели экран телевизора. Он этого не переживет.

Тем не менее, все что относилось к Smart TV и бекенду, мы успешно реализовали.

ТВ — Охранник?


Однако самый интересный проект был совершенно неигровой, а что ни на есть, полезный.


Приложение занималось охраной дома. Да, именно телевизор. Да, именно охранял.


Суть приложения в том, что имеющаяся камера снимает всё, что перед ней происходит, и в случае резкого изменения картинки производит действия на выбор:


— громко орёт;

— посылает пользователю СМС;

— пишет письмо с приложенными фотками инцидента;

— пишет сообщение в FB тоже с фотками;

— делает всё это сразу или в любых вариациях.


Сам ТВ в этот момент усиленно прикидывается валенком и вообще не работающим. В приложении были обработаны случаи выключения ТВ от сети Интернет или просто от питания. Приложение поддерживало мультиязычность.


Установило его себе несколько десятков тысяч человек.


Но и тут было не всё просто.


При подключении камеры и попытке получения в браузере стрима с неё, как известно, вываливается системный попап с подтверждением действия. Особенность в том, что ТВ блокируют все всплывающие окна. Поэтому приложение наше было реализовано только на платформе Samsung с использованием либо встроенной в ТВ камеры, либо специальной камеры, поставляемой тем же самсунгом.


Ещё одним минусом стала, опять же, производительность ТВ. На относительно старых телевизорах (2013 года) можно было м-е-е-е-е-е-е-дленно прокрасться мимо камеры и телевизор бы «прохлопал» этот момент.


Но в целом идея просто блестящая.


Вывод


Телевизоры уже давно переросли свою основную функцию — показывать картинку с канала, показывать видосики или быть вторым монитором.


Их возможности и производительность постоянно растут, а круг применения ограничен только вашей фантазией. Любые задачи можно решить при должной проработке идеи и соответствующей реализации. Дерзайте и достигайте успеха!


Всем телеки!


З.Ы. Может быть у тебя, читатель, были необычные задачи для Smart TV, когда ТВ приходилось использовать в несвойственной для него роли? Поделись! Расскажи!

Показать полностью 10
[моё] Длиннопост Смарт ТВ Дополненная реальность Виртуальная реальность Javascript Nodejs Гифка
13
17
OpenNET
OpenNET
5 лет назад
GNU/Linux

Выпуск серверной JavaScript-платформы Node.js 13.0⁠⁠

Доступен релиз Node.js 13.0, платформы для выполнения сетевых приложений на языке JavaScript. Одновременно завершена стабилизация прошлой ветки Node.js 12.x, которая переведена в категорию выпусков с длительным сроком поддержки, обновления для которых выпускаются в течение 4 лет. Поддержка прошлой LTS-ветки Node.js 10.0 продлится до апреля 2021 года, а позапрошлой LTS-ветки 8.0 до января 2020 года.


Основные улучшения:


Движок V8 обновлён до версии 7.8, в которой задействованы новые методы оптимизации производительности, улучшена деструктуризация объектов, уменьшено потребление памяти и сокращено время подготовки к выполнению WebAssembly;


По умолчанию включена полная поддержка интернационализации и Unicode на базе библиотек ICU (International Components for Unicode), позволяющая разработчикам писать код, поддерживающий работу с разными языками и локалями. Модуль full-icu теперь установлен по умолчанию;


Стабилизирован API Workers Threads, позволяющий создавать многопоточные циклы обработки событий (event loop). Реализация основана на модуле worker_threads, позволяющем запускать JavaScript-код в несколько параллельных потоков. Стабильная поддержка API Workers Threads также бэкепортирована в LTS-ветку Node.js 12.x;


Повышены требования к платформам. Для сборки теперь требуется как минимум macOS 10.11 (требуется Xcode 10), AIX 7.2, Ubuntu 16.04, Debian 9, EL 7, Alpine 3.8, Windows 7/2008;


Улучшена поддержка Python 3. При наличии в системе Python 2 и Python 3, по-прежнему используется Python 2, но добавлена возможность сборки при наличии в системе только Python 3;


Удалена старая реализация HTTP-парсера ("--http-parser=legacy"). Удалены или переведены в разряд устаревших вызовы и свойства FSWatcher.prototype.start(), ChildProcess._channel, метод open() в объектах ReadStream и WriteStream, request.connection, response.connection, module.createRequireFromPath();


Следом вышло обновление 13.0.1, в котором по горячим следам устранено несколько ошибок. В том числе решена проблема с выводом в npm 6.12.0 предупреждения об использовании неподдерживаемой версии.


Напомним, что платформа Node.js может быть использована как для серверного сопровождения работы Web-приложений, так и для создания обычных клиентских и серверных сетевых программ. Для расширения функциональности приложений для Node.js подготовлена большая коллекция модулей, в которой можно найти модули с реализацией серверов и клиентов HTTP, SMTP, XMPP, DNS, FTP, IMAP, POP3, модули для интеграции с различными web-фреймворками, обработчики WebSocket и Ajax, коннекторы к СУБД (MySQL, PostgreSQL, SQLite, MongoDB), шаблонизаторы, CSS-движки, реализации криптоалгоритмов и систем авторизации (OAuth), XML-парсеры.


Для обеспечения обработки большого числа параллельных запросов Node.js задействует асинхронную модель запуска кода, основанную на обработке событий в неблокирующем режиме и определении callback-обработчиков. В качестве способов мультиплексирования соединений поддерживаются такие методы, как epoll, kqueue, /dev/poll и select. Для мультиплексирования соединений используется библиотека libuv, которая является надстройкой над libev в системах Unix и над IOCP в Windows. Для создания пула потоков (thread pool) задействована библиотека libeio, для выполнения DNS-запросов в неблокирующем режиме интегрирован c-ares. Все системные вызовы, вызывающие блокирование, выполняются внутри пула потоков и затем, как и обработчики сигналов, передают результат своей работы обратно через неименованный канал (pipe). Выполнение JavaScript-кода обеспечивается через задействование разработанного компанией Google движка V8 (дополнительно Microsoft развивает вариант Node.js с движком Chakra-Core).


По своей сути Node.js похож на фреймворки Perl AnyEvent, Ruby Event Machine, Python Twisted и реализацию событий в Tcl, но цикл обработки событий (event loop) в Node.js скрыт от разработчика и напоминает обработку событий в web-приложении, работающем в браузере. При написании приложений для node.js необходимо учитывать специфику событийно-ориентированного программирования, например, вместо выполнения "var result = db.query("select..");" с ожиданием завершения работы и последующей обработкой результатов, в Node.js использует принцип асинхронного выполнения, т.е. код трансформируется в "db.query("select..", function (result) {обработка результата});", при котором управление мгновенно перейдёт к дальнейшему коду, а результат запроса будет обработан по мере поступления данных.

Показать полностью
Javascript Nodejs Длиннопост Текст
2
1382
Geekabu
Geekabu
5 лет назад
IT-юмор

Из конференции NodeJS в Сан-Франциско⁠⁠

Из конференции NodeJS в Сан-Франциско Nodejs, Программирование, Данные, Магия, Конференция, Презентация, Искусственный интеллект, IT юмор

Данные -> Искусственный Интеллект -> Магия.

Nodejs Программирование Данные Магия Конференция Презентация Искусственный интеллект IT юмор
132
13
ghsee
6 лет назад
Лига программистов

Как стать программистом. Сервис доставки живых спортивных трансляций⁠⁠

Приветствую всех! Хочу рассказать о своем опыте входа в мир разработки, ну и промежуточном результате. Это мой первый пост в сообществе и целом на Пикабу.

Честно сказать, с детства восхищался айти, но в рамках кинематографа, тайно мечтая приблизиться к искомому.  День Х настал уже в сознательном возрасте 23-24, после сильнейшего кислотного трипа, приехав домой с четкой мыслью что буду ненавидеть себя до конца жизни, если не попробую , заказал книгу по C++  Страуструпа. Через не могу, прочел и прорешал это. Никому не рекомендую начинать с плюсов, это вас задемотивирует + большей вероятностью забьете. Но тогда опыта не было, первую работу тоже искал в качестве разработчика С++. Волшебным образом мне  повезло. Навешал лапши на уши о том что все могу,  и меня взяли на 20000р в мес с маленькую фирму, пилить их хотелки, попутно занимаясь полным спектром работ от погрузки/разгрузки/демонтажа конструкций до работы на подряде на местных заводах . Уволился через год-полтора и так получилось что обратил свое внимание на C#.

За 3-4 месяца так же прочел неск книг по шарпу, поверил в себя и пошел на собеседования(СПб). По истечению полугода так никуда и не взяли, от части из-за слабо прокачанных социальных скилов и неуверенности в себе. Бывали даже панические атаки прям на интервью)

В результате, конспектировал все что спрашивали, фоткал все тестовые задания, заполнял пробелы в знаниях.

Понял что нужен опыт разработки на .NET. Благодаря одному знакомому парню из нашей компании, определился. Он как-то пожаловался что любит смотреть спорт с мобилы, а все ресурсы либо на флеше, либо с кучей назойливой рекламы либо вообще нифига нет контента по выбранному событию.

Собственно, начался ресёрч и планирование примерно в апреле 2018 года, цель была сделать сервис который бы транслировал живые спортивные события, был прост и стабилен + работал на всех устройствах. Через 3 месяца от начала разработки скилы начали прокачиваться, голова наполнялась не серой теорией. Все это время я работал в техподдержке и в момент очередной ссоры с начальством,  разослал резюме десяткам фирм мне пришло интересное предложение. Т.к я уже имею опыт бесполезных поездок на себеседования, решил отправить им свое тестовое задание, которое делал для других. Десктопное мини приложение где для чтения и выгрузки огромного текстового файла использовалась многопотоночность и асинхронность + шаблон MVVM. В результате меня пригласили на встречу и в последствии взяли на работу. Это был успех) Зарплата выше чем в поддержке в 2 раза. Окрыленный я, чуть поздабив на домашний проект, влился в рабочие процессы, получил колоссальное кол-во опыта и к декабрю 2018 продолжил домашнюю разработку сервиса по спортивным трансляциям. Переделывал все раза 3-4 :-)

По итогу проект сейчас состоит из пяти микросервисов. Основополагающий это сервис синхронизации данных в БД от других микросервисов. WEB  API. Сделан на .NET Core, изучал и сразу применял шаблоны проектирования, такие как фабрика, синглтон, репозиторий(это подсмотрел в офисных проектах и в книгах  по шаблонам проектирования)

Проект написан не на чистом .net стеке, так же использовался nodejs(для старта ffmpeg, временных инстанцев http серверов. На nodejs это оказалось проще и быстрее), примечательно что вызывать nodejs код можно прям из .net приложения использую INodeSerevices, оч удобно.

База данных сперва была MSSQL, но потом переехал на Postgres, тоже подглядел в офисных проектах.

Покупаю видео поток у контент провайдеров, ретранслирую через свой сервер. Что бы работал телеграм вынужден был купить socks5  proxy, так же в перспективе нужно будет покупать расширенный аккаунт для ngrok, т.к он выполняет роль https  тоннеля, который перенаправляет пакеты от телеграм на мой локальный порт и адрес, иначе нужен будет SSL сертификат и свой домен.

Сперва ретрансляция одного потока занимала примерно 50% CPU, это опустило меня на дно отчаяния т.к по моим расчетам нужен был хотя бы двухпроцессорный сервак б.у с алиэкспресс примерно на 36-48 ядер. Очень не хотелось тратить 1000$ на подходящий сервер, что бы найден способ, снижающий нагрузку до смешных 0.5 - 1%.


Сейчас сервисом пользуется один человек, с подачи которого все это затевалось) Но мне бы хотелось поделиться этим с людьми, т.к ресёрч показал что годных сайтов/сервисов по прямыми трансляциям и большим ассортиментом, да еще и чтоб работало на ios/android , просто нет. По этому оставляю тут адреса.

Канал: @LiveSportsStreams Bot: @LiveSportStreamsBot.


Спасибо за внимание, надеюсь на фидбек, отвечу на любые вопросы.

Показать полностью
[моё] Программирование Спорт Истории из жизни Telegram бот Junior Nodejs Трансляция Текст
42
WEBONELOVE
WEBONELOVE
6 лет назад

Gulp - помощник веб-разработчика (гайд) (пост не закончен и был выложен случайно)⁠⁠

Привет, дорогие подписчики TELEGRAM канала WEBONELOVE и просто юзеры пикабу.


В данной статье я бы хотел рассказать вам о технологии gulp, которая наверняка облегчит жизнь даже самого матёрого веб-разработчика.


Внимание! Автор постау предусматривает, что вы знаете хотя бы азы языка программирования JavaScript.


Погнали!


1. Давайте узнаем, что это такое.


Gulp - инструмент для выполнения рутинных задач, таких как, компиляция scss/sass, минификация файлов, сжатие изображений и многое другое.


Изначально был создан как замена grunt.


Написан gulp на языке JavaScript с использованием библиотеки node.js.


2. Зачем он нужен?


Данный инструмент способен на очень многое, от автопрефиксинга до изменения имён файлов.


Вы можете комбинировать несколько действий вместе, например:


Вы написали код на том же sass/scss, далее вам надо его скомпилировать, после расставить вендорные префиксы, затем минимизировать и в в конце выгрузить данный файл в нужный каталог. И всё это после банального сохранения файла.


Понравилось? Хочешь также? Тогда предлагаю перейти к следующему пункту.


3. Настройка рабочей среды.


Для установки gulp мы будем использовать пакетный менеджер npm. Чтобы данная штука появилась на вашем компьютере, нам нужно скачать node.js.


Для этого переходим на данный сайт: https://nodejs.org/en/

Gulp - помощник веб-разработчика (гайд) (пост не закончен и был выложен случайно) Gulp, Web-программирование, Программирование, Веб-разработка, Nodejs, Длиннопост

И скачиваем LTS версию. Если вы пользователь windows, то открываем его как обычный exe'шник. Там установщик сам всё расскажет.


Если вы владелец машины под управлением linux, а в частности ubuntu 18.04, то открываем терминал и выполняем следующие комманды в указанной последовательности:


1. sudo apt update - для обновление списка доступных пакетов.

2. sudo apt install nodejs - устанавливаем node js

3. sudo apt install npm - устанавливаем тот самый npm.


После этого установка node.js закончена, приступим к настройке проекта.


Давайте создадим директорию и как-нибудь назовём её (желательно без прописных букв).

Gulp - помощник веб-разработчика (гайд) (пост не закончен и был выложен случайно) Gulp, Web-программирование, Программирование, Веб-разработка, Nodejs, Длиннопост

Отлично, теперь давайте перейдём в эту папку. Теперь, в данной папке нужно открыть окно комманд. На windows это shift + ПКМ и в появившимся контекстном меню надо выбрать пункт "Открыть окно комманд", а на linux это просто клик правой кнопкой либо по иконке папки, либо уже в самом nautilus'e, после чего, выберете пункт "открыть в терминале".


Теперь давайте выполним комманду npm init, чтобы потом создавать различные зависимости.


Сейчас вас будут спрашивать, как вы хотите назвать проект (прописные буквы не поддерживаются), какая версия и т.д.. Сейчас нам это не важно, поэтому на все его вопросы отвечайте Enter'oм. В самом конце он спросит вас: "is this ok?", то есть "Всё верно?"

Gulp - помощник веб-разработчика (гайд) (пост не закончен и был выложен случайно) Gulp, Web-программирование, Программирование, Веб-разработка, Nodejs, Длиннопост
Gulp - помощник веб-разработчика (гайд) (пост не закончен и был выложен случайно) Gulp, Web-программирование, Программирование, Веб-разработка, Nodejs, Длиннопост

На что тоже жмем Enter.


Теперь, как вы могли заметить, в нашей папке появился файл "package.json", в котором мы будем хранить различные зависимости.


Отлично, самая скучная часть сделана, теперь приступим к установке самого gulp.


Для этого мы выполним вот такую комманду: npm i gulp (windows), sudo npm i gulp (mac, linux)

После этого немного ждём и та-да-мс! Gulp установлен!

4. Начало работы.


Чтобы начать работать с gulp, в корне папки надо создать файл с названием gulpfile.js, причём обязательно с таким названием, так как этого требует сам gulp.


Теперь можно открыть эту папку в любом текстовом редакторе. Я предпочитаю sublime text 3.


Чтобы работать с gulp, мы должны как-то обращаться к нему. Это делается через переменную.


Давайте создадим переменную с именем gulp (название может быть любое, но ведь gulp - логичнее) и присвоим ей вот такую функцию: require('gulp').


Почему require и почему gulp? -- require - стандартная функция node js, которая сообщает, что мы хотим подключить какой-то модуль. А вот про gulp расскажу по подробнее. Ты наверняка уже увидел папку "node_modules", которая появилась после установки gulp. И если в ней покопаться, то можно найти тот самый gulp.

Gulp - помощник веб-разработчика (гайд) (пост не закончен и был выложен случайно) Gulp, Web-программирование, Программирование, Веб-разработка, Nodejs, Длиннопост

Его то мы и подключаем. Кстати все эти файлы связаны с gulp'om и нужны для его работы, поэтому удалять ничего не надо.


Но блин, почему просто gulp, а не node_modules/gulp, скажете вы, а вот ответа я и сам не знаю)

И по этому поводу даже не парюсь.


Отлично, на данный момент у нас с вами вот такой код:

Gulp - помощник веб-разработчика (гайд) (пост не закончен и был выложен случайно) Gulp, Web-программирование, Программирование, Веб-разработка, Nodejs, Длиннопост

Теперь предлагаю перейти к следующему пункту.


5. Базовый синтаксис.


Концепция gulp'a состоит на том, чтобы выполнять за вас рутинные задачи, а эти самые задачи описываются в так называемых тасках. чтобы добавить таск, нам нужно обратиться к ранее созданной переменной gulp и взять у неё метод task().


В итоге у нас получается вот такой вот код: gulp.task().


А что дальше? А вот что, в эту функцию нужно передавать параметры.


Первым параметром будет имя функции, его надо писать в кавычках. Далее идёт тот код, который будет выполнен во время вызова данного таска.


Теперь наш код выглядит так: gulp.task('name', function(){

// а вот тут будет код, который выполнится при вызове таска

});


Давайте попробуем написать тут какой-нибудь код. Например так:

Gulp - помощник веб-разработчика (гайд) (пост не закончен и был выложен случайно) Gulp, Web-программирование, Программирование, Веб-разработка, Nodejs, Длиннопост
Показать полностью 7
[моё] Gulp Web-программирование Программирование Веб-разработка Nodejs Длиннопост
9
iDmitriyWinX
iDmitriyWinX
6 лет назад

Gulp - начало работы⁠⁠

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


Важно! Для нормальной работы вас должны быть хоть какие-то знания языка JavaScript!

Также, у вас должен быть установлен node js.


Начало работы:

Я думаю что вы все уже знаете что такое gulp, поэтому начинать с предыстории я не буду.


Ну что же, для начала давайте создадим папку с любым названием. Я например, из-за отсутствия фантазии назвал её pikabupost.


Отлично, теперь откроем коммандную строку в этой же папке (shift + ПКМ и выберете пункт "Открыть окно комманд"). Если вы умеете работать с ней, то + вам, если нет, то я думаю ничего страшного. После чего выполняем комманду "npm init", позже я расскажу зачем.

Gulp - начало работы Программирование, Web-программирование, Gulp, Веб-разработка, Nodejs, Длиннопост

Если в названии папки у вас нет прописных символов, то можно смело жать Enter пока не кончатся вопросы. В самом конце вас спросят "is this ok?", то есть "Все правильно?"

Gulp - начало работы Программирование, Web-программирование, Gulp, Веб-разработка, Nodejs, Длиннопост

Тут тоже смело жмём Enter.


Отлично, теперь по поводу этого файлика можно не париться.


Ну, а теперь давайте установим сам gulp!


Для этого выполним комманду npm i gulp --save-dev


Где npm - node package manager (появится после установки node js), i - install, gulp - имя желаемого пакета, а вот про флаг --save-dev, я расскажу после установки самого пакета.


Примечание: если вы пользуетесь Mac или linux, то советую написать sudo в самое начало комманды, чтобы всё установилось без ошибок.


Жмём Enter и ждём.

Gulp - начало работы Программирование, Web-программирование, Gulp, Веб-разработка, Nodejs, Длиннопост

Поздравляю, gulp установлен! Теперь открываем ваш любимый текстовый редактор и в корне папки создаём файл gulpfile.js (обязательно с таким именем, так как этого требует сам gulp).


Вы уже наверняка заметили, что в проекте появилась папка node_modules, с огромной кучей файлов. Среди них есть и gulp, который мы и будем подключать.


Кстати, я обещал рассказать про флаг --save-dev. Данный флаг добавляет информацию о скачанном пакете в файл package.json

Gulp - начало работы Программирование, Web-программирование, Gulp, Веб-разработка, Nodejs, Длиннопост

Для чего это надо, я тоже расскажу потом)


И так, давайте займёмся gulp'ом.


В уже ранее созданном файле gulpfile.js добавим переменную gulp, в принципе, у переменной может быть любое название, но gulp как-то логичнее.


Этой переменной мы присваиваем require('gulp').

Gulp - начало работы Программирование, Web-программирование, Gulp, Веб-разработка, Nodejs, Длиннопост

Возникает 2 вопроса: что такое require и почему просто gulp, а не node_modules/gulp.


require - стандартная функция nodejs, с помощью неё мы можем подключать различные модули себе в проект.


А просто gulp потому... Да я и сам не знаю почему, по этому я просто забил на эту хрень!


Отлично! Теперь давайте создадим task. Task - это небольшое, а может быть большое действие, которое будет выполнять gulp. Для прошаренных это просто функция, которая выполняется когда мы её вызовем.


Синтаксис такой: gulp.task("Имя таска", function() {

код.которыйБудет.выполняться();

});


Где gulp - имя переменной, к которой мы подключали gulp, объект, а task - функция данного объекта, в которой указывается имя таска и код, который выполнится при вызове.


Давайте напишем такой код:

Gulp - начало работы Программирование, Web-программирование, Gulp, Веб-разработка, Nodejs, Длиннопост

Для особо ленивых я вставил его сюда.


gulp.task('jopa', function () {

console.log('Hello, world');

});


Теперь заходим в терминал и находясь в данной папке пишем gulp jopa

Где jopa - имя таска, который мы хотим выполнить.

Gulp - начало работы Программирование, Web-программирование, Gulp, Веб-разработка, Nodejs, Длиннопост

Поздравляю, таск выполнен!


Вот и вся задумка gulp'a. Разумеется, это не весь его функционал. Ведь он раскрывается в устанавливаемых пакетах.


А вот о них мы поговорим в следующем посту. Там мы рассмотрим каждую строчку, которую gulp выводит в терминал, рассмотрим каждую функцию gulp'a.


Поэтому сейчас я прощаюсь с вами, но не на долго, так как после прогулки я напишу следующий пост про gulp.


Псс... ты ещё не ушёл? Тогда подпишись на мой телеграмм канал)


https://t.me/WEBONELOVE

Показать полностью 7
[моё] Программирование Web-программирование Gulp Веб-разработка Nodejs Длиннопост
10
rnastroenie
6 лет назад

Тяжелые будни разработчика⁠⁠

Так как это первый пост - для начала пару строк о себе - я фрилансер верстальщик - работаю на мелко-средние веб-студии или обычных людей которые решили обозначить свое присутствие в сети, верстаю все что вообще можно сверстать - начиная от лендингов, заканчивая интернет-магазинами. Иногда делаю совсем нестандартное - например веб-презентации. Чуть реже я ставлю верстку на движок (обычно это wp или modx), еще реже запускаю какие-то свои проекты.


На данный момент у меня возникла необходимость и желание написать простое приложение для android. И чтобы не разбираться в чем-то совсем новом я выбрал связку cordova (среда разработки) + vue.js (фреймворк)


Первый шаг - это всегда подготовка рабочего места - в моем случае это ноут c Win 10 на борту.

И этот шаг оказался достаточно длинным, чем я и хочу поделиться:


1) Прежде всего ставим на Win 10 нормальную командную строку - я выбрал cmder.


2) Качаем дистрибутив node.js для windows, ставим еще и его.


3) Ставим через консоль cordova (собственно на этом шаге закончились мои ожидания насчет процесса подготовки и началась реальность)


4) Пробуем собрать проект - упс... ошибка - нужна ява, чтож качаем и ставим яву с официального сайта


5) Собираем проект, cordova просит указать путь до android sdk. А я наивно полагал что обойдется без него. Качаем и ставим, прописываем в консоли нужный путь


6) Наконец-то собираем проект. Запускаем... Точно, нужен же эмулятор - заходим в Android studio, создаем устройство, выбираем требуемую версию Android - теперь скачиваем еще и её.

Этот шаг пришлось повторить - т.к. увы ноут на базе amd не лучший выбор для android разработчика - пришлось менять образ android с x86 (работает только на intel) на arm x64


7) Наконец-то запускаем программу в эмуляторе и... забиваем на эмулятор - т.к. в течении 15 минут наблюдаем заставку при запуске android - дальше нее дело не идёт.

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


На этом подготовка рабочего места закончилась.


Забегая вперед - скажу - то что я делаю - это по сути веб приложение, собранное в apk - т.е. даже несобранное оно отлично работает в обычном браузере - т.е. функционал не связанный с самим устройством (камера или микрофон к примеру) - можно тестить не собирая проект в apk - подходит любой браузер.


В качестве тестовой среды - буду использовать смартфон.

Когда закончу писать приложение - займусь отладкой и тестами на разных версиях android / ios (кордова мультиплатформенная среда) - для этого вероятнее всего буду использовать browserstack

Показать полностью
[моё] Разработка Cordova Nodejs Гайд Android Текст Программирование
12
Партнёрский материал Реклама
specials
specials

Только каждый третий пикабушник доходит до конца⁠⁠

А сможете ли вы уложить теплый пол, как супермонтажник?

Проверить

Ремонт Теплый пол Текст
Renamed754157517
Renamed754157517
6 лет назад
Web-технологии

Вопросы по Web-разработке⁠⁠

Я столкнулся с некоторыми вопросами.
1. Можно ли хешировать пароль на стороне клиента, чтобы не передавать пароль plaintextом, и как?
2. Как сделать авторизацию пользователя по cookies?
В frontend фреймворках не умею, backend - Node, mongodb.
P. S. Верстка блочная ))

Web Разработка Nodejs Текст Cookie
31
Посты не найдены
О нас
О Пикабу Контакты Реклама Сообщить об ошибке Сообщить о нарушении законодательства Отзывы и предложения Новости Пикабу Мобильное приложение RSS
Информация
Помощь Кодекс Пикабу Команда Пикабу Конфиденциальность Правила соцсети О рекомендациях О компании
Наши проекты
Блоги Работа Промокоды Игры Курсы
Партнёры
Промокоды Биг Гик Промокоды Lamoda Промокоды Мвидео Промокоды Яндекс Директ Промокоды Отелло Промокоды Aroma Butik Промокоды Яндекс Путешествия Постила Футбол сегодня
На информационном ресурсе Pikabu.ru применяются рекомендательные технологии