1
0
Fork 0
mirror of synced 2024-06-14 08:44:49 +12:00
appwrite/docs/sdks/flutter/GETTING_STARTED.md

159 lines
9 KiB
Markdown
Raw Normal View History

2021-03-15 23:41:41 +13:00
## Getting Started
2021-03-10 19:44:28 +13:00
### Add your Flutter Platform
To init your SDK and start interacting with Appwrite services, you need to add a new Flutter 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.
2021-07-06 19:41:03 +12:00
From the options, choose to add a new **Flutter** platform and add your app credentials. Appwrite Flutter SDK currently supports building apps for Android, iOS, Linux, Mac OS, Web and Windows.
2021-03-10 19:44:28 +13:00
If you are building your Flutter application for multiple devices, you have to follow this process for each different device.
### Android
2021-07-06 21:14:05 +12:00
For **Android** first add your app <u>name</u> and <u>package name</u>, Your package name is generally the **applicationId** in your app-level <a href="https://github.com/appwrite/playground-for-flutter/blob/0fdbdff98384fff940ed0b1e08cf14cfe3a2be3e/android/app/build.gradle#L41" target="_blank" rel="noopener">build.gradle</a> file. By registering your new app platform, you are allowing your app to communicate with the Appwrite API.
2021-09-23 03:58:44 +12:00
In order to capture the Appwrite OAuth callback url, the following activity needs to be added inside the `<application>` tag, along side the existing `<activity>` tags in your [AndroidManifest.xml](https://github.com/appwrite/playground-for-flutter/blob/master/android/app/src/main/AndroidManifest.xml). Be sure to replace the **[PROJECT_ID]** string with your actual Appwrite project ID. You can find your Appwrite project ID in your project settings screen in the console.
2021-03-10 19:44:28 +13:00
2021-03-11 17:56:16 +13:00
```xml
2021-09-23 03:58:44 +12:00
<manifest ...>
....
<application ...>
....
<!-- Add this inside the <application> tag, along side the existing <activity> tags -->
2023-03-16 14:50:04 +13:00
<activity android:exported="true" android:name="com.linusu.flutter_web_auth_2.CallbackActivity" >
2022-08-28 16:37:23 +12:00
<intent-filter android:label="flutter_web_auth_2">
2021-03-11 17:56:16 +13:00
<action android:name="android.intent.action.VIEW" />
<category android:name="android.intent.category.DEFAULT" />
<category android:name="android.intent.category.BROWSABLE" />
<data android:scheme="appwrite-callback-[PROJECT_ID]" />
</intent-filter>
</activity>
</application>
2021-03-10 19:44:28 +13:00
</manifest>
```
2021-07-06 21:14:05 +12:00
### iOS
For **iOS** first add your app name and Bundle ID, You can find your Bundle Identifier in the General tab for your app's primary target in Xcode.
The Appwrite SDK uses ASWebAuthenticationSession on iOS 12+ and SFAuthenticationSession on iOS 11 to allow OAuth authentication. You have to change your iOS Deployment Target in Xcode to be iOS >= 11 to be able to build your app on an emulator or a real device.
1. In Xcode, open Runner.xcworkspace in your app's ios folder.
2. To view your app's settings, select the Runner project in the Xcode project navigator. Then, in the main view sidebar, select the Runner target.
3. Select the General tab.
4. In Deployment Info, 'Target' select iOS 11.0
### Linux
For **Linux** add your app <u>name</u> and <u>package name</u>, Your package name is generally the **name** in your <a href="https://github.com/appwrite/playground-for-flutter/blob/0fdbdff98384fff940ed0b1e08cf14cfe3a2be3e/pubspec.yaml#L1" target="_blank" rel="noopener">pubspec.yaml<a> file. If you cannot find the correct package name, run the application in linux, and make any request with proper exception handling, you should get the application ID needed to add in the received error message.
2021-07-06 21:14:05 +12:00
### Mac OS
For **Mac OS** add your app name and Bundle ID, You can find your Bundle Identifier in the General tab for your app's primary target in Xcode.
2023-05-21 13:42:20 +12:00
The Appwrite SDK uses ASWebAuthenticationSession on macOS 10.15+ to allow OAuth authentication. You have to change your macOS Deployment Target in Xcode to be macOS >= 10.15 to be able to build your app for macOS.
2021-03-16 22:18:16 +13:00
### Web
2021-03-15 23:41:41 +13:00
Appwrite 0.7, and the Appwrite Flutter SDK 0.3.0 have added support for Flutter Web. To build web apps that integrate with Appwrite successfully, all you have to do is add a web platform on your Appwrite project's dashboard and list the domain your website will use to allow communication to the Appwrite API.
2021-03-10 19:44:28 +13:00
2021-12-16 22:52:59 +13:00
For web in order to capture the OAuth2 callback URL and send it to the application using JavaScript `postMessage()`, you need to create an html file inside `./web` folder of your Flutter project. For example `auth.html` with the following content.
```html
<!DOCTYPE html>
<title>Authentication complete</title>
<p>Authentication is complete. If this does not happen automatically, please
close the window.
<script>
window.opener.postMessage({
2022-12-28 10:30:49 +13:00
'flutter-web-auth-2': window.location.href
2021-12-16 22:52:59 +13:00
}, window.location.origin);
window.close();
</script>
```
Redirection URL passed to the authentication service must be the same as the URL on which the application is running (schema, host, port if necessary) and the path must point to created HTML file, /auth.html in this case. The callbackUrlScheme parameter of the authenticate() method does not take into account, so it is possible to use a schema for native platforms in the code.
2021-03-16 22:18:16 +13:00
#### Flutter Web Cross-Domain Communication & Cookies
2021-03-15 23:41:41 +13:00
While running Flutter Web, make sure your Appwrite server and your Flutter client are using the same top-level domain and the same protocol (HTTP or HTTPS) to communicate. When trying to communicate between different domains or protocols, you may receive HTTP status error 401 because some modern browsers block cross-site or insecure cookies for enhanced privacy. In production, Appwrite allows you set multiple [custom-domains](https://appwrite.io/docs/custom-domains) for each project.
2021-03-10 19:44:28 +13:00
2021-07-06 21:14:05 +12:00
### Windows
For **Windows** add your app <u>name</u> and <u>package name</u>, Your package name is generally the **name** in your <a href="https://github.com/appwrite/playground-for-flutter/blob/0fdbdff98384fff940ed0b1e08cf14cfe3a2be3e/pubspec.yaml#L1" target="_blank" rel="noopener">pubspec.yaml</a> file. If you cannot find the correct package name, run the application in windows, and make any request with proper exception handling, you should get the application id needed to add in the received error message.
2021-03-10 19:44:28 +13:00
### Init your SDK
2021-06-10 03:26:08 +12:00
<p>Initialize your SDK with your Appwrite server API endpoint and project ID, which can be found in your project settings page.
2021-03-10 19:44:28 +13:00
2021-03-15 23:41:41 +13:00
```dart
2021-03-10 19:44:28 +13:00
import 'package:appwrite/appwrite.dart';
void main() {
Client client = Client();
2021-03-10 19:44:28 +13:00
client
.setEndpoint('https://localhost/v1') // Your Appwrite Endpoint
.setProject('5e8cf4f46b5e8') // Your project ID
.setSelfSigned() // Use only on dev mode with a self-signed SSL cert
;
}
2021-03-10 19:44:28 +13:00
```
2021-03-15 23:41:41 +13:00
Before starting to send any API calls to your new Appwrite instance, make sure your Android or iOS emulators has network access to the Appwrite server hostname or IP address.
2021-03-15 23:44:13 +13:00
When trying to connect to Appwrite from an emulator or a mobile device, localhost is the hostname for the device or emulator and not your local Appwrite instance. You should replace localhost with your private IP as the Appwrite endpoint's hostname. You can also use a service like [ngrok](https://ngrok.com/) to proxy the Appwrite API.
2021-03-10 19:44:28 +13:00
### Make Your First Request
2021-06-10 03:26:08 +12:00
<p>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-10 19:44:28 +13:00
2021-03-15 23:41:41 +13:00
```dart
2021-03-10 19:44:28 +13:00
// Register User
Account account = Account(client);
final user = await account
2021-03-16 22:18:16 +13:00
.create(
userId: ID.unique(), email: "email@example.com", password: "password", name: "Walter O'Brien"
2021-03-16 22:18:16 +13:00
);
2021-03-10 19:44:28 +13:00
```
### Full Example
2021-03-15 23:41:41 +13:00
```dart
2021-03-10 19:44:28 +13:00
import 'package:appwrite/appwrite.dart';
void main() {
Client client = Client();
2021-03-10 19:44:28 +13:00
client
.setEndpoint('https://localhost/v1') // Your Appwrite Endpoint
.setProject('5e8cf4f46b5e8') // Your project ID
.setSelfSigned() // Use only on dev mode with a self-signed SSL cert
;
2021-03-10 19:44:28 +13:00
// Register User
Account account = Account(client);
final user = await account
.create(
userId: ID.unique(), email: "email@example.com", password: "password", name: "Walter O'Brien"
);
}
2021-03-10 19:44:28 +13:00
```
2021-03-26 21:18:49 +13:00
### Error Handling
The Appwrite Flutter SDK raises `AppwriteException` object with `message`, `type`, `code` and `response` properties. You can handle any errors by catching `AppwriteException` and present the `message` to the user or handle it yourself based on the provided error information. Below is an example.
2021-03-26 21:18:49 +13:00
```dart
Account account = Account(client);
2021-03-26 21:18:49 +13:00
try {
final user = await account.create(userId: ID.unique(), email: "email@example.com", password: "password", name: "Walter O'Brien");
print(user.toMap());
2021-03-26 21:18:49 +13:00
} on AppwriteException catch(e) {
//show message to user or do other operation based on error as required
print(e.message);
}
```
2021-03-11 17:56:16 +13:00
### Learn more
2021-07-07 22:25:49 +12:00
You can use the following resources to learn more and get help
2021-03-15 23:41:41 +13:00
- 🚀 [Getting Started Tutorial](https://appwrite.io/docs/getting-started-for-flutter)
- 📜 [Appwrite Docs](https://appwrite.io/docs)
- 💬 [Discord Community](https://appwrite.io/discord)
- 🚂 [Appwrite Flutter Playground](https://github.com/appwrite/playground-for-flutter)