Веб-панели есть повсюду. В последнее время кажется, что каждый новый продукт SaaS, который выходит на рынок, поставляется с удобной панелью управления. Будь то статистика сервера или показатели продаж, велика вероятность, что вы недавно использовали одну из этих панелей мониторинга. Стили, цветовые схемы и общие темы различаются на многих современных панелях мониторинга, но общий макет в целом остается одинаковым. Разделение панелей, своего рода панель навигации, область уведомлений и т. Д. Итак, почему именно все эти разные продукты используют примерно одну и ту же идею панели инструментов?

Ответ прост: последовательность и простота использования.

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

В этой статье мы рассмотрим, как создать быструю и простую веб-панель управления с помощью React и Material-UI. Существует тонна различных фреймворков и библиотек, которые вы могли бы использовать вместо них, но я нашел эту комбинацию простой и довольно простой в использовании. Если вы никогда раньше не использовали ни один из них, не волнуйтесь! Мы быстро и легко проведем вас с нуля до героя. Когда мы закончим, у вас будет последовательный, повторяемый способ создания прототипов новых приложений панели инструментов.

Настройка React

В этом проекте React мы собираемся использовать create-react-app вместо того, чтобы создавать собственное приложение с нуля. Используя это приложение create-react-app, вы сможете абстрагироваться от некоторых сложных механизмов React и сразу же сосредоточиться на написании кода приложения. Хотя этот метод быстрый и простой, если вы планируете создать готовое к работе приложение, я настоятельно рекомендую потратить некоторое время на создание приложения React с нуля и изучить основы таких вещей, как Webpack.

Если вы еще этого не сделали, убедитесь, что на вашем компьютере установлены Node.js и npm. У Romil Jain есть фантастическое руководство, если вы застряли: Лучший способ установить Node.js, npm и yarn на Mac OSX.

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

npx create-react-app dashboard
cd dashboard
npm start

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

Это почти все, что нужно, чтобы начать новый create-react-app проект. Как видите, через несколько минут вы будете готовы приступить к написанию кода панели инструментов. В следующем разделе мы настроим фактический макет панели инструментов и заменим эту страницу React по умолчанию.

Настройка Material-UI

Существует множество различных вариантов пользовательского интерфейса для React. Многие из них существуют в виде целых модулей, которые обеспечивают множество функций в React, в то время как другие ориентированы исключительно на стиль. В этом проекте мы рассмотрим первый тип. Material-UI - это набор модулей для разработки простых и элегантных пользовательских интерфейсов с помощью React. Макет и стиль соответствуют принципам Материального дизайна, которые представляют собой набор руководящих принципов, первоначально разработанных Google.



Material-UI: популярный фреймворк React UI
Компоненты React для более быстрой и простой веб-разработки. Создайте свою собственную систему дизайна или начните с Material Design. material-ui.com



Если ваше приложение все еще работает, закройте его на мгновение, пока мы добавляем наши новые модули. Убедитесь, что вы находитесь в только что созданном dashboard каталоге приложения, и выполните следующую команду, чтобы установить Material-UI и некоторые зависимости:

npm install @material-ui/core
npm install @material-ui/icons
npm install [email protected]
npm install fontsource-roboto

Чтобы использовать пакет fontsource-roboto, нам нужно его импортировать. Отредактируйте файл src/index.js и добавьте следующий оператор под последней import строкой:

import 'fontsource-roboto';

Теперь, когда у нас установлены все модули, нам нужно добавить компоненты нашей панели мониторинга. Перейдите в Material-UI GitHub и клонируйте этот репозиторий в отдельную папку (вне нового каталога dashboard):

cd ..
git clone https://github.com/mui-org/material-ui.git

Теперь скопируем .js файлы компонентов в наш dashboard каталог приложения (файлы TypeScript .tsx пока нам не понадобятся):

cp -r material-ui/docs/src/pages/getting-started/templates/dashboard/*.js dashboard/src/

Наконец, давайте отредактируем наше приложение, чтобы использовать новые компоненты. Вернитесь в каталог приложения dashboard и откройте src/App.js. В верхней части файла после последнего import оператора добавьте еще import, чтобы вставить новый компонент Dashboard:

import Dashboard from './Dashboard';

Затем удалите все, что находится внутри <div className="App">, и замените его следующим:

<Dashboard />

Ваш App.js файл теперь должен выглядеть примерно так:

import './App.css';
import Dashboard from './Dashboard';
function App() {
  return (
    <div className="App">
      <Dashboard />
    </div>
  );
}
export default App;

Наконец, нам нужно сделать одну небольшую настройку стиля, чтобы все выглядело правильно. Отредактируйте файл src/Dashboard.js и измените следующую строку:

theme.palette.mode === 'light'

К этому:

theme.palette.type === 'light'

Большой! Теперь у нас есть все необходимое для запуска нашего нового приложения для панели инструментов. Сохраните изменения и загрузите приложение:

npm start

Готовый продукт

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

Это приложение для приборной панели служит хорошей отправной точкой для создания собственного. Я обнаружил, что намного проще создавать прототипы новых информационных панелей, когда не нужно изобретать велосипед и иметь доступ к отличным примерам. Используя этот функциональный пример, вы можете увидеть, как реализовать Material-UI в React, а также как организовать панель инструментов в целом.

Спасибо за внимание! Надеюсь, вам понравилось узнавать об использовании React и Material-UI вместе для создания быстрых и простых панелей мониторинга. Не забудьте заглянуть в Документацию по Material-UI, чтобы узнать о других замечательных функциях и примерах.