처음부터 마이크로 로밍 연구 복제 구축

출신 배경

Deta에서 우리는 개인 개발자가 클라우드에서 자신의 도구를 만들 수 있는 권한을 부여받아야 한다고 생각한다.우리는 또 이 도구들을 구축하는 도구가 그 어느 때보다 접근하기 쉽다는 것을 보았다.다음은 나 자신을 구축하는 도구Yarc에 대한 설명으로 이 점을 보여주고 내 업무 흐름에서 어려운 문제를 해결한다.
Roam Research는 notes 응용 프로그램으로 자신을'인터넷 사고 도구'라고 묘사한다.Roam은 Evernote 등 도구의 경직된 계층 구조what they call 'the file cabinet approach'에서 노트를 해방시키기 위한 것입니다.Roam을 사용하면 고급 하이퍼링크 기능을 사용하여 필기를 쉽게 연결할 수 있습니다.예를 들어 주어진 모든 음표에서 상기 음표에 연결된 모든 다른 음표(역방향 링크)를 볼 수 있다.
저는 개인적으로 Roam의 양방향 링크를 좋아하지만 더 가벼운 것을 원합니다. 예를 들어 API를 통해 제가 필기한 원본 텍스트에 접근할 수 있는 기능을 추가하고 엔진 뚜껑을 열 수 있습니다.나는 많은 다른 도구의 배열을 보았는데, 그것들은 Roam에서 쌍방향 링크에 대한 자신의 이해를 제공했다Obsidian,Foam.내 클론의 이름은 Yarc(다른 로밍 클론)입니다.
Yarc에 대해 나는 이 프로젝트가 Roam팀이 하는 일과 거리가 멀다고 말하는 것이 아니다.모방은 가장 진실한 아첨 방식이다. Roam이 제공하는 기능은 Yarc가 가지고 있는 것보다 훨씬 선진적이다.

프로젝트 설계

세 가지 중요한 부분으로 구성된 간단한 어플리케이션이 필요합니다.

핵심 기능: 필기, 고유 주소 지정 및 양방향 링크 필기 표준

백엔드: 백엔드에서 메모 및 컨텐트에 대한 서비스를 제공하고 프로세스 업데이트(컨텐트, 링크 및 리버스 링크)를 지정된 메모로 전송해야 함

프런트엔드: 클라이언트/사용자 인터페이스 하나로 손쉽게 필기를 보고 업데이트할 수 있음

핵심 기능

우선, 주석 자체에 대해 나는 Markdown를 사용하기로 결정했다. 왜냐하면 이것은 표준이기 때문에 충분한 문법 기능을 가지고 내장 코드 세그먼트, 하이퍼링크, 그림 등 텍스트 문서를 지원할 수 있기 때문이다.많은 공구들이 가격 인하를 지지하는데, 그 중 일부는 내가 Yarc에서 사용한다.만약 내가 어떤 주석을 Yarc에서 옮겨야 한다면, 다른 도구를 사용할 때 중대한 충돌이 있어서는 안 된다.
내가 시뮬레이션하고 싶은 Roam의 기본적인 특성은 지시기[[]]가 촉발하는 양방향 링크 노트의 능력이다.예를 들어, 주석 A에 텍스트가 포함되어 있는 경우: bla bla [[Note B]] 주석 A를 주석 B에 링크하고 주석 B를 대칭 이동 링크 목록에 포함해야 합니다.그 역할을 발휘하려면 두 가지 일이 필요합니다.

모든 음표는 이름과 관련된 유일한 주소가 필요하다

표시를 이 주소

를 가리키는 링크로 처리하는 방법
Yarc를 구동하는 원리는 Markdown과 HTML이 HTTP 링크에 상자를 열면 사용할 수 있는 강력한 지원을 제공한다는 것을 인식하는 것이다.따라서 나는 각 주석에 유일한 HTTP 주소(예를 들어 [[name]]를 줄 수 있다. 가격 인하 주석을 HTML로 나타내기 전에 전통적인 가격 인하 링크:base_url/notes/:note_name로 바꾸어 [[note_name]] 링크를 미리 처리하고 백엔드의 모든 역방향 링크를 추적할 수 있다.
가격 인하 주석의 모든 유일한 링크 [note_name](:base_url/notes/:note_name) 를 식별하기 위해 간단한 자바스크립트 함수를 작성했습니다. 여기에는 정규 표현식이 포함되어 있습니다. 유일한 링크 [[]] 를 출력할 수 있습니다.노트를 저장할 때, 우리는 백엔드에 현재 노트를 현재 노트의 모든 유일한 링크로 추가하는 역방향 링크를 알려줄 수 있습니다.

const getUniqueLinks = rawMD => {
  const uniqueLinks = [...new Set(rawMD.match(/\[\[(.*?)\]]/g))];
  return uniqueLinks;
};

또한 태그를 HTML로 변환하기 전에 현재 링크의 배열을 사용하여 [[]] 링크에서 일반 태그 링크 [[]] 로 대체할 수 있습니다.
이 함수는 []() 표기를 사용하여 우리의 독특한 가격 인하를 진행하고 표준 가격 인하를 제시한다.

const linkSub = (rawMD, links, baseUrl) => {
  let newMD = rawMD;
  for (const each of links) {
      let replacement;
      const bareName = each.substring(2, each.length - 2);
      replacement = `[${bareName}](${baseUrl}notes/${encodeURI(bareName)})`;
      newMD = newMD.split(each).join(replacement);
  }
  return newMD;
};

이 두 함수는 Yarc의 핵심을 구성한다. 주석의 양방향 링크 집합을 식별하고 우리가 사용하는 문법을 일반 태그로 변환한다(HTML로 변환할 수 있다).다른 모든 것은 데이터베이스, 루트와 사용자 인터페이스를 연결시킨다.

백엔드: Deta+FastAPI+Jinja2

내가 사용하는 백엔드:

Deta 캐리어 계산+api 및 데이터베이스

FastAPI 웹 프레임워크로 중형 크레인

Jinja2 고객에게 서비스를 제공하기 위한 어음 템플릿 생성

데이터베이스(Deta Base)
Deta Base를 사용하여 영구 데이터를 저장합니다.데이터베이스 작업은 [[]] 파일에 위치하고 원시 어음 데이터의 읽기와 쓰기를 처리합니다.주석의 기본 데이터 모드는 키 (주석 이름의 urlsafe 버전) 에 저장되며 다음 필드가 있습니다.

    name: str
    content: str
    links: list = []
    backlinks: list = []

라우팅 및 주요 기능(Deta Micro의 FastAPI)
Deta Micros를 사용하여 FastAPI 응용 프로그램을 실행하고 고유한 URL에 호스팅합니다.응용 프로그램의 루트와 업무 논리는 FastAPI 및 note.py 을 사용하여 구축된 것이다.FastAPI는 자신을'미시적 프레임워크'라고 묘사했다. 그들의 이성적 기본과 낮은 학습 곡선 이념은 Yarc를 신속하게 구축하는 과정을 크게 추진했다.Python에 대해 잘 알고 있다면 FastAPI를 사용하여 웹 응용 프로그램을 구축하는 것은 매우 간단한 과정입니다.
Yarc 백엔드에는 다음과 같은 세 가지 주요 노선과 기능이 있습니다.

main.py : 홈 페이지로 돌아가기

GET / : 지정된 이름의 주석을 반환합니다(없는 경우 먼저 주석을 생성합니다).선택 가능한 쿼리 매개변수GET /notes/{note_name}를 수락하면 주석 정보가 JSON으로 반환됩니다.

json=true : 주석의 유효 하중을 수신하고 주어진 주석의 데이터베이스 항목과 주석이 연결된 다른 모든 주석을 업데이트합니다(리버스 링크 필드를 업데이트해야 하기 때문).

세 번째 노선은 가장 복잡한 노선으로 노트의 정확한 링크와 역방향 링크를 추적하기 때문에 저는 여기에 이 동작을 포함할 것입니다.

@app.put("/{note_name}")
async def add_note(new_note: Note):
    old_note = get_note(new_note.name) 
    old_links = old_note.links if old_note else []
    removed_links = list_diff(old_links, new_note.links)
    added_links = list_diff(new_note.links, old_links)

    for each in removed_links:
        remove_backlink(each, new_note.name)

    db_update_note(new_note)

    for each in added_links:
        add_backlink_or_create(each, new_note.name)

    return {"message": "success"}

거푸집
주석을 제공하기 위해 Jinja2 주석 데이터와 Hyperapp으로 작성된 전단 자바스크립트 코드를 사용하여 HTML 파일을 템플릿합니다.모듈로 가져오는 대신 프런트엔드 JavaScript를 템플릿에 주입하여 페이지가 로드될 때마다 API 호출을 저장했습니다.
사용된 라이브러리:

FastAPI (w/ Pydantic)

Jinja2

bleach

프런트엔드: Hyperapp

내가 사용하는 웹 응용 프로그램의 클라이언트Hyperapp.Hyperapp은 초경량(1kb, 구축 단계가 필요 없음!)상호작용 응용 프로그램의 구조를 기능적이고 성명적인 방식으로 구축한다.React(+Redux)를 사용한 경험이 있습니다. 구성 요소는 상태 관리, DOM 설명과 부작용을 결합시켜 Hyperapp이 그들의 개념(보기, 동작, 효과와 구독)을 더욱 명확하게 정의했다고 말하고 싶습니다.다른 틀과 마찬가지로 그들의 개념을 익히는 데는 약간의 학습이 필요하지만, 일단 그것들을 익히면 사용하기에 매우 즐겁다.FastAPI와 마찬가지로 유용한 애플리케이션을 신속하게 구축하고 게시할 수 있습니다.
주석과 상호 작용하기 위해 Hyperapp 응용 프로그램은 최종 사용자로서 Hyperapp 작업을 트리거하여 전환하는 두 가지 주요 모드가 있습니다.

편집 모드: 이 모드는 주석의 원래 태그를 표시하고 사용자가 주석을 작성할 수 있도록 합니다

.

보기 모드: 이 모드는 사용자가 링크를 볼 수 있도록 HTML로 주석을 표시합니다

.
편집 모드
편집 모드는 사용자가 편집 단추를 눌렀을 때 촉발되며, 이 단추는 Hyperapp에서 편집 작업을 스케줄링합니다.이 동작은 내가 사용하는 텍스트 편집기 PUT /{note_name} 를 올바른 DOM 요소에 추가하고 다른 동작 UpdateContent를 텍스트 편집기에 연결하여 텍스트 편집기의 현재 상태를 Hyperapp 상태 트리에 저장하는 효과attachCodeJar를 촉발합니다.

// Edit Action
const Edit = state => {
  const newState = {
    ...state,
    view: "EDIT"
  };
  return [newState,
    [attachCodeJar, { state: newState, UpdateContent }]
  ];
};

// attachCodeJar Effect
const attachCodeJar = (dispatch, options) => {
  requestAnimationFrame(() => {
    var container = document.getElementById("container");
    container.classList.add("markdown");

    const highlight = editor => {
        editor.textContent = editor.textContent;
        hljs.highlightBlock(editor);
    };

    jar = CodeJar(container, highlight);
    jar.updateCode(options.state.note.content);
    jar.onUpdate(code =>
      dispatch(options.UpdateContent(options.state, code))
    );

  });
};

// UpdateContent Action
const UpdateContent = (state, newContent) => {
  return {
    ...state,
    note: {
      ...state.note,
      content: newContent
    }
  };
};

보기 모드
보기 모드는save 단추를 누르면 터치합니다. 이 단추는 Hyperapp에서save 작업을 스케줄링하고 두 가지 효과를 터치합니다: attachMarkdown과 updateDatabase.

CodeJar DOM 요소에서 텍스트 편집기를 제거하고 변환 상태의 최신 주석 태그를 사용하는 HTML 출력으로 대체합니다.

attachMarkdown API 호출을 통해 최신 필기 태그, 링크 및 리버스 링크를 백엔드에 전송하여 데이터베이스에 저장합니다.

프런트엔드용 라이브러리

Showdown

updateDatabase

Hyperapp

highlightjs

결전 총결산

CodeJar 및 홈 페이지, 검색 및 CLI를 통한 notes와의 상호 작용과 같은 응용 프로그램의 다른 부분을 포함합니다.Yarc 인스턴스를 배포하려면 에 대한 설명을 제공합니다.
클라우드 도구를 신속하게 구축할 수 있는 좋은 도구가 많고 비용이 적다.Deta에서, 우리는 당신의 코드를 실행할 수 있도록 크게 놀랄 필요가 없는 인프라를 제공하려고 합니다.개인적으로 FastAPI(서버용)와 Hyperapp(클라이언트용)는 모두 경량급 개인 응용 프로그램을 구축하는 진정한 상호 보완 프레임워크라는 것을 발견했다.이 두 가지는 모두 훌륭하다. 번거로운 선택 없이 조명의 빠른 노선을 제공하여 뭔가를 얻을 수 있다.