DEV Community

sk
sk

Posted on

## From the Ionic framework to market(well sort of) part 4

if 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

  1. 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
Enter fullscreen mode Exit fullscreen mode

and create two env files in the root of the project, not inside src,

..
src
...
.env
.env.production

Enter fullscreen mode Exit fullscreen mode

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

Enter fullscreen mode Exit fullscreen mode

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


Enter fullscreen mode Exit fullscreen mode

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}

 }

}


Enter fullscreen mode Exit fullscreen mode

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)

       } 

 })





  })




Enter fullscreen mode Exit fullscreen mode

In EditorManager, in the Ed component, handle the published signal


 <Ed @back="closeEd()" @published="published" :data="temp"/>
Enter fullscreen mode Exit fullscreen mode

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

     }

 })

 }



}


Enter fullscreen mode Exit fullscreen mode

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}

 }





}







Enter fullscreen mode Exit fullscreen mode

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)

     }

 }


Enter fullscreen mode Exit fullscreen mode

last part coming tomorrow, super easy just fetching the data and displaying it in ionic,
the building the apk.

Discussion (0)