DEV Community: Yasunori Tanaka

[WIP] Quasar

Yasunori Tanaka — Thu, 05 Aug 2021 08:48:44 +0000

Quasar

Style

Quasar component and css style is almost same of Vuetify. If you are familiar with Vuetify, Quasar is easy to understand.

<q-layout view="hHh lpR fFf">
    // same of Vuetify's v-app-bar
    <q-header>...

    // same of Vutify's v-navigation-drawer
    <q-drawer>...

    // specify color with class
    <div class=text-blue bg-primary>

Theme builder

You can create your project's theme with the theme builder.

After build, you will get your style. Below is the example in SASS.

$primary   : #027BE3
$secondary : #26A69A
$accent    : #9C27B0

$dark      : #1D1D1D

$positive  : #21BA45
$negative  : #C10015
$info      : #31CCEC
$warning   : #F2C037

$primary   : #f39800
$secondary : #f19c00
$accent    : #f17b38

Set your them in Quasar option.

quasar-user-option.js

export default {
  config: {
    brand: {
      primary: "#f39800",
      secondary: "#f19c38",
      accent: "#f17b38",

      dark: "#1d1d1d",

      positive: "#55e700",
      negative: "#e70055",
      info: "#0055e7",
      warning: "#e7d400",
    },
  },
  plugins: {},
  lang: lang,
};

Use Quasar with the option in Vue.

main.ts

import quasarUserOptions from "./quasar-user-options";

const app = createApp(App);
app.use(Quasar, quasarUserOptions);

Layout builder

Quasar provides us common layout patterns. At first before/after we can generate Vue template with GUI.

The generated template is compatible with Vue Router. You just copy and paste it into your root Vue component.

PrimeVue

Style

<template>
  <div class=>
  <div>
    <Menubar :model="items">
      <template #start>
        asa
        <i style="color: var(--text-color)" class="pi pi-apple"></i>
      </template>
    </Menubar>
    <router-view></router-view>
  </div>

Theme builder

Layout builder

we should

Creating business logic on Amplify

Yasunori Tanaka — Wed, 09 Dec 2020 07:53:07 +0000

As described in this document, GraphQL on AppSync can connect many data sources as business logic. For example, API Gateway, another AppSync, and Fargate via HTTP and lambda function.

I think, for a small project, the lambda function as a data source is useful for writing business logic.

We have two approaches to get data. A lambda function gets data from DynamoDB and GraphQL.

Create a lambda function

$ amplify add function

Amplify function needs permission to read/write to DynamoDB and GraphQL

$ amplify update function

? Do you want to update the Lambda function permissions to access other resources in this project? Yes
? Select the category api, storage
Api category has a resource called amplifynuxt
? Select the operations you want to permit for amplifynuxt create, read, update, delete
Storage category has a resource called <Your DynamoDB table>:@model(appsync)
? Select the operations you want to permit for <Your DynamoDB table>:@model(appsync) create, read, update, delete
...

You can access the following resource attributes as environment variables from your Lambda function
        API_<Your API name>_GRAPHQLAPIENDPOINTOUTPUT
        API_<Your API name>_GRAPHQLAPIIDOUTPUT
        API_<Your API name>_GRAPHQLAPIKEYOUTPUT
        API_<Your API name>_PROPERTYTABLE_ARN
        API_<Your API name>_PROPERTYTABLE_NAME

Add a query in schema.graphql

schema.graphql

type Query {
  getData(msg: String): String @function(name: "<your lambda function name>-${env}")
}

Gets data from DynamoDB

In your index.js in amplify/backend/function/<your lambda function name>/src, change code like blow.

const AWS = require('aws-sdk');
const docClient = new AWS.DynamoDB.DocumentClient();

const params = {
  TableName : 'your-table-name',
  Item: {
     id: '12345',
  }
}

async function getItem(){
  try {
    await docClient.put(params).promise();
  } catch (err) {
    return err;
  }
}

exports.handler = async (event) => {
  try {
    await getItem()
    return { body: 'Successfully created item!' }
  } catch (err) {
    return { error: err }
  }
};

Push code.

$ amplify push

Test the function.

gets data from GraphQL

$ npm install axios, graphql-tag, graphql

Update the index.js

/* Amplify Params - DO NOT EDIT
    API_<Your API name>_GRAPHQLAPIENDPOINTOUTPUT
    API_<Your API name>_GRAPHQLAPIIDOUTPUT
    API_<Your API name>_GRAPHQLAPIKEYOUTPUT
    API_<Your API name>_PROPERTYTABLE_ARN
    API_<Your API name>_PROPERTYTABLE_NAME
    ENV
    REGION
Amplify Params - DO NOT EDIT */
const axios = require('axios');
const gql = require('graphql-tag');
const graphql = require('graphql');
const { print } = graphql;

const listPropertys = gql`
  query listPropertys {
    listPropertys {
      items {
        id
        name
      }
    }
  }
`

exports.handler = async (event) => {
  try {
    const graphqlData = await axios({
      url: process.env.API_<Your API name>_GRAPHQLAPIENDPOINTOUTPUT,
      method: 'post',
      headers: {
        'x-api-key': process.env.API_<Your API name>_GRAPHQLAPIKEYOUTPUT
      },
      data: {
        query: print(listPropertys),
      }
    });
    const body = {
        graphqlData: graphqlData.data.data.listPropertys
    }
    return {
        statusCode: 200,
        body: JSON.stringify(body),
        headers: {
            "Access-Control-Allow-Origin": "*",
        }
    }
  } catch (err) {
    console.log('error posting to appsync: ', err);
  } 
}

Push code.

$ amplify push

Test the function.

Pass parent's async data to child component in NuxtJS

Yasunori Tanaka — Thu, 27 Aug 2020 02:07:41 +0000

One solution that passes data to a child component as props and gets another async data with the props.

parent component

<template>
  <Selector :user-id="userId"/>
</template>

<script>
import Vue from "vue";
import Selector from "~/components/Selector.vue";

export default Vue.extend({
  components: { Selector },

  data() {
    return {
      userId: undefined
    };
  },

  async fetch() {
    this.userId = await this.$asios.$get("http://example.com");
  }
});
</script>

The parent component passes userId as props.

child component

<template>
  <p v-if="user">{{ user.name }}</p>
</template>

<script>
import Vue from "vue";

export default Vue.extend({
  props: {
    userId: {
      type: String,
      required: true
    }
  },

  data() {
    return {
      user: undefined
    };
  },

  watch: {
    userId() {
      this.getUser();
    }
  },

  methods: {
    async getUser() {
      if (!this.userId) {
        return;
      }

      this.user = await this.$asios.$get("http://example.com/get_user");
    }
  }
});
</script>

After the child component get a userId with watch(), it requests an async user data.

Look into foreign key constraint error in MySQL

Yasunori Tanaka — Wed, 05 Aug 2020 08:31:39 +0000

Sometimes we encounter the error that we cannot insert/update/delete records by foreign key constraint error.

The error message like

[23000][1452] Cannot add or update a child row: a foreign key constraint fails

But this message may not help us to solve the problem because it doesn't have the detail.

So we can see the detail with the below query.

mysql> show engine innodb status;

Then we can get the detail in "LATEST FOREIGN KEY ERROR" section.

------------------------
LATEST FOREIGN KEY ERROR
------------------------
2020-08-05 07:37:15 0x7fe488261700 Transaction:
TRANSACTION 306127, ACTIVE 0 sec updating or deleting
mysql tables in use 1, locked 1
...

Prevent updating query updates all records in GORM

Yasunori Tanaka — Mon, 03 Aug 2020 11:57:26 +0000

Finally, I found that prevent updating all records when I forget with a primary ID in GORM.

Sometimes, we forget primary ID for updating a record in a query. This query will occur the problem that all records in the table will be updated because the query does not specify a primary ID.

A query below will update one record with a company ID.

var db *gorm.DB
db, err = gorm.Open("mysql")

company := &Company{
   Model: gorm.Model{ID: companyID},
   Name:  request.Name,
}

_, err := db.Model(&company).Update(company)
if err != nil {
   ...
}

This query works well wholly.

In contrast, the blow query without a primary ID will update all records.

var db *gorm.DB
db, err = gorm.Open("mysql")

company := &Company{
   Name:  request.Name,
}

_, err := db.Model(&company).Update(company)
if err != nil {
   ...
}

If this code is deployed to production service with no test, I don't want to imagine that it will do to our database.

So we can prevent this behavior with func (*DB) BlockGlobalUpdate.

var db *gorm.DB
db, err = gorm.Open("mysql")

db.BlockGlobalUpdate(true)
...

Again, the same query with not primary ID.

company := &Company{
   Name:  request.Name,
}

_, err := db.Model(&company).Update(company)

If we forget primary ID like that, we will get an error from GORM like below.

2020-08-03T07:45:14.011Z  ERROR  logger/logger.go:58  missing WHERE clause while updating

BlockGlobalUpdate() can prevent updating all records in a table.

Wrapping up, we should use BlockGlobalUpdate() when we create a gorm DB instance. Otherwise, someday your query could destroy your user's data entirely.

Using Vuetify v-data-table's interface

Yasunori Tanaka — Tue, 28 Jul 2020 11:05:46 +0000

In .vue file

<template>
  <v-data-table :headers="header" :options.sync="options"> ... </v-data-table>
</template>

<script lang="ts">
import { DataOptions, DataTableHeader } from 'vuetify/types'

interface DataType {
  options: DataOptions
  headers: DataTableHeader[]
}

export default Vue.extend({
  data(): DataType {
    options: {}
    headers: []
  }
})

You can import interfaces from vuetify/types.

Derive type info from a function

Yasunori Tanaka — Fri, 17 Jul 2020 09:24:34 +0000

We can derive type from a function like this.

const createPerson = () => ({
  firstName: 'Yasunori',
  lastName: 'Tanaka',
})

type Person = ReturnType<typeof createPerson>

And then, use that as Person type.

The things I noticed in mysterious project

Yasunori Tanaka — Thu, 02 Jul 2020 06:23:36 +0000

Tech

DB design

Don't use binary format tool like MySQL Workbench

It's not easy to share a binary file in a team or VCS.

Design tables incrementally

Create only the tables that we can know so far. Do not spend time to create entire system tables by estimating the future of the tables. But we should make a sequence diagram of our business at the beginning.

Use plural or singular table name for

Plural or singular is not essential. But we should decide which one we use at first.

Architecture design

Don't use an architecture that is over-engineering

We should not use a big architecture like the Clean Architecture at the beginning. That is just wasting your team's time.

Protocol Buffers

We used Protocol Buffers initially, but I think It was over-engineering because we just created a web service that doesn't have special tech. It was enough to use JSON format for communicating between and front-end and back-end.

CI and CD

We should prepare an app for checking an overview of it by business members at the first beginning. To reduce uncertainty.
Updating prototyping and web pages.

Remote work

Our all team members worked from home and used Zoom and Discord. We use Zoom for only video and Discord for only voice chat. There are great communication tools so far. We feel as if we work at an office together. We don't have any walls between us.

research what tech we use

update our workflow and diagram constantly

Use a sequence diagram on the web, not a local file. It's easy to collaborate.
paper prototyping -> write detail in Figma

model

Create a specific model for requesting and receiving data, not use entity.

Create a prototype view

Share your app's prototype and discuss it with your team. Prototyping should not be costly to create and share.

Updating prototype for accuracy

Project management

Set a final goal and deadline and make a plan to get there in time. Use the milestone in GitHub to make small goals.

Iterate this

create specs
data structure
create app
launch

Stakeholders can check this app

create issues by the members want/suggestion

Use the Milestone and Project in GitHub.

We should not put pressure too much on members.
Don't do use complex project management schemes and tools like the Scrum in a small team.

we should share our goal

Team

communication

We should have an environment that makes us easy to communicate each other anytime.

respect our team members

[From May 28 to June 3] The things I knew and thought last week

Yasunori Tanaka — Thu, 04 Jun 2020 06:33:47 +0000

[Nuxt] set/get cookie in SSR
https://github.com/nuxt/nuxt.js/issues/2215

Another way

import Cookies from 'js-cookie'
https://github.com/js-cookie/js-cookie
Cookies.set('company.id', companyId, { expires: 7 })

I created a cookie util that gets cookie by key and parse

export const getCookie = (cookie: string, key: string): string | undefined => {
  let item = cookie.split(' ').find((v) => v.includes(key))
  if (item) {
    // remove semi colon "job.id=32;"
    if (item.includes(';')) {
      item = item.slice(0, -1)
    }
    // "job.id=32"
    const kv = item.split('=')
    item = kv[1]
  }

  return item
}

[From May 21 to May 27] The things I knew and thought last week

Yasunori Tanaka — Thu, 28 May 2020 04:01:44 +0000

[vuetify] breadcrumb generator

I want to generate Vuetify's breadcrumb automatically by URL.

Let's say it the URL is /home/company/list. The generator makes breadcrumbs like the below.

[
  {
    title: 'HOME',
    url: '/home',
  },
  {
    title: 'HOME / Companies',
    url: '/home/company/list',
  },
]

[vue] create form initializer

Almost case, I will create an initial data with an interface using TypeScript like this.

interface Data {
  id: number
  name: string
}

Vue.extend({
  data(): Data {
    return {
      id: 0,
      name: '',
    }
  }
})

But if the Data interface definition gets much more, I have to fill in all initial value for the Data because the TypeScript compiler cannot build it.

So I want to generate initial values from a Data interface. Below is an example. generator function makes initial values from the interface.

const initalValues = generator(data: Data)

// initialValues
{
  id: 0,
  name: '',
}

[js] module bundler

I'm looking into how module bundler works.

[From May 14 to May 20] The things I knew and thought last week

Yasunori Tanaka — Thu, 21 May 2020 03:34:22 +0000

[RDB] The upper size of table name is 64 characters in MySQL 5.6 and 8.0

https://dev.mysql.com/doc/refman/5.6/en/identifier-length.html
https://dev.mysql.com/doc/refman/8.0/en/identifier-length.html

[GORM] belonging to

Foreign key

[GORM] Polymorphism association

[vue] syntax error when I use "esnext" in tsconfig.json

"es2018"

export interface Item {
  name?: string
}

I used this interface const name = item?.name.

[vue]

$ref

[GORM] use where

[GORM] auto preload

[vue] watch object data

watch: {
  'item.name': function(name: string) {
    // do something
  }
}

[From May 7 to May 13] The things I knew and thought last week

Yasunori Tanaka — Thu, 14 May 2020 07:13:42 +0000

[Vue] Adding component dynamically
https://vuejs.org/v2/guide/components.html#Dynamic-Components

parent.vue

<template>
  <component
   v-for="(item, index) in items"
   @appendAmount="appendAmount(index, $event)"
   v-bind:amount="device.amount"
   v-bind:is="'Selector'"
   :key="device.deviceId"
 ></component>
</template>

<script>
export default Vue.extend({
methods
})
</script>

https://codesandbox.io/s/dynamic-components-762se

[Vue] How to use HOC in an event

[Vue] .sync modifier

[Vue] $data in IntelliJ IDEA

this.$data.form this.form

[Vue] Getting parent and chile component's parameter in the same function

$emit('...', $event)
@... = append(index, $event)

[Vue] @click.prevent

[Protocol Buffers] Cyclic import

[GORM] Using gorm.Model.ID for replacing on Association Replace