metawrite

Apoie -nos

Obtenha créditos grátis de US $ 100 no Digitalocean:

Junte -se à nossa discórdia:

---

Metawrite é AppWrite SDK com componentes prontos para ir para Svelte / SvelteKit

Este pacote é mantido por crescente.

Nota: Versões xxn significa algumas pequenas alterações na documentação ou tímidos da embalagem.

As versões xnx podem incluir algumas pequenas mudanças de ruptura. Veja Notas de lançamento.

As versões nxx podem incluir algumas grandes mudanças de ruptura. Veja Notas de lançamento.

Informações importantes

O pacote está funcionando totalmente e compatível com o AppWrite Server 0.12, Web SDK 6 e Sveltekit. Mas as pessoas estão atualmente enfrentando dificuldades com npm install metawrite . Temos o modelo SVELTEKIT pronto e configurado que usa metawrite e também pode ser usado como imagem do docker como descrito aqui.

Por favor, considere usar o modelo, isso é temporário

Documentação

Instalação

Usando NPM:

npm install metawrite

Usando o fio:

yarn add metawrite

Índice

• Apoie -nos
  • Informações importantes
• Documentação - Instalação
• Índice
• Uso
  • Inicializar
    • Propriedades
  • Criar usuário
    • Diretivas
      • Argumentos
    • Eventos
      • Argumentos
      • Argumentos
  • Faça login por e -mail
    • Diretivas
      • Argumentos
    • Eventos
      • Argumentos
      • Argumentos
  • Login via oauth2
    • Propriedades
    • Diretivas
  • Obtenha usuário
    • Diretivas
  • Obtenha coleta
    • Propriedades
    • Diretivas
      • Argumentos
  • Obtenha documento
    • Propriedades
    • Diretivas
      • Argumentos
    • Eventos
• API
  • Conta
    • <User />
      • Slots
      • Diretivas
      • Eventos
      • Exemplo
    • <Create />
      • Diretivas
      • Eventos
      • Exemplo
    • <Preferences />
      • Slots
      • Diretivas
      • Eventos
      • Exemplo
    • <RecoverPassword />
      • Diretivas
      • Eventos
      • Exemplo
    • <Update />
      • Diretivas
      • Eventos
      • Exemplo
    • <Verification />
      • Diretivas
      • Eventos
      • Exemplo
  • Auth
    • <AuthEmail />
      • Slots
      • Diretivas
      • Eventos
      • Exemplo
    • <AuthOAuth2 />
      • Propriedades
      • Exemplo
    • <CreateAnonymousSession />
      • Diretivas
      • Exemplo
    • <CreateJWT />
      • Diretivas
      • Exemplo
    • <MagicURL />
      • Diretivas
      • Exemplo
  • Avatares
    • <Browser />
      • Argumentos
      • Diretivas
      • Exemplo
    • <CreditCard />
      • Argumentos
      • Diretivas
      • Exemplo
    • <Favicon />
      • Argumentos
      • Diretivas
    • <Flag />
      • Argumentos
      • Diretivas
      • Exemplo
    • <Image />
      • Argumentos
      • Diretivas
      • Exemplo
    • <QR />
      • Argumentos
      • Diretivas
      • Exemplo
  • Banco de dados
    • <Collection />
      • Argumentos
      • Slots
      • Diretivas
      • Exemplo
    • <Document />
      • Argumentos
      • Slots
      • Diretivas
      • Exemplo
  • REAL em tempo real - Argumentos - Diretivas - Exemplo
  • Armazenar
    • <Storage />
      • Diretivas
      • Exemplo
    • <FileList />
      • Argumentos
      • Slots
      • Diretivas
      • Exemplo
    • <File />
      • Argumentos
      • Diretivas
      • Exemplo
  • Funções
    • <Function />
      • Diretivas
      • Slots
      • Exemplo
  • Localidade
    • <Continents />
      • Diretivas
      • Slots
      • Exemplo
    • <Countries />
      • Argumentos
      • Slots
      • Diretivas
      • Exemplo
    • <Currencies />
      • Slots
      • Diretivas
      • Exemplo
    • <Languages />
      • Slots
      • Diretivas
      • Exemplo
    • <Locale />
      • Slots
      • Diretivas
      • Exemplo
    • <PhoneCodes />
      • Slots
      • Diretivas
      • Exemplo
• Pilha

Uso

Você precisa de uma instância em execução do AppWrite para usar esta biblioteca. Vá para https://appwrite.io/docs/installation para obter mais instruções.

Exemplo de Psuedo

Lidar com vários níveis de dados relacionais assíncronos (e seus estados de carregamento e fallback) inteiramente da marcação esbelta.

 <!-- 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 }
...

Inicializar

Deve ser inicializado e envolver todos os componentes metawrite .

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

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

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

Propriedades

Nome	Descrição
endpoint	Seu terminal AppWrite. @type - {string}
project	Seu ID do projeto. @type - {string}
locale	Opcional O local dos usuários. @type - {string}
realtime	Definir um terminal de tempo real personalizado . Por padrão, o mesmo que endpoint . @type - {string}

Criar usuário

Registra uma nova conta.

< 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 >

Diretivas

Deixe: ações object

Objeto com função.

Argumentos

Nome	Descrição
create(email, password, name)	Registra um novo usuário. @type - {string}

Eventos

ON: Sucesso

Gatilhos no registro bem -sucedido.

Argumentos

Nome	Descrição
response	Resposta

ON: Falha

Gatilhos no registro fracassado.

Argumentos

Nome	Descrição
response	Resposta

Faça login por e -mail

Faça login por e -mail e senha.

< 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 >

Diretivas

Deixe: Autorizar function

Inicia o login.

Argumentos

Nome	Descrição
email	E-mail. @type - {string}
password	Senha. @type - {string}

Eventos

ON: Sucesso

Gatilhos no login bem -sucedido.

Argumentos

Nome	Descrição
email	E-mail. @type - {string}

ON: Falha

Gatilhos no login com falha.

Argumentos

Nome	Descrição
error	Objeto de erro.

Login via oauth2

Faça login por meio de um provedor 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 >

Propriedades

Nome	Descrição
authProvider	Provedor OAuth2. @type - {string}
success	Sucesso URL. @type - {string}
failure	URL de falha. @type - {string}

Diretivas

Deixe: Autorizar function

Obtenha usuário

Solicita o usuário atual para verificar se está conectado.

< 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 >

Diretivas

Deixe: object do usuário

Obtenha os dados do usuário atualmente conectados.

Obtenha coleta

Obtenha uma lista de todos os documentos de uma coleção.

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

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

Propriedades

Nome	Descrição
collectionId	Coleção ID exclusiva. @type - {string}
adicional	O mesmo que aqui

Diretivas

Deixe: Documentos array

Matriz de documentos.

Deixe: ações object

Objeto com função.

Argumentos

Nome	Descrição
reload()	Coleção de re-busca.
create(data, read, write)	Crie um novo documento na coleção. read / write é o usuário opcional e atual por padrão @type - {string[]} . data são @type - {string}

Obtenha documento

Obtenha um documento. Se você passar na propriedade document com dados, não haverá dados solicitados.

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

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

Propriedades

Nome	Descrição
documentId	Documente ID exclusivo. @type - {string}
collectionId	Coleção ID exclusiva. @type - {string}
ou
document	Documento passado de <Collection />

Diretivas

Deixe: Documentar object

Um objeto JSON com os dados do documento.

Deixe: ações object

Objeto com função.

Argumentos

Nome	Descrição
update(data)	Atualize o documento. data são @type - {string}
remove()	Exclui o documento.
reload()	Re-buscando documento.

Eventos

ON: Mudar

Gatilhos na atualização ou remoção de login.

API

Conta

Os componentes da conta permitem gerenciar uma conta de usuário.

<User />

Slots

• carregando
• erro

Diretivas

Deixe: ações

Nome	Descrição
reload()	Recarregar.
logout()	Logout Sessão atual.
logoutAll()	Logout de todas as sessões.
logoutFrom(session)	Logout de sessão específica. session é @type - {string}

• Deixe: object do usuário
• Deixe: erro

Eventos

• ON: Sucesso no sucesso do usuário.
• ON: Falha na falha do busca do usuário.
• ON: SuccessLogout no sucesso logout .
• ON: FailureLogout na falha logout .
• ON: SuccessLogoutFrom no logoutFrom Sucesso.
• ON: FailureLogoutFrom na falha logoutFrom .
• ON: SuccessLogoutall no logoutAll Success.
• ON: FailureLogoutall na falha logoutAll .

Exemplo

< 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 />

Diretivas

Deixe: ações

Nome	Descrição
create(email, password, name)	Cria um usuário. email e password são necessários - @type - {string} . name é opcional - @type - {string}

Eventos

• ON: Sucesso no create Sucesso.
• ON: Falha na create falhas.

Exemplo

< 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 />

Slots

• carregando
• erro

Diretivas

Deixe: ações

Nome	Descrição
reload()	Recarrega as preferências.
update(prefs)	Atualizar preferências. prefs - @type - {object}

Eventos

• ON: Sucesso no INIT e reload o sucesso.
• ON: falha no init e na falha reload .
• ON: SuccessUpdate no sucesso update .
• ON: FAKEUPDATE na falha update .

Exemplo

< 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 />

Diretivas

Deixe: ações

Nome	Descrição
recover(email, url)	Recuperar senha. email e url são necessários e @type - {string} . url é a sua página em que você lidará com secret com função complete .
complete(user, secret, password, passwordAgain)	Recuperação de senha completa. user e secret são definidos automaticamente por metawrite , para que você não precise defini -los. password e passwordAgain são necessários - @type - {string} .

Eventos

• ON: Successrecover sobre o sucesso e reload o sucesso.
• ON: FailureureCover no init e na falha reload .
• ON: SOWDCOMPLETE no sucesso update .
• ON: FailureComplete na falha update .

Exemplo

< 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 />

Diretivas

Deixe: ações

Nome	Descrição
name(name)	Nome da atualização. Todos os campos são necessários. @type - {string}
email(email, password)	Atualize email. Todos os campos são necessários. @type - {string}
password(password, oldPassword)	Atualizar senha. Todos os campos são necessários. @type - {string}

Eventos

• ON: SuccessName no name .
• ON: FailureName na falha name .
• ON: SUCESCESTEM CAIL no sucesso email .
• ON: Falha no correio da falha email .
• ON: SuccessPassword no sucesso password .
• ON: FAILSPORTWORD na falha password .

Exemplo

< 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 />

Cria e valida automaticamente a verificação de email do usuário.

• url da string de tipo para ação create deve estar onde seu aplicativo está hospedado ou localhost .
• Para uma ação update , você não precisa passar nada, o processo é automatizado.

Diretivas

Deixe: ações

Nome	Descrição
create(url)	Criar verificação. url é o que o URL usou para criar o link de verificação enviado à sua caixa de entrada de email. @type - {string}
update(user, secret)	Verificação completa. user e secret são definidos automaticamente por metawrite .

Eventos

• ON: SuccessCreate no create Sucesso.
• ON: FailureCreate na create falhas.
• ON: SOWDCOMPLETE SOBRE complete .
• ON: FailureComplete na falha complete .

Exemplo

< 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

Os componentes de autenticação permitem autenticar uma conta de usuário.

<AuthEmail />

Slots

• carregando
• sucesso
• erro

Diretivas

• Deixe: Autorizar (email, senha)
• Let: Usuário
• Deixe: erro

Eventos

• ON: Sucesso no sucesso authorize .
• ON: Falha na falha authorize .

Exemplo

< 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 />

Propriedades

Nome	Descrição
authProvider	Provedor OAuth2. @type - {string}
success	Sucesso URL. @type - {string}
failure	URL de falha. @type - {string}
Diretivas ####

Deixe: Authorize ()

Exemplo

< 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 />

Diretivas

Deixe: ações

Nome	Descrição
create()	Cria sessão anônima.

Exemplo

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

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

<CreateJWT />

Cria token jwt.

Diretivas

Deixe: ações

Nome	Descrição
create()	Cria token jwt.

Exemplo

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

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

<MagicURL />

Diretivas

Deixe: ações

Nome	Descrição
create(sessionId, email, url)	Cria sessão de URL mágica. O email é necessário, o URL é apontar na string completa da etapa, sessionId não é necessário
complete()	Valida e completa sessão de URL mágica.

Exemplo

< 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 >

Avatares

Os componentes do Avatar visam ajudá -lo a concluir as tarefas diárias relacionadas à sua imagem, ícones e avatares do aplicativo.

<Browser />

Argumentos

• Código - Necessário @type - {string}
• Largura - Opcional @type - {number}
• Altura - Opcional @type - {string}
• Qualidade - Opcional @type - {string}

Diretivas

• Deixe: link de imagem src @type - {URL}

Exemplo

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

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

<CreditCard />

Argumentos

• Código - Necessário @type - {string}
• Largura - Opcional @type - {number}
• Altura - Opcional @type - {string}
• Qualidade - Opcional @type - {string}

Diretivas

• Deixe: link de imagem src @type - {URL}

Exemplo

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

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

<Favicon />

Argumentos

• URL - Necessário @type - {string}

Diretivas

• Deixe: link de imagem src @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 />

Argumentos

• Código - Necessário @type - {string}
• Largura - Opcional @type - {number}
• Altura - Opcional @type - {string}
• Qualidade - Opcional @type - {string}

Diretivas

• Deixe: link de imagem src @type - {URL}

Exemplo

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

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

<Image />

Argumentos

• URL - Necessário @type - {string}
• Largura - Opcional @type - {number}
• Altura - Opcional @type - {number}

Diretivas

• Deixe: link de imagem src @type - {URL}

Exemplo

< 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 />

Argumentos

• Texto - Necessário @type - {string}
• Tamanho - Opcional @type - {optional}
• margem - opcional @type - {number}
• Download - Opcional @type - {boolean}

Diretivas

• Deixe: link de imagem src @type - {URL}

Exemplo

< 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 >

Banco de dados

Os componentes do banco de dados permitem criar coleções estruturadas de documentos, listas de consultas e filtros de documentos e gerenciar um conjunto avançado de permissões de acesso a leitura e gravação.

<Collection />

Argumentos

• Coleção - Necessário @type - {string}

• cache - opcional , por padrão definido como false @type - {boolean}

  Consulta: @type - {object}

• Consultas - Opcional @type - {string[]}

• Limite - Opcional @type - {number}

• Offset - Opcional @type - {number}

• Cursor - Opcional @type - {string}

• Cursordirection - Opcional @type - {string}

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

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

Slots

• carregando
• erro

Diretivas

Deixe: ações

Nome	Descrição
reload()	Recarregar.
create(documentId, data, read, write)	Cria um documento. data - @type - {string} . read / write é opcional @type - {string[]} . documentId é opcional, por padrão, gera @type - {string} .

• Deixe: documentos
• Deixe: erro

Exemplo

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

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

<Document />

Argumentos

• DocumentId - Necessário @type - {string}
• Coleção - Necessário @type - {string}

Slots

• carregando
• erro

Diretivas

Deixe: ações

Nome	Descrição
reload()	Recarregar.
update(data)	Atualiza um documento. data - @type - {object}
remove()	Remove um documento.

• Deixe: documento
• Deixe: erro

Exemplo

< 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 >

Em tempo real

Para obter mais informações sobre o uso de tempo real no AppWrite, consulte a documentação em tempo real.

O Real Time permite que você ouça quaisquer eventos no lado do servidor em tempo real usando o método de inscrição.

Em vez de solicitar novos dados via HTTP, a assinatura receberá novos dados sempre que alterar, qualquer cliente conectado recebe essa atualização em milissegundos por meio de uma conexão WebSocket.

Isso permite criar uma experiência de usuário interativa e responsiva, fornecendo informações de todos os serviços da AppWrite em tempo real.

Argumentos

• canais - string necessária string | string[]

Diretivas

Deixe: carga útil - a carga útil da assinatura conterá as seguintes propriedades.

Deixe: ações

Nome	Descrição
subscribe()	Assinando todas as atualizações relacionadas a um ou mais canais.
unsubscribe()	Se você não deseja mais receber atualizações de uma assinatura, poderá cancelar a inscrição para que seus retornos de chamada não sejam mais chamados.

Exemplo

< 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 >

Armazenar

Os componentes de armazenamento permitem gerenciar seus arquivos de projeto. Você pode fazer upload, visualizar, baixar e consultar todos os seus arquivos de projeto.

<Storage />

Diretivas

Deixe: ações

Nome	Descrição
create(bucketId, fileId, file, read, write)	Carrega um arquivo. fileId é necessário @type - {string} , "unique()" gerará ID exclusivo aleatório, mas você pode usar o Custom. file é @type - {File} e requerido. read / write é @type - {string[]} e opcional

Exemplo

< 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 />

Argumentos

• BucketId - Necessário @type - {string}
• Pesquisar - Opcional @type - {string}
• Limite - Opcional @type - {number}
• Offset - Opcional @type - {number}
• Cursor - Opcional @type - {string}
• Cursordirection - Opcional @type - {string}
• OrderType - Opcional @type - {string} => Write "ASC" ou "DESC"

Slots

• carregando
• erro

Diretivas

Deixe: ações

Nome	Descrição
reload()	Recarregar.

• Deixe: arquivos
• Deixe: erro

Exemplo

< 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 />

Argumentos

• BucketId - é o seu ID do balde @type - {string}
• FileId - é ID do arquivo @type - {string}

Diretivas

Deixe: ações

Nome	Descrição
download()	Downloads arquivo.
view()	Obtenha arquivo para visualização.
preview(width, height, quality, background, output)	Obtenha arquivo para visualização.
update(read, write)	Atualiza um arquivo.
delete()	Exclui um arquivo.

Exemplo

< 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 >

Funções

O Serviço de Funções permite criar um comportamento personalizado que possa ser acionado por quaisquer eventos do sistema AppWrite suportados ou por um cronograma predefinido.

As funções do AppWrite Cloud permitem executar automaticamente o código de back -end em resposta a eventos acionados pelo AppWrite ou configurando -o para ser executado em um cronograma predefinido. Seu código é armazenado de maneira segura em sua instância do AppWrite e é executada em um ambiente isolado.

Você pode aprender mais seguindo o tutorial de funções em nuvem da AppWrite.

<Function />

Diretivas

Deixe: ações

Nome	Descrição
reload()	Recarregar.
create(functionId, data)	Cria execução. functionId é necessário , data podem estar vazios porque opcional . @type {string}
create(functionId, executionId)	Obtenha execução. Ambos os parâmetros são necessários. @type {string}

• Deixe: execuções

Slots

• erro

Exemplo

< 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 >

Localidade

Os componentes da localidade permitem que você personalize seu aplicativo com base na localização de seus usuários.

<Continents />

Diretivas

Deixe: ações

Nome	Descrição
reload()	Recarregar.

• Deixe: continentes

Slots

• carregando
• erro

Exemplo

< 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 />

Argumentos

• UE

Slots

• carregando
• erro

Diretivas

Deixe: ações

Nome	Descrição
reload()	Recarregar.

• Let: países

Exemplo

< 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 />

Slots

• carregando
• erro

Diretivas

Deixe: ações

Nome	Descrição
reload()	Recarregar.

• Deixe: moedas

Exemplo

< 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 />

Slots

• carregando
• erro

Diretivas

Deixe: ações

Nome	Descrição
reload()	Recarregar.

• Deixe: idiomas

Exemplo

< 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 />

Slots

• carregando
• erro

Diretivas

Deixe: ações

Nome	Descrição
reload()	Recarregar.

• Let: Code object

Exemplo

< 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 />

Slots

• carregando
• erro

Diretivas

Deixe: ações

Nome	Descrição
reload()	Recarregar.

• Deixe: códigos

Exemplo

< 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 >

Pilha