Intro

Appwrite is an open-source, self-hosted Backend-as-a-Service that makes app development easier with a suite of SDKs and APIs to accelerate app development. #30DaysOfAppwrite is a month-long event focused on giving developers a walkthrough of all of Appwrite's features, starting from the basics to more advanced features like cloud functions! Alongside we will also be building a full-featured Medium clone to demonstrate how these concepts can be applied when building a real-world app. We also have some exciting prizes for developers who follow along with us!

Your First Request

Over the last few days, we've covered Appwrite's admin console, microservices layout, and installation. It's finally time to start building with Appwrite! Today, we're going to discuss how to get started with web and Flutter applications. Let's begin.

Adding Platforms to your Project

Adding platforms to the project helps us validate requests that come from clients. We validate the origin of the request against the platforms added in the project in the console. Any origin not matching the available platforms will be rejected.

Adding a platform

On the console home page below the usage graph, you can find the list of platforms and the Add Platform button. To add a new platform, tap the Add Platform button and select one of the available options.

Web

To add a web platform, all you need is a Name and Host. Name can be anything you want to name your platform, and the Host can be the domain under which your web project is running. For building and testing web projects locally, the Host can be http://localhost.

Flutter

When adding a Flutter Platform, you have two options: Android and iOS. You can add either Android or iOS or both based on what platforms you're building for. You can also add other platforms like desktop applications for Linux, Windows, or MacOS. You can find the details in our documentation.

Once you've selected Android or iOS, all you need is a name and the application id. Name can be anything you want to name your platform and the Application Id can be found in your project. For Android, it can be found in your Flutter project's android/app/build.gradle file. For iOS, it can be found by opening your iOS app in XCode. By default, it will be the same for both Android and iOS.

For Flutter web, you add the platform as Web as described above.

Other Platforms

Appwrite also supports Android native and iOS native, with even more platforms planned down the road. They won't be the focus of this series of posts, but you can read more about them in our documentation.

Now you've set up your project with platforms, you're ready to make your first requests. Let's look at how we can do that for Web and Flutter.

Making Requests to an Appwrite Server

Though we can make requests to an Appwrite server with direct REST API calls, using SDKs provides an easier and more structured experience. In this series, we'll focus on using Appwrite's SDKs.

Web

Appwrite's Web SDK is very simple to use. You can add it to your project using a package manager like NPM or Yarn. The following command adds the Appwrite Web SDK to your project.

npm install appwrite

Or you can install directly from CDN:

<script src="https://cdn.jsdelivr.net/npm/appwrite@7.0.0"></script>

Once you add the dependency, you can use the Appwrite SDK in your project. In order to make the request, we first need to initialize the SDK with an endpoint and project details as follows:

var appwrite = new Appwrite();

appwrite
    .setEndpoint('http://localhost/v1') // Set your endpoint
    .setProject('<Your Project ID>') // Your Appwrite Project UID
;

You can find your project ID in the settings menu of your Appwrite Dashboard.

Now let's make a request using the SDK. The first parameter taken by appwrite.account.create() is the user ID. We can pass in a custom user ID, or pass in the string 'unique()' to generate a unique ID.

// Register User
appwrite
    .account.create('unique()', 'me@example.com', 'password', 'Jane Doe')
        .then(function (response) {
            console.log(response);
        }, function (error) {
            console.log(error);
        });

More information can be found on our Getting Started for Web guide.

Flutter

Appwrite's Flutter SDK is super easy to get started with. First, you need to add the Appwrite's SDK as a dependency in your pubspec.yaml file:

dependencies:
    appwrite: ^4.0.1 #use the latest version available

Once the dependency is added and pub get appwrite is run, you can import and use the Appwrite SDK in your project. Before making a request, you must first initialize the SDK with the required endpoint and project ID.

import 'package:appwrite/appwrite.dart';

Client client = Client();

client
    .setEndpoint('https://localhost/v1') // Your Appwrite Endpoint
    .setProject('<Your Project ID>') // Your project ID
    .setSelfSigned(status: true) // For self signed certificates, only use for development
;

Now you can make requests and handle responses easily:

// Register User
Account account = Account(client);

Response user = await account
    .create(
        userId: 'unique()',
        email: 'me@appwrite.io',
        password: 'password',
        name: 'My Name'
    );

More information can be found on our Getting Started for Flutter guide.

Credits

We hope you liked this write-up. You can follow #30DaysOfAppwrite on Social Media to keep up with all of our posts. The complete event timeline can be found here

• Discord Server
• Appwrite Homepage
• Appwrite's Github

Feel free to reach out to us on Discord if you would like to learn more about Appwrite, Aliens or Unicorns 🦄. Stay tuned for tomorrow's article! Until then 👋