## From the Ionic framework to market(well sort of) part 4
Published: 2021-08-29 01:07:06




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

```bash
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

```js
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

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


```js

// 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() 

```js
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 

```html

 <Ed @back="closeEd()" @published="published" :data="temp"/>
```

under methods in the same file, define published function 

```js
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 

```js


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

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