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.

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

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...

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.

I then proceeded to open my browser and used the provided link,

http://127.0.0.1:8090/

, 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.

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!

 

[Mashiane]

Storing Images inside the PocketBase Database in my CRUD Tailwindcss + DaisyUI WebApp

 

[Mashiane]

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.

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

'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]

Step 2: Updating the user's details in the profiles table.

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.

'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.

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

 

[Mashiane]

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.

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

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

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]

User Sign In Process & Getting a user Token

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.

The complete code is:

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]

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.

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

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

 

[Mashiane]

Hosting your app on PocketHost.io

#TailwindCSS & #DaisyUI CRUD Expense Tracker on Netlify using #PocketBase & #PocketHost.io using #b4x

 

[Mashiane]

This is going to be very interesting...

performing SQL queries directly on Pocketbase...

 

[tchart]

This is going to be very interesting...

performing SQL queries directly on Pocketbase...

View attachment 139840

Very interesting.

 

[alwaysbusy]

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]

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.

 

[Mashiane]

Hi

Found this nice article..

10 Reasons to use PocketBase as your backend

Full-stack applications genrally involve a lot of moving parts like authentication, authorization, security, deployment, etc. If you want to build full-stack applications without much hassle, PocketBase might be an interesting place to start. Here are ten reasons to consider it for your next app...

salaivv.com

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.

 

[Mashiane]

In case you forget your admin password..

Reset it to 123456

UPDATE _admins SET passwordHash='$2a$10$xWbkSks7OiTmrri2DU6QSe6OAekcdqkOrkcI1wi4uiv9SU2HTlHoq' where email='test@example.com'

 

[Mashiane]

Using GMail with PocketBase

gmail test mail timeout · pocketbase pocketbase · Discussion #458

I still don't know if this is a bug. When trying to setup gmail as smtp.gmail.com the UI throws a Test email send timeout. error. I've created an App password for mail in a google account and teste...

github.com

 

[Mashiane]

Installing PocketBase on a VPS Complete with SSL - Let's Enrypt

PocketBase is amazing! By running it with a domain, you automatically get SSL and nothing beats that. Plus, it is resource efficient, very.

dev.to

 

[Mashiane]

Deploying Pocketbase on Ubuntu

How to deploy a production Pocketbase server on Ubuntu using Nginx.

alainqtec.dev

 

[Mashiane]