🤯 React를 사용하여 첫 번째 Neuro 애플리케이션 구축

오늘날 대부분의 응용 프로그램은 사용자의 의도에 따라 상태를 바꾼다.더 구체적으로 말하면 손의 동작은 클릭, 가볍게 두드리기, 누르기 등으로 바뀐다. 그러나 모든 의도는 우리의 뇌에서 시작된다.
오늘날, 우리는 서로 다른 유형의 응용 프로그램을 개발할 것이다.우리는 당신의 인지 상태에 따라 상태를 바꾸는 응용 프로그램을 개발할 것입니다.
내 말 다 들어.
만약 우리의 응용 프로그램이 당신의 평온도에 따라 WebGL 해양의 운동을 바꾸면 어떻게 될까요?당신의 감각에 의해 구동되는'시각 명상'체험.

View App

첫 번째 단계는 이런 데이터를 측정하고 접근하는 것이다.이를 위해 우리는 개념 이어폰을 사용할 것이다.

트위터 개념 도입

입문

Create React 앱(CRA)으로 먼저 어플리케이션을 안내합니다.VS 코드에서 항목을 열고 로컬에서 프로그램을 실행합니다.

npx create-react-app mind-controlled-ocean

code mind-controlled-ocean

npm start

만약 모든 것이 순조롭다면, 너는 반드시 이런 상황을 보아야 한다.
React 응용 프로그램 기본 보기 만들기

🔑 인증

우리는 프라이버시를 믿는다.이것이 바로 개념이 처음으로 신분 검증 기능을 갖춘 뇌컴퓨터인 이유다.auth를 응용 프로그램에 추가하는 것은 매우 간단합니다.이를 위해서는 인증 상태를 동기화하는 로그인 폼과 부작용 3개가 필요합니다.
대뇌 컴퓨터에 연결해야 할 것은 단지 하나Neurosity account와 장치 ID입니다. 로그인 폼을 위한 새 구성 요소를 만드는 것부터 시작하겠습니다. 이 구성 요소는 이 정보를 수집합니다.

// 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 (
    <form className="card login-form" onSubmit={onSubmit}>
      <h3 className="card-heading">Login</h3>
      {!!error ? <h4 className="card-error">{error}</h4> : null}
      <div className="row">
        <label>Notion Device ID</label>
        <input
          type="text"
          value={deviceId}
          disabled={loading}
          onChange={e => setDeviceId(e.target.value)}
        />
      </div>
      <div className="row">
        <label>Email</label>
        <input
          type="email"
          value={email}
          disabled={loading}
          onChange={e => setEmail(e.target.value)}
        />
      </div>
      <div className="row">
        <label>Password</label>
        <input
          type="password"
          value={password}
          disabled={loading}
          onChange={e => setPassword(e.target.value)}
        />
      </div>
      <div className="row">
        <button type="submit" className="card-btn" disabled={loading}>
          {loading ? "Logging in..." : "Login"}
        </button>
      </div>
    </form>
  );
}

🖍 Add styles the form - here's the CSS I used.

이 구성 요소는 deviceId, email 및 password 상태를 유지합니다.또한 우리의 폼 구성 요소는 사용자가 로그인 단추를 눌렀을 때 이 도구를 실행할 onLogin 도구를 받아들일 것입니다.우리는 또한 폼 제출 과정에서 loading 아이템과 오류가 발생했을 때 표시되는 error 메시지 아이템을 받아들일 것입니다.
현재 로그인 구성 요소를 만들었습니다. 로그인 페이지를 추가하면 새 구성 요소를 사용할 것입니다.

// 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 (
    <LoginForm
      onLogin={onLogin}
      loading={isLoggingIn}
      error={error}
    />
  );
}

로그인 양식 구성 요소
이 페이지의 목표는 로그인 폼을 표시하고 setError 기능을 통해 기본 폼 검증을 추가하고 로그인 기능을 실행하는 것입니다.후자에 대해 부작용을 추가합니다. 부작용은 email, password, 페이지를 받은 도구와 동기화됩니다.

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]);

개념 API로 설정된 인증 사용자 세션을 저장하는 객체로 간주할 수 있습니다.따라서 우리는 인증 세션이 없는 상황에서만 user 함수를 호출합니다. 우리는 상태에 개념적인 실례가 있고 사용자가 전자메일과 비밀번호를 제출했습니다.
곧 우리가 어떻게 아이템을 얻을 수 있는지 알게 될 것이다: login().그러나 우리가 이 일을 하기 전에 우리 notion, user, setUser, setDeviceId 로 돌아가 그것을 모두 함께 두기 시작하자.

⚙️ 애플리케이션 상태

이 프로그램의 단순성을 유지하기 위해서, 우리는 React의 App.js 갈고리, Reach 공유기, react-use 👍 를 사용하여 당신에게 가져다 줄 로컬 저장 갈고리만 사용할 것입니다.이것은 우리의 일반적인 응용 프로그램 상태 정책은 전역 상태를 응용 프로그램 구성 요소 수준으로 유지하고 필요한 도구를 하위 구성 요소에 전달하는 것을 포함할 것이다.

useState

우리는 하나의 노선에서 시작할 것이지만, 우리가 계속 응용 프로그램을 구축함에 따라, 우리는 두 개의 노선을 추가할 것이다.

// 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 (
    <Router>
      <Login
        path="/"
        notion={notion}
        user={user}
        setUser={setUser}
        setDeviceId={setDeviceId}
      />
    </Router>
  );
}

🏆 I found the Reach Router by Ryan Florence (and friends) to be the perfect balance between simplicity and predictability. Their documentation is extremely clear and allowed me to implement basic routing within minutes.

로컬 저장소에 npm install @reach/router react-use 를 저장하기로 결정한 이유를 알고 싶다면, 사용자가 로그인하기 전과 후에 접근해야 하기 때문입니다.그것은 여러 번 들어갈 필요가 없을 정도로 더 좋은 사용자 체험을 제공한다.

🧠 개념

이제 우리는 API를 설치하고 가져오기deviceId를 통해 응용 프로그램과 개념을 통합할 수 있는 기본적인 상태 관리를 갖추었다.

App.js

🤯 The Notion API enables full communication between the device and the app. We'll use it to get real-time feedback based on the user's cognitive state. For this app, we'll work specifically with the calm API.

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

개념 장치에 연결하는 것은 매우 간단하다.우리는 새로운 개념을 실례화하고 장치 ID를 전달합니다. 부작용을 추가할 수 있습니다. npm install @neurosity/notion 과 동기화하여 실례를 응용 프로그램 구성 요소 상태로 설정할 수 있습니다.
📖 docs.neurosity.co에서 전체 개념 문서를 찾을 수 있습니다.

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

우리가 동기화하고자 하는 또 다른 상태는 deviceId 상태이다.
다음 예시에서 우리는 user 실례의 값과 동기화하는 부작용을 추가할 것이다.만약 notion 이 설정되지 않았다면, notion 실례를 만들기 전에, 우리는calm 이벤트 구독을 건너뛸 것입니다.

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

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

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

만약 응용 프로그램에 활성 사용자 세션이 있다면, 이 세션은 개념 검증에 의해 지속됩니다. 우리는 현재 로그인한 사용자를 얻고 이를 응용 프로그램 구성 요소의 상태로 설정할 것입니다.notion 방법은 관찰할 수 있는 사용자 인증 이벤트를 되돌려줍니다.주의해야 할 것은 브라우저에서 개념 API를 사용할 때 세션은 로컬 저장소를 통해 지속된다는 것이다.따라서 응용 프로그램을 닫거나 페이지를 다시 로드하면 세션이 지속되고 onAuthStateChanged 이 아닌 사용자 세션으로 돌아갑니다.이것이 바로 우리가 원하는 것이다.
세션이 감지되지 않으면 로그인 페이지로 이동할 수 있습니다.그렇지 않으면 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;
}

로그아웃 페이지는 React 구성 요소일 뿐 DOM 요소는 없습니다.우리가 필요로 하는 유일한 논리는 부작용이다. 만약 null 실례가 존재한다면, 그것은 user 방법을 호출할 것이다.마지막으로, 사용자가 로그아웃한 후에 초기 경로로 다시 지정합니다.
이 구성 요소는 현재 notion.logout() 에서 라우팅으로 추가할 수 있습니다.

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

return (
  <Router>
    {/* ... */}
    <Logout path="/logout" notion={notion} resetState={() => {
      setNotion(null);
      setUser(null);
      setDeviceId("");
    }} />
  </Router>
);

이제 검증이 끝났습니다. 우리의 인지 상태에 따라 응용 프로그램 논리를 추가합시다!

🌊 WebGL 해양

David의 WebGL ocean을 보았을 때, 나는 그것을 사랑하게 되었다.그래서 이 개념으로 날씨가 파도를 움직이는 데 영향을 주는 것은 흥미로운 실험과 같다.

💡 Fun fact: This ocean wave simulation was created in 2013 by David Li with JavaScript and WebGL. It has been featured as part of Google Experiments. I was happy to see it was open-sourced under the MIT license.

다음 부분에서 우리의 생각은 새 구성 요소를 만드는 것입니다. 이 구성 요소는 WebGL ocean을 사용할 것입니다.따라서 Ocean notion 이라는 디렉터리를 만들고 다음 파일을 추가합니다.

simulation.js

weather.js

해양.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 <canvas className="simulation" ref={ref}></canvas>;
}

만약 모든 것이 순조롭다면, 우리는 반드시 이 점을 보아야 한다.
파도 시뮬레이션
여기서 일어난 일을 자세히 소개하겠습니다.

1️⃣ React 구성 요소는 WebGL 3D 장면의 캔버스 요소

를 반환합니다.

2️⃣ ReactApp.js를 사용하여 canvas HTML 요소

에 액세스합니다.

3️⃣ 변경 사항을 인용할 때, 우리는 새로운 ./src/components/Ocean 을 실례화합니다.useRef류는 바람, 기복도, 크기 등 렌더링과 날씨 속성을 제어한다.

4️⃣ 우리는 Simulator (request Animation Frame) 갈고리를 사용하여 모든 애니메이션 프레임에서 실행되는 순환을 만듭니다.

이때 우리의 파도는 정적 날씨치에 따라 기복도, 바람과 크기로 이동한다.그렇다면 우리는 어떻게 Simulator분수에 따라 이런 날씨 설정을 비추나요?
이를 위해 저는 useRaf에서 평온한 점수를 상응하는 날씨 설정인 기복도, 바람과 크기에 비추는 실용 함수를 만들었습니다.그리고 우리는 매번 calm 점수가 변할 때마다 동기화하는 부작용을 만들 수 있다.

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]);

인지 상태

이것은 재미있는 부분이다.이것은 우리가 대뇌 데이터를 방문하여 응용 프로그램 상태에 비추는 곳이다.
구독weather.js을 통해 우리는 약 1초에 새로운 calm 점수를 얻는다.그러면 notion.calm() 구성 요소를 추가하고 calm 도구로 추가하며 <Ocean calm={calm} /> 및 calm 실례와 동기화된 부작용을 만듭니다.만약 이 두 가지 상태가 모두 존재한다면, 우리는 안심하고calm를 받아들일 수 있다.

🧘🏿‍♀️ The calm score is derived from your passive cognitive state. This metric based on the alpha wave. The calm score ranges from 0.0 to 1.0. The higher the score, the higher the probability a calm feeling is detected. Getting a calm score over 0.3 is significant. Things that can help increase the calm score include closing your eyes, keeping still, breathing deeply, or meditating.

// 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 (
    <Ocean calm={calm} />
  );
}

💡 All notion metrics, including notion.calm() return an RxJS subscription that we can use to safely unsubscribe when the component unmounts.

마지막으로 잔잔한 페이지를 notion에 추가합니다.

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

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

return (
  <Router>
    {/* ... */}
    <Calm path="/calm" notion={notion} user={user} />
  </Router>
);

이로써 Neuro React 응용 프로그램이 완료되었습니다.

View full code

신경증 / 개념 해양

🌊 뇌 컴퓨터를 사용하여 WebGL 해양의 운동을 제어하다

나는 응용 프로그램 체험에 대해 흥분을 느꼈다. 이런 체험들은 우리가 한 사람으로서의 영향을 받았다.모든 뇌는 다르지만, 우리는 끊임없이 응용 프로그램을 개발하여 모든 사용자에게 같은 체험을 제공한다.만약 응용 프로그램이 당신을 위해 맞춤형 제작을 한다면?
만약 응용 프로그램이 당신이 스트레스 속에서 긴장을 푸는 것을 도울 수 있다면?
만약 당신의 뇌파로 응용 프로그램을 검증할 수 있다면?
만약 비디오 게임이 당신의 느낌에 따라 그들의 서술을 바꿀 수 있다면?
만약... 어떡하지...