Web Application Development with Quasar Framework In this tutorial, You can see a rough development process with Quasar Framework which is known as front-end framework with VueJS components. - Frontend : Quasar (based on Vue.js) - Backend : Google firebase - Result * Web Page : https://checkin.wonyong.net * Play Store : https://play.google.com/store/apps/details?id=org.kopochecker.app - Youtube (Korean) : https://www.youtube.com/watch?v=HEttw-RSXxg&list=PLlWoe5hcgrk4qQVIBxDA3d-5ZRfYuITxb

1. Dept. of Smart Finance, Korea Polytechnics Seoul Kangseo Campus
ApplicationDevelopmentw/
QuasarFramework
Basic Course

2. QuasarCLIInstallation
• Prerequisite
Node >=12.22.1 and NPM >=6.14.12
• recommendation node version : v14.17.5
check your node and npm : node -v
npm -v
• npm install -g @quasar/cli
Do not use uneven versions of Node i.e. 13, 15, etc. These versions are not tested with Quasar and often cause issues due to their experimental nature. We highly recommend always using the LTS version of Node.
Ref : https://quasar.dev/quasar-cli/installation

3. HelloworldⅠ(1/2)
• we create a project folder with Quasar CLI
• quasar create <folder_name>
Ref : https://quasar.dev/quasar-cli/installation
(base) waynehwang@wayneui-MacBookPro temp % quasar create hello
___
/ _ _ _ __ _ ___ __ _ _ __
| | | | | | |/ _` / __|/ _` | '__|
| |_| | |_| | (_| __ (_| | |
_____,_|__,_|___/__,_|_|
? Project name (internal usage for dev) hello
? Project product name (must start with letter if building mobile apps) hello
? Project description hello world
? Author wayne hwang <wonyong@wonyong.net>
? Pick your CSS preprocessor: SCSS
? Check the features needed for your project: ESLint (recommended), Vuex, Axios
? Pick an ESLint preset: Prettier
? Continue to install project dependencies after the project has been created? (
recommended) NPM
Quasar CLI · Generated "hello".
[*] Installing project dependencies …
[*] Quasar Project initialization finished!
To get started:
cd hello
quasar dev

4. Helloworld Ⅰ(2/2)
• Look into package.json, App.vue, routes.js, Index.vue, EssentialLink.vue, …
• Run your app with below command:
quasar dev

5. HelloWorldⅡ
• Repository address :
https://github.com/wonyongHwang/kopoPro
fi
le
• git clone https://github.com/wonyongHwang/kopoPro
fi
le
• npm install
• quasar dev
kopoProfile

6. HelloWorldⅡ
• In this practice, we don’t have a
drawer and a footer either. So, only
<q-header> is being a
ff
ected by
<q-layout>.
•
layout
<q-layout view="lHh lpr lFf">
reference : https://quasar.dev/layout/layout#understanding-the-view-prop

7. HelloWorldⅡ
• quasar can detect platform : $q.platfrom.is.~~
eg> if you will deploy app to mobile device(android,
ios) app can detect platform using $q.platform.is.
cordova
$q.platform
<div v-bind:class="{'main': $q.platform.is.desktop, 'mobile_main': $q.platform.is.ipad || $q.platform.is.mobile}"
class="full-height" style="background-color:rgba(0, 0, 0, 0.7);">
reference : https://quasar.dev/options/platform-detection#introduction

8. HelloWorldⅡ
style
<q-header class="q-py-sm" style="background-color:rgba(0, 0, 0, 0.7);">
reference : https://quasar.dev/style/spacing#table-of-permutations

9. HelloWorldⅡ
q-tab
reference : https://quasar.dev/vue-components/tabs
<q-tabs v-model="selected_tab" shrink>
<q-tab name="about_me" :style="[selected_tab == 'about_me' ? {backgroundColor: 'green'} : {}]" class="q-mr-sm q-py-xs custom_tab"
@click="scrollToElement('id_about_me')" style="width:120px;min-height:auto !important;color: white"
label="About Me"/>

10. HelloWorldⅡ
q-card
<q-card class="my-card" flat bordered>
<q-card-section>
reference : https://quasar.dev/vue-components/card#introduction

11. HelloWorldⅡ
• Get/set scroll position (Quasar Scrolling Utils)
https://quasar.dev/quasar-utils/scrolling-utils#get-set-scroll-position
<script></script>
import {scroll} from 'quasar'
const {getScrollTarget, setScrollPosition} = scroll
export default {
name: 'PageIndex',
data() {
return {
name: "",
email: "",
message: "",
selected_tab: 'about_me',
}
},
methods: {
scrollToElement(id) {
let el = document.getElementById(id)
const target = getScrollTarget(el)
const o
ff
set = el.o
ff
setTop - 65
const duration = 800
setScrollPosition(target, o
ff
set, duration)
}
},
mounted () {
}
}

12. homework
• customizing web page
• upload source to your github repo.
- README.md should be edited
ex>

13. homework
• deploy your web pages via netlify
https://app.netlify.com/

14. homework
• check url
• if you have a own domain, netlify allow you to access your web site
• ‘https(let’s encrypt)’ supports both custom domain and netlify domain

15. Make Your First Page
Basic Practice

16. Layout
• quasar create <folder name>
• quasar dev
•
fi
rst page is served by Index.vue

17. Layout
• Quasar provides basic layouts
reference : https://quasar.dev/layout/gallery

18. SignIn
• what you need to implement a sign-in page:
2 Input Text
fi
eld
1 Check Box
1 Button
and more …

19. SignIn
• copy relevant codes and paste to your “Index.vue”
https://quasar.dev/vue-components/input

20. SignUp
• add Signup.Vue to your project
• add page mapping on routes.js

21. pagelink
• vue syntax for page link :
<router-link to=“/address”> ~~ </router-link>
<router-link to="/signup" >
<center>New User? Click Here to Register.</center>
</router-link>

22. Homework
• Place and Organize Input Text
fi
elds (E-mail, Password, etc …)
: center alignment
• Password should be masked while typing
• Place Sign-In / Sign-Up buttons
complete your sign-in / sign-up pages!

23. f
irebase
• https://
fi
rebase.google.com/?hl=ko
create a project
// For Firebase JS SDK v7.20.0 and later, measurementId is optional
const
fi
rebaseCon
fi
g = {
apiKey: "AIzaSyA~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~",
authDomain: "kopologinchecker.
fi
rebaseapp.com",
projectId: "kopologinchecker",
storageBucket: "kopologinchecker.appspot.com",
messagingSenderId: "17~~~~~~~~~~~~",
appId: "1:17~~~~~~~~:web:d4~~~~~~~~",
measurementId: “G-H0~~~~~~~~~~~~"
};

24. • npm install --save
fi
rebase
• quasar new boot
fi
rebase
->
fi
rebase.js will be generated in src/boot
-> paste
fi
rebase con
fi
guration to
fi
rebase.js
f
irebase
setting config.
ref : https://quasar.dev/quasar-cli/boot-
fi
les
import firebase from 'firebase/app';
import 'firebase/auth';
import 'firebase/analytics'
const firebaseConfig = {
apiKey: "~",
authDomain: "kopologinchecker.firebaseapp.com",
projectId: "kopologinchecker",
storageBucket: "kopologinchecker.appspot.com",
messagingSenderId: “~",
appId: "~",
measurementId: "~"
};
if (!firebase.apps.length) {
firebase.initializeApp(firebaseConfig);
}
firebase.analytics();
export const auth = firebase.auth();

25. f
irebase
• enable email/password
• create a test user if needed
sign-in method

26. f
irebase
• https://
fi
rebase.google.com/docs/auth/web/start?hl=ko
sign-in method
fi
rebase.auth().signInWithEmailAndPassword(email, password
)
.then((userCredential) =>
{
// Signed i
n
var user = userCredential.user
;
// ..
.
}
)
.catch((error) =>
{
var errorCode = error.code
;
var errorMessage = error.message
;
});

27. • let’s use quasar notify to show success/fail message
https://quasar.dev/quasar-plugins/notify#introduction
f
irebase
sign-in method
auth.signInWithEmailAndPassword(this.text, this.password).then(
(userCredential) => {
console.log(userCredential.user);
this.$router.push({ path: 'home' })
}
).catch(
(err) => {
console.log(err.code);
console.log(err.message);
this.$q.notify({
message: err.message,
color: 'purple'
})
}
)
message, color, postion, textColor, icon, …
import { useQuasar } from 'quasar'
const $q = useQuasar()
$q.notify({
message : "login success",
color : "blue"
})
vue 3

28. homework
• implement a sign-up function using
fi
rebase api
• validation logic should be implemented
ex> email/password should not be empty
password should be equal to ‘repeat password’
password must be at least 6 characters long
hint> https://levelup.gitconnected.com/
fi
rebase-auth-management-in-vue-js-with-vuex-9c4a5d9cedc
• move page after sign-up
hint> this.$router.push({ path: 'home' })
import { useRouter, useRoute } from 'vue-router'
export default
{
setup()
{
const router = useRouter()
const route = useRoute()
// Now you can access params like
:
console.log(route.params.id)
;
route.push({path: ‘home’}
)
}
};
vue v3
https://next.router.vuejs.org/guide/advanced/composition-api.html#accessing-the-router-and-current-route-inside-setup

29. • Parent -> child : props
• Child -> Parent : emit

30. management
f
irebaseauthw/vuex
• state management pattern and its library
• state : data
• mutations : change state (sync)
• actions : commit mutation (async)
what vuex is
Actions
State
View
Mutations
this.$store.commit
emit, props
Unidirectional
fl
ow

31. management
f
irebaseauthw/vuex
• state =
fi
re auth info
• ‘
fi
re auth info’ can acquire when we call
signInWithEmailAndPassword()
createUserWithEmailAndPassword()
and so on.
state
Actions
State
View
Mutations
this.$store.commit
import {auth} from "src/boot/firebase"
export default store(function (/* { ssrContext } */) {
const Store = createStore({
modules: {
// example
},
state: {
fireUser:null
},
…
State

32. management
f
irebaseauthw/vuex
• get the current sign-in user is by setting an observer on the Auth object
https://
fi
rebase.google.com/docs/auth/web/manage-users
• state should be null when user signed out
https://
fi
rebase.google.com/docs/auth/web/password-auth?hl=ko
action
actions: {
signOutAction({commit}) {
auth.signOut()
.then(() => {
commit("setFireUser", null);
})
},
authAction({ commit }) {
auth.onAuthStateChanged(user => {
if (user) {
commit("setFireUser", user);
}
});
},
},
mutations: {
setFireUser(state, firebaseUser){
state.fireUser = firebaseUser
}
Actions
Mutations

33. management
f
irebaseauthw/vuex
• prepare helper functions
https://joshua1988.github.io/web-development/vuejs/vuex-getters-mutations/
getters
getters: {
getFireUser(state) {
return state.fireUser;
},
isUserAuth(state) {
return !!state.fireUser;
}
},

34. management
f
irebaseauthw/vuex
source code
import { store } from 'quasar/wrappers'
import { createStore } from 'vuex'
import {auth} from "src/boot/firebase"
export default store(function (/* { ssrContext } */) {
const Store = createStore({
state: {
fireUser:null
},
actions: {
signOutAction({commit}) {
auth.signOut()
.then(() => {
commit("setFireUser", null);
})
.catch(error => {
commit("setFireError", error.message);
});
},
authAction({ commit }) {
auth.onAuthStateChanged(user => {
if (user) {
commit("setFireUser", user);
} else {
commit("setFireUser", null);
}
});
},
},
getters: {
getFireUser(state) {
return state.fireUser;
},
isUserAuth(state) {
return !!state.fireUser;
}
},
mutations: {
setFireUser(state, firebaseUser){
state.fireUser = firebaseUser
}
},
})
return Store
})

35. management
f
irebaseauthw/vuex
• commit state when my application obtain a
fi
rebase auth
• get a
fi
rebase auth to display user info
• check a
fi
rebase auth
usage example
auth.signInWithEmailAndPassword(this.text, this.password).then(
(userCredential) => {
this.$store.commit("setFireUser", userCredential.user);
}
)
<div class="text-h6" align="center">
Hi, {{ this.name }}({{ getFireUser.email }})
<br>
…
computed: {
...mapGetters(["getFireUser", "isUserAuth"])
},
mounted() {
this.authAction();
…
methods: {
...mapActions(["signOutAction","authAction"]),
import { useStore } from "vuex"
;
export default
{
setup()
{
const store = useStore()
;
store.commit("setFireUser", userCredential.user)
;
}
};
vue v3
https://kyounghwan01.github.io/blog/Vue/vue3/composition-api-vuex/#vuex-%E1%84%89%E1%85%A6%E1%84%90%E1%85%B5%E1%86%BC-%E1%84%86%E1%85%B5%E1%86%BE-store-module-1%E1%84%80%E1%85%A2%E1%84%85%E1%85%A9-%E1%84%89%E1%85%B5%E1%86%AF%E1%84%92%E1%85%A2%E1%86%BC

36. homework
• When a user logged in, move Vue Page and display user’s email using vuex
• tip>
<div v-if=“getFireUser">~~</div>
computed: {
...mapGetters(["getFireUser", "isUserAuth"])
},
<div class="text-h6" align="center">
Hi,({{ getFireUser.email }})
</div>
import { mapGetters } from "vuex";

37. vuelifecycle
• https://cornswrold.tistory.com/342
• beforeCreate, created, beforeMount, mounted,
beforeUpdate, updated, beforeDestroy, destroyed

38. Firestore

39. Firestore

40. Firestore
• Firestore data add: set() or add()
https://
fi
rebase.google.com/docs/
fi
restore/manage-data/add-data?hl=ko
API
db.collection("users").add({
id: this.text,
name: this.name
})
.then((docRef) => {
console.log("Document written with ID: ", docRef.id);
this.$q.notify({
message: "Register Success",
color: 'blue'
})
})
.catch((error) => {
console.error("Error adding document: ", error);
this.$q.notify({
message: error,
color: 'red'
})
});

41. Firestore
•
fi
rebase.js
import '
fi
rebase/
fi
restore'
export const db =
fi
rebase.
fi
restore();
• import
import { db } from "src/boot/
fi
rebase"
Preparations

42. Firestore
Data write
db.collection("users").add({
id: this.text,
name: this.name
})
.then((docRef) => {
console.log("Document written with ID: ", docRef.id);
})
.catch((error) => {
console.error("Error adding document: ", error);
});

43. Firestore
Data read
db.collection("users").where("id", "==", this.getFireUser.email )
.get()
.then((querySnapshot) => {
querySnapshot.forEach((doc) => {
// doc.data() is never undefined for query doc snapshots
console.log(doc.id, " => ", doc.data());
this.name = doc.data().name
});
})
.catch((error) => {
console.log("Error getting documents: ", error);
});

44. Homework
• When a user logged in, move page(/home) and display user’s name using vuex
- user name was saved at Firestore, so we have to read the data
fi
rst to show it.
• user name should be displayed on page(/home) even after refreshing page.

45. Homework
Hint
<template>
<div>
HOME
<div class="text-h6" align="center">
<div v-if="getFireUser">
Hi,({{ getFireUser.email }})
:) {{ name }}
</div>
</div>
</div>
</template>
<script>
import { defineComponent } from 'vue';
import { auth, db } from "src/boot/firebase"
import { useQuasar } from 'quasar'
import { mapGetters, mapActions } from "vuex"; //
export default defineComponent({
name: 'PageIndex',
computed: {
...mapGetters(["getFireUser", "isUserAuth"])
},
updated() {
if(this.getFireUser != null && this.name == ''){ // for refresh page //
db.collection("users").where("id", "==", this.getFireUser.email )
.get()
.then((querySnapshot) => {
querySnapshot.forEach((doc) => {
// doc.data() is never undefined for query doc snapshots
console.log(doc.id, " => ", doc.data());
this.name = doc.data().name
});
})
.catch((error) => {
console.log("Error getting documents: ", error);
});
}
},
mounted(){ //
this.authAction() // for refresh page //
if(this.getFireUser != null){
db.collection("users").where("id", "==", this.getFireUser.email )
.get()
.then((querySnapshot) => {
querySnapshot.forEach((doc) => {
// doc.data() is never undefined for query doc snapshots
console.log(doc.id, " => ", doc.data());
this.name = doc.data().name
});
})
.catch((error) => {
console.log("Error getting documents: ", error);
});
}
},
data(){
return{
name : ''
}
},
methods: {
...mapActions(["signOutAction","authAction"])
}
})
</script>

46. f
irebaseusermgmt.
• https://
fi
rebase.google.com/docs/auth/web/manage-users?hl=ko
• User Info management
- user info update
- user account delete
Some security-sensitive actions—such as deleting an account, setting a primary email address, and changing a password—require that the user has recently signed in.

47. Implementationof“rememberme”usinglocalStorage
• UI
<q-checkbox v-model="remember" label="Remember Me" color="teal"/>
• Declaration
let remember = ref(‘false')
• mounted()
• When a user tries to log in: if (remember.value == true) {
localStorage.username = email.value;
localStorage.checkbox = remember.value;
} else {
localStorage.username = "";
localStorage.checkbox = "";
}
mounted(){
if(localStorage.checkbox && localStorage.checkbox !==""){
this.remember = true
this.email = localStorage.username
} else {
this.remember = false
}
}

48. Implementationof“rememberme”usinglocalStorage
• Test

49. Homework
• Elaborate your work(home/sign-in/sign-up)
• Conceptualizing your idea

50. OAuth
• https://
fi
rebase.google.com/docs/auth/web/google-signin?hl=ko
•
google

51. OAuth
• https://
fi
rebase.google.com/docs/auth/web/facebook-login?hl=ko
• https://developers.facebook.com/apps
• Only https allowed
Facebook

52. OAuth
GitHub
https://github.com/settings/apps
Local
Firebase
github

53. f
irebasehosting

54. f
irebasehosting
• Hosting settings

55. f
irebasehosting
• Login results

56. f
irebasehosting
• Select hosting …

57. f
irebasehosting
• Public directory : dist/spa

58. f
irebasehosting
•
fi
rebase serve
• quasar build
•
fi
rebase deploy

59. f
irebasehosting
• Deploy results…

60. Favicon
• https://favicon.io/favicon-generator/

61. Menu
• components hierarchy
⎯ MainLayout.vue
EssentialLink.vue
props and emit
icon title
label
link
+
<template>
<q-item clickable tag="a" target="_blank" :href="link">
<q-item-section v-if="icon" avatar>
<q-icon :name="icon" />
</q-item-section>
<q-item-section>
<q-item-label>{{ title }}</q-item-label>
<q-item-label caption> {{ caption }} </q-item-label>
</q-item-section>
</q-item>
</template>
<script>
import { defineComponent } from 'vue'
export default defineComponent({
name: 'EssentialLink',
props: {
title: {
type: String,
required: true
},
caption: {
type: String,
default: ''
},
link: {
type: String,
default: '#'
},
icon: {
type: String,
default: ''
}
}
})
</script>
props : hey, parent component! control me

62. Menu
• components hierarchy
⎯ MainLayout.vue
EssentialLink.vue
props and emit
<EssentialLink v-for="link in essentialLinks" :key="link.title" v-bind="link" />
…
import EssentialLink from 'components/EssentialLink.vue'
const linksList = [
{
title: 'Docs',
caption: 'quasar.dev',
icon: 'school',
link: 'https://quasar.dev'
},
…
export default defineComponent({
name: 'MainLayout',
components: {
EssentialLink
},
setup () {
return {
essentialLinks: linksList,
}
}
…
parent component(MainLayout) now can set child props

63. Menu
• <Practice>
- open internal links in a current window
- open external links in a new tab (or window)
props and emit

64. Menu
• <Practice> child component(EssentialLink) modi
fi
cation
props
template
props and emit
external: {
type: Boolean,
default: false
}
<template>
<!-- <router-link :to="link" style="text-decoration: none"> -->
<section v-if="external">
<q-item clickable tag="a" target="_target" :href="link">
…
</q-item>
</section>
<section v-else>
<router-link :to="link" style="text-decoration: none; color: inherit;”>
…
</router-link>
</section>
</template>

65. Menu
• <Practice> parent component(MainLayout) modi
fi
cation
props and emit
const linksList = [
{
title: 'Home',
caption: 'Home',
icon: 'home',
link: '/home'
},
{
title: 'QR Scanner',
caption: 'QR Check for Admin',
icon: 'qr_code_scanner',
link: 'https://kopologinchecker.web.app/#/qrscanner',
external: true
},
…

66. Menu
• <Practice>
- close menu when a external link is clicked
props and emit
emit : hey, parent component! handle this

67. Menu
• <Practice> child component(EssentialLink)
modi
fi
cation
template
methods
props and emit
<q-item clickable tag="a" target="_target" :href="link" @click="sendEvent()">
methods: {
sendEvent() {
this.$emit('closeDrawer');
console.log("emit emit")
}
},
• <Practice> parent component(MainLayout)
modi
fi
cation
template
methods
<EssentialLink v-on:closeDrawer="closeme()"
v-for="link in essentialLinks" :key="link.title" v-bind="link" />
methods: {
closeme() {
console.log('event received');
this.leftDrawerOpen = false;
}
},

68. q-table
• https://quasar.dev/vue-components/table

69. Homework
• save user login timestamps to
fi
restore
• display user login info (w/ timestamp)
build your own table

70. q-table
• save user data to Firestore
var cdate = Date.now()
// firestore insert => then we can get doc id to generate qr code
db.collection("qrgen").add({
date: cdate,
id: this.getFireUser.email,
status: this.sliderValue //this.group
})
.then((docRef) => {
// console.log("Document written with ID: ", docRef.id);
})
.catch((error) => {
console.error("Error adding document: ", error);
});

71. q-table
• basic layout
<section v-if="!onloading">
<q-table :title="date" :rows="rows" :columns="columns" row-key="no" v-model:pagination="pagination" :filter="filter">
</q-table>
</section>
‘onloading’ set to be false when data is completely loaded data() {
return {
pagination: {
sortBy: 'time',
descending: false,
rowsPerPage: 15, // current rows per page being displayed
},
date: '2019/02/01',
filter : '',
columns : [
{
name: 'no',
required: true,
label: 'SID',
align: 'left',
field: row => row.no,
format: val => `${val}`,
sortable: true
},
{ name: 'name', align: 'left', label: 'Name', field: 'name', sortable: true },
{ name: 'time', align: 'left', label: 'Check-In Time', field: 'time', sortable: true },
{ name: 'temperature', label: 'Temperature', field: 'temperature', sortable: true }
],
rows : [ ],
cnt : 1,
onloading : true
}
},

72. q-table
data load
dataLoad: function () {
this.cnt = 1
var now = new Date();
var startOfDay = new Date(now.getFullYear(), now.getMonth(), now.getDate());
var timestamp = startOfDay / 1;
db.collection("checkin").where("time", ">=", timestamp) // 오늘 체크인만 확인
.onSnapshot((snapshot) => {
snapshot.docChanges().forEach((change) => {
if (change.type === "added") {
var tempRow = {name: '', time:'', temperature:''}
tempRow.name = change.doc.data().name
const getTime = (timeStamp, offset) => {
let d = new Date((timeStamp + offset));
var hour = d.getHours()
var min = d.getMinutes()
var sec = d.getSeconds()
if (hour < 10) { hour = "0" + hour; }
if (min < 10) { min = "0" + min; }
if (sec < 10) { sec = "0" + sec; }
let ret = (d.getMonth()+1)+ "/"+(d.getDate())+ " "+hour+ ":"+min+":"+sec
return ret
}
tempRow.time = getTime(change.doc.data().time,0)
tempRow.no = this.cnt
this.cnt++
tempRow.temperature = change.doc.data().temperature
this.rows.push(tempRow)
}
});
});
this.onloading = false
} // end of dataLoad
ref : https://
fi
rebase.google.com/docs/
fi
restore/query-data/listen?hl=ko

73. q-table
• additional function - search
<section v-if="!onloading">
<q-table :title="date" :rows="rows" :columns="columns" row-key="no" :pagination.sync="pagination" :filter="filter">
<template v-slot:top-right>
<q-input borderless dense debounce="300" v-model="filter" placeholder="Search">
<template v-slot:append>
<q-icon name="search"></q-icon>
</template>
</q-input>
</template>
</q-table>
</section>

74. q-table
• additional function - date picker
<template v-slot:top-left>
<div class="q-pa-md" style="width: 150px; margin-top: 20px">
<q-input borderless dense debounce="300" v-model="date" mask="date" :rules="['date']">
<template v-slot:append>
<q-icon name="event" class="cursor-pointer">
<q-popup-proxy ref="qDateProxy" transition-show="scale" transition-hide="scale">
<q-date v-model="date">
<div class="row items-center justify-end">
<q-btn v-close-popup label="Close" color="primary" flat @click="datePicked()"></q-btn>
</div>
</q-date>
</q-popup-proxy>
</q-icon>
</template>
</q-input>
</div>
</template>
should be coded between <q-table> and </q-table>

75. q-table
• additional function
- date picker
datePicked(){
this.cnt = 1
this.rows = []
var yyyyMMdd = String(this.date);
var sYear = yyyyMMdd.substring(0,4);
var sMonth = yyyyMMdd.substring(5,7);
var sDate = yyyyMMdd.substring(8,10);
var startOfDay = new Date(Number(sYear), Number(sMonth)-1, Number(sDate));
var timestamp = startOfDay / 1;
var timestampp1d = timestamp + 86400000
db.collection("users").where("date", ">=", timestamp).where("date", "<", timestampp1d)
.get()
.then((querySnapshot) => {
querySnapshot.forEach((doc) => {
var tempRow = {name: '', time:'', temperature:''}
tempRow.name = doc.data().email
const getTime = (timeStamp, offset) => {
let d = new Date((timeStamp + offset));
console.log(d)
var hour = d.getHours()
var min = d.getMinutes()
var sec = d.getSeconds()
if (hour < 10) { hour = "0" + hour; }
if (min < 10) { min = "0" + min; }
if (sec < 10) { sec = "0" + sec; }
let ret = (d.getMonth()+1)+ "/"+(d.getDate())+" "+hour+ ":"+min+":"+sec
return ret
}
tempRow.time = getTime(doc.data().date,0)
tempRow.no = this.cnt
this.cnt++
tempRow.name = doc.data().name
this.rows.push(tempRow)
});
})
.catch((error) => {
console.log("Error getting documents: ", error);
});
}

76. q-table
• additional function - csv export
<div align="right">
<q-btn
color="primary"
icon-right="archive"
label="Export to csv"
no-caps
@click="exportTable"
>
</q-btn>
</div>
exportTable () {
var columns = this.columns
var rows = this.rows
// naive encoding to csv format
const content = [columns.map(col => this.wrapCsvValue(col.label))].concat(
rows.map(row => columns.map(col => this.wrapCsvValue(
typeof col.field === 'function'
? col.field(row)
: row[ col.field === void 0 ? col.name : col.field ],
col.format
)).join(','))
).join('rn')
const status = exportFile(
'table-export.csv',
content,
'text/csv'
)
if (status !== true) {
$q.notify({
message: 'Browser denied file download...',
color: 'negative',
icon: 'warning'
})
}
},

77. q-table
• additional function - csv export
wrapCsvValue (val, formatFn) {
let formatted = formatFn !== void 0
? formatFn(val)
: val
formatted = formatted === void 0 || formatted === null
? ''
: String(formatted)
formatted = formatted.split('"').join('""')
/**
* Excel accepts n and r in strings, but some other CSV parsers do not
* Uncomment the next two lines to escape new lines
*/
// .split('n').join('n')
// .split('r').join('r')
return `"${formatted}"`
},
import { exportFile } from 'quasar'

78. FirebaseSecurityRules
• https://khreniak.medium.com/cloud-
fi
restore-security-rules-basics-fac6b6bea18e

79. makeyourprivacypolicy
• https://www.privacy.go.kr/a3sc/per/inf/perInfStep01.do

80. checklicenses
• https://www.npmjs.com/package/license-checker
OSS(Open Source Software)
npm install -g license-checker
license-checker --csv --out ./licenses.csv

81. androidstudio
• install
• license package download after installation
https://devvkkid.tistory.com/204
• build
• run (w/ AVD manager)

82. cordova
• npm install -g cordova
• quasar dev -m android --ide
android studio error might be occurred :
“Installed Build Tools revision 31.0.0 is corrupted. Remove and install again using the SDK Manager.”
if you get above error, then you should modify version settings in your build.grade as below image
then type below command on your terminal (https://stackover
fl
ow.com/questions/68387270/android-studio-error-installed-build-tools-revision-31-0-0-is-corrupted)
cd ~/Library/Android/sdk/build-tools/31.0.0 && mv d8 dx && cd lib && mv d8.jar dx.jar
then close android studio and re-run “quasar dev -m android —ide"

83. cordova
• result

84. cordova
• quasar build -m cordova -T android
• brew install gradle
if you get a net error on simulator, then check you port in quasar.conf.js

85. cordova
• https://bottlecok.tistory.com/177
aab build

86. cordova
• quasar dev -m cordova -T ios
• quasar build -m cordova -T ios
• https://www.youtube.com/watch?v=P_Ox5s4anCI
ios

87. Vue3 tutorial
extra

88. BasicStructure
• setup is called between “before created” and “created”
• you can set a style whatever you want
step 1
<template>
<div class="test">
Hello World, {{ name }}
</div>
</template>
<script>
import { defineComponent } from 'vue';
export default defineComponent({
name: 'PageIndex',
setup() {
const name = "KOPO"
return {
name
}
}
})
</script>
<style lang="scss">
.test {
color: red;
background-color: yellow;
text-align: center;
font-size: 30px;
}
</style>

89. BasicStructure
• add function “printName”
add a function
<template>
<div class="test">
Hello World, {{ name }}
<p></p>
{{ printName() }}
</div>
</template>
<script>
import { defineComponent } from 'vue';
export default defineComponent({
name: 'PageIndex',
setup() {
const name = "KOPO"
const printName = () => {
return name + "!!"
}
return {
name,
printName
}
}
})
</script>

90. BasicStructure
• add a parameter : param
• call the function with parameter
add a parameter
<template>
<div class="test">
Hello World, {{ name }}
<p></p>
{{ printName(name) }}
</div>
</template>
<script>
import { defineComponent } from 'vue';
export default defineComponent({
name: 'PageIndex',
setup() {
const name = "KOPO"
const printName = (param) => {
return 'hello '+ param + "!!"
}
return {
name,
printName
}
}
})
</script>

91. BasicStructure
• we want to change name string when a button is clicked.
but, the result is …
• tip> button width dynamically can be set.
use $ref !
add a button
<template>
<div class="test" ref="topitem">
Hello World, {{ name }}
<p></p>
{{ printName(name) }}
</div>
<q-btn
@click="changeName"
class="button is-primary"
color="primary"
label="BUTTON"
:style="{width: itemWidth+'px'}" />
</template>
<script>
import { defineComponent, ref } from 'vue';
export default defineComponent({
name: 'PageIndex',
mounted() {
this.itemWidth = this.$refs.topitem.clientWidth
console.log(this.itemWidth)
},
setup() {
let name = "KOPO"
let itemWidth = ref(0)
const printName = (param) => {
return 'hello '+ param + "!!"
}
const changeName = () => {
name = "Button Clicked"
console.log("name chaged? ", name)
}
return {
name,
itemWidth,
printName,
changeName
}
}
})
</script>
<style lang="scss">
.test {
color: red;
background-color: yellow;
text-align: center;
font-size: 30px;
width: 300px;
}
</style>

92. BasicStructure
• “KOPO” —> ref(“KOPO”)
• name —> name.value
use ref to make the variable to be reactive
setup() {
let name = ref("KOPO")
let itemWidth = ref(0)
const printName = (param) => {
return 'hello '+ param + "!!"
}
const changeName = () => {
name.value = "Button Clicked"
console.log("name chaged? ", name)
}
if you use object or array data, use reactive(“~”) instead ref(“~”)