ホーム>プログラミング関連>サードパーティ製コンポーネント
ダウンロード

メタライト

私たちをサポートしてください

DigitalOceanで無料の100ドルのクレジットを入手してください：

私たちの不一致に参加してください：

MetawriteはSvelte / SvelteKitのコンポーネントに行く準備ができているappwrite sdkです

このパッケージは、拡張によって維持されています。

注：バージョンxxn 、パッケージのドキュメントまたはタイピングにいくつかの小さな変更を意味します。

バージョンxnxには、いくつかの小さな壊れた変更が含まれる場合があります。リリースノートを参照してください。

バージョンnxxには、いくつかの大きな壊れた変更が含まれる場合があります。リリースノートを参照してください。

重要な情報

パッケージは完全に機能しており、Appwrite Server 0.12、Web SDK 6、およびSveltekitと互換性があります。しかし、人々は現在、 npm install metawriteで困難に直面しています。 Metawriteを使用し、ここで説明するようなDocker画像としても使用できるSveltekitテンプレートの準備ができて構成されています。

テンプレートの使用を検討してください。これは一時的なものです

ドキュメント

インストール

NPMの使用： 

npm install metawrite

糸の使用： 

yarn add metawrite

目次

  • 私たちをサポートしてください
    • 重要な情報
  • ドキュメント - インストール
  • 目次
  • 使用法
    • 初期化
      • プロパティ
    • ユーザーを作成します
      • 指令
        • 議論
      • イベント
        • 議論
        • 議論
    • 電子メールでログインします
      • 指令
        • 議論
      • イベント
        • 議論
        • 議論
    • OAuth2経由でログインします
      • プロパティ
      • 指令
    • ユーザーを取得します
      • 指令
    • コレクションを入手してください
      • プロパティ
      • 指令
        • 議論
    • ドキュメントを入手してください
      • プロパティ
      • 指令
        • 議論
      • イベント
  • API
    • アカウント
      • <User />
        • スロット
        • 指令
        • イベント
        • 例
      • <Create />
        • 指令
        • イベント
        • 例
      • <Preferences />
        • スロット
        • 指令
        • イベント
        • 例
      • <RecoverPassword />
        • 指令
        • イベント
        • 例
      • <Update />
        • 指令
        • イベント
        • 例
      • <Verification />
        • 指令
        • イベント
        • 例
    • 認証
      • <AuthEmail />
        • スロット
        • 指令
        • イベント
        • 例
      • <AuthOAuth2 />
        • プロパティ
        • 例
      • <CreateAnonymousSession />
        • 指令
        • 例
      • <CreateJWT />
        • 指令
        • 例
      • <MagicURL />
        • 指令
        • 例
    • アバター
      • <Browser />
        • 議論
        • 指令
        • 例
      • <CreditCard />
        • 議論
        • 指令
        • 例
      • <Favicon />
        • 議論
        • 指令
      • <Flag />
        • 議論
        • 指令
        • 例
      • <Image />
        • 議論
        • 指令
        • 例
      • <QR />
        • 議論
        • 指令
        • 例
    • データベース
      • <Collection />
        • 議論
        • スロット
        • 指令
        • 例
      • <Document />
        • 議論
        • スロット
        • 指令
        • 例
    • リアルタイム - 引数 - 指令 - 例
    • ストレージ
      • <Storage />
        • 指令
        • 例
      • <FileList />
        • 議論
        • スロット
        • 指令
        • 例
      • <File />
        • 議論
        • 指令
        • 例
    • 関数
      • <Function />
        • 指令
        • スロット
        • 例
    • ロケール
      • <Continents />
        • 指令
        • スロット
        • 例
      • <Countries />
        • 議論
        • スロット
        • 指令
        • 例
      • <Currencies />
        • スロット
        • 指令
        • 例
      • <Languages />
        • スロット
        • 指令
        • 例
      • <Locale />
        • スロット
        • 指令
        • 例
      • <PhoneCodes />
        • スロット
        • 指令
        • 例
  • スタック

使用法

このライブラリを使用するには、appwriteの実行中のインスタンスが必要です。詳細については、https://appwrite.io/docs/installationにアクセスしてください。

psuedoの例

Svelte Markupから完全に完全に非同期のリレーショナルデータ（およびその読み込みおよびフォールバック状態）を処理します。 

 <!-- 1. ? Appwrite App -->
< Appwrite {... config }>

    <!-- 2. ? Get the current user if logged in -->
    < User let:user >

        < h1 >Hello { user . name }!</ h1 >

        <!-- 3.  Get all the documents from a collection -->
        < Collection collectionId = " 5f56a3035a01f " let:documents >
            You have { documents . length } documents.

            { #each documents as document }

                <!-- 4.  Get a document -->
                < Document collectionId = "5f56a3035a01f" documentId ={ document . $id } { document }>
                    Title: { document . title }
                    Text: { document . text }
...

初期化

すべてのmetawriteコンポーネントを初期化してラップする必要があります。 

< script >
	import { Appwrite } from ' metawrite ' ;

	const config = {
		endpoint : ' http://localhost/v1 ' ,
		project : ' demo ' ,
		locale : ' fr '
	};
</ script >

< Appwrite {... config }>...</ Appwrite >

プロパティ

名前説明
endpointあなたのappwriteエンドポイント。 @type - {string}
projectあなたのプロジェクトID。 @type - {string}
localeオプションユーザーロケール。 @type - {string}
realtimeオプションのセットカスタムリアルタイムエンドポイント。デフォルトでは、 endpointと同じです。 @type - {string}

ユーザーを作成します

新しいアカウントを登録します。 

< script >
	import { Create } from ' metawrite ' ;

	let email = ' ' ;
	let password = ' ' ;
	let name = ' ' ;

	const success = ( e ) => {
		// success callback
		// `e` contains the user object
	};

	const failure = ( e ) => {
		// failure callback
	};
</ script >

< Create let:actions on:success on:failure >
	< input type = "text" bind:value ={ email } />
	< input type = "password" bind:value ={ password } />
	< input type = "text" bind:value ={ name } />
	< button on:click ={ actions . create ( email , password , name )}>Register</ button >
</ Create >

指令

let：アクションobject

関数付きのオブジェクト。

議論

名前説明
create(email, password, name)新しいユーザーを登録します。 @type - {string}

イベント

オン：成功

成功したレジスタでトリガーします。

議論

名前説明
response応答

オン：失敗

失敗したレジスタをトリガーします。

議論

名前説明
response応答

電子メールでログインします

電子メールとパスワードでログインします。 

< script >
	import { AuthEmail } from ' metawrite ' ;

	let email = ' ' ;
	let password = ' ' ;

	const success = ( e ) => {
		// success callback
		// `e` contains the user object
	};

	const failure = ( e ) => {
		// failure callback
	};
</ script >

< AuthEmail let:authorize on:success on:failure >
	< input type = "text" bind:value ={ email } />
	< input type = "text" bind:value ={ password } />
	< button on:click ={ authorize ( email , password )}>Login</ button >
</ AuthEmail >

指令

let：承認function

ログインを開始します。

議論

名前説明
email電子メール。 @type - {string}
passwordパスワード。 @type - {string}

イベント

オン：成功

成功したログインでトリガー。

議論

名前説明
email電子メール。 @type - {string}

オン：失敗

失敗したログインをトリガーします。

議論

名前説明
errorエラーオブジェクト。

OAuth2経由でログインします

OAUTH2プロバイダーを介してログインします。 

< script >
	import { AuthOAuth2 } from ' metawrite ' ;
</ script >

< AuthOAuth2
	authProvider = " google "
	success = " http://localhost:3000?success "
	failure = " http://localhost:3000?failure "
	let:authorize
>
	< button on:click ={ authorize }>Login Google</ button >
</ AuthOAuth2 >

プロパティ

名前説明
authProvider OAUTH2プロバイダー。 @type - {string}
success成功URL。 @type - {string}
failure故障URL。 @type - {string}

指令

let：承認function

ユーザーを取得します

現在のユーザーに、ログインしているかどうかを確認するように要求します。 

< script >
	import { User } from ' metawrite ' ;
</ script >

< User let:user >
	< h1 >Hello { user . name }!</ h1 >
	< div >{ user . email }</ div >

	< div slot = " error " >You are not logged in!</ div >
</ User >

指令

let：ユーザーobject

現在、ユーザーデータに記録されています。

コレクションを入手してください

コレクションからすべてのドキュメントのリストを取得します。 

< script >
	import { Collection } from ' metawrite ' ;
</ script >

< Collection collectionId = " 5f56a3035a01f " let:documents >
	You have { documents . length } documents.
</ Collection >

プロパティ

名前説明
collectionIdコレクション一意のID。 @type - {string}
追加ここと同じです

指令

let：ドキュメントarray

ドキュメントの配列。

let：アクションobject

関数付きのオブジェクト。

議論

名前説明
reload()コレクションを再フェッチします。
create(data, read, write)コレクションに新しいドキュメントを作成します。 read / writeはオプションであり、デフォルトでは現在のユーザー@type - {string[]} 。 dataは@type - {string}です

ドキュメントを入手してください

ドキュメントを取得します。 documentプロパティをデータから渡すと、データは要求されません。 

< script >
	import { Document } from ' metawrite ' ;
</ script >

< Document documentId = " 5f56a3asda01f " let:document >
	Title: { document . title }
	Text: { document . text }
</ Document >

プロパティ

名前説明
documentId一意のIDを文書化します。 @type - {string}
collectionIdコレクション一意のID。 @type - {string}
または
document <Collection />から渡されたドキュメント

指令

LET： objectを文書化します

ドキュメントデータを備えたJSONオブジェクト。

let：アクションobject

関数付きのオブジェクト。

議論

名前説明
update(data)ドキュメントを更新します。 dataは@type - {string}です
remove()ドキュメントを削除します。
reload()ドキュメントを再獲得します。

イベント

オン：変更

更新時にトリガーまたはログインを削除します。

API

アカウント

アカウントコンポーネントを使用すると、ユーザーアカウントを管理できます。

<User />

スロット

  • 読み込み
  • エラー

指令

let：アクション

名前説明
reload()リロード。
logout()ログアウト現在のセッション。
logoutAll()すべてのセッションからログアウト。
logoutFrom(session)特定のセッションからのログアウト。 sessionは@type - {string}です
  • let：ユーザーobject
  • let：エラー

イベント

  • ON：ユーザーフェッチの成功成功。
  • オン：ユーザーフェッチの失敗の失敗。
  • ON： logout成功に関する成功。
  • オン： logoutの失敗に関するFailureLogout。
  • ON：成功からlogoutFrom成功。
  • ON：失敗からのlogoutFrom failurelogout。
  • ON： logoutAll成功に関するSuccessLogoutall。
  • オン： logoutAll障害に関するFailureLogoutall。

例

< script >
	import { User } from ' metawrite ' ;
</ script >

< User let:actions let:user >
	< button on:click ={ actions . reload ()}>Reload user data</ button >
	< button on:click ={ actions . get ()}>Get logged in user data</ button >
	< button on:click ={ actions . logout ()}>Log out from current session</ button >
	< button on:click ={ actions . logoutFrom ( ' sessionId ' )}>Log out from specific session</ button >
	< button on:click ={ actions . logoutAll ()}>Log out from all sessions</ button >

	<!-- If logged in -->
	< p >Hi, { user . name }</ p >
</ User >

<Create />

指令

let：アクション

名前説明
create(email, password, name)ユーザーを作成します。 emailとpasswordが必要です - @type - {string} 。 nameはオプションです - @type - {string}

イベント

  • ON：成功の成功create
  • オン：障害の障害create

例

< script >
	import { Create } from ' metawrite ' ;

	let name,
		email,
		password = ' ' ;

	const success = ( e ) => {
		// success callback
		// `e` contains the user object
	};

	const failure = ( e ) => {
		// failure callback
	};
</ script >

< Create let:actions on:success on:failure >
	< input type = "text" name = "name" placeholder = "name" bind:value ={ name } />
	< input type = "text" name = "email" placeholder = "email" bind:value ={ email } />
	< input type = "password" name = "password" placeholder = "password" bind:value ={ password } />
	< button on:click ={ actions . create ( name , email , password )}>Create Account</ button >
</ Create >

<Preferences />

スロット

  • 読み込み
  • エラー

指令

let：アクション

名前説明
reload()好みをリロードします。
update(prefs)設定を更新します。 prefs @type - {object}

イベント

  • ON：INITの成功とreload成功。
  • オン： initおよびreload障害の障害。
  • オン： update Successの成功。
  • on： update障害の故障。

例

< script >
	import { Preferences } from ' metawrite ' ;

	let prefs = {
		// You can pass only the specific settings you wish to update.
	};
</ script >

< Preferences let:actions >
	< button
		on:click ={() => {
			actions . update ( prefs );
			actions . reload ();
		}}>Update Preferences</ button
	>
</ Preferences >

<RecoverPassword />

指令

let：アクション

名前説明
recover(email, url)パスワードを回復します。 emailとurlが必要で、 @type - {string} 。 urlは、 complete機能でsecretを処理するページです。
complete(user, secret, password, passwordAgain)パスワードの回復を完了します。 userとsecretはmetawriteによって自動的に設定されるため、設定する必要はありません。 passwordとpasswordAgainが必要です - @type - {string} 。

イベント

  • ON：INITの成功とreload成功。
  • ON： INITおよびreload障害のFailurerEcover。
  • ON：SuccessCompleteのupdate成功。
  • オン： update障害時にFailureComplete。

例

< script >
    import { RecoverPassword } from " metawrite " ;

    const url = " http://localhost:3000/reset-password " ; // URL that will point to the next step.
    let email = ' ' ;

    const successRecover = e => {
    // success callback
    // `e` contains the user object
  };

  const failureRecover = e => {
    // failure callback
  }
</ script >

<!-- localhost/forgot-password -->
< RecoverPassword let:actions on:successRecover on:failureRecover >
    < input name = "email" type = "text" bind:value ={ email , url } placeholder = " Email " />
    < button on:click { actions . recover ( email )}>Recover Password</ button >
</ RecoverPassword >

<!-- Then on localhost/reset-password  -->
< script >
    import { RecoverPassword } from " metawrite " ;

    let password, passwordAgain = ' ' ;

    const successComplete = e => {
    // success callback
    // `e` contains the user object
  };

  const failureComplete = e => {
    // failure callback
  }
</ script >

< RecoverPassword let:actions on:successComplete on:failureComplete >
    < input type = "password" name = "password" bind:value { password } placeholder = " Password " />
    < input type = "password" name = "password" bind:value { passwordAgain } placeholder = " Confirm Password " />
    < button on:click { actions . complete ( password , passwordAgain )}>Set New Password</ button >
</ RecoverPassword >

<Update />

指令

let：アクション

名前説明
name(name)名前を更新します。すべてのフィールドが必要です。 @type - {string}
email(email, password)メールを更新します。すべてのフィールドが必要です。 @type - {string}
password(password, oldPassword)パスワードを更新します。すべてのフィールドが必要です。 @type - {string}

イベント

  • ON：SuccessName on name Success。
  • オン： name失敗に関するFailureName。
  • オン： emailの成功の成功メール。
  • オン： email失敗の失敗メール。
  • ON： password成功に関するSuccessPassWord。
  • オン： password失敗に関するfailspassword。

例

< script >
	import { Update } from ' metawrite ' ;

	let name,
		email,
		password,
		newPassword,
		oldPassword = ' ' ;
</ script >

< Update let:actions >
	< button on:click ={ actions . name ( name )}>This updates name</ button >
	< button on:click ={ actions . email ( email , password )}>This updates email</ button >
	< button on:click ={ actions . password ( newPassword , oldPassword )}>This updates password</ button >
</ Update >

<Verification />

ユーザーの電子メールの確認を作成して自動的に検証します。

  • アクションcreate用の型文字列のurl 、アプリがホストされる場所またはlocalhostである必要があります。
  • updateアクションのために、何も合格する必要はありませんが、プロセスは自動化されます。

指令

let：アクション

名前説明
create(url)検証を作成します。 url 、URLが電子メールの受信トレイに送信された検証リンクを作成するために使用したものです。 @type - {string}
update(user, secret)完全な検証。 userとsecret metawriteによって自動的に設定されます。

イベント

  • ON：成功create成功。
  • ON： create FALOREのFailureCreate。
  • ON：SuccessComplete complete成功。
  • オン： complete障害時にFailureComplete。

例

< script >
	import { Verification } from ' metawrite ' ;

	const url = window . location . href ;
</ script >

< Verification let:actions >
	< button on:click ={ actions . create ( url )} />
	< button on:click ={ actions . update ()}>Update email verification status</ button >
</ Verification >

認証

AUTHコンポーネントを使用すると、ユーザーアカウントを認証できます。

<AuthEmail />

スロット

  • 読み込み
  • 成功
  • エラー

指令

  • let：Authorize（電子メール、パスワード）
  • let：user
  • let：エラー

イベント

  • ON：成功authorize成功。
  • オン： authorizeの失敗の失敗。

例

< script >
	import { AuthEmail } from ' metawrite ' ;

	let email = ' ' ;
	let password = ' ' ;

	const success = ( e ) => {
		// success callback
		// `e` contains the user object
	};

	const failure = ( e ) => {
		// failure callback
	};
</ script >

< AuthEmail let:authorize on:success on:failure >
	< input type = "text" bind:value ={ email } />
	< input type = "text" bind:value ={ password } />
	< button on:click ={ authorize ( email , password )}>Login</ button >
</ AuthEmail >

<AuthOAuth2 />

プロパティ

名前説明
authProvider OAUTH2プロバイダー。 @type - {string}
success成功URL。 @type - {string}
failure故障URL。 @type - {string}
####ディレクティブ

let：authorize（）

例

< script >
	import { AuthOAuth2 } from ' metawrite ' ;
</ script >

< AuthOAuth2
	authProvider = " google "
	success = " http://localhost:3000?success "
	failure = " http://localhost:3000?failure "
	let:authorize
>
	< button on:click ={ authorize }>Login Google</ button >
</ AuthOAuth2 >

<CreateAnonymousSession />

指令

let：アクション

名前説明
create()匿名セッションを作成します。

例

< script >
	import { CreateAnonymousSession } from ' metawrite ' ;
</ script >

< CreateAnonymousSession let:actions >
	< button on:click ={ actions . create }>Create Anonymous Session</ button >
</ CreateAnonymousSession >

<CreateJWT />

JWTトークンを作成します。

指令

let：アクション

名前説明
create() JWTトークンを作成します。

例

< script >
	import { CreateJWT } from ' metawrite ' ;
</ script >

< CreateJWT let:actions >
	< button on:click ={ actions . create }>Create JWT token</ button >
</ CreateJWT >

<MagicURL />

指令

let：アクション

名前説明
create(sessionId, email, url)マジックURLセッションを作成します。電子メールが必要です、URLは完全なステップstringを指すことです。SessionID sessionId必要ありません
complete() Magic URLセッションを検証して完了します。

例

< script >
    import { MagicURL } from " metawrite " ;

    let email = " "
    const url = " http://localhost:3000/page-to-complete "

	const successCreate = ( e ) => {
		console . log (e)
	}
	const failureCreate = ( e ) => {
		console . log (e)
	}
	const successComplete = ( e ) => {
		console . log (e)
	}
	const failureComplete = ( e ) => {
		console . log (e)
	}
</ script >

< MagicURL let:actions on:successCreate on:successComplete on:failureCreate on:failureComplete >
		< input type = "email" name = "email" placeholder = "Email" bind:value ={ email } />
		< button on:click ={ actions . create ( email , url )}>Send login link</ button >
		< button on:click ={ actions . complete ()}>Confirm Login</ button >
</ MagicURL >

アバター

アバターコンポーネントは、アプリの画像、アイコン、アバターに関連する日常のタスクを完了するのに役立つことを目的としています。

<Browser />

議論

  • コード -必須@type - {string}
  • 幅 -オプション@type - {number}
  • 高さ -オプション@type - {string}
  • 品質-Optional @type - {string}

指令

  • let：src image link @type - {URL}

例

< script >
	import { Browser } from ' metawrite ' ;
</ script >

< Browser code = " firefox " let:src >
	< img src ={ String ( src )} alt = " Browser " />
</ Browser >

<CreditCard />

議論

  • コード -必須@type - {string}
  • 幅 -オプション@type - {number}
  • 高さ -オプション@type - {string}
  • 品質-Optional @type - {string}

指令

  • let：src image link @type - {URL}

例

< script >
	import { CreditCard } from ' metawrite ' ;
</ script >

< CreditCard code = " amex " let:src >
	< img src ={ String ( src )} alt = " card " />
</ CreditCard >

<Favicon />

議論

  • url-必須@type - {string}

指令

  • let：src image link @type - {URL} 
< script >
	import { Favicon } from ' metawrite ' ;
	const url = window . location . href ;
</ script >

< Favicon { url } let:src >
	< img src ={ String ( src )} alt = " favicon " />
</ Favicon >

<Flag />

議論

  • コード -必須@type - {string}
  • 幅 -オプション@type - {number}
  • 高さ -オプション@type - {string}
  • 品質-Optional @type - {string}

指令

  • let：src image link @type - {URL}

例

< script >
	import { Flag } from ' metawrite ' ;
</ script >

< Flag code = " canada " let:src >
	< img src ={ String ( src )} alt = " flag " />
</ Flag >

<Image />

議論

  • url-必須@type - {string}
  • 幅 -オプション@type - {number}
  • 高さ -オプション@type - {number}

指令

  • let：src image link @type - {URL}

例

< script >
	import { Image } from ' metawrite ' ;

	let url = ' https://increas.io/ ' ;
	let width,
		height = 100 ;
</ script >

< Image { url } { width } { height } let:src >
	< img src ={ String ( src )} alt = " someImage " />
</ Image >

<QR />

議論

  • テキスト -必須@type - {string}
  • サイズ-optional @type - {optional}
  • マージン -オプション@type - {number}
  • ダウンロード -オプション@type - {boolean}

指令

  • let：src image link @type - {URL}

例

< script >
	import { QR } from ' metawrite ' ;

	let text = ' https://increas.io/ ' ; // could be any text
	let size = 500 ;
	let margin = 1 ;
	let download = false ;
</ script >

< QR { text } { size } { margin } { download } let:src >
	< img src ={ String ( src )} alt = " QR Code " />
</ QR >

データベース

データベースコンポーネントを使用すると、ドキュメントの構造化されたコレクション、ドキュメントのクエリリスト、フィルターリストを作成し、読み取りおよび書き込みアクセス許可の高度なセットを管理できます。

<Collection />

議論

  • collectionId -evering @type - {string}

  • キャッシュ -オプション、デフォルトではfalse @type - {boolean}

    クエリ： @type - {object}

  • クエリ-optional @type - {string[]}

  • 制限 -オプション@type - {number}

  • オフセット-optional @type - {number}

  • カーソル -オプション@type - {string}

  • cursordirection -optional @type - {string}

  • OrderAttributes -optional @type - {string[]}

  • OrderTypes -Optional @type - {string[]}

スロット

  • 読み込み
  • エラー

指令

let：アクション

名前説明
reload()リロード。
create(documentId, data, read, write)ドキュメントを作成します。 data - @type - {string} 。
read / writeはオプション@type - {string[]}です。
documentIdはオプションであり、デフォルトではunique @type - {string}を生成します。
  • let：ドキュメント
  • let：エラー

例

< script >
  import { Collection } from " metawrite " ;
</ script >

< Collection collectionId = " 5f56a3035a01f " let:documents >
  You have { documents . length } documents.
</ Collection >

<Document />

議論

  • documentId -evering @type - {string}
  • collectionId -evering @type - {string}

スロット

  • 読み込み
  • エラー

指令

let：アクション

名前説明
reload()リロード。
update(data)ドキュメントを更新します。 data - @type - {object}
remove()ドキュメントを削除します。
  • let：document
  • let：エラー

例

< script >
	import { Collection , Document } from ' metawrite ' ;

	const collectionId = ' 5f56a3035a01f ' ;
</ script >

< Collection { collectionId } let:documents >
	You have { documents . length } documents:
	{ #each documents as document }
		< Document { collectionId } documentId ={ document . $id } let:document let:actions >
			Title: { document . title }
			Text: { document . text }
			< button on:click ={() => { actions . remove ()}}>Delete</ button >
		</ Document >
	{ /each }
</ Collection >

リアルタイム

AppWriteでリアルタイムの使用の詳細については、リアルタイムドキュメントを参照してください。

リアルタイムでは、サブスクライブメソッドを使用して、サーバー側のイベントをリアルタイムでリアルタイムでリッスンすることができます。

HTTPを介して新しいデータをリクエストする代わりに、サブスクリプションは変更するたびに新しいデータを受信します。接続されたクライアントは、WebSocket接続を介してミリ秒以内にその更新を受信します。

これにより、すべてのAppWriteのサービスからリアルタイムで情報を提供することにより、インタラクティブでレスポンシブなユーザーエクスペリエンスを構築できます。

議論

  • チャネル -必要なstring | string[]

指令

let：payload-サブスクリプションからのペイロードには、次のプロパティが含まれます。

let：アクション

名前説明
subscribe() 1つ以上のチャネルに関連するすべての更新を購読します。
unsubscribe()サブスクリプションから更新を受信したくない場合は、コールバックが呼び出されなくなるように、登録解除できます。

例

< script >
	import { Realtime } from ' metawrite ' ;
</ script >

< Realtime channels = " account " let:actions let:payload >
	< h1 >{ payload . timestamp }</ h1 >
	< button on:click ={ actions . subscribe ()}>Subscribe to Account channel</ button >
	< button on:click ={ actions . unsubscribe ()}>Unsubscribe from Account channel</ button >
</ Realtime >

ストレージ

ストレージコンポーネントを使用すると、プロジェクトファイルを管理できます。すべてのプロジェクトファイルをアップロード、表示、ダウンロード、クエリすることができます。

<Storage />

指令

let：アクション

名前説明
create(bucketId, fileId, file, read, write)ファイルをアップロードします。
fileId @type - {string} 、 "unique()"がランダムな一意のIDを生成しますが、カスタムを使用できます。
fileは@type - {File}であり、必要です。
read / writeは@type - {string[]}およびオプションです

例

< script lang = " ts " >
    import { Storage } from " metawrite "

    // Required
	let bucketId = " default "
    let file : File ;
    let fileId = " unique() " ; // this will generate random unique id, but you can use custom

    // Optional
    let read : string [];
    let write : string [];
</ script >

< Storage { file } let:actions >
    < button on:click ={ actions . create ( bucketId , fileId , file , read , write )}>Upload File</ button >
</ Storage >

<FileList />

議論

  • Bucketid -evering @type - {string}
  • 検索 -オプション@type - {string}
  • 制限 -オプション@type - {number}
  • オフセット-optional @type - {number}
  • カーソル -オプション@type - {string}
  • cursordirection -optional @type - {string}
  • OrderType -Optional @type - {string} => "ASC"または"DESC"を書き込む

スロット

  • 読み込み
  • エラー

指令

let：アクション

名前説明
reload()リロード。
  • let：ファイル
  • let：エラー

例

< script >
    import { FileList } from " metawrite "

    // Optional
    let bucketId = ' default ' ;
    let search = ' ' ;
    let limit = 10 ;
    let offset = 0 ;
    let orderType = ' ASC ' ;
</ script >

< FileList { bucketId } { search } { limit } { offset } { orderType } let:actions let:files >
    { #each files as file }
        < p >File: { file . name }</ p >
    { /each }
    < button on:click ={ actions . reload ()}>Reload</ button >
</ FileList >

<File />

議論

  • Bucketid-それはあなたのバケツID @type - {string}
  • fileID-それはファイルID @type - {string}

指令

let：アクション

名前説明
download()ダウンロードファイル。
view()ビュー用のファイルを取得します。
preview(width, height, quality, background, output)プレビュー用のファイルを取得します。
update(read, write)ファイルを更新します。
delete()ファイルを削除します。

例

< script lang = " ts " >
	import { File } from ' metawrite ' ;

	// Required
	let bucketId : string ;
	let fileId : string ;

	// OPTIONAL
	/** @type {number} */ let width;
	/** @type {number} */ let height;
	/** @type {string} */ let gravity;
	/** @type {number} */ let quality;
	/** @type {number} */ let borderWidth;
	/** @type {string} */ let borderColor;
	/** @type {number} */ let borderRadius;
	/** @type {number} */ let opacity;
	/** @type {number} */ let rotation;
	/** @type {string} */ let background;
	/** @type {string} */ let output;
	/** @type {string[]} */ let read;
	/** @type {string[]} */ let write;
</ script >

< File { bucketId } { fileId } let:actions >
	< button on:click ={ actions . download ()}>Download File</ button >
	< button on:click ={ actions . view ()}>File View</ button >
	< button on:click ={ actions . preview ()}>Preview File</ button >
	< button on:click ={ actions . update ( read , write )}>Update File</ button >
	< button on:click ={ actions . delete ()}>Delete File</ button >
</ File >

関数

関数サービスを使用すると、サポートされているAppWriteシステムイベントまたは事前定義されたスケジュールによってトリガーできるカスタム動作を作成できます。

AppWrite Cloud関数を使用すると、AppWriteによってトリガーされたイベントまたは事前定義されたスケジュールで実行されるように設定することで、バックエンドコードを自動的に実行できます。コードは、AppWriteインスタンスに安全な方法で保存され、孤立した環境で実行されます。

AppWriteのクラウド関数チュートリアルをフォローして、詳細を確認できます。

<Function />

指令

let：アクション

名前説明
reload()リロード。
create(functionId, data)実行を作成します。 functionIdが必要です。オプションのため、 data空の文字列になる可能性があります。 @type {string}
create(functionId, executionId)実行を取得します。両方のパラメーターが必要です。 @type {string}
  • let：実行

スロット

  • エラー

例

< script >
	import { Function } from ' metawrite ' ;
	let functionId = ' someExecution ' ; // required
	let newFunctionId = ' ' ;
	let data = ' String of custom data to send to function. ' ; // could be empty string because optional
</ script >

< Function { functionId } { data } let:actions let:executions >
	{ #each executions as execution }
		< p >
			Execution ID: { execution . $id }, Function ID: { execution . functionId }, Date Created: { execution . dateCreated }
		</ p >
	{ /each }
	< input type = "text" name = "functionId" placeholder = "Function ID" bind:value ={ newFunctionId } />
	< button on:click ={ actions . create ( newFunctionId , data )}>Create Execution</ button >
</ Function >

ロケール

ロケールコンポーネントを使用すると、ユーザーの場所に基づいてアプリをカスタマイズできます。

<Continents />

指令

let：アクション

名前説明
reload()リロード。
  • let：大陸

スロット

  • 読み込み
  • エラー

例

< script >
	import { Continents } from ' metawrite ' ;
</ script >

< Continents let:actions let:continents >
	< button on:click ={ actions . reload ()}>Reload</ button >
	< p >There are { continents . sum } continents:</ p >
	{ #each continents . continents as continent }
		< p >{ continent . name }, { continent . code }</ p >
	{ /each }
</ Continents >

<Countries />

議論

  • 欧州連合

スロット

  • 読み込み
  • エラー

指令

let：アクション

名前説明
reload()リロード。
  • let：国

例

< script >
	import { Countries } from ' metawrite ' ;

	let eu = true ; // if you want to list only EU countries
</ script >

< Countries let:actions let:countries >
	< button on:click ={ actions . reload ()}>Reload</ button >
	< p >There are { countries . sum } countries in the world:</ p >
	{ #each countries . countries as country }
		< p >{ country . name }, { country . code }</ p >
	{ /each }
</ Countries >

< Countries { eu } let:actions let:countries >
	< button on:click ={ actions . reload ()}>Reload</ button >
	< p >There are { countries . sum } countries in EU:</ p >
	{ #each countries . countries as country }
		< p >{ country . name }, { country . code }</ p >
	{ /each }
</ Countries >

<Currencies />

スロット

  • 読み込み
  • エラー

指令

let：アクション

名前説明
reload()リロード。
  • let：通貨

例

< script >
	import { Currencies } from ' metawrite ' ;
</ script >

< Currencies let:actions let:currencies >
	< button on:click ={ actions . reload ()}>Reload</ button >
	< p >There are { currencies . sum } currencies:</ p >
	{ #each currencies . currencies as currency }
		< p >{ currency . symbol } - { currency . name } ({ currency . code })</ p >
	{ /each }
</ Currencies >

<Languages />

スロット

  • 読み込み
  • エラー

指令

let：アクション

名前説明
reload()リロード。
  • let：言語

例

< script >
	import { Languages } from ' metawrite ' ;
</ script >

< Languages let:actions let:languages >
	< button on:click ={ actions . reload ()}>Reload</ button >
	< p >There are { languages . sum } languages:</ p >
	{ #each languages . languages as language }
		< p >{ language . name }, { language . code }></ p >
	{ /each }
</ Languages >

<Locale />

スロット

  • 読み込み
  • エラー

指令

let：アクション

名前説明
reload()リロード。
  • let： objectをコードします

例

< script >
	import { Locale } from ' metawrite ' ;
</ script >

< Locale let:actions let:code >
	< h1 >Active Session</ h1 >
	< button on:click ={ actions . reload ()}>Reload</ button >
	< p >Location: { code . country }, { code . continentCode }</ p >
	< p >IP: { code . ip }</ p >
</ Locale >

<PhoneCodes />

スロット

  • 読み込み
  • エラー

指令

let：アクション

名前説明
reload()リロード。
  • let：コード

例

< script >
	import { PhoneCodes } from ' metawrite ' ;
</ script >

< PhoneCodes let:actions let:codes >
	< button on:click ={ actions . reload ()}>Reload</ button >
	< p >There are { codes . sum } phone codes:</ p >
	{ #each codes . phones as phone }
		< p >{ phone . code } - { phone . countyName }></ p >
	{ /each }
</ PhoneCodes >

スタック

拡大する
追加情報
関連アプリ
おすすめ
関連情報 すべて