appwrite/docs/sdks/web/GETTING_STARTED.md

144 lines
4.5 KiB
Markdown
Raw Normal View History

2021-03-23 11:51:21 +00:00
## Getting Started
2021-03-23 11:51:56 +00:00
### Add your Web Platform
2025-07-26 05:47:43 +00:00
2021-03-23 11:51:21 +00:00
For you to init your SDK and interact with Appwrite services you need to add a web platform to your project. To add a new platform, go to your Appwrite console, choose the project you created in the step before and click the 'Add Platform' button.
From the options, choose to add a **Web** platform and add your client app hostname. By adding your hostname to your project platform you are allowing cross-domain communication between your project and the Appwrite API.
### Init your SDK
2025-07-26 05:47:43 +00:00
2021-06-09 15:26:08 +00:00
Initialize your SDK with your Appwrite server API endpoint and project ID which can be found in your project settings page.
2021-03-23 11:51:21 +00:00
```js
// Init your Web SDK
2022-06-21 14:48:50 +00:00
const client = new Client();
2021-03-23 11:51:21 +00:00
2022-06-21 14:48:50 +00:00
client
2021-03-23 11:51:21 +00:00
.setEndpoint('http://localhost/v1') // Your Appwrite Endpoint
.setProject('455x34dfkj') // Your project ID
;
```
### Make Your First Request
2025-07-26 05:47:43 +00:00
2021-06-09 15:26:08 +00:00
Once your SDK object is set, access any of the Appwrite services and choose any request to send. Full documentation for any service method you would like to use can be found in your SDK documentation or in the [API References](https://appwrite.io/docs) section.
2021-03-23 11:51:21 +00:00
```js
2022-06-21 14:48:50 +00:00
const account = new Account(client);
2021-03-23 11:51:21 +00:00
// Register User
account.create(ID.unique(), "email@example.com", "password", "Walter O'Brien")
2021-05-20 12:40:41 +00:00
.then(function (response) {
console.log(response);
}, function (error) {
console.log(error);
});
2021-03-23 11:51:21 +00:00
```
### Full Example
2025-07-26 05:54:19 +00:00
2021-03-23 11:51:21 +00:00
```js
// Init your Web SDK
2022-06-21 14:48:50 +00:00
const client = new Client();
2021-03-23 11:51:21 +00:00
2022-06-21 14:48:50 +00:00
client
2021-03-23 11:51:21 +00:00
.setEndpoint('http://localhost/v1') // Your Appwrite Endpoint
.setProject('455x34dfkj')
;
2022-06-21 14:48:50 +00:00
const account = new Account(client);
2021-03-23 11:51:21 +00:00
// Register User
account.create(ID.unique(), "email@example.com", "password", "Walter O'Brien")
2021-05-20 12:40:41 +00:00
.then(function (response) {
console.log(response);
}, function (error) {
console.log(error);
});
2021-03-23 11:51:21 +00:00
```
2025-07-26 05:47:43 +00:00
### Type Safety with Models
The Appwrite Web SDK provides type safety when working with database documents through generic methods. Methods like `listDocuments`, `getDocument`, and others accept a generic type parameter that allows you to specify your custom model type for full type safety.
**TypeScript:**
```typescript
interface Book {
name: string;
author: string;
releaseYear?: string;
category?: string;
genre?: string[];
isCheckedOut: boolean;
}
const databases = new Databases(client);
try {
const documents = await databases.listDocuments<Book>(
'your-database-id',
'your-collection-id'
);
documents.documents.forEach(book => {
console.log(`Book: ${book.name} by ${book.author}`); // Now you have full type safety
});
} catch (error) {
console.error('Appwrite error:', error);
}
```
**JavaScript (with JSDoc for type hints):**
```javascript
/**
* @typedef {Object} Book
* @property {string} name
* @property {string} author
* @property {string} [releaseYear]
* @property {string} [category]
* @property {string[]} [genre]
* @property {boolean} isCheckedOut
*/
const databases = new Databases(client);
try {
/** @type {Models.DocumentList<Book>} */
const documents = await databases.listDocuments(
'your-database-id',
'your-collection-id'
);
documents.documents.forEach(book => {
console.log(`Book: ${book.name} by ${book.author}`); // Type hints available in IDE
});
} catch (error) {
console.error('Appwrite error:', error);
}
```
**Tip**: You can use the `appwrite types` command to automatically generate TypeScript interfaces based on your Appwrite database schema. Learn more about [type generation](https://appwrite.io/docs/products/databases/type-generation).
### Error Handling
The Appwrite Web SDK raises an `AppwriteException` object with `message`, `code` and `response` properties. You can handle any errors by catching the exception and present the `message` to the user or handle it yourself based on the provided error information. Below is an example.
```javascript
try {
const user = await account.create(ID.unique(), "email@example.com", "password", "Walter O'Brien");
console.log('User created:', user);
} catch (error) {
console.error('Appwrite error:', error.message);
}
```
2021-03-23 11:51:21 +00:00
### Learn more
2025-07-26 05:47:43 +00:00
2021-07-07 10:25:49 +00:00
You can use the following resources to learn more and get help
2023-04-12 18:43:20 +00:00
- 🚀 [Getting Started Tutorial](https://appwrite.io/docs/getting-started-for-web)
2021-03-23 11:51:21 +00:00
- 📜 [Appwrite Docs](https://appwrite.io/docs)
- 💬 [Discord Community](https://appwrite.io/discord)
2023-04-12 18:43:20 +00:00
- 🚂 [Appwrite Web Playground](https://github.com/appwrite/playground-for-web)