CloudFlare는 전 세계적으로 복제 된 키 가치 저장 레이어 인 Workers KV라는 우수한 제품을 제공합니다. 요청의 출처에 관계없이 작업자 스크립트에서 매우 낮은 대기 시간으로 각각 수백만 개의 키를 처리 할 수 있습니다. 노동자 KV는 놀랍습니다. 넉넉한 무료 계층을 포함하여 가격도 책정됩니다.
그러나 CloudFlare 제품 라인의 장기 사용자로서 한 가지가 빠졌다 는 것을 알았습니다. 나는 종종 내 응용 프로그램에 수천 또는 수십만 개의 키가 있으며 종종 모든 데이터를 쿼리하거나 정렬하거나 실제로 존재하는 것을 보는 방법을 원합니다.
최근에 나는 CloudFlare에 가입하게 된 영광을 가졌다! 더 중요한 것은“Quick Win Week”(일명 주간 해커 톤) 전에 이번 분기에 합류했습니다. 나는 일의 백 로그를 충분히 축적하지 않았기 때문에 (아직은 아니 었습니다), 저를 믿으십시오. 나는 나의 소원을 충족시킬 수있는이 기회를 포착 할 것입니다.
요점으로 돌아가서 Svelte, Redis 및 Rust를 사용하여 구축 된 크로스 플랫폼 데스크톱 응용 프로그램 인 Workers KV Gui를 어떻게 제작했는지 알려 드리겠습니다.
웹 개발자로서 이것은 친숙한 링크입니다. 나는 이것을 "간단한 부분"이라고 부르고 싶지만 모든 HTML, CSS 및 JavaScript 프레임 워크, 라이브러리 또는 패턴을 사용할 수 있다는 점을 감안할 때 마비를 선택하는 것은 쉽게 발생합니다. 당신이 좋아하는 프론트 엔드 기술 스택이 있다면, 그것은 훌륭합니다. 이 앱에서는 Svelte를 사용하기로 결정했습니다.
또한 웹 개발자로서 우리는 모든 도구를 우리에게 가지고 다니고 싶습니다. 물론 당신은 할 수 있습니다! 이 프로젝트 의이 단계는 일반적인 웹 응용 프로그램 개발주기와 다르지 않습니다 . 원사 개발 (또는 일부 변형)을 주요 명령으로 실행하고 집에서 느낄 수 있습니다. "간단한"테마를 유지하기 위해 Svelte의 공식 프레임 워크 및 응용 프로그램 구축에 툴킷 인 Sveltekit을 사용하기로 결정했습니다. 여기에는 최적화 된 빌드 시스템, 우수한 개발자 경험 (HMR! 포함), 파일 시스템 기반 라우터 및 모든 기능 자체 가 제공되는 모든 기능이 포함됩니다.
Sveltekit은 도구를 직접 처리하는 프레임 워크로서 제 응용 프로그램 과 그 요구에 대해 순전히 생각할 수 있습니다. 실제로 구성 측면에서 내가해야 할 유일한 것은 Sveltekit에게 클라이언트 에서만 실행되는 단일 페이지 응용 프로그램 (SPA)을 작성하고 싶다고 말하는 것입니다. 다시 말해, 나는 대부분의 응용 프로그램이 서버 측 렌더링의 혜택을받을 수 있기 때문에 서버를 원한다고 가정 할 때 Sveltekit 을 명시 적으로 선택 해야합니다. 이 목적을 위해 특별히 작성된 구성 사전 설정 인 @sveltejs/어댑터 정적 패키지를 첨부하는 것만 큼 간단합니다. 설치 후 전체 구성 파일이 다음과 같습니다.
<code>// svelte.config.js import preprocess from 'svelte-preprocess'; import adapter from '@sveltejs/adapter-static'; /** @type {import('@sveltejs/kit').Config} */ const config = { preprocess: preprocess(), kit: { adapter: adapter({ fallback: 'index.html' }), files: { template: 'src/index.html' } }, }; export default config;</code>index.html 변경은 개인적 선호도입니다. Sveltekit은 app.html을 기본 기본 템플릿으로 사용하지만 오래된 습관은 변경하기 어렵습니다.
단 몇 분 만에 내 툴체인은 이미 스파를 구축하고 있으며 이미 라우터가 준비되었으며 개발 서버를 사용할 수있었습니다. 또한, 내가 원하는 경우 Svelte Proprocess로 인해 TypeScript, PostCSS 및/또는 SASS 지원도 제공됩니다 (그리고 원합니다). 준비가 된!
응용 프로그램에는 두 가지 뷰가 필요합니다.
Sveltekit 세계에서 이것은 두 개의 "라우터"로 해석되는데, Sveltekit은 이러한 경로가 SRC/Routes/Index.svelte (홈 페이지) 및 SRC/Routes/Viewer.svelte (데이터 뷰어 페이지)로 존재해야한다고 규정합니다. 실제 웹 응용 프로그램에서 두 번째 경로는 /뷰어 URL에 매핑됩니다. 아직 그렇지는 않지만 데스크톱 응용 프로그램에 내비게이션 바가 없다는 것을 알고 있습니다. 즉, URL이 보이지 않을 것임을 의미합니다.이 경로의 이름이 나에게 의미가있는 한이 경로의 이름은 중요하지 않다는 것을 의미합니다.
이 파일의 내용은 적어도이 기사에서는 대부분 관련이 없습니다. 궁금한 사람들에게는 전체 프로젝트가 오픈 소스이며 Svelte 또는 Sveltekit 예제를 찾고 있다면 확인을 환영합니다. 레코드가 깨질 위험이있는 것은 여기서 요점은 정상적인 웹 응용 프로그램을 구축한다는 것입니다.
이 시점에서, 나는 단지 내 견해를 디자인하고 유효한 모습을 얻을 때까지 가짜, 하드 코딩 된 데이터를 던지는 것입니다. 나는 모든 것이 아름답게 보일 때까지 약 2 일 동안 여기에 머물 렀고 모든 상호 작용 (버튼 클릭, 형태 제출 등)이 완성되었습니다. 나는 그것을 "실행 가능한"응용 프로그램 또는 모델이라고 부릅니다.
현재 완전히 기능적인 스파가 이미 존재합니다. 웹 브라우저에서 실행되며 웹 브라우저에서 개발되었습니다. 아마도 직관과는 반대로, 이것은 데스크탑 응용 프로그램을위한 완벽한 후보입니다! 하지만 어떻게해야합니까?
당신은 전자에 대해 들었을 것입니다. 웹 기술을 사용하여 크로스 플랫폼 데스크탑 응용 프로그램을 구축하는 가장 유명한 도구입니다. Visual Studio Code, WhatsApp, Atom 및 Slack과 같은 매우 인기 있고 성공적인 응용 프로그램이 많이 있습니다. 자체 크롬 설치 및 자체 Node.js 런타임으로 웹 리소스를 번들로 연결하여 작동합니다. 다시 말해, 전자 기반 애플리케이션을 설치하면 추가 크롬 브라우저와 전체 프로그래밍 언어 세트 (node.js)가 제공됩니다. 이들은 응용 프로그램 내용에 포함되어 있으며 응용 프로그램의 종속성이므로 피할 수 없으므로 어디서나 일관되게 실행되도록합니다. 당신이 상상할 수 있듯이,이 접근법에 대한 일부 트레이드 오프가 있습니다 - 응용 프로그램은 상당히 크고 (즉, 100MB 이상) 많은 시스템 리소스를 사용하여 실행합니다. 앱을 사용하기 위해 배경은 새 탭을 여는 것과 정확히 다르지 않은 새/별도의 크롬을 실행합니다.
다행히도 몇 가지 대안이 있습니다 - 나는 Svelte Nodegui와 Tauri를 평가했습니다. 두 옵션 모두 Chrome 사본을 포함시키지 않고 운영 체제가 제공하는 기본 렌더러 에 의존하여 상당한 응용 프로그램 크기 및 활용 절약을 제공합니다. Nodegui는 기본보기로 컴파일 된 다른 데스크탑/GUI 응용 프로그램 프레임 워크 인 QT에 의존하여이를 수행합니다. 그러나이를 위해 NodeGui는 구성 요소가 QT 구성 요소로 변환 할 수 있도록 응용 프로그램 코드를 조정해야합니다. 나는 이것이 확실히 효과가 있다고 생각하지만, 나는 내 파일을 조정 하지 않고 내가 아는 것을 정확하게 사용하고 싶기 때문에이 솔루션에 관심이 없다. 대조적으로, Tauri는 운영 체제의 기본 WebViewer (예 : MacOS의 Cocoa/WebKit, Linux의 GTK-WebKit2 및 Windows의 Edge의 WebKit)를 마무리하여 저축을 달성합니다. WebViewers는 실제로 브라우저이며 Tauri는 이미 시스템에 존재하기 때문에 사용하므로 응용 프로그램이 순수한 웹 개발 제품을 유지할 수 있음을 의미합니다.
이러한 절약으로 가장 작은 Tauri 앱은 4MB 미만이며 평균 앱 가중치는 20MB 미만입니다. 내 테스트에서 가장 작은 Nodegui 응용 프로그램의 무게는 약 16MB입니다. 가장 작은 전자 적용은 120MB에 쉽게 도달 할 수 있습니다.
말할 것도없이, 나는 타우리를 선택했다. Tauri Integration Guide에 이어 @tauri-Apps/CLI 패키지를 DevDependencies로 추가하고 프로젝트를 초기화했습니다.
<code>yarn add --dev @tauri-apps/cli yarn tauri init</code>
이로 인해 SRC 디렉토리 옆에 SRC-Tauri 디렉토리가 생성됩니다 (Svelte 응용 프로그램이있는 곳). 이곳은 모든 Tauri 특정 파일이 위치한 곳으로 조직에 좋습니다.
이전에 Tauri 앱을 구축 한 적이 없지만 구성 문서를 살펴본 후에는 Package.ProductName 및 Windows.Title 값과 같은 항목을 제외하고는 대부분의 기본값을 유지할 수 있습니다. 실제로 내가 해야 할 유일한 변화는 빌드 구성입니다. 개발 및 출력 정보를 위해 Sveltekit과 정렬해야합니다.
<code>// src-tauri/tauri.conf.json { "package": { "version": "0.0.0", "productName": "Workers KV" }, "build": { "distDir": "../build", "devPath": "http://localhost:3000", "beforeDevCommand": "yarn svelte-kit dev", "beforeBuildCommand": "yarn svelte-kit build" }, // ... }</code>Distdir는 건축 생산 준비 자산의 위치와 관련이 있습니다. 이 값은 tauri.conf.json 파일 위치에서 구문 분석되므로 ../ prefix가 있습니다.
DevPath는 개발 중에 근접한 URL입니다. 기본적으로 Sveltekit은 포트 3000에서 개발 서버 (구성 가능)를 생성합니다. 첫 번째 단계에서 브라우저에서 LocalHost : 3000 주소에 액세스하고 있으므로 다르지 않습니다.
마지막으로 Tauri에는 자체 개발 및 빌드 명령이 있습니다. Tauri는 여러 명령을 처리하거나 스크립트를 작성하는 번거 로움을 피하기 위해 BeforedeVcommand 및 이전 건물 명령 후크를 제공하므로 Tauri 명령이 실행되기 전에 명령을 실행할 수 있습니다. 이것은 미묘하지만 강력한 편의입니다!
Sveltekit CLI는 Svelte-Kit Binary 이름을 통해 액세스 할 수 있습니다. 예를 들어, Yarn Svelte-Kit 빌드를 작성하는 것은 Yarn에게 로컬 Svelte-Kit Binary (DevDependency를 통해 설치)를 얻은 다음 Sveltekit에게 빌드 명령을 실행하도록 지시합니다.
이를 통해 루트 레벨 Package.json에는 다음 스크립트가 포함되어 있습니다.
<code>{ "private": true, "type": "module", "scripts": { "dev": "tauri dev", "build": "tauri build", "prebuild": "premove build", "preview": "svelte-kit preview", "tauri": "tauri" }, // ... "devDependencies": { "@sveltejs/adapter-static": "1.0.0-next.9", "@sveltejs/kit": "1.0.0-next.109", "@tauri-apps/api": "1.0.0-beta.1", "@tauri-apps/cli": "1.0.0-beta.2", "premove": "3.0.1", "svelte": "3.38.2", "svelte-preprocess": "4.7.3", "tslib": "2.2.0", "typescript": "4.2.4" } }</code>통합 후, 내 생산 명령은 여전히 원사 빌드이며, Tauri Build라고 불리는 데스크톱 응용 프로그램을 실제로 번들로 만들지 만 Yarn Svelte-Kit Build가 성공적으로 완료된 후에야 (이전의 BuildCommand 옵션을 통해). 내 개발 명령은 여전히 Yarn Dev이며, Tauri Dev와 Yarn Svelte-Kit Dev 명령을 병렬로 실행합니다. 개발 워크 플로우는 전적으로 Tauri 응용 프로그램 내부에 있으며 이제 LocalHost : 3000을 프록시하여 HMR 개발 서버의 이점을 얻을 수 있습니다.
중요 : Tauri는 글을 쓰는 시점에 여전히 베타 버전에 있습니다. 즉, 그것은 매우 안정적이고 잘 계획된 느낌입니다. 나는 프로젝트와 관련이 없지만 Tauri 1.0이 곧 안정적인 버전으로 갈 것 같습니다. Tauri 관리자의 답변을 포함하여 Tauri Discord가 매우 활발하고 도움이되는 것을 발견했습니다! 그들은 심지어 과정 전반에 걸쳐 내 녹 초보자 질문에 대답했습니다. :)
이 시점에서, 그것은 빠른 승리 주간의 수요일 오후 였고 나는 금요일 팀 데모 전에 그것을 끝내는 것에 대해 긴장감을 느끼기 시작했습니다. 왜? 일주일의 절반을 소비 한 이후로, 런닝 가능한 데스크탑 응용 프로그램 에서 잘 생긴 스파가 있더라도 여전히 아무것도하지 않습니다 . 나는 일주일 내내 같은 가짜 데이터를 보고 있습니다.
WebView에 액세스 할 수 있기 때문에 Fetch ()를 사용하여 인증 된 REST API가 원하는 작업자 KV 데이터를 호출하고 로컬 스터리지 또는 IndexedDB 테이블에 모두 버릴 수 있다고 생각할 수도 있습니다. 그러나 이것은 데스크탑 응용 프로그램 사용 사례에 대한 나의 생각이 아닙니다.
모든 데이터를 브라우저 내 스토리지에 저장하는 것은 완전히 가능하지만 시스템에 로컬로 저장합니다 . 즉, 팀원이 동일한 작업을 수행하려고하면 모든 사람이 자신의 컴퓨터에 모든 데이터를 얻고 저장해야합니다. 이상적으로는이 작업자 KV 응용 프로그램에는 외부 데이터베이스에 연결하고 동기화 할 수있는 옵션이 있어야합니다. 이런 식으로 팀 설정에서 작업 할 때 모든 사람이 동일한 데이터베이스 캐시에 조정하여 시간과 비용을 절약 할 수 있습니다. 앞에서 언급했듯이 수백만 개의 열쇠를 다룰 때 이것은 근로자 KV를 사용할 때 드문 일이 아닙니다.
한동안 생각한 후, 나는 key value 스토어 이기 때문에 Redis를 백엔드 스토리지로 사용하기로 결정했습니다. Redis는 이미 열쇠를 일류 시민으로 취급하고 내가 원하는 분류 및 필터링 동작을 제공하기 때문에 훌륭합니다 (즉, 직접 구현하는 대신 작업을 통과 할 수 있습니다!). 물론 Redis는 현지 또는 컨테이너로 설치하고 실행하기 쉽고 누군가가 그 경로로 이동하기로 선택하면 서비스 제공 업체로 호스팅 된 Redis가 많이 있습니다.
그러나 어떻게 연결합니까? 내 앱은 기본적으로 Svelte를 실행하는 브라우저 태그입니다. 예 -하지만 그 이상입니다.
보시다시피, Electron의 성공의 일부는 웹 애플리케이션이 모든 운영 체제에서 잘 렌더링되도록 보장하지만 Node.js 런타임도 제공하기 때문입니다. 웹 개발자는 내 클라이언트에 직접 백엔드 API를 포함시키는 것과 매우 유사합니다. 기본적으로 "... 내 컴퓨터에서 실행됩니다"문제는 모든 사용자 (무의식적으로)가 동일한 로컬 호스트 설정을 실행하고 있기 때문에 문제가 사라집니다. Node.js 계층을 통해 파일 시스템과 상호 작용하거나 여러 포트에서 서버를 실행하거나 Node_Modules를 포함하여 Redis 인스턴스와 연결되는 경우가 있습니다. 강력한 것들.
우리는 Tauri를 사용하고 있기 때문에이 초강대국을 잃지 않을 것입니다! 동일하지만 약간 다릅니다.
Node.js 런타임을 포함하는 대신 Tauri 응용 프로그램은 저수준 시스템 언어 인 Rust를 사용하여 구축됩니다. 이것이 Tauri 자체가 운영 체제와 상호 작용하는 방식이며 기본 WebViewer를 "차용"합니다. 모든 Tauri 툴킷은 (녹을 통해) 컴파일되어 작고 효율적으로 구축 된 응용 프로그램을 유지합니다. 그러나 이는 응용 프로그램 개발자 인 우리가 구축 된 응용 프로그램에 다른 상자 ( "NPM 모듈"동등한)를 포함시킬 수 있음을 의미합니다. 물론, Workers KV GUI가 Redis 인스턴스에 연결할 수있는 Redis 클라이언트 드라이버 역할을하는 이름이 잘 알려진 Redis Crate도 있습니다.
Rust에서 Cargo.toml 파일은 Package.json 파일과 유사합니다. 이것은 종속성과 메타 데이터가 정의되는 곳입니다. Tauri 설정에서 Src-Tauri/Cargo.toml에 위치하고 있습니다. 다시 Tauri와 관련된 모든 것이이 디렉토리에 있습니다. 화물은 또한 종속성 수준에서 정의 된 "기능 플래그"의 개념을 가지고 있습니다. (내가 생각할 수있는 가장 가까운 비유는 NPM을 사용하여 모듈의 내부 구조에 액세스하거나 서브 모듈이라는 이름의 내부 구조에 액세스하는 것입니다.
<code># src-tauri/Cargo.toml [dependencies] serde_json = "1.0" serde = { version = "1.0", features = ["derive"] } tauri = { version = "1.0.0-beta.1", features = ["api-all", "menu"] } redis = { version = "0.20", features = ["tokio-native-tls-comp"] }</code>위의 내용은 Redis Crate를 종속성으로 정의하고 "Tokio-Native-TLS-Comp"기능을 선택합니다.이 기능은 TLS 지원에 필요하다고 설명합니다.
좋아, 그래서 나는 마침내 필요한 모든 것을 가지고있다. 수요일이 끝나기 전에 내 벨트가 내 레 디스와 대화해야합니다. 주위를 둘러 보면 SRC-Tauri/Main.rs 파일에서 모든 중요한 일이 발생하는 것으로 나타났습니다. 나는 #[command] 매크로를 적어 놓았다. 나는 오늘의 Tauri 예제에서 전에 그것을 본 것을 알고 있으므로 샘플 파일의 여러 부분을 복사하여 어떤 버그가 나타나고 Rust 컴파일러에 따라 사라지는 법을 배웠다 .
결국, Tauri 앱은 다시 실행할 수 있었고, #[Command] 매크로가 어떻게 든 기본 함수를 포장하여 "컨텍스트"값을 받고 (사용하도록 선택한 경우) 사전 정렬 된 매개 변수 값을받을 수 있다는 것을 알게되었습니다. 또한 언어로서 Rust는 많은 유형 변환을 수행합니다. 예를 들어:
<code>use tauri::{command}; #[command] fn greet(name: String, age: u8) { println!("Hello {}, {} year-old human!", name, age); }</code>이것은 인사 명령을 생성하고 실행되면 이름과 나이의 두 매개 변수를 기대합니다 . 정의되면 이름 값은 문자열 값이고 나이는 U8 데이터 유형, 즉 정수입니다. 그러나 둘 다 누락 된 경우 Tauri는 명령 정의에 선택 사항이 될 수 있다고 명시 하지 않기 때문에 오류를 발생시킵니다.
실제로 Tauri 명령을 응용 프로그램에 연결하려면 주요 기능 내에 위치한 Tauri :: Builder 조합의 일부로 정의되어야합니다.
<code>use tauri::{command}; #[command] fn greet(name: String, age: u8) { println!("Hello {}, {} year-old human!", name, age); } fn main() { // start composing a new Builder chain tauri::Builder::default() // assign our generated "handler" to the chain .invoke_handler( // piece together application logic tauri::generate_handler![ greet, // attach the command ] ) // start/initialize the application .run( // put it all together tauri::generate_context!() ) // print<message> if error while running .expect("error while running tauri application"); }</message></code>Tauri 애플리케이션은 "인사"명령이 있음을 알고 있습니다 . 또한 WebView (이미 논의한 결과)를 제어하고 있지만, 그렇게하면 현재 끝 (WebView Content)과 Tauri API와 우리가 작성하는 다른 코드 (인사 명령)로 구성된 백엔드 사이의 브리지 역할을합니다. Tauri는 우리가 다리 사이에 메시지를 보낼 수 있도록하여 두 세계가 서로 통신 할 수 있도록합니다.
프론트 엔드는 모든 (이미 포함 된) @Tauri-Apps 패키지에서 기능을 가져 오거나 Window.tauri Global Variable (전체 클라이언트 응용 프로그램에 사용할 수 있음)에서 의존 하여이 "브리지"에 액세스 할 수 있습니다 . 구체적으로, 우리는 명령 이름과 매개 변수 세트를 수락하는 invoke 명령에 관심이 있습니다. 인수가있는 경우 키가 Rust 함수가 기대하는 매개 변수 이름과 일치하는 객체로 정의되어야합니다.
Svelte 레이어에서 이것은 녹 레이어에 정의 된 인사 명령을 호출하기 위해 다음을 수행 할 수 있음을 의미합니다.
<code>function onclick() { __TAURI__.invoke('greet', { name: 'Alice', age: 32 }); } Click Me</code>이 버튼을 클릭하면 터미널 창 (Tauri Dev 명령이 실행되는 곳)이 인쇄됩니다.
<code>Hello Alice, 32 year-old human!</code>
다시, 이것은 인쇄 명령에 의해 인쇄물 (실제로 Rust 's console.log)이 사용되기 때문에 발생합니다. 이 코드가 여전히 녹/시스템 측에서 실행 중이기 때문에 브라우저 콘솔이 아닌 터미널의 콘솔 창에 나타납니다.
Tauri Command에서 일부 콘텐츠를 클라이언트에게 보낼 수도 있으므로 인사말을 신속하게 변경해 봅시다.
<code>use tauri::{command}; #[command] fn greet(name: String, age: u8) { // implicit return, because no semicolon! format!("Hello {}, {} year-old human!", name, age) } // OR #[command] fn greet(name: String, age: u8) { // explicit `return` statement, must have semicolon return format!("Hello {}, {} year-old human!", name, age); }</code>나는 여러 번 호출하고 약간 게으른다는 사실을 깨닫고,이를 통합하기 위해 가벼운 클라이언트 어시스턴트를 추출했습니다.
<code>// @types/global.d.ts ///<reference types="@sveltejs/kit"></reference> type Dict<t> = Record<string t=""> ; declare const __TAURI__: { invoke: typeof import('@tauri-apps/api/tauri').invoke; } // src/lib/tauri.ts export function dispatch(command: string, args: Dict<string> ) { return __TAURI__.invoke(command, args); }</string></string></t></code>그런 다음 이전 greeter.svelte to :
<code>import { dispatch } from '$lib/tauri'; async function onclick() { let output = await dispatch('greet', { name: 'Alice', age: 32 }); console.log('~>', output); //=> "~> Hello Alice, 32 year-old human!" } Click Me</code>기이! 그래서 그것은 목요일이고 나는 아직도 Redis 코드를 작성하지 않았지만 적어도 응용 프로그램의 뇌의 두 반쪽을 함께 연결하는 방법을 알고 있습니다. 이제 클라이언트 코드를 빗질하고 이벤트 핸들러의 모든 토도를 교체하고 실제 콘텐츠에 연결해야합니다.
나는 여기에서 매우 응용 프로그램에 따라 다르기 때문에 여기에서 세부 사항을 생략 할 것입니다. 주로 녹 컴파일러의 이야기에 관한 것이기 때문에 나에게 타격을주기 때문입니다. 또한 세부 사항을 탐색하는 것은 프로젝트가 오픈 소스 인 이유입니다!
높은 수준에서 주어진 세부 사항으로 Redis 연결이 설정되면 /뷰어 경로에서 동기화 버튼에 액세스 할 수 있습니다. 이 버튼이 클릭되면 ( 그리고 비용 때문에) JavaScript 함수가 호출되는데,이 기능은 CloudFlare REST API에 연결하고 각 키의 "redis_set"명령을 발송하는 것을 담당합니다. 이 redis_set 명령은 Rust Layer (모두 Redis 기반 명령과 마찬가지로 Redis)에 정의되어 있으며 실제로 Key-Value 쌍을 Redis에 작성해야합니다.
Redis의 데이터를 읽는 것은 매우 유사한 프로세스입니다. 예를 들어, /뷰어가 시작될 때 모든 키를 나열하고 준비해야합니다. Svelte Terminology에서는 /뷰어 구성 요소가 설치 될 때 Tauri 명령을 예약해야합니다. 이것은 여기서 거의 그대로 발생합니다. 또한 사이드 바에서 키 이름을 클릭하면 만료 시간 (있는 경우), 메타 데이터 (있는 경우) 및 실제 값 (알려진 경우)을 포함하여 키에 대한 더 많은 "세부 사항"이 표시됩니다. 비용과 네트워크로드를 최적화하기 위해 필요에 따라 키의 가치 만 얻어야한다고 결정했습니다. 클릭하면 클릭하면 REST API와 다시 상호 작용 한 다음 Redis 클라이언트가 키를 개별적으로 업데이트 할 수 있도록 명령을 예약하는 새로 고침 버튼이 발생합니다.
나는 급히 끝내려고하지는 않지만 JavaScript와 Rust Code 사이의 성공적인 상호 작용이 보이면 모든 상호 작용이 보입니다! 내 목요일과 금요일 아침의 나머지 부분은 새로운 요청을 반복적으로 정의하는 것입니다.
저에게 - 나는 다른 많은 JavaScript 개발자들에게 그렇게 생각합니다 - 이번 주 도전은 Rust를 배우는 것입니다. 나는 당신이 전에 이것을 들었다고 믿고, 앞으로 다시들을 것입니다. 소유권 규칙, 차입 점검 및 단일 문자 구문 마커 (마커를 검색하기가 쉽지 않음)의 의미는 내가 겪은 몇 가지 장애물 일뿐입니다. 그의 도움과 친절에 대해 다시 Tauri Discord에게 감사드립니다!
이것은 또한 Tauri를 사용하는 것이 도전이 아니라는 것을 의미합니다. 그것은 큰 구호입니다. 앞으로 Tauri를 다시 사용할 계획입니다. 특히 알고 있다면 원하는 경우 WebViewer 만 사용할 수 있습니다. 녹 섹션을 파거나/또는 추가하는 것은 "추가 재료"이며 응용 프로그램이 필요한 경우에만 필요합니다.
알고 싶은 사람들에게는 언급 할 다른 장소를 찾을 수 없기 때문에 : MacOS에서는 Workers KV GUI 앱의 무게는 13MB 미만입니다. 나는이 결과에 대해 매우 흥분합니다 !
물론 Sveltekit 도이 일정을 가능하게합니다. 반나절 도구 벨트 구성을 절약했을뿐만 아니라 즉시 HMR 개발 서버를 사용하면 브라우저를 수동으로 새로 고칠 수 있습니다.
여기서 본 적이 있다면 인상적입니다! 시간과 관심에 감사드립니다. 알림으로, 프로젝트는 Github에서 제공되며 최신 사전 컴파일 된 바이너리는 항상 출판 페이지를 통해 사용할 수 있습니다.
위 내용은 Svelte, Redis 및 Rust로 크로스 플랫폼 데스크톱 응용 프로그램을 구축 한 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
