🤯 Создание вашего первого приложения Neuro React

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

Сегодня мы собираемся построить другой тип приложения. Мы построим приложение, которое меняет Государство на основе вашего Когнитивное состояние Отказ

Выслушай меня.

Что если наше приложение изменило движение WebGL океан на основе вашего Спокойный уровень? Опыт «визуализации», которым вы чувствуете себя.

• Просмотр приложения

Первый шаг будет измерять и получать доступ к таким данным. И для этого мы будем использовать гарнитуру представления.

Начиная

Начнем с загрузки нашего приложения с созданием приложения RACT (CRA). Открываем проект в VS-коде и запустите приложение локально.

• NPX Create-racted-app
• Код-контролируемый умом-океан
• NPM Start.

Если все пойдет хорошо, вы должны увидеть что-то вроде этого:

Создать React App View по умолчанию

🔑 аутентификация

Мы верим в конфиденциальность. Вот почему понятие является первым мозговым компьютером для функции аутентификации. Добавление Auth в приложение довольно просто. Для этого нам понадобится форма входа и 3 побочные эффекты для синхронизации состояния аутентификации.

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

// src/components/LoginForm.js
import React, { useState } from "react";

export function LoginForm({ onLogin, loading, error }) {
  const [deviceId, setDeviceId] = useState("");
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");

  function onSubmit(event) {
    event.preventDefault();
    onLogin({ deviceId, email, password });
  }

  return (
    

      
Login
      {!!error ? 
{error}
 : null}
      

        Notion Device ID
         setDeviceId(e.target.value)}
        />
      
      

        Email
         setEmail(e.target.value)}
        />
      
      

        Password
         setPassword(e.target.value)}
        />
      
      

        
          {loading ? "Logging in..." : "Login"}
        
      
    
  );
}

🖍 Добавить стили Форма – Вот CSS, которые я использовал Отказ

Этот компонент проведет состояние deviceid , электронное письмо и пароль Отказ Кроме того, наша форма формы примет Онлогин опоры, который выполнит, когда пользователь нажимает на кнопку «Вход». Мы также примем Загрузка опоры, когда представляется представление формы, а Ошибка . Опоры сообщений отображаются при возникновении ошибки.

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

// src/pages/Login.js
import React, { useState, useEffect } from "react";
import { LoginForm } from "../components/LoginForm";

export function Login({ notion, user, setUser, setDeviceId }) {
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [error, setError] = useState("");
  const [isLoggingIn, setIsLoggingIn] = useState(false);

  function onLogin({ email, password, deviceId }) {
    if (email && password && deviceId) {
      setError("");
      setEmail(email);
      setPassword(password);
      setDeviceId(deviceId);
    } else {
      setError("Please fill the form");
    }
  }

  return (
    
  );
}

Компонент Form входа

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

useEffect(() => {
  if (!user && notion && email && password) {
    login();
  }

  async function login() {
    setIsLoggingIn(true);
    const auth = await notion
      .login({ email, password })
      .catch(error => {
        setError(error.message);
      });

    if (auth) {
      setUser(auth.user);
    }

    setIsLoggingIn(false);
  }
}, [email, password, notion, user, setUser, setError]);

Вы можете думать о Пользователь Как объект, который содержит сеанс пользователя AUTH AUTH, установленный API понятия. Поэтому мы называем только нашими Войти () Функция, если нет сеанса аутентирования, у нас есть экземпляр понятия в состоянии, и пользователь отправил электронное письмо и пароль.

Очень скоро вы узнаете, как мы получим реквизиты: Понятие, пользователь, setuser, setdeviceId Отказ Но прежде чем мы сделаем это, давайте вернемся к нашему App.js и начните помещать все это вместе.

⚙️ состояние приложения

Чтобы сохранить это приложение просто, мы просто будем использовать Regive Уместите Крюк, роутер rain, и локальный крюк для хранения, привлеченный вам Использование 👍 👍 Отказ Это означает, что наша общая стратегия состояния приложений будет состоять из сохранения глобального состояния на уровне компонентов приложения и передавать необходимые реквизиты его дочерним компонентам.

• NPM Установка @ Reach/Router Reaction-race

Мы начнем с одного маршрута, но мы добавим еще 2 маршрута, так как мы продолжаем строить приложение.

// src/App.js
import React, { useState, useEffect } from "react";
import { Router, navigate } from "@reach/router";
import useLocalStorage from "react-use/lib/useLocalStorage";
import { Login } from "./pages/Login";

export function App() {
  const [notion, setNotion] = useState(null);
  const [user, setUser] = useState(null);
  const [deviceId, setDeviceId] = useLocalStorage("deviceId");
  const [loading, setLoading] = useState(true);

  return (
    
      
    
  );
}

🏆 Я нашел Достичь маршрутизатора Райаном Флоренция (и друзьями) быть идеальным балансом между простотой и предсказуемостью. Их документация чрезвычайно ясна и позволила мне реализовать базовую маршруту в течение нескольких минут.

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

🧠 Понятие

Теперь, когда у нас есть базовое государственное управление на месте, давайте интегрируем наше приложение с Понятие Установив API и импортируя его в App.js Отказ

• NPM установить @neurosity/понятие

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

import { Notion } from "@neurosity/notion";

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

📖 Вы можете найти полную документацию по понятию на docs.neurosity.co Отказ

useEffect(() => {
  if (deviceId) {
    const notion = new Notion({ deviceId }); // 😲
    setNotion(notion);
  } else {
    setLoading(false);
  }
}, [deviceId]);

Другое состояние, которое мы хотим синхронизировать, это Пользователь государство.

В следующем примере мы добавим побочный эффект, который синхронизируется со значением Понятие пример. Если Понятие еще не установлен, то мы пропустим подписку на Спокойный События до Понятие экземпляр создан.

useEffect(() => {
  if (!notion) {
    return;
  }

  const subscription = notion.onAuthStateChanged().subscribe(user => {
    if (user) {
      setUser(user);
    } else {
      navigate("/");
    }
    setLoading(false);
  });

  return () => {
    subscription.unsubscribe();
  };
}, [notion]);

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

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

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

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

// src/pages/Logout.js
import { useEffect } from "react";
import { navigate } from "@reach/router";

export function Logout({ notion, resetState }) {
  useEffect(() => {
    if (notion) {
      notion.logout().then(() => {
        resetState();
        navigate("/");
      });
    }
  }, [notion, resetState]);

  return null;
}

Страница «Выход» – это просто реактивный компонент без элементов DOM. Единственная логика, которую нам нужен, это побочный эффект, который позвонит Notion.logout () Метод, если понятие экземпляр присутствует. Наконец, он перенаправляет пользователь на начальный маршрут после выхода.

Этот компонент теперь может быть добавлен как маршрут App.js Отказ

// src/App.js
// ...
import { Logout } from "./pages/Logout";
// ...

return (
  
    {/* ... */}
     {
      setNotion(null);
      setUser(null);
      setDeviceId("");
    }} />
  
);

Теперь, когда аутентификация завершена, давайте добавим логику приложения на основе нашего Когнитивное состояние Действительно

🌊 WebGL океан

Момент, когда я видел Дэвид WebGL Ocean, я влюбился в это. Поэтому, используя понятие, чтобы влиять на погоду, управляющую океанские волны, почувствовавшись забавным экспериментом.

💡 Забавный факт: это симуляция Ocean Wave было создано в 2013 году David Li с JavaScript и WebGL. Он был представлен как часть экспериментов Google. Я был рад видеть, что это было открыто по лицензии MIT.

Для этой следующей части идея состоит в том, чтобы создать новый компонент, который будет использовать WebGL Ocean. Итак, давайте создадим каталог, называемый Ocean ( ./src/components/ocean ) и добавить к нему следующие файлы.

• Simulation.js.
• Weather.js.
• Ocean.js:

// src/components/Ocean/Ocean.js
import React, { useState, useEffect, useRef } from "react";
import useRafState from "react-use/lib/useRafState";

import { Simulator, Camera } from "./simulation.js"; // by David Li
import { mapCalmToWeather } from "./weather.js";

const camera = new Camera();

export function Ocean({ calm }) {
  const ref = useRef();
  const [simulator, setSimulator] = useState();
  const [lastTime, setLastTime] = useRafState(Date.now());

  useEffect(() => {
    const { innerWidth, innerHeight } = window;
    const simulator = new Simulator(ref.current, innerWidth, innerHeight);
    setSimulator(simulator);
  }, [ref, setSimulator]);

  useEffect(() => {
    if (simulator) {
      const currentTime = Date.now();
      const deltaTime = (currentTime - lastTime) / 1000 || 0.0;
      setLastTime(currentTime);
      simulator.render(deltaTime, camera);
    }
  }, [simulator, lastTime, setLastTime]);

  return ;
}

И если все пойдет хорошо, мы должны увидеть это.

Моделирование волны Ocean

Позвольте мне сломать то, что здесь происходит.

• 1️⃣. Компонент React возвращает элемент холста для сцены 3D WebGL
• 2️⃣. Мы используем React’s УСЭРЕФ Для доступа к HTML-элементу Canvas
• 3️⃣. Мы создали новую Симулятор когда ссылочные изменения изменяется. Симулятор Класс несет ответственность за управление рендерингом, а также недвижимость погодности, например ветер , Choppiness и Размер Отказ
• 4️⃣ Мы используем UserAf (ProcessanimationFrame) крючок для создания цикла, где выполняется обратный вызов на каждой кадре анимации.

На данный момент наши океанские волны движутся на основе статических значений погоды: мелководье , ветер и Размер Отказ Итак, как мы рассмотрим эти настройки погоды на основе спокойствие счет?

Для этого я создал функцию утилиты в Weather.js Для сопоставления спокойствие Оценка к соответствующим настройкам погоды: мелководье , ветер и Размер Отказ А затем мы можем создать побочный эффект, который синхронизирует каждый раз Спокойный Оценка меняется.

useEffect(() => {
  if (simulator) {
    setWeatherBasedOnCalm(animatedCalm, 0, 0);
  }

  function setWeatherBasedOnCalm(calm) {
    const { choppiness, wind, size } = mapCalmToWeather(calm);
    simulator.setChoppiness(choppiness);
    simulator.setWind(wind, wind);
    simulator.setSize(size);
  }
}, [calm, simulator]);

Когнитивное состояние

Это веселая часть. Именно здесь мы получаем доступ к данным мозга и сопоставьте его в состояние приложения.

Подписавшись на Notion.Calm () мы получаем новый Спокойный Оценка примерно каждую секунду. Итак, давайте добавим Компонент, добавить Спокойный в качестве опоры и создать побочный эффект, который синхронизируется с экземпляром Понятие и с Пользователь Отказ Если эти два состояния присутствуют, то мы можем безопасно подписаться на Спокойный Отказ

🧘🏿♀️. Спокойная оценка получена из вашего пассивного когнитивного состояния. Эта метрика на основе Альфа-Волна Отказ Спокойные оценки варьируются от 0,0 к 1.0 . Чем выше оценка, тем выше вероятность A Спокойный Чувство обнаружено. Получение спокойной оценки над 0,3 значительно. Вещи, которые могут помочь увеличить спокойный балл, включают закрытие глаз, сохраняя все еще, дышать глубоко или медитировать.

// src/pages/Calm.js
import React, { useState, useEffect } from "react";
import { Ocean } from "../components/Ocean/Ocean";

export function Calm({ user, notion }) {
  const [calm, setCalm] = useState(0);

  useEffect(() => {
    if (!user || !notion) {
      return;
    }

    const subscription = notion.calm().subscribe(calm => {
      const calmScore = Number(calm.probability.toFixed(2));
      setCalm(calmScore);
    });

    return () => {
      subscription.unsubscribe();
    };
  }, [user, notion]);

  return (
    
  );
}

💡 Все метрики понятия, в том числе Notion.Calm () Верните подписку RXJS, которую мы можем использовать для безопасной отписания, когда компонент размонтирует.

И, наконец, мы добавляем нашу спокойную страницу в App.js Отказ

// src/App.js
// ...
import { Calm } from "./pages/Calm";
// ...

// If already authenticated, redirect user to the Calm page
useEffect(() => {
  if (user) {
    navigate("/calm");
  }
}, [user]);

return (
  
    {/* ... */}
    
  
);

И с этим наше приложение Neuro React теперь завершено.

• Просмотр полного кода

Неврастовость/понятие-океан

🌊 Используйте мозговой компьютер для управления движением WebGL океана

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

Что если приложения могут помочь вам расслабиться, когда вы подчеркиваетесь?

Что, если вы можете аутентифицировать приложение с вашими мозговыми волнами?

Что если видеоигры могут изменить свой рассказ на основе ваших чувств?

Что, если…

Оригинал: “https://dev.to/neurosity/building-your-first-neuro-app-with-react-49pj”