Как создать домашнюю панель управления в React, Parcel и Alexa

Я решил воспользоваться преимуществами встроенной Alexa и объединить их с некоторым базовым пониманием React в персонализированной домашней панели инструментов.

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

В результате получилось довольно простое приложение React, работающее в браузере планшета Amazon Fire. Код которого доступен на Github здесь.

Предварительные условия:

Базовое понимание React
Узел установлен

Когда начать

Во-первых, вам нужно создать скелет проекта React.
По сути, это три файла. Два из них я положил в папку src.
src/index.html src/index.js & package.json

src / index.html

В body вашего src/index.html файла поместите следующее.

<div id="root"></div>  
<script src="index.js"></script>

Это будет означать, что при выполнении файла index.js он поместит контейнер React и все перечисленные вами /widgets в #root div.

`src/index.js`

Затем вам нужно будет добавить файл index.js. Это «движок» вашего приложения. Здесь требуется фундаментальное понимание React.

Содержимое вашего src/index.js файла следующее:

import * as React from "react";
import { render } from "react-dom";
const App = () => (
  <>
   My Home Dashboard
  </>
);
render(<App />, document.getElementById("root"));

Чтобы просмотреть эту строку за строкой:

import * as React from "react";
import { render } from "react-dom";

Это втягивает react библиотеку & react-dom, чтобы ваше приложение render(<App/>, document.getElementById("root"));

Следующая ключевая часть:

const App = () => (
  <>
   My Home Dashboard
  </>
);

На этом этапе все, что добавлено между двумя <> & </>, будет отображаться в браузере после выполнения npm start

package.json

Вот где происходит волшебство. Здесь задействуются React и Parcel и размещается узел scripts:

{
  "name": "dhome",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "parcel ./src/index.html"
  }
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "parcel-bundler": "^ 1.12.3",
    "react": "^ 16.9.0",
    "react-dom": "^ 16.9.0"
  }
  "devDependencies": {
    "parcel-bundler": "^ 1.12.3"
  }
}

Поместив это в root вашего каталога, выполните npm install & npm start. Это загрузит и установит parcel-bundler, react & react-dom и запустит parcel сценарий запуска через npm start, который создаст локальный сервер разработки. Скомпилируйте свой src/index.js и сделайте свой /src/index.html доступным через localhost:1234

Создавайте виджеты

Я решил использовать систему «виджетов» на своей панели инструментов. Нет причин, по которым вы не могли бы просто поместить их прямо в свой index.js файл, но для расширения и обеспечения возможности переключения между различными показами в будущем.

Все мои виджеты хранятся в /src/widgets. Первым созданным мной виджетом был виджет обратного отсчета. В нашем доме обычно происходит то, что нам нравится. Сейчас идет обратный отсчет до ежегодной рождественской вечеринки, которую мы проводим!

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

На самом деле это выглядит так. Сначала создайте /src/widgets/countdown/index.js

import React from "react";
export class CountdownWidget extends React.Component {
    render() {
        return (
             <div className="widget countdown">
                 <div className="heading">Christmas Party</div>
                 <div className="count">100</div>
                 <div className="meta">Days</div>
             </div>
        );
    }
}

Теперь нам нужно расширить это, чтобы создать «настоящий» обратный отсчет, а не только 100.

Для этого вам нужно добавить этот код над функцией render().

constructor(props) {
    super(props);
    const then = new Date(2019, 12, 15);
    const today = new Date();
    const count = Math.abs(Math.round((today - then) / (1000 * 60 * 60 * 24)));
this.state = {
        count: count
    };
}
componentDidMount() {
    setInterval(() => {
        const then = new Date(2019, 12, 15);
        const today = new Date();
        const count = Math.abs(Math.round((today - then) / (1000 * 60 * 60 * 24)));
        
        this.setState({
            count: count
        });
    }, 3600000);
}
render() {
...

Ключевые моменты, на которые следует обратить внимание в этом блоке кода, следующие:

then Дата, до которой вы ведете обратный отсчет
today Сегодняшнее свидание
this.state По сути, это формирует «форму» состояния компонента, которая позволяет нам изменять его и запрашивать позже в коде.
this.setState Это обновляет состояние компонента с помощью новой переменной.

Я решил использовать для этого setInterval, хотя в этом нет необходимости, это просто означает, что каждые 24 часа переменная count должна обновляться без необходимости обновлять всю панель управления.

Теперь просто обновите вашу render функцию:

<div className="count">{this.state.count}</div>

Добавьте обратный отсчет на свою панель управления

Чтобы добавить CountdownWidget на панель управления. Откройте index.js и добавьте следующие строки:

import * as React from "react";
import { render } from "react-dom";
import { CountdownWidget } from "./widgets/countdown";

И внутри App const

const App = () => (
   <CountdownWidget />
);

Теперь вы должны увидеть в своем браузере следующее:

Добавьте немного стиля

Я лично использую для этого файлы Sass, но это полностью зависит от вас.

Для этого я создал папку /src/styles в корневом каталоге. Затем добавьте под ним различные _filename.scss. Прелесть Parcel заключается в том, что она скомпилирует .scss & .jsfiles прямо из коробки и автоматически перекомпилирует их каждый раз при сохранении. Добавляя:

if (module.hot) {
    module.hot.accept();
}

в корневой каталог index.js вы увидите, как ваш браузер обновляет эти перекомпилированные артефакты прямо из коробки!

Бит Алексы ...

Так что это немного обман. Вместо того, чтобы пытаться интегрировать Alexa API в свою панель управления, я решил использовать устройство, которое уже имеет эту встроенную функцию. Амазонка Огненная Табличка. Они поставляются с веб-браузером, который, по сути, будет указывать на вашу панель инструментов, которую вы только что создали. Теперь вы можете запустить свою панель управления, но при этом по-прежнему иметь возможность вызывать Алекса, играй в Coldplay, не касаясь панели управления.

Создавайте виджеты и получайте удовольствие!

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