B4J Tutorial [BANano] Using PocketBase (Firebase Alternative) for your Apps.

Hi there.

Update: This class is based on the JavaScript SDK available here, https://github.com/pocketbase/js-sdk
REST API calls are dont internal to the library, if you want to use pure REST API, use BANanoFetch, the documentation should be easy to follow.


I got to test the "Open Source backend for your next SaaS and Mobile app in 1 file" tech stack today. I must say its a very interesting project.

SithasoCRUD.jpg


I downloaded a single file from the PocketBase website, opened my command prompt. Executed "pocketbase serve" where I unzipped the file.

1666054583023.png


I then copied the "Admin UI" link provided to my browser and an admin panel was available where I created an account and ended up creating a collection to test it out. All this still locally.

After everything was done, creating the schema of my "categories" to capture my "Expense Categories", I went to my folder...

1666054848369.png


On the "pb_public" folder you can actually deploy your website. I stopped my laragon dev web server. Copied my BANAno project to pb_public.

project structure.jpg


I then proceeded to open my browser and used the provided link, , my web project came to life. I tested the TailwindCSS CRUD REST API based project I did (Under Backends). I'm impressed, this is my first Tailwind, my first PocketBase, my first DaisyUI project, and its going very well.

This project is named SithasoDaisy, its a pure javascript based project using the TailwindCSS utility classes, inspired by DaisyUI.

deployedsize.jpg


Interestingly enough, after deploying the same app to Netlify with the PocketBase server still running on my side, the web app on netlify was still able to execute all the CRUD commands to my local database. One of the nice features about PocketBase is the subscription model on CRUD transactions, indicating creation, updates and deletes, when you activate a subsciption.

You can use BANanoFetch in their REST API and also there is a javascript lib that interfaces the REST API nicely for PocketBase. The docs are very simple to follow.

Deployed on Netlify




Happy BANano coding!
 
Last edited:

Mashiane

Expert
Licensed User
Longtime User
User Sign Up Process

For this process, we will use the SithasoMultiUser example. We want to be able to sign up users.

1. There is a users table, this stores the users email and password.
2. There is a profiles table, this stores the users profile details like name, image etc.

1668587215977.png


Step 1: Sign Up user using email address, and password. If email is already registered a 404 error is returned.

B4X:
'pocketbase user registration
    Dim pb As SDUIPocketBase
    'initialize the connection to pocketbase with a collection to access
    pb.Initialize(Me, "pb", "http://127.0.0.1:8090", "users")
    'THIS SHOULD MATCH
    Dim user As Map = CreateMap()
    user.put("email", email.Value)
    user.put("password", password.value)
    user.put("passwordConfirm", confirmpassword.value)
    Dim profile As Map = banano.Await(pb.CREATE_USER(user))
    If banano.IsNull(profile) Then
        app.ShowSwalError("The user profile could no be created!")
        Return
    End If
 

Mashiane

Expert
Licensed User
Longtime User
Step 2: Updating the user's details in the profiles table.

1668587613607.png


We want to update the name for now. To be able to do this, as part of the Sign Up process, we need to first, auth the user via email. If this is not done, the update process will fail.

B4X:
'auth via email - before you can update the profile
    Dim vEmail As Map = banano.await(pb.USER_AUTH_VIAEMAIL(email.value, password.value))
    If banano.IsNull(vEmail) Then
        app.ShowSwalError("The credentials could not be verified!")
        Return
    End If
    'now we update the profile
    Dim pid As String = pb.UserProfile.id
    Dim uuser As Map = CreateMap()
    uuser.put("name", fullname.Value)
    Dim uprofile As Map = banano.Await(pb.UPDATE_USER_PROFILE(pid, uuser))

One can also set up STMP email settings using the Admin UI of Pocketbase. Fo this though its not necessary.

1668587864093.png


In the email settings, one is able to configure the email templates that they can use for various actions.

1668587913192.png
 

Attachments

  • 1668587629281.png
    1668587629281.png
    3.1 KB · Views: 122

Mashiane

Expert
Licensed User
Longtime User
User Sign Up Process: Step 3 - verification email.

The final step is then sending the email to verify the new user.

Using the provided email used for registration, we call the request verificaiton method.

B4X:
'now send verification email
    Dim pemail As String = pb.UserProfile.email
    Dim vEmail As Map = banano.await(pb.USER_REQUEST_VERIFICATION(pemail))
    Log(uprofile)

1668588349954.png


The complete code when clicking up the "Sign Up" button is:

B4X:
Private Sub btnSignUp_Click (e As BANanoEvent)
    'reset the validations
    mdlSignIn.ResetValidation
    'validate each of the elements
    mdlSignIn.Validate(fullname.IsBlank)
    mdlSignIn.Validate(email.IsBlank)
    mdlSignIn.Validate(password.IsBlank)
    mdlSignIn.Validate(confirmpassword.IsBlank)
    Dim bMatch As Boolean = password.IsMatch(confirmpassword.Value, "The passwords should match!")
    mdlSignIn.Validate(bMatch)
    'check the form status
    If mdlSignIn.IsValid = False Then Return
    'get the data on form
    'Dim data As Map = mdlSignIn.GetData
    
    'pocketbase user registration
    Dim pb As SDUIPocketBase
    'initialize the connection to pocketbase with a collection to access
    pb.Initialize(Me, "pb", "http://127.0.0.1:8090", "users")
    'THIS SHOULD MATCH
    Dim user As Map = CreateMap()
    user.put("email", email.Value)
    user.put("password", password.value)
    user.put("passwordConfirm", confirmpassword.value)
    Dim profile As Map = banano.Await(pb.CREATE_USER(user))
    If banano.IsNull(profile) Then
        app.ShowSwalError("The user profile could no be created!")
        Return
    End If
    'auth via email - before you can update the profile
    Dim vEmail As Map = banano.await(pb.USER_AUTH_VIAEMAIL(email.value, password.value))
    If banano.IsNull(vEmail) Then
        app.ShowSwalError("The credentials could not be authorised!")
        Return
    End If
    'now we update the profile
    Dim pid As String = pb.UserProfile.id
    Dim uuser As Map = CreateMap()
    uuser.put("name", fullname.Value)
    Dim uprofile As Map = banano.Await(pb.UPDATE_USER_PROFILE(pid, uuser))
    'now send verification email
    Dim pemail As String = pb.UserProfile.email
    Dim vEmail As Map = banano.await(pb.USER_REQUEST_VERIFICATION(pemail))
    If banano.IsNull(vEmail) Then
        app.ShowSwalError("The credentials could not be verified!")
        Return
    End If
    app.ShowSwalSuccess("The account was created successfully!")
End Sub
 

Mashiane

Expert
Licensed User
Longtime User
User Sign In Process & Getting a user Token

1668588734112.png


After a user account is created, that user can sign in and then get a user token. This can be used for other crud stuff (needs relationships defined).

On successful sign in, the user can then have access to the complete app. As the user's full name is specified when sign up, we will use that to update the navbar of the app. We will look into the avatar update later.

1668589143001.png



The complete code is:

B4X:
Private Sub btnSignIn_Click (e As BANanoEvent)
    'reset the validations
    mdlSignIn.ResetValidation
    'validate each of the elements
    mdlSignIn.Validate(email.IsBlank)
    mdlSignIn.Validate(password.IsBlank)
    'check the form status
    If mdlSignIn.IsValid = False Then Return
    'get the data on form
    Dim data As Map = mdlSignIn.GetData
    'Log(data)
    'do verification
    'if verification = false return
    'do we remember
    If rememberme.Checked Then
        'save settings using app name
        SDUIShared.SetLocalStorage(Main.AppName, data)
    Else
        'remove settings
        SDUIShared.DeleteLocalStorage(Main.AppName)
    End If
    '
    'pocketbase user auth via email
    Dim pb As SDUIPocketBase
    'initialize the connection to pocketbase with a collection to access
    pb.Initialize(Me, "pb", "http://127.0.0.1:8090", "users")
    Dim vEmail As Map = banano.await(pb.USER_AUTH_VIAEMAIL(email.value, password.value))
    If banano.IsNull(vEmail) Then
        app.ShowSwalError("Your credentials cannot be verified!")
        Return
    End If
    
    'show nav & drawer
    pgIndex.UpdateUserName(pb.UserProfile.name)
    pgIndex.UpdateUserAvatar(pb.UserProfile.avatar)
    pgIndex.IsAuthenticated(True)
    'hide the modal
    mdlSignIn.Hide
End Sub
 

Mashiane

Expert
Licensed User
Longtime User
Forgot Password & Password reset requests.

Clicking the Forgot Password link in the Sign In screen activates the relevant screen for the user to reset their password.

1668589767538.png


Once the email address is entered and reset password is clicked...

B4X:
Private Sub btnReset_Click (e As BANanoEvent)
    'reset the validations
    mdlSignIn.ResetValidation
    'validate each of the elements
    mdlSignIn.Validate(email.IsBlank)
    'check the form status
    If mdlSignIn.IsValid = False Then Return
    'get the data on form
    Dim data As Map = mdlSignIn.GetData
    'Log(data)
    'pocketbase user auth via email
    Dim pb As SDUIPocketBase
    'initialize the connection to pocketbase with a collection to access
    pb.Initialize(Me, "pb", "http://127.0.0.1:8090", "users")
    Dim vEmail As Boolean = banano.await(pb.USER_REQUEST_PASSWORDRESET(email.value))
    If vEmail = False Then
        app.ShowSwalError("Password reset could not be requested!")
        Return
    End If
    app.ShowSwalSuccess("Password reset request sent!")
End Sub


1668589694905.png
 

alwaysbusy

Expert
Licensed User
Longtime User
I just stumbled on this post as I am just started looking into Pocketbase myself. Unfortunately I noticed this is part of the payed DaisyUI wrap instead of being a free stand-alone library. Not a biggy as it seems to be pretty straight forward to wrap it in BANano but it could've saved me a couple of hours to re-do it ;)

I'll make it available to the community when done so everyone can use it as Pocketbase looks like a simple to use alternative for MySQL and WebApps.
 

Mashiane

Expert
Licensed User
Longtime User
I just stumbled on this post as I am just started looking into Pocketbase myself. Unfortunately I noticed this is part of the payed DaisyUI wrap instead of being a free stand-alone library. Not a biggy as it seems to be pretty straight forward to wrap it in BANano but it could've saved me a couple of hours to re-do it ;)

I'll make it available to the community when done so everyone can use it as Pocketbase looks like a simple to use alternative for MySQL and WebApps.
I meant to respond to this. The lib Im using is based on https://github.com/pocketbase/js-sdk a javascript sdk and does not use BANanoFetch, which I think would be an awesome alternative not dependent on updating the js files when the need be.

I have attached it here but dont think its the way you might want to go.
 

Attachments

  • SDUIPocketBase.bas
    70 KB · Views: 63

Mashiane

Expert
Licensed User
Longtime User
Hi

Found this nice article..



When it comes to developing WebApps, I greatly recommend PocketBase - a SQLite Webserver in a single file, of course, this needs a VPS as it runs via a port number.
 
Top