Category: Frontend

26
Мар
2020

v-for с vuex когда рендеришь формы в цикле

В доке vuex очень мало сказано про то, как нам его использовать с v-for. По крайней мере, для меня этого не достаточно, чтоб понять, как действовать в моем случае.
Итак, у меня есть следующий UI:

Поясню, что тут происходит. При каждом …

25
Мар
2020

Как проверить имя и фамилию через одну функцию

https://jsfiddle.net/gej9582z/

есть функция validName . она проверяет имя и фамилию на валидность. В параметре nameID передается id инпута (‘surname’ или ‘name’). То что не прошло валидацию получает класс incorrect-forms (добавляется крас…

20
Мар
2020

Почему не срабатывает mapStateToProps?

Недавно начал работать с Redux, вроде все получалось. Сейчас делаю еще один компонент, добавил еще reducer’ы, action, затем вызвал combinedReducers, но по какой-то причине возникает ошибка: this.props.books is undefined. Попробовал вызыват…

14
Мар
2020

Как сверстать такой список? VUE.JS

Во front-end я новичок. Подскажите, как сверстать данную таблицу? Не знаю как реализовать такую логику. Данные падают извне в виде массива объектов. Один объект соответствует одной строке таблицы.

P.S. На две кнопки справа вверху не обращ…

10
Мар
2020

Как сделать так, чтобы в PhpStorm плагин Emmet срабатывал при нажатии Enter, как это сделано в VS Code?

Допустим, в VS Code я ввожу div и нажимаю Enter, это сразу преобразовывается в такой вид: div /div.
Или ввожу ul>li*5 и нажимаю Enter, и плагин Emmet также отрабатывает.
А как сделать так, чтобы в PhpStorm плагин Emmet работал по принципу …

09
Мар
2020

Как из frontend загрзузить фото на сервер django. Через метод post не выходит. Делаю проект что-то похожого на вконтакте

У меня есть модель что типа профиля вк. Я хочу сделать раздел где можно загружать фото.
Как это сделать, через post не получается. Подскажите кто-нибудь. Если что то Django

05
Мар
2020

Модульный подход – Как можно задавать или изменять переменные внутри модуля?

В модуле имеется переменная – хранящая кнопку выхода. В методе init я пытаюсь ее инициализировать, чтобы работать с ней в других методах данного модуля, а в дальнейшем дать возможность обращаться к ней, вернув её как поле объекта. Однако …

03
Мар
2020

10–11 апреля, Санкт-Петербург: конференция HolyJS 2020 Piter

Авторы технологий и инструментов, развивающих JavaScript-инфраструктуру, собираются обсудить всё, что происходит в мире JS.
— Читать дальше «Конференция HolyJS 2020 Piter»

29
Фев
2020

WordPress не выводит данные с поля таксономии

Подскажите почему WP не выводит контент с поля таксономии
Использую вот такой код для вывода заголовка

<?=get_field(‘zagolovok’,$product_category->term_id); ?>

ID проверял , id возвращается верный
но wp все равно ничего не выво…

23
Фев
2020

Что вы сможете запрограммировать через год, занимаясь по два часа в день: фронтенд

Узнаём у профессионального разработчика, из каких шагов состоит обучение фронтенду и что вы будете знать и уметь уже через год.
— Читать дальше «Что вы сможете запрограммировать через год, занимаясь по два часа в день: фронтенд»

20
Фев
2020

Проблема с событиями в DOM

$(‘input’).on(‘input’, function(e) {
//code
}

это события работает, когда в странице старые открытые inputы, но если я добавлю новый input (т.е. не обновляя страницу) и введу внутри новый input этот события не работает, в чем проблема…

18
Фев
2020

Back end и Front end

Для чего нужны front-end библиотеки(React,Angular,Vue), если можно рисовать html в том же JSP.Я явно чего-то не понимаю. Накидайте пожалуйста ссылки на объяснение взаимосвязи Front-end и back-end.Даже если писать на Java EE, то как наприме…

18
Фев
2020

Зачем и как строить Интернет вещей с Node.js

О том, как применить Node.js для серверной части Интернета вещей. Разбираемся с вопросами безопасности и показываем пару реальных примеров интеграции платформы в IoT.

Публикация представляет собой перевод поста на freeCodeCamp Олега Романюка – главы отдела входящего маркетинга в KeenEthics.

1. Оценка состояния рынка

В 2019 году рыночная выручка IoT достигла 212 миллиардов долларов. В мире насчитывается около 26,7 миллиарда подключенных устройств IoT. К 2025 году это число достигнет 75,4 миллиарда.

По
оценкам ООН, на февраль 2020 года численность
населения
составляет 7,7 миллиарда человек. У
среднестатистического
человека есть около 3-4 устройств IoT. Наверняка у вас есть хотя бы одно из таких устройств: смарт-часы, фитнес-трекер, смарт-ТВ или, может быть, даже «умная» машина.

Ожидается,
что в 2025 году численность
населения достигнет
8,1 миллиарда человек и
на каждого человека
будет приходиться
9-10 IoT-устройств.

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

Статистические данные получены от Statista и ООН.

2. Выбор правильного фреймворка

Клиентская часть IoT-устройств представлена самим аппаратным обеспечением. Она написана на C, C++, Lua и других низкоуровневых языках программирования. Из-за аппаратных ограничений с этим ничего не поделаешь.

Наряду с высокой производительностью, пользователи IoT-устройств отдают приоритет низкой стоимости и энергоэффективности. Поэтому приложения для устройств следует писать на низкоуровневых языках. По крайней мере, пока.

Но вы никак не ограничены в выборе фреймворка и языка программирования для серверной части IoT-приложений. На наш взгляд, Node.js – правильный выбор. И вот почему.

2.1. Быстрота и производительность

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

Node.js работает на высокоэффективном и масштабируемом JavaScript движке V8 от Google. Вследствие этого Node.js является основной платформой для работы с приложениями, работающими в режиме реального времени и постоянно меняющимися данными.

2.2. Node.js легко интегрируется с протоколами IoT

Приложения интернета вещей активно использует протокол MQTT для обмена сообщениями между устройствами по принципу издатель-подписчик. Для транспортировки и инкапсуляции этот протокол задействует WebSockets. Как MQTT, так и WebSockets хорошо поддерживаются и легко интегрируются с Node.JS.

2.3. Модули Node.js облегчают разработку IoT

В Node.js есть npm (менеджер пакетов, англ. Node Package Manager) с множеством полезных пакетов для IoT-устройств. Существует около 80 пакетов для Intel IoT Edison, Arduino и Raspberry Pi. Кроме того, он содержит более 30 пакетов для различных датчиков, маячков и модулей.

2.4. Ресурсоэффективность и масштабируемость

Разработчики предпочитают работать с Node.js, так как он не требует большого объема ресурсов. Процессор и оперативная память не перегружены. Кроме того, Node.js обладает высокой масштабируемостью, что абсолютно необходимо для большинства современных компаний.

3. Избегаем подводных камней

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

3.1. Безопасная аутентификация

Существует множество инструментов для аутентификации в Node.js: токены, JWT, Auth0 и т. д. Каждый из них имеет свои преимущества и недостатки. Для начала посмотрим на них с точки зрения IoT.

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

Однако,
аппаратное обеспечение (сканеры, датчики,
хабы
и другие штуки IoT) должно хранить этот
токен
или
данные логина в прошивке.
Это означает, что злоумышленники могут
украсть токен,
если у них есть физический доступ к
аппаратным средствам. То же самое
касается JWT и Auth0.

С другой стороны, вы можете использовать любые инструменты для аутентификации на стороне сервера и интегрировать такой инструмент в платформу Node.js. Есть много npm-пакетов, которые позволяют сделать это вручную: Auth0, Passport и JWT. Есть также пакеты для интеграции с облачными IoT-сервисами: @azure-iot/authentication, aws-iot-device-sdk и т. д.

3.2. Безопасные HTTP запросы

Обратите внимание на HTTP-запросы с IoT-устройств. Вы должны проверить, получаете ли вы запрос от соответствующего IoT-устройства.

Используйте HTTPS для передачи данных между IoT-устройствами. Оборудование – не браузер, решить вопрос с HTTPS нужно самостоятельно. Для серверной части вы можете сделать это вручную или использовать хостинг с настройкой HTTPS и сертификатами.

В Node.js это довольно легко реализовать:

            const express = require('express');
const https = require('https');
const http = require('http');
const fs = require('fs');
const options = {
  key: fs.readFileSync('path/to/your/key.pem'),
  cert: fs.readFileSync(path/to/your/certificate.cert')
};
const app = express();
http.createServer(app).listen(80);
https.createServer(options, app).listen(443);
        

HTTPS использует протоколы SSL или TLS для шифрования данных. Чтобы убедиться, что вы получили запрос от нужного сервера или клиента, используйте дополнительное шифрование данных. Например, вот так можно использовать подпись:

            const fetch = require('node-fetch');
const verifier = crypto.createVerify('RSA-SHA1')
const SIGNATURE_FORMAT = 'base64';
//check if it trusted url for your certificate
const trustedUrl = ‘https://trustedUrl/’
const isTrustedUrl = trustedUrl.match(url);
If (isTrustedUrl) {
verifier.update(req.body, 'utf8')
	fetch(isTrustedUrl)
    .then(certificate => {
	// check signature
const isValidSignature = verifier.verify(certificate, reg.header.signature, SIGNATURE_FORMAT);
   })
    .catch(err => console.log(err));
}
        

Далее:

  • Проверьте доверенный URL вашего сертификата.
  • Подпишите тело запроса открытым ключом из сертификата.
  • Сравните подпись из тела запроса с подписью из заголовка.

Чрезвычайно важно знать, что вы получаете запросы с соответствующих устройств, и не сталкиваетесь с атакой где-то посередине.

4. Пара примеров примнения Node.js в IoT на практике

4.1. Asama – трекинг перемещений сотрудников компании


Asama — это система микролокации, использующая смарт-часы и Bluetooth-маячки для отслеживания передвижения и другой активности сотрудников компании. Смарт-часы определяют местоположение сотрудника и анализируют, носит ли его нужный человек, спит ли сотрудник или работает. Данные передаются в мобильное приложение, которое устанавливается и настраивается на телефоне работодателя. Приложение работает на Node.js.



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


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

PREE – поиск ваших вещей

PREE – система Bluetooth-маячков
и мобильное приложение,
помогающее людям перестать терять
свои вещи. Это помощник
для тех, кто часто забывает телефон,
сумку, ключи, бумажник или любые другие
ценные аксессуары.


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

Эта система IoT построена на Node.js, Express и Mongo на бэкенде и Ionic с Cordova на фронтенде.

***

Если статья вас убедила в выборе платформы для серверной части IoT, Библиотека программиста подготовила еще несколько популярных статей по Node.js:

А по Интернету вещей у нас даже есть отдельный тег IoT.

17
Фев
2020

Периодически не получаю параметр в функцию JQuery

Есть не большой участок кода (такая себе навигация с кнопками туда-сюда) с помощью которого я передаю значение id елемента в JQuery функцию.
Вот верстка:

<div class=”disF pad10 jsSBa”>
<span id=”_prev” class=”button-m color-…

15
Фев
2020

Взаимодействия бэкенда и фронтенда

Подскажите плз в общих чертах как взаимодействует фронт с бэком на примере какого нибудь динамического веб сайта, где есть фронт на JS и бэк на Java Spring. Должен ли фронт и бэк (REST API) запускаьться на разных портах/серверах? И потом и…

14
Фев
2020

Как выключить input type=radio?

При нажатии на input type=radio он включается, но при повторном нажатии на тот же input ничего не происходит, можно ли как то сделать, чтобы при повторном нажатии он отключался? В первую очередь желательно, если бы это можно было сделать л…

13
Фев
2020

Зачем наследоваться от RegExp?

Встречал в статьях о регулярках в JavaScript, упоминания о возможности наследовать свои классы от класса RegExp, т.е. делать что-то в духе:

class MyRegExp extends RegExp {};

Подскажите, пожалуйста, что это даёт в практическом смысле, где…

13
Фев
2020

«Каждый охотник желает знать»: теория цвета для веба и приложений

Рассказываем, как правильно подбирать и комбинировать цвета. Цветовой круг, модель HSL, цветовые схемы и психология, советы и правила. Показываем на примерах, как применять в CSS.