B4J Tutorial [BANano] SupaBase (FireBase Alternative) crud example with SSE

Hi

Supabase is an open source Firebase alternative. It provides all the backend services you need to build a product. Supabase uses Postgres database with real-time capabilities. Basically, supabase provides an interface to manage postgres database that you can use to create table and insert, edit and delete data in the table.

We can use REST API or client libraries from supabase to access the data in the postgres database. Supabase is not just about accessing the database. it also provides some solutions out of the box such as Authentication, File Storage and Real-time capabilities.

For this example we will use the javascript sdk. I am using this for the SithasoDaisy framework.

First things first

1. Sign Up

Supabase | The Open Source Firebase Alternative

Build production-grade applications with a Postgres database, Authentication, instant APIs, Realtime, Functions, Storage and Vector embeddings. Start for free.

supabase.com

2. Get the JavaScript SDK and include in your project.

You will use the CDN version in this section

Add this to your BANano project, in the Main code module using

BANano.Header.AddJavascriptFile("SUPABASE SDK URL LINK")/

3. Create a project.

4. Create a table with columns.

5. Get your keys...

We have a table called books with a few fields. You can create any schema you want.

We initialize the class:

'SELECT_ALL
    Dim supabase As SDUISupaBase
    supabase.Initialize(Me, "supabase", my_url, my_key)
    supabase.TableName = "books"

Related Content

Supabase Crash Course

 

[Mashiane]

Create

'CREATE
    supabase.PrepareRecord
    supabase.SetField("title", "Xolani Mbanga " & DateTime.Now)
    supabase.SetField("author", "Mashy")
    supabase.SetField("finished", False)
    Dim bAdded As Boolean = BANano.Await(supabase.CREATE)
    Log(bAdded)

 

[Mashiane]

Read

    'READ...
    Dim rec As Map = BANano.Await(supabase.READ(1))
    Log(rec)

 

[Mashiane]

Update

'UPDATE
    supabase.PrepareRecord
    supabase.setfield("id", 9)
    supabase.SetField("title", "Anele Mbanga " & SDUIShared.DateTimeNow)
    supabase.SetField("author", "Anie")
    supabase.SetField("finished", True)
    Dim bUpdated As Boolean = BANano.Await(supabase.UPDATE)
    Log(bUpdated)

 

[Mashiane]

Delete

Dim bDeleted As Boolean = BANano.Await(supabase.DELETE(9))
    Log(bDeleted)

 

[Mashiane]

List All / Select All

supabase.CLEAR_WHERE
    supabase.ADD_ORDER_BY("title", True)
    BANano.Await(supabase.SELECT_ALL)
    Do While supabase.NextRow
        Log(supabase.record)
    Loop

 

[Mashiane]

Select Where

'SELECT_WHERE...
    supabase.CLEAR_WHERE
    supabase.ADD_FIELD("id")
    supabase.ADD_FIELD("title")
    supabase.ADD_WHERE("finished", "=", False)
    supabase.ADD_ORDER_BY("title", False)
    Dim result As List = BANano.Await(supabase.SELECT_WHERE)
    Log(result)

 

[Mashiane]

Subscriptions (insert, update, delete)

One can also subscribe to events that happen within a table.

Dim supabase As SDUISupaBase
    supabase.Initialize(Me, "supabase", my_url, my_key)
    supabase.TableName = "books"
    supabase.Subscribe

Private Sub supabase_Changes (payload As Map)
    Log(payload)
End Sub

To activate subscriptions, one executes .Subscribe. So each time we add, update and delete a record on the table, the _changes callback is fired.

 

[Mashiane]

Complete Code

Dim supabase As SDUISupaBase
    supabase.Initialize(Me, "supabase", my_url, my_key)
    supabase.TableName = "books"
    supabase.Subscribe
    
    'SELECT ALL
    supabase.CLEAR_WHERE
    supabase.ADD_ORDER_BY("title", True)
    BANano.Await(supabase.SELECT_ALL)
    Do While supabase.NextRow
        'Log(supabase.record)
    Loop
    supabase.MoveLast
    Dim sid As String = supabase.GetString("id")
    Log(sid)
    '
    'CREATE
    supabase.PrepareRecord
    supabase.SetField("title", "Xolani Mbanga " & DateTime.Now)
    supabase.SetField("author", "Mashy")
    supabase.SetField("finished", False)
    Dim bAdded As Boolean = BANano.Await(supabase.CREATE)
    'Log(bAdded)
    '
    'UPDATE
    supabase.PrepareRecord
    supabase.setfield("id", sid)
    supabase.SetField("title", "Anele Mbanga " & SDUIShared.DateTimeNow)
    supabase.SetField("author", "Anie")
    supabase.SetField("finished", True)
    Dim bUpdated As Boolean = BANano.Await(supabase.UPDATE)
    'Log(bUpdated)
    '
    'DELETE
    Dim bDeleted As Boolean = BANano.Await(supabase.DELETE(sid))
    'Log(bDeleted)
    '
    'SELECT_WHERE...
    supabase.CLEAR_WHERE
    supabase.ADD_FIELD("id")
    supabase.ADD_FIELD("title")
    supabase.ADD_WHERE("finished", "=", False)
    supabase.ADD_ORDER_BY("title", False)
    Dim result As List = BANano.Await(supabase.SELECT_WHERE)
    'Log(result)
    '
    'READ...
    Dim rec As Map = BANano.Await(supabase.READ(1))
    'Log(rec)

Catching Subscription

Private Sub supabase_Changes (eventType As String, New As Map, Old As Map, TableName As String)
    Select Case TableName
    Case "books"    
        Select Case eventType
        Case "INSERT"
        Case "UPDATE"
            'get id that was updated
            Dim sid As String = Old.Get("id")
        Case "DELETE"
            'get id that was deleted
            Dim sid As String = Old.Get("id")
        End Select
    End Select
End Sub

 

[amorosik]

I believe this work is of tremendous value to the entire B4X community
Thank you thank you thank you for your generous sharing

 

[amorosik]

...but since we are insatiable, please now go back to work on PocketBase ???

 

[elitse]

Is there any way we can use this for b4A projects?

 

[yiankos1]

2. Get the JavaScript SDK and include in your project.

Hello again. Where did you get it?

 

[Mashiane]

Hello again. Where did you get it?

Supabase website.

 

[yiankos1]

Supabase website.

I have searched a lot but no SDK found to download....

 

[Mashiane]

I have searched a lot but no SDK found to download....

JavaScript: Installing | Supabase Docs

Supabase API reference for JavaScript: Installing

supabase.com

 

[biggiu]

Hi, I'm also having problems with the following link:

JavaScript: Installing | Supabase Docs

Supabase API reference for JavaScript: Installing

supabase.com

because I don't know how to install what is required.
Would it be possible to have a more detailed explanation?
This way beginners like me can benefit from your beautiful work.
It would be useful to have a working, simple and easy to install project to be able to understand how to work with supabase.
Thanks for the kind cooperation.

 

[Mashiane]

Hi, I'm also having problems with the following link:

JavaScript: Installing | Supabase Docs

Supabase API reference for JavaScript: Installing

supabase.com

because I don't know how to install what is required.
Would it be possible to have a more detailed explanation?
This way beginners like me can benefit from your beautiful work.
It would be useful to have a working, simple and easy to install project to be able to understand how to work with supabase.
Thanks for the kind cooperation.

The first post was updated to include the link to the Supabase SDK.

The attached "class" in the first post is a BANano plugin that you can use and the provided source code "examples" above are a guide for one to add the class to their BANano project, follow the guide example and this thread on how use such in their projects.

The assumption is that one knows how BANano works to be able to use this class.

I will see if I can push an example, but it will be nothing different from the provided code examples in this post, which should be easy to reproduce for anyone.

I will however create an example post and post soon.

 

[biggiu]

Thank you for the speed of your response. Now I know a little more. So to use your work I would have to use BANano, which comes with Skeleton.
(https://www.b4x.com/android/forum/threads/what-is-banano.136081/)
So, to be clear, this is not what I'm looking for when working with B4x. And so I think I'm back to where I started.

Tell me if I'm wrong.
Thank you and good day.

 

[Mashiane]

Thank you for the speed of your response. Now I know a little more. So to use your work I would have to use BANano, which comes with Skeleton.
(https://www.b4x.com/android/forum/threads/what-is-banano.136081/)
So, to be clear, this is not what I'm looking for when working with B4x. And so I think I'm back to where I started.

Tell me if I'm wrong.
Thank you and good day.

For the b4x version, @Alexander Stolte has created an amazing b4xlib, check it here...

[B4X] Supabase - The Open Source Firebase alternative

Supabase is an open source Firebase alternative. It provides all the backend services you need to build a product. Supabase uses Postgres database with real-time capabilities. Basically, supabase provides an interface to manage postgres database that you can use to create table and insert, edit...

www.b4x.com