ดาวน์โหลด triplit - ดาวน์โหลดซอร์สโค้ด triplit

triplit

โค้ดแหล่งที่มา AI

@triplit

ดาวน์โหลด

ภาพรวม

Triplit เป็นฐานข้อมูลโอเพนซอร์ซที่ซิงค์ข้อมูลระหว่างเซิร์ฟเวอร์และเบราว์เซอร์แบบเรียลไทม์

Triplit ให้ข้อมูลการซิงค์แบบเรียลไทม์ซึ่งคุณสามารถวางลงในแอพของคุณเป็นแพ็คเกจ typeScript Triplit จัดการการจัดเก็บข้อมูลของคุณบนเซิร์ฟเวอร์และซิงค์แบบสอบถามของคุณกับลูกค้าของคุณอย่างชาญฉลาด เราเรียกระบบประเภทนี้ว่า“ ฐานข้อมูลสแต็กเต็มรูปแบบ” - คุณสามารถดูงานนำเสนอของเราต่อชุมชนแรกในท้องถิ่นเกี่ยวกับกระบวนทัศน์ใหม่นี้ได้ที่นี่

Triplit รวบรวม:

การซิงค์แบบเรียลไทม์ กับการอัปเดตที่เพิ่มขึ้นและการแก้ไขข้อขัดแย้งในระดับทรัพย์สิน

- การแคชท้องถิ่น ขับเคลื่อนโดยฐานข้อมูลฝั่งไคลเอ็นต์เต็มรูปแบบ

- ที่เก็บข้อมูลฝั่งเซิร์ฟเวอร์ที่ทนทาน พร้อมแดชบอร์ดผู้ดูแลระบบ

- ผู้ให้บริการจัดเก็บข้อมูลที่สามารถทำได้ เช่น SQLite, IndexedDB, LevelDB, หน่วยความจำ ฯลฯ

- การอัปเดตในแง่ดี เพื่อให้การโต้ตอบทุกครั้งรู้สึกเร็ว

- การสืบค้นเชิงสัมพันธ์ สำหรับแบบจำลองข้อมูลที่ซับซ้อน

- โหมดออฟไลน์ พร้อมการเชื่อมต่อใหม่และการรับประกันความสอดคล้องโดยอัตโนมัติ

- การจัดการย้อนกลับและลองใหม่ ในการอัปเดตที่ล้มเหลว

Schemas เพื่อความปลอดภัยของข้อมูลและการเติมข้อความอัตโนมัติ TypeScript

- การอนุญาต ที่บังคับใช้บนเซิร์ฟเวอร์สำหรับทั้งการอ่านและการเขียน

- การทำงานร่วมกัน/ผู้เล่นหลายคน ขับเคลื่อนโดย CRDTS

? ️ เวลาแฝงต่ำ พร้อมการรับส่งข้อมูลเครือข่ายน้อยที่สุดโดยใช้แพตช์เดลต้า

API แบบง่าย สำหรับการสอบถามและการกลายพันธุ์ข้อมูลทั้งในวานิลลาจาวาสคริปต์และตอบสนอง

✅ โอเพ่นซอร์สอย่างเต็มที่!

ภาพรวม Monorepo

ใน triplit/packages คุณสามารถค้นหาโครงการต่าง ๆ ที่ Power Triplit:

TRIPLITDB - ออกแบบมาเพื่อทำงานในสภาพแวดล้อม JS ใด ๆ (เบราว์เซอร์, โหนด, DENO, React Native, ฯลฯ ) และให้การสืบค้นการอัปเดตอย่างรวดเร็วรวดเร็วและมีชีวิตอยู่ในขณะที่ยังคงความสอดคล้องกับนักเขียนหลายคนผ่านเครือข่าย
ไคลเอนต์ - ห้องสมุดเบราว์เซอร์เพื่อโต้ตอบกับ TriplitDBS ในท้องถิ่นและระยะไกล
เครื่องมือ CLI - CLI พร้อมคำสั่งเพื่อนั่งร้านโครงการเรียกใช้สภาพแวดล้อมการพัฒนาเต็มรูปแบบย้ายเซิร์ฟเวอร์และอื่น ๆ
React - React Bindings สำหรับ @triplit/ไคลเอนต์
svelte - การผูก Svelte สำหรับ @triplit/ไคลเอนต์
คอนโซล - แอพสำหรับการดูและการกลายพันธุ์ข้อมูลในโครงการ Triplit และการจัดการ schemas ของพวกเขา
เซิร์ฟเวอร์ - โหนดเซิร์ฟเวอร์สำหรับการซิงค์ข้อมูลระหว่างไคลเอนต์ Triplit
Server -Core - Library Agnostic Protocol สำหรับการสร้างเซิร์ฟเวอร์ที่ใช้ Triplit
เอกสาร - เอกสาร Triplit สร้างขึ้นด้วย Nextra
ประเภท - ประเภทที่ใช้ร่วมกันสำหรับโครงการ Triplit ต่างๆ
UI - ส่วนประกอบ UI ที่ใช้ร่วมกันสำหรับโครงการส่วนหน้าสามเท่าที่สร้างขึ้นด้วย Shadcn

เริ่มต้นอย่างรวดเร็ว

เริ่มโครงการใหม่

npm create triplit-app@latest my-app

หรือเพิ่มการพึ่งพาในโครงการที่มีอยู่

npm install --save-dev @triplit/cli
npm run triplit init

กำหนดสคีมาใน my-app/triplit/schema.ts

 import { Schema as S , ClientSchema } from '@triplit/client' ;

export const schema = {
  todos : {
    schema : S . Schema ( {
      id : S . Id ( ) ,
      text : S . String ( ) ,
      completed : S . Boolean ( { default : false } ) ,
    } ) ,
  } ,
} satisfies ClientSchema ;

เริ่มต้นเซิร์ฟเวอร์ซิงค์การพัฒนา Triplit

npm run triplit dev

สิ่งนี้จะส่งออกตัวแปรสภาพแวดล้อมที่สำคัญบางอย่างที่แอปของคุณจะต้องซิงค์กับเซิร์ฟเวอร์ เพิ่มลงในไฟล์ .env ของคุณ (ตัวอย่าง VITE ด้านล่าง)

VITE_TRIPLIT_SERVER_URL=http://localhost:6543
VITE_TRIPLIT_TOKEN=copied-in-from-triplit-dev

กำหนดแบบสอบถามในแอปของคุณ (ตอบสนองตัวอย่างด้านล่าง)

 import { TriplitClient } from '@triplit/client' ;
import { useQuery } from '@triplit/react' ;
import { schema } from '../triplit/schema' ;

const client = new TriplitClient ( {
  schema ,
  serverUrl : import . meta . env . VITE_TRIPLIT_SERVER_URL ,
  token : import . meta . env . VITE_TRIPLIT_TOKEN ,
} ) ;

function App ( ) {
  const { results : todos } = useQuery ( client . query ( 'todos' ) ) ;

  return (
    < div >
      { Array . from ( todos . values ( ) ) . map ( ( todo ) => (
        < div key = { todo . id } >
          < input
            type = "checkbox"
            checked = { todo . completed }
            onChange = { ( ) =>
              client . update ( 'todos' , todo . id , ( todo ) => ( {
                todo . completed = ! todo . completed ,
              } )
            }
          / >
          { todo . text }
        </ div >
      ) ) }
    </ div >
  );
}

เริ่มแอปของคุณเปิดแท็บเบราว์เซอร์อื่นและดูข้อมูลการซิงค์แบบเรียลไทม์

อ่านคู่มือการเริ่มต้นใช้งานที่นี่ สำหรับบทช่วยสอนที่มีรายละเอียดและอธิบายเพิ่มเติมลองดูคู่มือทีละขั้นตอนนี้เพื่อสร้างแอพ tode แบบเรียลไทม์ด้วย Triplit, Vite และ React