Introduction

Our last blog post presented chipIn - an event planning and management app created with Flutter and Appwrite. We emphasized the technologies we're employing, including Flutter and Appwrite. We aim to develop an app with essential features like authentication, event creation and management, and custom theming.

Let's proceed to the next stage: setting up Appwrite for our Flutter application.

What is Appwrite, and why are we using it

I'm a beginner in mobile/app development. As a matter of fact, I had never used a backend technology before until I used Appwrite. As someone new to this field, I prefer working with user-friendly and straightforward technologies that allow me to adjust or adapt easily. Even if I am an experienced developer, I would imagine myself just wanting to focus on building my app rather than spending much of my time setting up backend-related tasks.

Appwrite is a tool that helps you create apps faster and easier. It provides you with features like user accounts, databases, storage, and more, so you don't have to build them from scratch, and this is why we are using Appwrite.

Registering on Appwrite cloud

When I was an absolute beginner using Appwrite, I faced challenges accessing the console, which required setting up Docker on my computer. However, the release of Appwrite Cloud Public Beta resolved these issues. With Appwrite Cloud, I can now just create an account on their website and start using it immediately on any device without the need for setup or Docker. Appwrite Cloud is a fully-managed version, eliminating the hassle of server installation and maintenance.

Step-by-step process on how to register on Appwrite Cloud

1. To start, navigate to the Appwrite Cloud registration page.

2. Fill out the registration form with your name, valid email, and password, or use your GitHub account.

3. After completing the form, click the "Create Account" button.

Congratulations! You've now set up your Appwrite Cloud account.

Creating our first Appwrite project

After creating your account, you will be prompted to create your first project. This is normal for first-time users, so you can start using Appwrite right after creating your account. Here are the simple steps:

1. Put a name for your project (I am going to name it "chipIn Blogpost")

1. Click the "Create" button

2. You will be routed to the Appwrite console

Now we can discuss the Appwrite console, which I mentioned earlier.

Exploring the Appwrite console

Introduction to Appwrite console

The Appwrite Console, also known as the Appwrite Dashboard, serves as the command center for managing your backend services and applications, providing a straightforward and intuitive interface.

Key features of the console and how to navigate through it

The Appwrite Console provides an intuitive and organized interface for managing your backend services. Upon logging in, you'll be greeted with the Projects page, where you can create new projects for different applications. The Auth section allows user management, including adding, blocking/unblocking users, and accessing user data. In the Databases section, you can create and manage databases and collections, define rules, and insert documents. The Functions tab enables the creation of server-side functions for task automation. The Storage tab allows you to manage uploaded files, including viewing, deleting, and previewing user-uploaded files. Finally, the Settings section allows you to configure project settings like security rules and API keys.

With the Appwrite Console, backend service management becomes easy and efficient, providing a comprehensive overview of your app's backend for making necessary changes.

Integrating Appwrite with our Flutter project

Integrating Appwrite with your Flutter application begins by adding Appwrite's Flutter SDK to your project.

To proceed, it is necessary to create a Flutter project in addition to the Appwrite project we already created. The latter pertains to the backend of our application, while the former concerns the front end - or the visual components that users interact with.

Instructions on how to create Flutter Project

If you're new to Flutter, don't worry. Here's a quick guide to creating a new Flutter project:

1. Install Flutter SDK: If you haven't done so already, download and install the Flutter SDK from the Flutter website. This will give you access to the flutter command on your terminal or command prompt.

2. Create a new Flutter Project: After the installation, open your terminal or command prompt and navigate to the directory where you want your project to be located. Then run the following command to create a new Flutter project:

    flutter create chipin
   

3. Navigate into your new project directory: Using the terminal, navigate into the project directory you just created using the cd command:

    cd chipin
   

4. Run the app: With a physical device connected or a virtual device set up, run the app using the following command:

    flutter run
   

   This will start your application in debug mode. You should see the demo app on your device.

Awesome! You've created your first Flutter project. This simple project provides an essential structure for your app and includes a simple demo. We will replace this demo app with ours as we progress through the tutorial.

Instructions on how to integrate Appwrite's Flutter SDK into our app

Appwrite's Flutter SDK allows your app to communicate with Appwrite, a platform that handles user authentication, database management, and file storage. It saves time by providing pre-made building blocks for your app's backend features, so you can focus on creating your app. Think of it as easy-to-use LEGO blocks you can assemble to quickly build your app's backend.

Here are the steps to integrate Appwrite SDK into our Flutter app:

1. Open your project's pubspec.yaml file

2. Under dependencies, add "appwrite" with the version number listed from Appwrite Flutter SDK pub.dev.

3. Copy the other dependencies, as these will be all of the dependencies we will be using:

    dependencies:
      appwrite: ^9.0.0
      carousel_slider: ^4.2.1
      cupertino_icons: ^1.0.2
      flutter:
        sdk: flutter
      flutter_speed_dial: ^7.0.0
      font_awesome_flutter: ^10.4.0
      intl: ^0.18.1
      uuid: ^3.0.7
   

4. Save (Ctrl/Cmd + S) the file

5. In your terminal, run flutter pub get to download the Appwrite Package and update the other dependencies.

How to connect our Flutter app with Appwrite Cloud

After setting up our Appwrite and Flutter project, the next step is to inform our Appwrite project about the existence of our Flutter app.

Connecting your Flutter application with Appwrite Cloud is just a matter of initializing an Appwrite Client and setting it up with your project's details. Below are the exact steps to do just that:

1. Create a folder called appwrite and add appwrite_constants.dart and appwrite_service.dart dart files

   

   • The "appwrite" folder in your Flutter app is a dedicated directory for organizing and storing files related to the Appwrite backend service.

2. Open the appwrite_constants.dart and type in the following code:

    class AppwriteConstants {
      static const apiEndpoint = '';
      static const projectId = '';
    }
   

   • This code defines a class called AppwriteConstants that has two pieces of information called apiEndpoint and projectId. These pieces of information are currently empty, but they are meant to be filled in with specific values that will be used to connect to an Appwrite server.

   • This class can store and access these values throughout your code, making it easier to track and update them if needed.

3. Go to your Appwrite Cloud Console and click on the project you created, then go to the Settings button.

   

   • You need to copy the Project ID and the API Endpoint.

   • To access Appwrite Cloud, you need a Project ID and API Endpoint. Think of it like a building where your app's data is stored and managed. The API Endpoint is the information desk that checks your ID card and guides you to the correct room for your needs. Remember to provide both the Project ID and API Endpoint when making requests to Appwrite Cloud.

4. Place the Project ID and the API Endpoint inside '' of each instance variable, then Save.

   

   • Now that apiEndpoint and projectId constants have values that can be used to connect to an Appwrite server.

5. We are done with appwrite_constants.dart for now. Let's proceed with the appwrite_service.dart. Import the Appwrite SDK. Add this line at the top of your Dart file:

   

6. Copy these lines of code:

   

   • This code sets up a service called AppwriteService that helps our Flutter app connect with the Appwrite backend. It has two constants that store important information about our Appwrite setup.

   • The function getClient()creates a unique client object that can talk to the Appwrite backend. It configures this client with the endpoint and project ID from the constants we defined earlier. This client is like a messenger that handles communication with the Appwrite backend for us. It's designed to keep all the necessary Appwrite-related details neatly organized within our service, making it easier to manage and use throughout our app.

That's pretty much it for now!

Conclusion

To keep up with this blog post, follow this GitHub tag.

Great job! In this blog post, we familiarized ourselves with the Appwrite console and its sections and learned about the advantages of Appwrite Cloud. We registered an account, created our first project, and designed the necessary configurations. Moving to our front end, we established a new Flutter project and integrated the Appwrite Flutter SDK. This has laid the groundwork for our chipIn app.

In the next post, we'll tackle a crucial component - Authentication. We'll utilize Appwrite's system to allow secure user registration and login. Our journey to create a fully-functional event planning and management app has just started. Stay tuned for the next post!

Additional Resources and Support

1. Appwrite's Official Documentation: To understand more about Appwrite's various features, you can visit Appwrite's Official Documentation. Here, you'll find detailed explanations about every feature and how to use them effectively.

2. Flutter's Official Documentation: Visit Flutter's Official Documentation for more details about Flutter and its features, which can help you while creating the Flutter project.

3. Appwrite's Discord Channel: If you face any issues or have any queries regarding Appwrite, Appwrite's Discord Channel is the place to go. You'll find a healthy community ready to assist you.

4. Flutter's Community: If you have questions or face difficulties related to Flutter, you can reach out to Flutter's community. Various channels are available, including a Google group, a subreddit, and a Discord channel.

Remember, there's no need to feel stuck. Appwrite's and Flutter's communities are friendly, informative, and ready to help newcomers to the technology. Happy coding!