EasyApp

App-side Integration with Supabase Services

Learn how the EasyAppSwiftUI project integrates Supabase services

EasyApp uses Supabase as its backend/database service. Supabase is an open-source PostgreSQL database that includes user authentication, database, real-time data synchronization, permission management, data analysis, and many other powerful features.

You don't need to pay for servers or databases, nor worry about server maintenance issues. The free tier is sufficient for your initial use. Even if you exceed the free tier, you can choose to pay for usage. The cost is not very expensive.

supabase

Next, follow me step by step to integrate Supabase services. It's very easy.

Create Your Supabase Project

Register a Supabase Account

If you don't have a Supabase account, you need to register one first. Registration link

After registration, you need to create an organization. If you already have an organization, you can skip the organization creation step and directly create a project.

Create Organization

addOrganization

Enter the organization name, select Personal for Type, and choose Free for Plan. Click the Create Organization button. The example is shown below.

createOrganization

Create Project

After creating the organization, click into the organization and you need to create a project. The example is shown below. createProject

Since I already have an organization, I'll add a new project to the existing organization as an example: createProject2

Enter the project name, create a database password (please save it securely!), select a region, and then click the "Create new project" button. Wait for a while until the project is created.

The database password is very important, please save it securely!

createProject3

Configure Supabase URL and API Key

Step 1: Get Supabase URL and API Key

  • Get Supabase URL. Click the "Connect" button in the top navigation bar. In the popup, select Mobile Framework, select Swift from Framework. Copy supabaseURL.

connnect

copySupabaseUrl

  • Get Supabase API key. Click the "Project Settings" button in the sidebar, click the "API Keys" button. Click the "Copy" button.

copyAKey

Step 2: Configure Supabase URL and API Key in the EasyAppSwiftUI/Constants/Constants.swift file

Forgot? No problem, let's review again.

Paste the URL and API key we just obtained into the EasyAppSwiftUI/Constants/Constants.swift file.


	enum Supabase {

		#if DEBUG
			/// Development supabase url
			static let url = "http://192.168.124.134:54321"
			/// The anon key
			static let key = "your_local_anon_key"
		#else
			/// Production supabase url
			/// WARNING: Replace with your production supabase url, only test environment
			static let url = "your_production_supabase_url"
			/// The anon key
			/// WARNING: Replace with your production supabase anon key, only test environment
			static let key = "your_production_supabase_anon_key"
		#endif
	}

Here we can see there is environment judgment, #if DEBUG means development environment, #else means production environment.

For better understanding, you should replace the content in both #if DEBUG and #else here. That is:

		#if DEBUG
			static let url = "your_production_supabase_url"
			static let key = "your_production_supabase_anon_key"
		#else
			static let url = "your_production_supabase_url"
			static let key = "your_production_supabase_anon_key"
		#endif

Replace all with your Supabase online url and api key.

Step 3: Deploy Supabase Backend Service

At this point, you have completed the integration of the Supabase service on the app side. Next, you need to configure the Supabase backend service, because the Supabase backend service includes user authentication, database, storage service, backend API, etc. All functions in the App depend on the Supabase backend service.

Last updated on