Descarga metawrite - Descarga del código fuente metawrite

Metawrite

Apoyarnos

Obtenga créditos gratuitos de $ 100 en Digitalocean:

Únete a nuestra discordia:

Metawrite es AppWritite SDK con componentes listos para Svelte / SvelteKit

Este paquete se mantiene por incremento.

Nota: Versiones xxn significa algunos cambios menores en la documentación del paquete o las tipificaciones.
Las versiones xnx pueden incluir algunos cambios menores de ruptura. Ver Notas de la versión.
Las versiones nxx podrían incluir algunos cambios importantes de ruptura. Ver Notas de la versión.

Información importante

El paquete está funcionando completamente y compatible con AppWrite Server 0.12, Web SDK 6 y Sveltekit. Pero las personas se enfrentan actualmente a las dificultades con npm install metawrite . Tenemos una plantilla Sveltekit lista y configurada que usa Metawrite y también podría usarse como imagen Docker como se describe aquí.

Considere usar la plantilla, esto es temporal

Documentación

Instalación

Usando NPM:

npm install metawrite

Usando hilo:

yarn add metawrite

Tabla de contenido

Apoyarnos
- Información importante
Documentación - Instalación
Tabla de contenido
Uso
- Inicializar
  - Propiedades
- Crear usuario
  - Directivas
    - Argumentos
  - Eventos
    - Argumentos
    - Argumentos
- Iniciar sesión por correo electrónico
  - Directivas
    - Argumentos
  - Eventos
    - Argumentos
    - Argumentos
- Iniciar sesión a través de OAuth2
  - Propiedades
  - Directivas
- Get User
  - Directivas
- Obtener colección
  - Propiedades
  - Directivas
    - Argumentos
- Obtener documento
  - Propiedades
  - Directivas
    - Argumentos
  - Eventos
API
- Cuenta
  - <User />
    - Ranura
    - Directivas
    - Eventos
    - Ejemplo
  - <Create />
    - Directivas
    - Eventos
    - Ejemplo
  - <Preferences />
    - Ranura
    - Directivas
    - Eventos
    - Ejemplo
  - <RecoverPassword />
    - Directivas
    - Eventos
    - Ejemplo
  - <Update />
    - Directivas
    - Eventos
    - Ejemplo
  - <Verification />
    - Directivas
    - Eventos
    - Ejemplo
- Auténtico
  - <AuthEmail />
    - Ranura
    - Directivas
    - Eventos
    - Ejemplo
  - <AuthOAuth2 />
    - Propiedades
    - Ejemplo
  - <CreateAnonymousSession />
    - Directivas
    - Ejemplo
  - <CreateJWT />
    - Directivas
    - Ejemplo
  - <MagicURL />
    - Directivas
    - Ejemplo
- Avatares
  - <Browser />
    - Argumentos
    - Directivas
    - Ejemplo
  - <CreditCard />
    - Argumentos
    - Directivas
    - Ejemplo
  - <Favicon />
    - Argumentos
    - Directivas
  - <Flag />
    - Argumentos
    - Directivas
    - Ejemplo
  - <Image />
    - Argumentos
    - Directivas
    - Ejemplo
  - <QR />
    - Argumentos
    - Directivas
    - Ejemplo
- Base de datos
  - <Collection />
    - Argumentos
    - Ranura
    - Directivas
    - Ejemplo
  - <Document />
    - Argumentos
    - Ranura
    - Directivas
    - Ejemplo
- RealTime - Argumentos - Directivas - Ejemplo
- Almacenamiento
  - <Storage />
    - Directivas
    - Ejemplo
  - <FileList />
    - Argumentos
    - Ranura
    - Directivas
    - Ejemplo
  - <File />
    - Argumentos
    - Directivas
    - Ejemplo
- Funciones
  - <Function />
    - Directivas
    - Ranura
    - Ejemplo
- Lugar
  - <Continents />
    - Directivas
    - Ranura
    - Ejemplo
  - <Countries />
    - Argumentos
    - Ranura
    - Directivas
    - Ejemplo
  - <Currencies />
    - Ranura
    - Directivas
    - Ejemplo
  - <Languages />
    - Ranura
    - Directivas
    - Ejemplo
  - <Locale />
    - Ranura
    - Directivas
    - Ejemplo
  - <PhoneCodes />
    - Ranura
    - Directivas
    - Ejemplo
Pila

Uso

Necesita una instancia en ejecución de AppWrite para usar esta biblioteca. Vaya a https://appwrite.io/docs/installation para obtener más instrucciones.

Ejemplo de psuedo

Manejar múltiples niveles de datos relacionales asíncronos (y sus estados de carga y respaldo) completamente desde el marcado esbelto.

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

Debe inicializarse y envolver cada componente metawrite .

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

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

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

Propiedades

Nombre	Descripción
`endpoint`	Su punto final de AppWrite. `@type - {string}`
`project`	Su identificación de proyecto. `@type - {string}`
`locale`	Opcional el local de usuarios. `@type - {string}`
`realtime`	Opcional Establecer punto final personalizado en tiempo real. Por defecto, lo mismo que `endpoint` . `@type - {string}`

Crear usuario

Registra una nueva cuenta.

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

Directivas

Let: object Acciones

Objeto con función.

Argumentos

Nombre	Descripción
`create(email, password, name)`	Registra un nuevo usuario. `@type - {string}`

Eventos

en: éxito

Desencadenantes en el registro exitoso.

Argumentos

Nombre	Descripción
`response`	Respuesta

On: falla

Desencadenantes en el registro fallido.

Argumentos

Nombre	Descripción
`response`	Respuesta

Iniciar sesión por correo electrónico

Inicie sesión por correo electrónico y contraseña.

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

Directivas

Dejar: autorizar function

Inicia el inicio de sesión.

Argumentos

Nombre	Descripción
`email`	Correo electrónico. `@type - {string}`
`password`	Contraseña. `@type - {string}`

Eventos

en: éxito

Desencadena el inicio de sesión exitoso.

Argumentos

Nombre	Descripción
`email`	Correo electrónico. `@type - {string}`

On: falla

Desencadenantes en el inicio de sesión fallido.

Argumentos

Nombre	Descripción
`error`	Objeto de error.

Iniciar sesión a través de OAuth2

Iniciar sesión a través de un proveedor 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 >

Propiedades

Nombre	Descripción
`authProvider`	Proveedor OAUTH2. `@type - {string}`
`success`	URL de éxito. `@type - {string}`
`failure`	URL de falla. `@type - {string}`

Directivas

Dejar: autorizar function

Get User

Solicita al usuario actual para verificar si se registra.

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

Directivas

Let: object de usuario

Actualmente registra los datos del usuario.

Obtener colección

Obtenga una lista de todos los documentos de una colección.

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

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

Propiedades

Nombre	Descripción
`collectionId`	Colección ID única. `@type - {string}`
adicional	Lo mismo que aquí

Directivas

LET: array de documentos

Variedad de documentos.

Let: object Acciones

Objeto con función.

Argumentos

Nombre	Descripción
`reload()`	Recolección de reincidencia.
`create(data, read, write)`	Cree un nuevo documento en la colección. `read` / `write` es el usuario opcional y actual de forma predeterminada `@type - {string[]}` . `data` son `@type - {string}`

Obtener documento

Obtenga un documento. Si pasa la propiedad document con datos, no habrá datos solicitados.

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

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

Propiedades

Nombre	Descripción
`documentId`	Documento de identificación única. `@type - {string}`
`collectionId`	Colección ID única. `@type - {string}`
o
`document`	Documento aprobado de `<Collection />`

Directivas

Let: Documentar object

Un objeto JSON con los datos del documento.

Let: object Acciones

Objeto con función.

Argumentos

Nombre	Descripción
`update(data)`	Actualizar el documento. `data` son `@type - {string}`
`remove()`	Elimina el documento.
`reload()`	Re-hetched documento.

Eventos

En: Cambiar

Dispara en la actualización o elimina el inicio de sesión.

API

Cuenta

Los componentes de la cuenta le permiten administrar una cuenta de usuario.

`<User />`

Ranura

cargando
error

Directivas

Let: Acciones

Nombre	Descripción
`reload()`	Recargar.
`logout()`	Sesión actual de sesión de sesión.
`logoutAll()`	INICIO DE TODAS LAS SESIÓN.
`logoutFrom(session)`	INICIO DEL SESIÓN ESPERO. `session` es `@type - {string}`

Let: object de usuario
Let: Error

Eventos

ON: éxito en el éxito de los usuarios de éxito.
ON: Falla en la falla del usuario de la búsqueda.
On: Successlogout en el éxito logout .
ON: FailUrLoGout en la falla logout .
On: SuccesslogoutFrom en el logoutFrom de éxito.
ON: FailUrLoGoutFrom en el logoutFrom la falla.
On: Successlogoutall en el éxito logoutAll .
ON: FaileRElagoutall en el fracaso logoutAll .

Ejemplo

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

Directivas

Let: Acciones

Nombre	Descripción
`create(email, password, name)`	Crea un usuario. Se requieren `email` y `password` - `@type - {string}` . `name` es opcional - `@type - {string}`

Eventos

ON: éxito en create éxito.
ON: FALLA en create falla.

Ejemplo

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

Ranura

cargando
error

Directivas

Let: Acciones

Nombre	Descripción
`reload()`	Recarga las preferencias.
`update(prefs)`	Actualizar preferencias. `prefs` - `@type - {object}`

Eventos

On: éxito en el init y reload el éxito.
ON: FALLA EN LA FALLA DE INIT Y reload .
ON: SuccessUpdate sobre el éxito update .
ON: failsUpdate en la falla update .

Ejemplo

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

Directivas

Let: Acciones

Nombre	Descripción
`recover(email, url)`	Recuperar contraseña. Se requiere `email` y `url` y `@type - {string}` . `url` es su página donde manejará `secret` con una función `complete` .
`complete(user, secret, password, passwordAgain)`	Complete la recuperación de la contraseña. `user` y `secret` están configurados automáticamente por `metawrite` , por lo que no tiene que configurarlos. Se requieren `password` y `passwordAgain` - `@type - {string}` .

Eventos

On: SuccessCover en init y reload el éxito.
ON: FailerReCover en init y reload falla.
ON: SuccessComplete on update éxito.
ON: FailureComplete en la falla update .

Ejemplo

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

Directivas

Let: Acciones

Nombre	Descripción
`name(name)`	Actualizar el nombre. Se requieren todos los campos. `@type - {string}`
`email(email, password)`	Actualizar correo electrónico. Se requieren todos los campos. `@type - {string}`
`password(password, oldPassword)`	Actualizar contraseña. Se requieren todos los campos. `@type - {string}`

Eventos

On: SuccessName on name éxito.
ON: FailurEname en el name .
ON: SuccessEmail sobre el éxito email .
En: FailsEmail en la falla email .
ON: SuccessPassword sobre el éxito password .
ON: FailsPassword en la falla password .

Ejemplo

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

Crea y valida automáticamente la verificación de correo electrónico del usuario.

url de Type String for Action create debe ser donde se aloja su aplicación o localhost .
Para la acción update no necesita pasar nada, el proceso está automatizado.

Directivas

Let: Acciones

Nombre	Descripción
`create(url)`	Crear verificación. `url` es lo que URL usó para crear un enlace de verificación enviado a su bandeja de entrada de correo electrónico. `@type - {string}`
`update(user, secret)`	Verificación completa. `user` y `secret` se establecen automáticamente por `metawrite` .

Eventos

ON: SuccessCreate en create éxito.
ON: FailUrecRea en create falla.
ON: SuccessComplete sobre el éxito complete .
ON: FailureComplete en una falla complete .

Ejemplo

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

Auténtico

Los componentes de autenticación le permiten autenticar una cuenta de usuario.

`<AuthEmail />`

Ranura

cargando
éxito
error

Directivas

Dejar: autorizar (correo electrónico, contraseña)
Let: usuario
Let: Error

Eventos

On: éxito en authorize el éxito.
ON: FALLA EN FALLA authorize .

Ejemplo

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

Propiedades

Nombre	Descripción
`authProvider`	Proveedor OAUTH2. `@type - {string}`
`success`	URL de éxito. `@type - {string}`
`failure`	URL de falla. `@type - {string}`
#### Directivas

Let: autorizar ()

Ejemplo

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

Directivas

Let: Acciones

Nombre	Descripción
`create()`	Crea sesión anónima.

Ejemplo

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

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

`<CreateJWT />`

Crea token JWT.

Directivas

Let: Acciones

Nombre	Descripción
`create()`	Crea token JWT.

Ejemplo

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

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

`<MagicURL />`

Directivas

Let: Acciones

Nombre	Descripción
`create(sessionId, email, url)`	Crea una sesión de URL mágica. Se requiere un correo electrónico, la URL es apuntar en `string` de paso completa, no se requiere `sessionId`
`complete()`	Valida y completa la sesión de URL mágica.

Ejemplo

< 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

Los componentes de Avatar tienen como objetivo ayudarlo a completar tareas cotidianas relacionadas con la imagen, los iconos y los avatares de su aplicación.

`<Browser />`

Argumentos

Código - Requerido @type - {string}
Ancho - Opcional @type - {number}
Altura - Opcional @type - {string}
Calidad - Opcional @type - {string}

Directivas

Let: Src Image Link @type - {URL}

Ejemplo

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

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

`<CreditCard />`

Argumentos

Código - Requerido @type - {string}
Ancho - Opcional @type - {number}
Altura - Opcional @type - {string}
Calidad - Opcional @type - {string}

Directivas

Let: Src Image Link @type - {URL}

Ejemplo

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

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

`<Favicon />`

Argumentos

URL - Requerido @type - {string}

Directivas

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

Argumentos

Código - Requerido @type - {string}
Ancho - Opcional @type - {number}
Altura - Opcional @type - {string}
Calidad - Opcional @type - {string}

Directivas

Let: Src Image Link @type - {URL}

Ejemplo

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

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

`<Image />`

Argumentos

URL - Requerido @type - {string}
Ancho - Opcional @type - {number}
Altura - Opcional @type - {number}

Directivas

Let: Src Image Link @type - {URL}

Ejemplo

< 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 - Requerido @type - {string}
tamaño - opcional @type - {optional}
Margen - Opcional @type - {number}
Descargar - Opcional @type - {boolean}

Directivas

Let: Src Image Link @type - {URL}

Ejemplo

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

Base de datos

Los componentes de la base de datos le permiten crear colecciones estructuradas de documentos, consultar y filtrar listas de documentos, y administrar un conjunto avanzado de permisos de lectura y acceso de escritura.

`<Collection />`

Argumentos

CollectionId - requerido @type - {string}
Cache - Opcional , por defecto, configurado en false @type - {boolean}
consulta: @type - {object}
Consultas - Opcional @type - {string[]}
Límite - Opcional @type - {number}
Offset - Opcional @type - {number}
cursor - opcional @type - {string}
cursordirection - opcional @type - {string}
OrderAttributes - Opcional @type - {string[]}
OrderTypes - Opcional @type - {string[]}

Ranura

cargando
error

Directivas

Let: Acciones

Nombre	Descripción
`reload()`	Recargar.
`create(documentId, data, read, write)`	Crea un documento. `data` - `@type - {string}` . `read` / `write` es opcional `@type - {string[]}` . `documentId` es opcional, de forma predeterminada genera un único `@type - {string}` .

Let: Documentos
Let: Error

Ejemplo

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

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

`<Document />`

Argumentos

documentId - requerido @type - {string}
CollectionId - requerido @type - {string}

Ranura

cargando
error

Directivas

Let: Acciones

Nombre	Descripción
`reload()`	Recargar.
`update(data)`	Actualiza un documento. `data` - `@type - {object}`
`remove()`	Elimina un documento.

Let: Documento
Let: Error

Ejemplo

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

En tiempo real

Para obtener más información sobre el uso de tiempo real en AppWrite, consulte la documentación en tiempo real.

RealTime le permite escuchar cualquier evento en el lado del servidor en tiempo real utilizando el método de suscripción.

En lugar de solicitar nuevos datos a través de HTTP, la suscripción recibirá nuevos datos cada vez que cambie, cualquier cliente conectado recibe esa actualización dentro de milisegundos a través de una conexión WebSocket.

Esto le permite crear una experiencia de usuario interactiva y receptiva al proporcionar información de todos los servicios de AppWrite en tiempo real.

Argumentos

canales - cadena requerida string | string[]

Directivas

Sea: carga útil : la carga útil de la suscripción contendrá las siguientes propiedades.

Let: Acciones

Nombre	Descripción
`subscribe()`	Suscribirse a todas las actualizaciones relacionadas con uno o más canales.
`unsubscribe()`	Si ya no desea recibir actualizaciones de una suscripción, puede darse de baja para que ya no se llamen sus devoluciones de llamada.

Ejemplo

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

Almacenamiento

Los componentes de almacenamiento le permiten administrar los archivos de su proyecto. Puede cargar, ver, descargar y consultar todos los archivos de su proyecto.

`<Storage />`

Directivas

Let: Acciones

Nombre	Descripción
`create(bucketId, fileId, file, read, write)`	Sube un archivo. Se requiere `fileId` `@type - {string}` , `"unique()"` generará una identificación única aleatoria, pero puede usar personalizado. `file` es `@type - {File}` y requerido. `read` / `write` es `@type - {string[]}` y opcional

Ejemplo

< 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 - requerido @type - {string}
Buscar - Opcional @type - {string}
Límite - Opcional @type - {number}
Offset - Opcional @type - {number}
cursor - opcional @type - {string}
cursordirection - opcional @type - {string}
OrderType - Opcional @type - {string} => Write "ASC" o "DESC"

Ranura

cargando
error

Directivas

Let: Acciones

Nombre	Descripción
`reload()`	Recargar.

Let: archivos
Let: Error

Ejemplo

< 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 - Es su ID de cubo @type - {string}
FileID - es ID de archivo @type - {string}

Directivas

Let: Acciones

Nombre	Descripción
`download()`	Archivo de descargas.
`view()`	Obtenga el archivo para la vista.
`preview(width, height, quality, background, output)`	Obtenga el archivo para la vista previa.
`update(read, write)`	Actualiza un archivo.
`delete()`	Elimina un archivo.

Ejemplo

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

Funciones

El servicio de funciones le permite crear un comportamiento personalizado que puede ser activado por cualquier evento del sistema AppWrite compatible o por un horario predefinido.

AppWrite Cloud Functions le permite ejecutar automáticamente el código de backend en respuesta a los eventos activados por AppWrite o configurarlo para ser ejecutado en un horario predefinido. Su código se almacena de manera segura en su instancia de APPWrite y se ejecuta en un entorno aislado.

Puede obtener más información siguiendo el tutorial de funciones en la nube de AppWrite.

`<Function />`

Directivas

Let: Acciones

Nombre	Descripción
`reload()`	Recargar.
`create(functionId, data)`	Crea ejecución. Se requiere `functionId` , `data` podrían ser una cadena vacía porque opcional . `@type {string}`
`create(functionId, executionId)`	Obtener ejecución. Se requieren ambos parámetros. `@type {string}`

Let: Ejecuciones

Ranura

error

Ejemplo

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

Lugar

Los componentes locales le permiten personalizar su aplicación en función de la ubicación de sus usuarios.

`<Continents />`

Directivas

Let: Acciones

Nombre	Descripción
`reload()`	Recargar.

Let: Continentes

Ranura

cargando
error

Ejemplo

< 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

Ranura

cargando
error

Directivas

Let: Acciones

Nombre	Descripción
`reload()`	Recargar.

Let: países

Ejemplo

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

Ranura

cargando
error

Directivas

Let: Acciones

Nombre	Descripción
`reload()`	Recargar.

Let: monedas

Ejemplo

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

Ranura

cargando
error

Directivas

Let: Acciones

Nombre	Descripción
`reload()`	Recargar.

Deja: idiomas

Ejemplo

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

Ranura

cargando
error

Directivas

Let: Acciones

Nombre	Descripción
`reload()`	Recargar.

Let: object de código

Ejemplo

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

Ranura

cargando
error

Directivas

Let: Acciones

Nombre	Descripción
`reload()`	Recargar.

Let: códigos

Ejemplo

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

Pila

Expandir