Skif you have been following this mini series firstly thank you and sorry for the delay, I have been a bit busy, working on a mini ebook: JavaScript for advanced beginners, and for that reason I am skipping the local db part and straight to supabase, then to the mobile app and apk
Supabase
Go to supabase, sign in or up
create a new project,
fill in all the details
supabase we take sometime and setup your project
there are lot of nuances to supabase, stuff like security, public and private keys,
to avoid being overwhelmed we will take a focused path, that will set us up to learning more about supabase in the near future, instead of getting lost in the details we will follow a simple path to our goal, setting and getting data
- setting data
when the project is done setting up, you will be taken to the projects window, all we care about is database, under APIs anon/public key which allows access to the table by anyone without rules or authentication,(of course in a real world app you need to set these rule) for our purpose the anon key is ok, we also need the url - which will allow us to query and manage the database
1a create a new table
click on table editor under database, you should be presented with an option to create a table, do that, name it Templates, and save everything as is as we want supabase to handle generation of primary keys(which unique ID's for rows)
create 3 new columns (using the new column link, next insert new row) a gui will pop and create the ff columns:
title type text
SubTitle type text
Time type int8
blocks type json
1b API sections - supabase will generate docs for you DB
on the left panel above the setttings Icon, click that file icon which will take to the apis section, which has a super useful doc, telling you how to interact with the DB.
install supabase in the web project
npm install --save @supabase/supabase-js
and create two env files in the root of the project, not inside src,
..
src
...
.env
.env.production
env files are used to store private information like api keys etc, so nobody can access them in the devtools,
inside each file create the ff variable and assign it your public/anon key
VUE_APP_SUPAKEY=eysudihfuiweuety739opdk.shdfuhaicuweiodiajjoidhcbaxjk
you can find your anon key by toggle from javascript to bash in the right panel, by default the key is hidden, you can click on hide and select anon key and copy it, under the curl command, "api-key"
In utililities create a database helper file, I named it db.js - this is where we will handle all supabase stuff, first we will handle inserting, and we want to insert on publish in the editor
db.js
import { createClient } from '@supabase/supabase-js'
const supabaseUrl = <your supabase project url/endpoint>
const supabaseKey = process.env.VUE_APP_SUPAKEY // the key in the env file
const supabase = createClient(supabaseUrl, supabaseKey) // used to interact with your database
to insert we use async, we don't want the app to be block, the request can just happen in the background, you can show a loading icon or something, then on resolve you can alert the user,
// the params the function takes correspong to table columns
export async function insertTemplate(title, sub, time, blocks){
// we are awaiting supabase to resolve, sp we can notify the app of what happened
const { data, error } = await supabase
.from('Templates')
.insert([
{ Title: title, SubTitle: sub, Time: time, blocks: blocks },
])
// if supabase return an error we return an object with status false else true
// this is for simple checking in the editor.vue file, so we know what action to //take
if(error){
return {status: false,
error}
}
else{
return {status: true,
data}
}
}
In editor.vue instead of making a request to local server we insert the template to supabase, refactor editor.save()
import {insertTemplate} from "../utillity/db";
...
window.editor.save().then((data)=> {
let blocks = JSON.stringify(data.blocks)
insertTemplate(this.data.title, this.data.SubTitle, this.data.time, blocks ).then((res)=> {
// on success status === true
if(res.status){
console.log(res)
// supbase returns the inserted row, with the corresponding id,
// which we will use to tag local templates, so when they are viewed
// they are fetched from the database and the editor is prefilled woth //their data
this.$emit("published", res.data[0].id, this.data.id)
}
//on fail
else{
console.log(res.error)
}
})
})
In EditorManager, in the Ed component, handle the published signal
<Ed @back="closeEd()" @published="published" :data="temp"/>
under methods in the same file, define published function
methods: {
...,
// pubId === returned by supabase
// local - assigned by us to templates
published(pubId, localId){
// look for the template that was published, then ta it with pubId, and persist //all the templates locally to capture changes
this.templates.forEach(temp => {
if(temp.id === localId){
temp.pubId = pubId
persist(this.templates)
return
}
})
}
}
lastly in the editor manager, before opening the editor, we want to check if the selected template is published, if it is published we want to send the published one rather than the local one. because the local one just hold generic info, block data, is saved online
first in db.js let's create a get byId function
export async function getById(id){
id = String(id)
console.log(id)
const {data, error} = await supabase
.from("Templates")
.select("*") // selecting all rows
.in("id", [id]) // but returning the one corresping to the passed id
if(error){
return {status: false,
error}
}
else{
return {status: true,
data}
}
}
in EditorManager.vue, import the created function and refactor the open Editor method
import {getById} from "../utillity/db";
...
async openEditor(template){
if(this.showModal){
this.toggleModal()
}
if(template.pubId){ // if the template is published get it from the db
let res = await getById(template.pubId)
if(res.status){
console.log("published")
let data = res.data[0]
data.blocks = JSON.parse(data.blocks)
console.log(data)
this.temp = data // set the passed template to fetched template
this.showEditor = true;
}
else{
console.log(res.error)
}
}
last part coming tomorrow, super easy just fetching the data and displaying it in ionic,
the building the apk.
