Transcription
[Music] in this video we'll cover how to build an offline first app using Super Bass and powersync. to keep it simple, we'll follow the power sync Super Bass integration guide. and before starting, you need to have free accounts with Super Bass and powersync and have either flutter or react native setup.
with this architecture, you change your app's read and write database from Super Bass in the cloud to a sqlite database embedded within your app. this will make your app always available even when users are unexpectedly offline. and powersync will take care of syncing the data back to Superbass, which will still be your source of Truth.
the first thing we'll do is create a powersync instance and connect it to Super Bass. so we'll go to the power sync dashboard, create instance, give it a name. and then for credentials, we'll say we'll use super bass authentication and add connections. we'll create a new one and then move over to Super Bass. go to the database information and copy those values into the powersync model. so it'll copy the name. you'll also have to go find your password and copy that into the model as well. and once that's all there, you can test the connection and save your instance. will then be provisioned. this will take about two minutes, but we can skip ahead and there we can see that the deployment has been completed.
next, we'll create some database tables. so we'll go over to the powersync documentation. we'll copy this code over here. go over to Super Bass, go to the SQL editor, paste it in here. we'll run it. we can ignore this warning and you'll see that it doesn't run successfully. powersync uses the postgres writer headlock to replicate data changes. so we'll need to create a publication for that. we'll look at the documentation, copy this code over here, go to the SQL editor, paste it in here and run it. and you'll see that it's run successfully.
sync rules allow you to control which data gets synced to which users. so in order to enable that in our app, we'll look at the integration guide in the documentation, copy the example code, go over to the synchros file, select all of that and then just paste what we've copied. and then all that's left to do is to deploy the sync rules. so we need to select the instance that we'd like to deploy to and then just confirm. and you'll see that the sync rules are being deployed. this will take a few minutes to complete. till skip ahead and see what it should look like when it does.
the last thing to do is to set up the demo app to test that everything works like it should. there are two demo apps available, one for flutter and one for react native. instructions on how to clone them are in the docs, as well as further configuration steps. that's it for this tutorial. additional videos are available on flutter and react native configuration. happy coding and let us know what you think.
[Music]