저희가 어떻게 Priva Note를 만들었는지.

This post has been cross-posted from the Portabella docs

방문PrivaNote (privanote.xyz) 후에 이 페이지를 우연히 발견했을 수도 있습니다.
PrivaNote는 오프라인에서 최우선으로 사용하는 엔드 투 엔드 암호화 노트 솔루션입니다.이것은 Portabella에 처음으로 구축된 응용 프로그램 중 하나이며, 자신의 응용 프로그램을 구축하고자 하는 다른 개발자들에게 참고를 제공했다.
PrivaNote는 open source입니다. 따라서 모르는 부분이 있으면 소스 코드를 확인하십시오.우리는 또한 aChrome extension와 aFirefox addon를 발표하여 당신이 가능한 한 빈틈없이 필기를 할 수 있도록 돕습니다.
그럼에도 불구하고 우리는 우리가 어떻게 이 시스템을 구축했는지 깊이 있게 이해합시다!

개술
PrivaNote는 Next.js 앱으로 TailwindCSS을 가지고 있어 예뻐 보입니다.편집기는 합리적으로 맞춤형Slate의 실례이다.현대 도구를 사용했기 때문에, 이 구성 요소들을 양호한 운행으로 설정하는 것은 매우 쉽다.
암호화 백업을 설정하지 않으면 PrivaNote는 브라우저 IndexedDB 또는 LocalStorage에 기록됩니다.Portabella 설정을 설정하고 초기화하면 읽기와 쓰기가 가능합니다.

비계 외 응용
우리의 초기화 스크립트는 이렇게 보입니다.

yarn create next-app # initially creates our project
yarn add tailwindcss@latest postcss@latest autoprefixer@latest # install tailwind dependencies
yarn add slate slate-history slate-hyperscript slate-react @udecode/slate-plugins # install our slate dependencies

우리는 slate-plugins 도서관이 제공한 예에서 많은 깨우침을 얻었다.

IndexedB에서 읽기/쓰기
프로그램을 구축한 후, 우리는 우선 프로그램이 오프라인 상태에 있는지 확인해야 한다.이것은 우리가 인터넷 연결과portabella 없이 그것을 사용할 수 있어야 한다는 것을 의미한다.이를 위해 localForage 라이브러리를 이용했습니다.IndexedDB를 사용하려고 시도합니다. 브라우저가 없으면 LocalStorage로 돌아갑니다.
우리는 본래 이 층을 스스로 작성할 수 있었지만, 의존항을 도입하여 우리가 어떤 일도 망치지 않도록 하는 것이 의미가 있다.
우리의 모든 필기를 읽으려면, 그것은 약간 이렇게 보인다.

import localForage from 'localforage';

const notesDB = localForage.createInstance({ name: 'privanote/notes' });

const keys = await notesDB.keys();
if (!keys) {
  return;
}
const fetched = await Promise.all(
  keys.map(async (key) => {
    const { updatedAt, text } = await notesDB.getItem(key);
    return { id: key, updatedAt, text: safeParseJson(text) };
  })
);

노트 작성은 간단합니다.

const id = uuidv4();
await notesDB.setItem(id, card);

귀하가 이미 요점을 알고 있기 때문에 삭제 작업을 보여 드리지 않겠습니다.

Portabella의 노트 읽기/쓰기
Portabella 통합을 설정하는 것은 좀 까다롭습니다.다음과 같은 추가 제한이 필요합니다.

로컬 데이터베이스

에 Portabella 구성 저장

로컬 데이터베이스 스토리지

로 돌아가기 전에 Portabella 구성이 있는지 확인

Portabella 통합 설정(10초 후 번거롭지 않음)을 알립니다.

관리 작업을 시작하기 전에 먼저 데이터를 읽고 쓰는 것에 대해 토론합시다.@portabella/sdk Portabella에 메모를 쓰는 것은 매우 간단합니다.

const { ProjectSDK } = require('@portabella/sdk');
const pb = new ProjectSDK(config);

const id = uuidv4();
await pb.addCard({ id, ...card })

모든 노트를 읽습니다(예: 페이지를 새로 고칠 때 다음과 같습니다).

const { cards } = await pb.fetchProject();
const fetched = Object.entries(cards)
  .filter(([_, card]) => Boolean((card as any).description))
  .map(([id, card]) => ({
    id,
    text: safeParseJson((card as any).description),
    updatedAt: card.updatedAt,
  }));

SDK는 모든 내용을 복호화하는 것을 책임지기 때문에 읽을 수 없는 데이터를 얻는 것을 걱정할 필요가 없습니다.

Portabella 자격 증명 입력 프롬프트
이러한 작업을 수행하기 전에 SDK를 초기화하고 요청을 보내기 위해 Portabella 구성을 실제로 보유하고 있는지 확인해야 합니다.
이를 위해, PrivaNote에서 10초 후에 사용자에게 그들의 통합을 설정하라고 알려 주기를 희망합니다.그 밖에 만약 그들이 이미 옳고 그름을 말했다면 우리는 다시 그들에게 힌트를 주고 싶지 않다.
우리의 ReactuseEffect 갈고리는 약간 이렇게 보인다.

useEffect(() => {
  let timeout = null;

  async function f() {
    timeout = setTimeout(async () => {
      const hasSeenConfigAfterTimeout = await configDB.getItem(
        hasSeenConfigKey
      );
      if (!hasSeenConfigAfterTimeout) {
        setDisplayWelcomeModal(true);
      }
    }, 10000);

    const config = await configDB.getItem(portabellaConfigKey);
    if (config) {
      await initialisePortabella(config);
    }

    setPortabellaLoaded(true);
  }
  f();

  return () => {
    if (timeout) {
      clearTimeout(timeout);
    }
  };
}, []);

이렇게 하면 빈틈없는 최종 사용자 체험을 실현할 수 있다.

브라우저 확장으로 패키지
퍼즐의 마지막 조각은 다음 것을 포장하는 것이다.js 응용 프로그램은 브라우저 확장자로 사용됩니다.privanote를 수동으로 열어야 합니다.xyz는 매번 필기를 하고 싶을 때마다 좀 번거롭기 때문에 브라우저의 '새 탭' 페이지를 덮어쓰는 것이 좋습니다.CMD(또는 Ctrl) + N을 누르면 PrivaNote가 열려 심사숙고하지 않고 생각을 기억할 수 있다는 뜻이다.
다음은 우리가 이 일을 하는 데 쓰이는 각본이다.

rm -rf .next/ out/;
rm extension.zip;

yarn next build;
yarn next export;

cp manifest.json ./out;
mv ./out/_next ./out/next
cd ./out && grep -rli '_next' * | xargs -I@ sed -i '' 's/_next/next/g' @;

zip -r -FS ../my-extension.zip *;

가장 흥미로운 라인은 _next과next가 포함된 라인이다.Chrome에서는 브라우저가 다음 밑줄로 시작하는 JavaScript 파일을 가져오도록 확장할 수 없습니다.따라서 <script src="/_next/a.js" /> 표시를 추가하려고 시도해도 즉시 효력이 발생하지 않습니다. _next 를 next (또는 당신이 좋아하는 문자열) 로 바꿔야 합니다.여기에 표시된 sed 명령은 Mac OS에서 작동하지만 다른 OS를 사용하는 경우 수정이 필요할 수 있습니다.

결론
이 강좌를 읽어 주셔서 감사합니다. 우리가 말한 바와 같이 PrivaNote는Portabella에 구축된 첫 번째 응용 프로그램 중 하나이기 때문에 문서와 API를 계속 개선하고 사람들에게 유용한 내용을 발견할 것입니다.
질문이 있으면 언제든지 Twitter나 이메일[email protected]로 문의하십시오.