# A New Beginning
##### June 8th, 2020 By Alex Hu
![main](/images/a-new-beginning.jpg)

After converting a couple of Flex / ActionScript applications to React + Redux at work for the last few years,
it is time to refresh the server side skill set as well. To document the journey, I decided to have some fun
creating my personal portfolio site and have it serves as a test bed for different technologies.

There are quite a few things I would like to learn. The primary ones are

 - TypeScript
 - React with Hooks, without Redux
 - Node.js
 - GraphQL + Apollo

I also want to pick up these ones along the way:

 - MongoDB
 - Authentication
 - Cloud functions
 - Cloud deployment
 - Docker
 - AWS Free Tier / Google Cloud Platform Free Tier


After converting a couple of Flex / ActionScript applications to React + Redux at work for the last few years, it is time to refresh the server side skill set as well. To document the journey, I decided to have some fun creating my personal portfolio site and have it serves as a test bed for different technologies. There are...

A New Beginning

# A Touch of Animation
##### July 20th, 2020 By Alex Hu
![main](/images/a-touch-of-animation.jpg)

[Framer Motion](https://www.framer.com/motion/) is a animation library for React. This library is rather easy to use.
Instead of a h2, you can use motion.h2 and add the animation as props.

I added some subtle animations to the pages.

### [Timeline](/)

In the timeline, the link for article title is scaled slightly larger when hovering. The bulk of the work is to
find what the Link element actually mapped to as an anchor element and then put in the right class names. The actual
animation is a simple whileHover property.

```js
whileHover={{
  scale: 1.1,
  originX: 0,
}}
>
```

### [Article Card](/posts)

The second hover effect is the on the box shadow of the article card and a very slight scaling of it,
by a simple replacement of the Card component. You hardly notice that the animation because of the
very short duration but it is there.

```js
<motion.div
  className={clsx('article-card', 'large', 'MuiPaper-root MuiCard-root MuiPaper-outlined MuiPaper-rounded')}
  whileHover={{
    scale: 1.01,
    boxShadow: '0px 6px 6px -4px rgba(0,0,0,0.2), 0px 6px 8px 0px rgba(0,0,0,0.14), 0px 2px 16px 0px rgba(0,0,0,0.12)',
  }}
  transition={{
    duration: 0.05,
  }}
>
```

### [Flash of Unstyled Content](/posts/flash-of-unstyled-content)

I replaced the old FOUC mechanism with a simple fade in effect on a layout wrapper.

```js
import React, { PropsWithChildren } from 'react'
import Head from 'next/head'
import { motion } from 'framer-motion'
import { NavBar } from './Navigation'
import Footer from './Footer'

type Props = {
  title: string
  activeItem: string
}

const Layout: React.FC<PropsWithChildren<Props>> = ({ children, title, activeItem }) => {
  // avoid Flash of Unstyled Content by hiding all contents initially
  // then make it visible once loaded
  const containerVariants = {
    hidden: {
      opacity: 0
    },
    visible: {
      opacity: 1,
      transition: { duration: 0.1 },
    },
  }

  return (
    <motion.div
      variants={containerVariants}
      initial='hidden'
      animate='visible'
    >
      <Head>
        <title>{ title }</title>
        <meta charSet='utf-8' />
        <meta name='viewport' content='initial-scale=1.0, width=device-width' />
        <meta name='google-site-verification' content='yKJNmNpvtiHvsXH_CN5BxIgVy5dwktxYqpXYAQgvNdo' />
        <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap' />
        <link rel='stylesheet' href='https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@300;400&display=swap' />
      </Head>
      <NavBar activeItem={activeItem} />
      {children}
      <Footer />
    </motion.div>
  )
}

export default Layout
```

### Exit Animation

I added the left / right arrow buttons at the top right corner for easy navigation to the previous / next article.
When clicked, it will trigger the exit animation by swiping the article left / right.

```js
const containerVariants = {
  exitBack: {
    x: '100vw',
    transition: { ease: 'easeInOut' },
    duration: 1,
  },
  exitNext: {
    x: '-100vw',
    transition: { ease: 'easeInOut' },
    duration: 1,
  },
}

const exitAnimation = useAnimation()

const back = async () => {
  await exitAnimation.start('exitBack')
  router.push(getNextRoute(router.route, routes, -1))
}

const next = async () => {
  await exitAnimation.start('exitNext')
  router.push(getNextRoute(router.route, routes, 1))
}

<motion.div
  variants={containerVariants}
  animate={exitAnimation}
>
```


Framer Motion is a animation library for React. This library is rather easy to use. Instead of a h2, you can use motion.h2 and add the animation as props. I added some subtle animations to the pages...

A Touch of Animation

# Choosing a Mobile App Framework
##### September 28th, 2020 By Alex Hu
![main](/images/choosing-a-mobile-app-framework.jpg)

There are quite a few choices for create a mobile app. As a learning project, it is important
to pick something new that I can give it a fair workout.

### Mobile App Frameworks

#### 1. [Android with Kotlin](https://developer.android.com/kotlin/)

Since I already have experience with Android app with Kotlin using the ExoPlayer library, there is no
need to go down this path.

#### 2. [React Native](https://reactnative.dev/)

React Native is probably the most logical choice, and you can pick from
[React Native CLI or Expo CLI](https://techstacker.com/react-native-expo-vs-react-native-cli-whats-the-difference/).
Given that I already have a few years on React, it would be good to pick something new to try out.

#### 3. [Flutter with Dart](https://flutter.dev/)

[Flutter vs Native Android](https://www.youtube.com/watch?v=xEA9vw8t4Ho) explained the pros and cons quite well.

[Flutter Crash Course for Beginners 2020 - Build a Flutter App with Google's Flutter & Dart](https://www.youtube.com/watch?v=x0uinJvhNxI)
gave a good introduction of it. It reminded me of
[Adobe ActionScript and MXML](https://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/index.html)
which I spent the last 2 years at work converting the end-of-life technology into React.js.

Another consideration is [Jet Compose](https://developer.android.com/jetpack/compose) which offer similar way
to build UI but with a much gradule migration path as you can add
[Compose to existing app](https://www.youtube.com/watch?v=PjQdFmiDgwk) quite easily.
In fact, I will build new fragments with Compose.

#### 4. [Ionic Framework with Angular](https://ionicframework.com/docs/angular/overview)

I finally decided on using the Ionic Framework with Angular. Angular, being one of the big 3 UI frameworks,
is a good skill to pick up. Being able to build an iOS / Android / PWA / Desktop app using the Ionic Framework
is a big plus.

- [Angular](https://angular.io/) - Angular is an application design framework and development platform for creating efficient and
sophisticated single-page apps.

- [Ionic Framework](https://ionicframework.com/) - Ionic Framework is is an open source mobile UI toolkit for building high quality,
cross-platform native and web app experiences. Move faster with a single codebase, running everywhere.

- [Ionic Angular](https://ionicframework.com/docs/angular/overview) - Ionic Angular combines the core Ionic experience with the tooling
and APIs that are tailored to Angular Developers.


There are quite a few choices for create a mobile app. As a learning project, it is important to pick something new that I can give it a fair workout...

Choosing a Mobile App Framework

# Cloud Deployment
##### July 10th, 2020 By Alex Hu
![main](/images/cloud-deployment.jpg)

[Vercel](https://vercel.com/), the creator of Next.js, has this really easy deployment for Next.js app.
All you need to do is to import your Git Repository and the
[Git Integrations](https://vercel.com/docs/v2/git-integrations) allows automatic deployments on every push.

For example, this site is at https://portfolio.alexhu.vercel.app/
and I only have to manually deploy it once in the very beginning, then just push my code to
the repository. I was looking for the redeploy button on their site but couldn't find one, then
I released that it is automatic!

### [Static Site Generation](https://vercel.com/blog/nextjs-server-side-rendering-vs-static-generation)

My site was built without problem and the Index page and Posts page run fine. But it gives the following
error for initial post article (pages/posts/\[id\].tsx)
```
An error occurred with this application.
This is an error with the application itself, not the platform.

502: BAD_GATEWAY
Code: NO_RESPONSE_FROM_FUNCTION
ID: sfo1::8skpg-1594403487039-f833ea7fd94f
```

I notice that the only different between them is the
[getStaticProps()](https://nextjs.org/docs/basic-features/data-fetching#getstaticprops-static-generation)
is used in the Posts page, while the \[id\] page is using
[getServerSideProps()](https://nextjs.org/docs/basic-features/data-fetching#getserversideprops-server-side-rendering)
My getServerSideProps() used context.query which is causing the error:
```js
export const getServerSideProps = async (context: Context) => {
  const { id } = context.query
```
and switch to use context.params resolved the problem.
```js
export const getServerSideProps = async (context: Context) => {
  const { id } = context.params ? context.params : context.query
```

Since my site can be run using server static generation, I decide to switch to getStaticProps().
```js
export const getStaticProps = async (context: Context) => {
  console.log('getStaticProps -> context', context) // when in doubt, console log the context
  const { id } = context.params ? context.params : context.query
  const apolloClient = initializeApollo()
  try {
    await apolloClient.query({
      query: ArticleQuery,
      variables: {
        id,
      }
    })
  }
  catch (error) {
    console.error('Post -> getStaticProps -> error', error)
  }
  return {
    props: {
      id,
      initialApolloState: apolloClient.cache.extract(),
    }
  }
}
```
Since the \[id\] page has dynamic routes, you also need a
[getStaticPaths()](https://nextjs.org/docs/basic-features/data-fetching#getstaticpaths-static-generation)
to define a list of paths that have to be rendered to HTML at build time, such as
```js
export async function getStaticPaths() {
  return {
    paths: [
      '/posts/a-new-beginning',
      '/posts/sprint-1-gearing-up',
      //...
      '/posts/cloud-deployment',
    ],
    fallback: true,
  }
}

```
The actual code uses a GraphQL query for the list of articles to compile the paths.
```js
export async function getStaticPaths() {
  const apolloClient = initializeApollo()
  try {
    const result = await apolloClient.query({
      query: ArticlesQuery,
    })
    const articles = R.defaultTo([], result?.data?.articles)
    const paths = R.map(article => `/posts/${article.id}`, articles)
    return {
      paths,
      fallback: true,
    }
  }
  catch (error) {
    console.error('Post -> getStaticPaths -> error', error)
  }
  return {
    paths: [],
    fallback: true,
  }
}
```


Vercel, the creator of Next.js, has this really easy deployment for Next.js app. All you need to do is to import your Git Repository and the Git Integrations allows automatic deployments on every push. For example, this site is at https://portfolio.alexhu.vercel.app/ and I only have to manually deploy it once in the very beginning, then just push my code to...

Cloud Deployment

# Connecting the Client and the Server
##### June 28th, 2020 By Alex Hu
![main](/images/connecting-the-client-and-the-server.jpg)

### [Apollo Client](https://www.apollographql.com/docs/react/data/mutations/)

For the Add / Edit / Delete, the client uses useMutation() to trigger a mutation.
```js
const [updateArticle] = useMutation(UpdateArticleMutation)

const changes = {
  ...article,
  title,
  summary,
  content,
}
await updateArticle({ variables: changes })
```

### [Apollo GraphQL Resolvers](https://www.apollographql.com/docs/apollo-server/data/resolvers/)

The server side implements the resolver with just a few lines:
```js
async updateArticle(_parent: any, args: any, _context: any, _info: any) {
  // console.log('updateArticle -> args', args)
  await dbConnect()
  args.input.updatedAt = (new Date()).toISOString()
  const article = await Article.findByIdAndUpdate(args.input.id, args.input, { new: true })
  return migrateArticle(article)
},
```
The [dbConnect()](/posts/20200624-connecting-to-mongodb) function makes the database connection and retries up to 10 times.

The migrateArticle() function migrates old data by adding the additional fields that were not in the initial data model,
such as the createdAt, updatedAt and section fields.


Connecting the Client and the Server

# Connecting to MongoDB
##### June 24th, 2020 By Alex Hu
![main](/images/connecting-to-mongodb.jpg)

Creating the [MongoDB](https://www.mongodb.com/) is simple enough through
[MongoDB Altas](https://www.mongodb.com/cloud/atlas) in the cloud, which can
be easily access using [MongoDB Compass](https://www.mongodb.com/products/compass)
for viewing the database records.

Create the schema with [Mongoose](https://mongoosejs.com/) is also easy and the generated models
can be used for the CRUD functions.

Maintaining a stable connection to MongoDB Atlas is a bit of a challenge. I tried to make a connection
once at the top of the resolver, but once in a while, I will get this error when trying to perform
a database operation like find / save / delete:
```
MongoError: topology was destroyed
```
I ended up putting my *dbConnect()* before each resolver operation to reconnecting to the database
and retry the connection if necessary,
```js
async deleteArticle(_parent: any, args: any, _context: any, _info: any) {
    await dbConnect()
    await Article.findByIdAndDelete(args.input.id)
    return true
},
```
The dbConnect() will make a connection and retry up to 10 times if failed.
```js
// dbConnecdt.js
import mongoose from 'mongoose'

const RETRY_MAX = 10
let connected = false

async function dbConnect() {
  if (!connected) {
    let retry = 0
    console.log('dbConnect -> entering, connected = ' + connected)
    while (!connected && retry < RETRY_MAX) {
      try {
        mongoose.Promise = Promise
        await mongoose.connect(process.env.MONGO_URI as string, {
          useNewUrlParser: true,
          useUnifiedTopology: true,
          useFindAndModify: true,
        })
        const connection = mongoose.connection
        connection.on('error', console.error.bind(console, 'dbConnect() connection error:'))
        connected = true
        break
      }
      catch (error) {
        console.error('dbConnect -> retry = ' + retry + ', error', error)
        retry--
      }
    }
    console.log('dbConnect -> exiting dbConnect, connected = ' + connected + ', retry = ' + retry)
  }
}

export default dbConnect
```


Creating the MongoDB is simple enough through MongoDB Altas in the cloud, which can be easily access using MongoDB Compass for viewing the database records. Create the schema with Mongoose is also easy and the generated models can be used for the CRUD functions. Maintaining a stable connection to MongoDB Atlas is a bit of a challenge. I tried to...

Connecting to MongoDB

# Creating the User Interface
##### June 26th, 2020 By Alex Hu
![main](/images/creating-the-user-interface.jpg)

### [Semantic UI React](https://react.semantic-ui.com/)

The [Menu](https://react.semantic-ui.com/collections/menu/#types-secondary-pointing)
component is used for the navigation bar. There are many variations and I decided on
the one that underline the active item.
```
<Menu pointing secondary>
```

### [Semantic UI's Card](https://react.semantic-ui.com/views/card/)

The Posts section used the
[Card component in a 2 columns group](https://react.semantic-ui.com/views/card/#types-group-props)
with a Add [button](https://react.semantic-ui.com/elements/button/) to create new post.

### [Markdown](https://www.markdownguide.org/)

Individual Post has Edit and Delete buttons for the corresponding actions.
The content are entered as Markdown using
[react-markdown](https://www.npmjs.com/package/react-markdown) as the UI component.
```js
import ReactMarkdown from 'react-markdown'
//...
<ReactMarkdown source={article.content} />
```


Creating the User Interface

# CSS Frameworks
##### June 18th, 2020 By Alex Hu
![main](/images/css-frameworks.jpg)

Time to pick a [CSS Framworks](https://dzone.com/articles/11-best-css-frameworks-to-look-forward-in-2020) from

- Bootstrap / React Bootstrap
- Materialize CSS / Material-UI
- Semantic UI / Semantic-UI-React

### [React Bootstrap](https://github.com/react-bootstrap/react-bootstrap)

Bootstrap is a no brainer as it is ranked #1 in almost every list. So popular that I decided to use it at work.
This is the only reason that I didn't pick it for my personal project.

### [Material-UI](https://material-ui.com/)

Android users will find this UI very comforting. In fact, I feel that it would make a page web look too much
like a phone screen especially with form input. I think I would try something new and may be switch back to
this one if there is a strong reason to do so.

### [Semantic-UI-React](https://react.semantic-ui.com/)

Semantic-UI is another good one, with good documents and a long list of components to pick from. I am going to
try it out just because it is nice and shiny.


CSS Frameworks

# Deno and Abc
##### September 23rd, 2020 By Alex Hu
![main](/images/deno-and-abc.jpg)

I want to enhance my existing Android video player app to support streaming files, and also create
a new mobile app as my very own personal assistant. They are going to access a local private server to run
some operations on my main computer.

Although I can add additional API into the existing Portfolio Next.js app, I decided on the
a different server app since this local server is going to be run on my computer at home instead
of published in the web.

### [Deno](https://deno.land/)

Deno is a simple, modern and secure runtime for JavaScript and TypeScript that uses V8.
I very much prefer the async / await that it offers. Not to mention that it is new and shiny.
However, like most new framework, it is less refine. For example, it takes some workaround
to get Ramda working, noting that the 3rd Party Ramda model in deno.land does not work for me.

```js
import { createRequire } from 'https://deno.land/std/node/module.ts'
const require = createRequire(import.meta.url)
export const R = require('ramda')
```

### [Abc](https://deno.land/x/abc)

Similar to Express for Node.js, Abc is a Deno framework to create web application.
I briefly tried [Oak](https://deno.land/x/oak) but was having problems with the RouterContext
and json parsing in the POST request body

Overall, it is quite easy to work with, and the boilerplate code is kept to a minimum.

### [Deno.test](https://deno.land/manual/testing)

Writing end-to-end test is easy enough. I have the server running in one terminal using, and have the test running on another terminal.
I use [denon](https://deno.land/x/denon) which is the deno replacement for nodemon, that automatically restart the deno project upon changes
in source code.

Deno.test() is quite similar to other test framework, for example:

```js
Deno.test('browse', async () => {
  await waitForServerToStart()
  const response = await fetch(getMediaApi())
  const result = await response.json()
  assertNotEquals(result.length, 0)
  const folder: MediaFolder = result[0]
  console.log(folder)
  assertStringContains(folder.url, 'stream')
  assertEquals(folder.name, 'stream')
  assert(folder.url.indexOf(' ') < 0, 'No space in url allowed')
})
```

The drawback of having server running on another terminal is that the tests could have started before the server is fully compiled and
may not be up and running. So I inserted a little bit of code in the beginning of each test to retry until the the server is start.

```js
const waitForServerToStart = async () => {
  let retryCount = 0
  while (retryCount++ < 10) {
    try {
      const response = await fetch(getMediaApi())
      console.log(`waitForServerToStart -> ${response.status}`)
      await response.json()
      if (response.ok) {
        return
      }
    }
    catch (ex) {
    }
  }
}
```


I want to enhance my existing Android video player app to support streaming files, and also create a new mobile app as my very own personal assistant. They are going to access a local private server to run some operations on my main computer. Although I can add additional API into the existing Portfolio Next.js app, I decided on the...

Deno and Abc

# Fade Out / Fade In Article
##### July 9th, 2020 By Alex Hu
![main](/images/fade-out-fade-in-article.jpg)

A little fade-out / fade-in transitions won't hurt when the user switches article by clicking around on the timeline.

1. fade out
2. listen for the [onExited](http://reactcommunity.org/react-transition-group/transition) event
3. switch the data
4. fade in
```js
const Index = () => {
  // ...
  const [selectedArticle, setSelectedArticle] = useState()
  const [fadeInArticle, setFadeInArticle] = useState()
  const [fadeIn, setFadeIn] = useState(true)

  const handleTitleClick = (e: React.MouseEvent<HTMLElement>, article: IArticle) => {
    e.preventDefault()
    fadeArticle(article)              // start the fade out / fade in sequence
  }

  const fadeArticle = (article: IArticle) => {
    if (article !== selectedArticle) {
      setFadeInArticle(article)       // remember the article to be faded in
      setFadeIn(false)                // trigger the fade out, then wait for onExited
    }
  }

  const handleFadeExited = () => {
    setSelectedArticle(fadeInArticle) // set the article
    setFadeIn(true)                   // trigger the fade in
  }

  return (
    // ...

    // set the transition timeout duration to 150 milliseconds for
    // each half of the fade-out / fade-in transitions
    <Fade in={fadeIn} timeout={150} onExited={handleFadeExited} >
      <Paper>
        <ArticlePanel article={selectedArticle} />
      </Paper>
    </Fade>
  )
}
```


A little fade-out / fade-in transitions won't hurt when the user switches article by clicking around on the timeline. 1. fade out 2. listen for the onExited event 3. switch the data 4. fade in...

Fade Out / Fade In Article

# Firebase Cloud Firestore
##### November 12th, 2020 By Alex Hu
![main](/images/firebase-cloud-firestore.jpg)

[Cloud Firestore](https://firebase.google.com/docs/firestore/) is a flexible, scalable database for mobile, web,
and server development from Firebase and Google Cloud Platform.

Setting up the app with Firebase is easy enough. There are plenty of tutorial on this topic, like this one:
[Ionic CRUD Operations Using Firebase with Firestore](https://www.freakyjolly.com/ionic-firebase-crud-operations/)

### [AngularFireAuth](https://github.com/angular/angularfire)

We already have the Google Plus authentication working. All we have to do is to exchange the id token for a
Firebase user id with the signInWithCredential() method.

```js
import { AngularFireAuth } from '@angular/fire/auth'
import * as firebase from 'firebase'

interface UserData {
  ready: boolean;
  signedIn: boolean;
  userId: string,
  name: string;
  profileImage: string;
  idToken: string;
  accessToken: string;
  expiresAt: number;
}
...
export class AuthenticationService implements OnDestroy {
  ...

  constructor(
    private ngZone: NgZone,
    private googlePlus: GooglePlus,
    private googleAuthService: GoogleAuthService,
    private fireAuth: AngularFireAuth,
  )

  updateUserDataByGoogleAuth(user: gapi.auth2.GoogleUser, authResponse: gapi.auth2.AuthResponse) {
    ...
    this.emit(userData);
    if (!userId) {
      this.updateUserDataWithFireAuth(userData);
    }
  }

  updateUserDataWithFireAuth(userData: UserData) {
    this.fireAuth.signInWithCredential(firebase.auth.GoogleAuthProvider.credential(userData.idToken, userData.accessToken))
      .then(credential => {
        userData.userId = credential.user.uid;
        this.emit(userData);
      })
  }
```

### Note Service

There are a couple of ways to assocate the user id with our notes collection in Firestore.
I picked this approach: [Model Relational Data in Firestore NoSQL](https://www.youtube.com/watch?v=jm66TSlVtcc) ,
because of the flexible structure for compound queries.

```js
import { Injectable, NgZone, OnDestroy, Query } from '@angular/core';
import { AngularFirestore } from '@angular/fire/firestore'
import * as firebase from 'firebase'
import { AuthenticationService } from './authentication.service'
import { BehaviorSubject } from 'rxjs'
import { SubSink } from 'subsink'

interface Note {
  id: string;
  content: string;
  updatedAt: firebase.firestore.Timestamp;
  userId: string;
}

@Injectable({
  providedIn: 'root'
})
export class NoteService implements OnDestroy {

  refresh$ = new BehaviorSubject<any>(null);
  notes$ = new BehaviorSubject<Note[]>([]);

  private subs = new SubSink();

  constructor(
    private ngZone: NgZone,
    private db: AngularFirestore,
    private authenticationService: AuthenticationService
  ) {
    this.subs.add(this.refresh$.subscribe(async () => await this.queryAll()));
    this.subs.add(this.authenticationService.user$.subscribe(() => this.refresh()));
  }

  ngOnDestroy(): void {
    this.subs.unsubscribe();
  }

  refresh(): void {
    this.refresh$.next(null);
  }

  async queryAll() {
    const userData = this.authenticationService.user$.getValue();
    if (userData.signedIn && userData.userId) {
      this.db.collection('notes').ref.where('userId', '==', userData.userId).orderBy('updatedAt', 'desc').get().then(docs => {
        const notes = []
        docs.forEach(doc => {
          notes.push({
            id: doc.id,
            ...doc.data(),
          });
        });
        this.emit(notes);
      });
    }
  }

  async update(id: string, content: string): Promise<void> {
    const now = firebase.firestore.Timestamp.fromDate(new Date());
    if (id) {
      await this.db.collection('notes').doc(id).update({
        content,
        updatedAt: now,
      });
    }
    else {
      const userData = this.authenticationService.user$.getValue();
      if (userData.signedIn && userData.userId) {
        await this.db.collection('notes').add({
          userId: userData.userId,
          content,
          updatedAt: now,
        });
      };
    }
    this.refresh();
  }

  async remove(id: string): Promise<void> {
    await this.db.collection('notes').doc(id).delete();
    this.refresh();
  }

  emit(notes: Note[]): void {
    this.ngZone.run(() => {
      this.notes$.next(notes);
    });
  }
}
```


Cloud Firestore is a flexible, scalable database for mobile, web, and server development from Firebase and Google Cloud Platform. Setting up the app with Firebase is easy enough. There are plenty of tutorial on this topic, like this one: Ionic CRUD Operations Using Firebase with Firestore...

Firebase Cloud Firestore

# First Impressions of TypeScript
##### June 14th, 2020 By Alex Hu
![main](/images/first-impressions-of-typescript.jpg)

***I don't like her***, for her kept complaining about my *type!*

Well, what can I say. That was my first impressions of TypeScript.

Don't get me wrong, I have been using strongly-typed programming languages for many years, including Java, C++
and C. Then I picked up Python and JavaScript a few years ago and I didn't miss the types a bit, there are a lot
less keystrokes to get the job done. You do need a strong discipline of running through the code for coverage,
which is not a problem for me as I usually run through my new code line by line with a debugger, but those
catch blocks always got me so I make it a rule to test them by throwing exception intentionally to test them.

And then there is Kotlin, it is a strongly-typed language. I remember liking it immediately, although in many ways
it is even stricter than Java with it Null Safety check. How strange! I actually rewrited a Java Android app
developped back from the Gingerbread and bring it up to date all the way to Android 10 and it was a pleasure to work it.
So it is not the types I have problems with.

Okay, back to TypeScript. There are a lot of writing on the [Pros and Cons of TypeScript](https://www.altexsoft.com/blog/typescript-pros-and-cons/).
For me, these are the things that make it hard to like,

1. It has a habit of complicating things, turning something like this
```js
const handleOK = (event) => {
  event.preventDefault()
  ...
}
```
into this:
```js
const handleOK = (event: React.MouseEvent<HTMLButtonElement>
                       | React.FormEvent<HTMLFormElement>) => {
  event.preventDefault()
  ...
}
```
Come on, this is a bit much. The damn thing is so long that it doesn't fit into a single line any more!
And it is much less readable than the JavaScript version.

2. Oh, those lint/compiler errors! They remind me the early days of C++ where it is transpiled into C and then the C compiler
do the actual work. The error messages were very cryptic, until we got a native C++ compiler, but generic type made it worse again.
It is not helping that TypeScript has both of these features / problems.

Consider this perfectly fine Ramda code:
```js
const filterAndSortArticles = (articles: IArticle[]): IArticle[] => {
  return R.pipe(
    R.filter((article: IArticle) => ['Sprints', 'Posts'].includes(article.section)),
    R.sortBy(R.prop('id'))
  )(articles) as IArticle[]
}
```
and I don't even know where to start with these lint errors, except to @ts-ignore them away:
```
pages/index.tsx:84:5 - error TS2769: No overload matches this call.
  The last overload gave the following error.
    Argument of type '<T>(list: readonly T[]) => T[]' is not assignable to parameter of type
     '(x: K extends (infer U)[] ? U[] : K extends Dictionary<infer U> ? Dictionary<U> : never) => IArticle[]'.
      Types of parameters 'list' and 'x' are incompatible.
       Type 'K extends (infer U)[] ? U[] : K extends Dictionary<infer U> ? Dictionary<U> : never' is not assignable to
        type 'readonly IArticle[]'.
         Type 'unknown[] | (K extends Dictionary<infer U> ? Dictionary<U> : never)' is not assignable to type 'readonly IArticle[]'.
          Type 'unknown[]' is not assignable to type 'readonly IArticle[]'.
           Type 'unknown' is not assignable to type 'IArticle'.
            Type 'IArticle[] | Dictionary<IArticle>' is not assignable to type 'readonly IArticle[]'.
             Type 'Dictionary<IArticle>' is missing the following properties from type 'readonly IArticle[]':
              length, concat, join, slice, and 18 more.

84     R.sortBy(R.prop('id'))
       ~~~~~~~~~~~~~~~~~~~~~~

  node_modules/@types/ramda/index.d.ts:1415:17
    1415 export function pipe<V0, V1, V2, T1, T2>(fn0: (x0: V0, x1: V1, x2: V2) => T1, fn1: (x: T1) => T2): (x0: V0, x1: V1, x2: V2) => T2;
                         ~~~~
    The last overload is declared here.

pages/index.tsx:85:5 - error TS2554: Expected 0 arguments, but got 1.

85   )(articles) as IArticle[]
       ~~~~~~~~

Found 2 errors.
```


3. Generic type is really hard to read! There is an example on strongly-typed GraphQL resolvers and queries using
[GraphQL code generator](https://graphql-code-generator.com/).
```
npx create-next-app --example with-typescript-graphql
```
The code generator creates a TypeScript file with 130 lines for the following GraphQL. I couldn't imagnine myself handwriting similar code full of nested generic types like that.
```
type Mutation {
  createStory(description: String!, title: String!): Story!
  updateStory(description: String, title: String, id: Int!): Story!
  deleteStory(id: Int!): Boolean!
}

type Query {
  hello: String!
  stories: [Story!]!
}

type Story {
  id: Int!
  title: String!
  description: String!
}
```

At one point, I was about the give up on TypeScript, but then I remember that this is a learning project.
I might as well give it a honest try and form a second option as the project mature.


I don't like her, for her kept complaining about my type! Well, what can I say. That was my first impressions of TypeScript. Don't get me wrong, I have been using strongly-typed programming languages for many years, including Java, C++ and C. Then I picked up Python and JavaScript a few years ago and I didn't miss the types a...

First Impressions of TypeScript

# Flash of Unstyled Content
##### July 8th, 2020 By Alex Hu
![main](/images/flash-of-unstyled-content.jpg)

I was not happy with the
[Flash of Unstyled Content](https://www.techrepublic.com/blog/web-designer/how-to-prevent-flash-of-unstyled-content-on-your-websites/)
(FOUC) problem. The unstyled content shows its ugly head with the timeline component. Just imagine the
[vertical timeline](https://uicookies.com/vertical-timeline/) got mushed together at the left edge of the screen!

Forunately, we can get rid of the problem by setting visibility to 'hidden' on the outer Layout wrapper initially,
then removed it when the page is rendered with a useEffect(). It starts with a simple 'fouc' class in the css file.
```css
// index.css
.fouc {
  visibility: hidden;
}
```
Then in the Layout component, useEffect() can remove the 'fouc' class from the outer component.
```js
const Layout: React.FC<PropsWithChildren<Props>> = ({ children, title, activeItem }) => {
  // avoid Flash of Unstyled Content by hiding all contents initially
  // then make it visible once loaded
  const [foucClassName, setFoucClassName] = useState('fouc')

  useEffect(() => {
    setFoucClassName('')
  }, [])

  return (
    <div className={foucClassName}>
      <Head>
        <title>{ title }</title>
        <meta charSet='utf-8' />
        <meta name='viewport' content='initial-scale=1.0, width=device-width' />
        <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap' />
        <link rel='stylesheet' href='https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@300;400&display=swap' />
      </Head>
      <NavBar activeItem={activeItem} />
      {children}
      <Footer />
    </div>
  )
}
```


I was not happy with the Flash of Unstyled Content  problem. The unstyled content shows its ugly head with the timeline component. Just imagine the vertical timeline got mushed together at the left edge of the screen! Forunately, we can get rid of the problem by setting visibility to 'hidden' on the outer Layout wrapper initially, then removed it...

Flash of Unstyled Content

# gapi.client.calendar
##### Octember 21st, 2020 By Alex Hu
![main](/images/gapi-client-calendar.jpg)

In order to retrieve the calendar events from the Google calendar directly into the mobile app,
we need an identifier called the access token from authentication process. The access token
represents my identity and we pass it into the gapi.client library so that Google knows
whose calendar it should retrieve.

Now that the AuthenticationService can handle authentication on the Android environment as
well as the web environment, the calendar logic can be moved from the ExpressJS into
the mobile app. Although it is possible to access the calendar using the REST api,
I very much preferred to make use of the official Google gapi.client.calendar library.

The challenge is to make the gapi.client library available for both the Android environment
and the web environment. The traditional way to include the API script like the following just
does not work in the Android environment.
```js
<script src="https://apis.google.com/js/api.js"></script>
```
After some searching, the ng-gapi module come to the rescue.

### [ng-gapi](https://www.npmjs.com/package/ng-gapi)

The ng-gapi module add the Google api to the project. It wraps the Gapi in to a service layer allowing to
work with Gapi in a Angular 9+ project.

More importantly, it works with Ionic very well. There are 2 main services in ng-gapi, namely
GoogleAuthService and GoogleApiService. Although you cannot use GoogleAuthService in the Android environment,
you can use it in the web app without problem as I do so in my AuthenticationService.

Installing the ng-gapi is easy, and we will get to the GoogleApiService in the next section.
```
npm install ng-gapi
```

### [GoogleApiService](https://github.com/google/google-api-javascript-client)

Looking into the GoogleApiService source code, it is a thin layer to load the Google gapi library
dynamically at run-time. Once the GoogleApiService.onLoad() succeed, the gapi variable becomes available,
and the gapi.client can be loaded. The gapi.client.calendar is eventually loaded and stored in the
calendarApi variable.

```js
private calendarApi: any;

constructor(private gapiService: GoogleApiService) {
  this.gapiService.onLoad().subscribe(() => this.loadGapiClient());
}

loadGapiClient() {
  gapi.load('client', async () => {
    await gapi.client.load('calendar', 'v3');
    this.calendarApi = (gapi.client as any).calendar;
    ...
  });
}
```

The fetchEvents() function simply checks the calendarApi before accessing the gapi.client.calendar.events.list
api. The gapi.client.calendar also requires the user's access token from the AuthenticationService so that
the correct calendar can be retrieved.

```js
  async fetchEvents() {
    const accessToken = await this.authenticationService.getAccessToken();
    // console.log(`CalendarService -> fetchEvents -> accessToken`, accessToken)
    // console.log(`CalendarService -> fetchEvents -> this.calendarApi`, this.calendarApi)
    if (accessToken && this.calendarApi) {
      gapi.client.setToken({
        access_token: accessToken,
      });
      const eventStartTime = formatISO(startOfToday())
      const eventEndTime = formatISO(addWeeks(startOfToday(), 2))
      const request = this.calendarApi.events.list({
        calendarId: 'primary',
        singleEvents: true,
        timeMin: eventStartTime,
        timeMax: eventEndTime,
        orderBy: 'startTime',
      });
      request.execute(response => {
        if (!response.error) {
          const events = R.map((item: any) => ({
            id: item.id,
            summary: item.summary,
            start: item.start.date || item.start.dateTime,
            end: item.end.date || item.end.dateTime,
          }), R.defaultTo([], response.items))
          const mappedEvents = mapEvents(events)
          this.ngZone.run(() => {
            this.events$.next(mappedEvents)
          });
        }
        else {
          console.error(`CalendarService -> fetchEvents -> error -> response`, response);
        }
      });
    }
    else {
      this.ngZone.run(() => {
        this.events$.next([])
      });
    }
  }
}
```

### [NgZone](https://dzone.com/articles/understanding-ngzone)

There were a few seconds of delay between the event is emitted and the UI was updated. After a quick search,
it happens that I need to wrap it inside a NgZone and the changes are then reflected in the UI immediately.

```js
this.ngZone.run(() => {
  this.events$.next(mappedEvents)
});
```

### Calendar Service

Putting it all together, here is the full code of the CalendarService. The first part of the code is just
mapping the calendar events into the format that I want to show on the user interface, and then set up the
logic to handle automatic refresh and manual refresh.

The magic is in the loadGapiClient() function. Once we have access to gapi.client.calendar, the rest is history.

```js
import * as R from 'ramda';
import { Injectable, NgZone, OnDestroy } from '@angular/core';
import { BehaviorSubject, timer } from 'rxjs';
import { distinctUntilChanged, map } from 'rxjs/operators';
import { addWeeks, differenceInDays, format, formatISO, isToday, parseISO, startOfToday, subDays } from 'date-fns'
import { GoogleApiService } from 'ng-gapi'
import { SubSink } from 'subsink'
import { AuthenticationService } from './authentication.service'

const ONE_SECOND = 1000;
const TEN_SECOND = 10 * 1000;
const ONE_MINUTE = 60 * ONE_SECOND;
const ONE_HOUR = 60 * ONE_MINUTE;

const getIconName = (summary): string => {
  let iconName = '';
  if (summary.includes('Pay Day')) {
    iconName = 'cash-outline';
  }
  if (summary.includes('Vacation')) {
    iconName = 'rocket-outline';
  }
  return iconName;
}

const getDayName = (isoDateTime: string): string => {
  const date = parseISO(isoDateTime);
  return (isToday(date) ? 'Today' : format(date, 'LLL d')) + format(date, ' EEE');
}

const getTime = (isoDateTime: string): string => {
  return isoDateTime.includes('T') ? format(parseISO(isoDateTime), 'p').toLocaleLowerCase() : '';
}

const getEndDay = (start: string, end: string): string => {
  if (getTime(start)) {
    return '';
  }
  else {
    const startDate = parseISO(start);
    const endDate = parseISO(end);
    const diff = differenceInDays(endDate, startDate);
    if (diff > 1) {
      return '- ' + getDayName(formatISO(subDays(endDate, 1)));
    }
  }
  return '';
}

const mapEvent = (event: any) => ({
  ...event,
  iconName: getIconName(event.summary),
  day: getDayName(event.start),
  time: getTime(event.start),
  endDay: getEndDay(event.start, event.end),
})

const mapEvents = (events: any) => {
  return events.map(mapEvent)
}

const formatToday = (): string => {
  const date = new Date();
  return format(date, 'LLL d EEE') + ' ' + format(date, 'p').toLocaleLowerCase();
}

@Injectable({
  providedIn: 'root',
})
export class CalendarService implements OnDestroy {

  refreshTimer$ = timer(0, ONE_HOUR);
  refresh$ = new BehaviorSubject<any>(null);
  events$ = new BehaviorSubject<any>([]);

  today$ = timer(0, TEN_SECOND).pipe(
    map(() => formatToday()),
    distinctUntilChanged(),
  );

  private subs = new SubSink();
  private calendarApi: any;

  constructor(
    private ngZone: NgZone,
    private gapiService: GoogleApiService,
    private authenticationService: AuthenticationService,
  ) {
    this.subs.add(this.refreshTimer$.subscribe(this.refresh$));
    this.subs.add(this.refresh$.subscribe(async () => await this.fetchEvents()));
    this.subs.add(this.authenticationService.user$.subscribe(() => this.refresh()));
    this.subs.add(this.gapiService.onLoad().subscribe(() => this.loadGapiClient()));
  }

  ngOnDestroy(): void {
    this.subs.unsubscribe();
  }

  loadGapiClient() {
    gapi.load('client', async () => {
      // console.log(`CalendarService -> loadGapiClient -> gapi.client`, gapi.client)
      await gapi.client.load('calendar', 'v3');
      this.calendarApi = (gapi.client as any).calendar;
      // console.log(`CalendarService -> loadGapiClient -> this.calendarApi`, this.calendarApi)
      this.refresh();
    });
  }

  refresh(): void {
    this.refresh$.next(null);
  }

  async fetchEvents() {
    const accessToken = await this.authenticationService.getAccessToken();
    // console.log(`CalendarService -> fetchEvents -> accessToken`, accessToken)
    // console.log(`CalendarService -> fetchEvents -> this.calendarApi`, this.calendarApi)
    if (accessToken && this.calendarApi) {
      gapi.client.setToken({
        access_token: accessToken,
      });
      const eventStartTime = formatISO(startOfToday())
      const eventEndTime = formatISO(addWeeks(startOfToday(), 2))
      const request = this.calendarApi.events.list({
        calendarId: 'primary',
        singleEvents: true,
        timeMin: eventStartTime,
        timeMax: eventEndTime,
        orderBy: 'startTime',
      });
      request.execute(response => {
        if (!response.error) {
          const events = R.map((item: any) => ({
            id: item.id,
            summary: item.summary,
            start: item.start.date || item.start.dateTime,
            end: item.end.date || item.end.dateTime,
          }), R.defaultTo([], response.items))
          const mappedEvents = mapEvents(events)
          this.ngZone.run(() => {
            this.events$.next(mappedEvents)
          });
        }
        else {
          console.error(`CalendarService -> fetchEvents -> error -> response`, response);
        }
      });
    }
    else {
      this.ngZone.run(() => {
        this.events$.next([])
      });
    }
  }
}
```


In order to retrieve the calendar events from the Google calendar directly into the mobile app, we need an identifier called the access token from authentication process. The access token represents my identity and we pass it into the gapi.client library so that Google knows whose calendar it should retrieve. Now that the AuthenticationService can handle authentication on the Android...

gapi.client.calendar

# Google Authentication
##### Octember 19th, 2020 By Alex Hu
![main](/images/google-authentication.jpg)

As I experienced in
[Ionic with Firebase Authentication](https://portfolio.alexhu.vercel.app/posts/ionic-with-firebase-authentication) ,
the normal browser based Firebase Authentication does not work in the Android platform.
So we have to use a Ionic Native plugin to support Google sign in. Note that there is
[calendar plugin](https://ionicframework.com/docs/native/calendar/), it only gets the calendar on the phone device
and it would not work in the browser platform. So I thought I would go the full Google sign in route and
then retreve the calendar using the [Google Calendar API](https://developers.google.com/calendar/). It also open
up the possibility to other Google or Firebase services that require user authentication. Having the mobile app
works in both platforms are also much preferred as changes is much easier to observe in the browser platform,
before the changes eventually are verified in the Android platform.

### [Google Plus](https://ionicframework.com/docs/native/google-plus)

Installing the Google Plus plugin for capacitor is easy enough.
```
npm install cordova-plugin-googleplus
npm install @ionic-native/google-plus
ionic cap sync
```

### [Google Sign-In Cordova/PhoneGap Plugin](https://github.com/EddyVerbruggen/cordova-plugin-googleplus)

I wish I could say simply follow the instruction and everything just work, but things are never simple
when it comes to authentication.

1. widget id in config.xml

First thing first, update your config.xml and add the id. I am not sure if it is necessary as I don't see
the id in the widget. Perhaps they removed it in the correct ionic implementation. No harm done to add it as
per the plugin instruction.
```
<?xml version='1.0' encoding='utf-8'?>
<widget id="** REPLACE THIS VALUE **" ...>
...
</widget>
```

2. keystore

Sooner or later, you will need to generate a keystore for signing the app, and the SHA-1 inside the keystore will
also be needed to create the Android credential. The following command will generate a keystore named 'main.keystore'.
You can substitute the ALIAS with your own alias name.

This tutorial titled
[Google Login with Capacitor and Ionic natively Part 1 - Ionic 5 / React / Firebase](https://youtu.be/pVfAAfwxFoI?t=192)
has an excellent step-by-step instruction on this procedure. The keystore instruction is after the 3:12 minute mark.

```
keytool -genkey -keystore main.keystore -v -alias ALIAS -keyalg RSA -keysize 2048 -validity 10000
```
After the keystore is generated, you can find the SHA-1 signature from the output of the following command.
```
keytool" -keystore main.keystore -list -v
```

3. build.gradle

I moved my keystore into the android\app folder where the build.gradle is located, and add the following signingConfigs
under the Android property.

```
apply plugin: 'com.android.application'

android {
    ...
    signingConfigs {
        release {
            storeFile file("main.keystore")
            storePassword "12345678"
            keyAlias 'ALIAS'
            keyPassword '12345678'
        }
        debug {
            storeFile file("main.keystore")
            storePassword "12345678"
            keyAlias 'ALIAS'
            keyPassword '12345678'
        }
    }
}
```

4. [Google Cloud Platform](https://console.developers.google.com/)

In the last sprint, I already set up a Google developer account. You can refer to this video
[How To Use The Google Calendar API In Node.js](https://youtu.be/zrLf4KMs71E?t=211)
to setup your app. For my purpose, I also need to setup the Web client in additional to the Android client
because I want to make use of the Firebase authentication and its service. We will come back to the
[Google Cloud Platform](https://console.developers.google.com/) to get the credential information later.

Once you get the developer account, the beginning of this
[Google Login with Capacitor and Ionic natively Part 1 - Ionic 5 / React / Firebase](https://youtu.be/pVfAAfwxFoI)
video will guide you through setting up a OAuth client credential for the Android app, which will require the SHA-1
that listed in the keystore.

So at this point, I have 2 entries under the Credentials / OAuth 2.0 Client IDs. One for my Android app and
the other for the Web application.


### Mobile App Module and Template

1. app.module.ts

Before I forget, let me mention that we need to include GooglePlus as a provider the app.module.ts.
Otherwise, the app will just show a blank screen and give you a empty feeling. The console log shows
this error message.
```
NullInjectorError: No provider for GooglePlus
```
Fixing the problem is easy, just import the GooglePlus and add it to the list of providers.
```js
import { GooglePlus } from '@ionic-native/google-plus/ngx';

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [
    ...
  ],
  providers: [
    ...
    GooglePlus,
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}
```

2. html template

In the html template, I added a Login button which is replaced by the profile image that also served as the log out button.
There is a moment when the app is being initialized and the authentication status is not known yet. During this time,
neither the login button nor the profile image are displayed, and it is guarded by the user.ready variable.

```
<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-title>{{ today$ | async }}</ion-title>
    <ion-buttons slot="end" *ngIf="user$ | async as user">
      <ion-button (click)="signIn()" *ngIf="user.ready && !user.signedIn">Sign In</ion-button>
      <ion-thumbnail (click)="signOut()" *ngIf="user.ready && user.signedIn">
        <ion-img [src]="user.profileImage" alt='Sign Out'></ion-img>
      </ion-thumbnail>
    </ion-buttons>
  </ion-toolbar>
</ion-header>
```

### Authentication Service

I followed this article
[How to Add Firebase Authentication in Ionic 5 App](https://www.positronx.io/ionic-firebase-authentication-tutorial-with-examples/)
to set up my AuthenticationService.

In the signIn() function, it first checks if the app is running in the capacitor platform (i.e. the Android platform).
If it is, then googlePlus.trySilentLogin() is first called in case if the app has already signed in previously,
and then googlePlus.login() for a full sign in procedure. Both calls apply the webClientId option will return
the idToken to be used in the call to angularFireAuth.signInWithCredential().

If the app is running inside the browser platform, it will bypass the cordova plugin and call the browser version.
Upon sign out, the same subscription will receive a null user, and the stored user data will be removed.

Here is the full code of the AuthenticationService. I am only implementing the Google sign-in as my
calendar service is hosted by Google.
```js
import { Injectable, NgZone, OnDestroy } from '@angular/core';
import { isPlatform } from '@ionic/angular'
import { GooglePlus } from '@ionic-native/google-plus/ngx';
import { GoogleAuthService } from 'ng-gapi'
import { BehaviorSubject } from 'rxjs'
import { SubSink } from 'subsink'
import { environment } from '../../environments/environment';

const EXPIRY_TOLERANCE = 60 * 1000
const WEB_CLIENT_ID = environment.googlePlusConfig.webClientId;

const GOOGLE_PLUS_OPTIONS = {
  webClientId: WEB_CLIENT_ID,
  offline: false,
};

interface UserData {
  ready: boolean;
  signedIn: boolean;
  name: string;
  profileImage: string;
  idToken: string;
  accessToken: string;
  expiresAt: number;
}

const NOT_READY_USER_DATA: UserData = {
  ready: false,
  signedIn: false,
  name: '',
  profileImage: '',
  idToken: '',
  accessToken: '',
  expiresAt: 0,
}

const NOT_SIGNED_IN_USER_DATA: UserData = {
  ready: true,
  signedIn: false,
  name: '',
  profileImage: '',
  idToken: '',
  accessToken: '',
  expiresAt: 0,
}

@Injectable({
  providedIn: 'root'
})
export class AuthenticationService implements OnDestroy {

  user$ = new BehaviorSubject<UserData>(NOT_READY_USER_DATA);

  private googleAuth: gapi.auth2.GoogleAuth = undefined;
  private googleUser: gapi.auth2.GoogleUser = undefined;
  private subs = new SubSink()

  constructor(
    private ngZone: NgZone,
    private googlePlus: GooglePlus,
    private googleAuthService: GoogleAuthService,
  )
  {
    if (this.isAndroid()) {
      this.googlePlus.trySilentLogin(GOOGLE_PLUS_OPTIONS)
        .then((result: any) => {
          this.updateUserDataByGooglePlus(result)
        })
        .catch((ex: any) => {
          console.error(`AuthenticationService -> googlePlus.trySilentLogin -> ex`, ex)
          this.emit(NOT_SIGNED_IN_USER_DATA);
        });
    }
    else {
      this.subs.add(this.googleAuthService.getAuth().subscribe(auth => {
        this.googleAuth = auth;
        const user = auth.currentUser.get();
        if (user.isSignedIn()) {
          this.googleUser = user;
          this.updateUserDataByGoogleAuth(this.googleUser, this.googleUser.getAuthResponse());
        }
        else {
          this.emit(NOT_SIGNED_IN_USER_DATA);
        }
      }));
    }
  }

  ngOnDestroy(): void {
    this.subs.unsubscribe();
  }

  // Sign in with Google
  async signIn() {
    if (this.isAndroid()) {
      let result: any;
      try {
        result = await this.googlePlus.trySilentLogin(GOOGLE_PLUS_OPTIONS)
      }
      catch (ex) {
        console.error(`AuthenticationService -> signIn -> googlePlus.trySilentLogin -> ex`, ex)
      }
      try {
        if (!result) {
          result = await this.googlePlus.login(GOOGLE_PLUS_OPTIONS)
        }
      }
      catch (ex) {
        console.error(`AuthenticationService -> signIn -> googlePlus.login -> ex`, ex)
      }
      if (result) {
        this.updateUserDataByGooglePlus(result);
      }
    }
    else if (this.googleAuth) {
      try {
        this.googleUser = await this.googleAuth.signIn();
        this.updateUserDataByGoogleAuth(this.googleUser, this.googleUser.getAuthResponse());
      }
      catch (ex) {
        console.error(`AuthenticationService -> googleAuth.signIn -> ex =`, ex)
      }
    }
  }

  // Sign-out
  async signOut() {
    this.emit(NOT_SIGNED_IN_USER_DATA);
    localStorage.removeItem('user')
    if (this.isAndroid()) {
      try {
        await this.googlePlus.logout();
      }
      catch (ex) {
        console.error(`AuthenticationService -> googlePlus.logout -> ex`, ex)
      }
    }
    else if (this.googleAuth) {
      try {
        await this.googleAuth.signOut()
      }
      catch (ex) {
        console.error(`AuthenticationService -> googleAuth.signOut -> ex`, ex)
      }
    }
  }

  async getAccessToken() {
    const userData = this.user$.getValue()
    if (userData.signedIn && this.accessTokenExpired(userData.expiresAt)) {
      await this.refreshToken()
    }
    return this.user$.getValue()?.accessToken;
  }

  accessTokenExpired(expiredAt: number): boolean {
    const now = (new Date()).getTime()
    return now + EXPIRY_TOLERANCE >= expiredAt
  }

  emit(userData: UserData) {
    this.ngZone.run(() => {
      this.user$.next(userData);
    });
  }

  isAndroid(): boolean {
    return isPlatform('capacitor');
  }

  updateUserDataByGooglePlus(result: any) {
    const userData = {
      ready: true,
      signedIn: true,
      name: result.displayName,
      profileImage: result.imageUrl,
      idToken: result.idToken,
      accessToken: result.accessToken,
      expiresAt: result.expires * 1000,
    };
    this.emit(userData);
  }

  updateUserDataByGoogleAuth(user: gapi.auth2.GoogleUser, authResponse: gapi.auth2.AuthResponse) {
    const userData = {
      ready: true,
      signedIn: true,
      name: user.getBasicProfile().getName(),
      profileImage: user.getBasicProfile().getImageUrl(),
      idToken: authResponse.id_token,
      accessToken: authResponse.access_token,
      expiresAt: authResponse.expires_at,
    }
    this.emit(userData);
  }

  async refreshToken() {
    try {
      if (this.isAndroid()) {
        const result = await this.googlePlus.trySilentLogin(GOOGLE_PLUS_OPTIONS)
        this.updateUserDataByGooglePlus(result)
      }
      else {
        if (this.googleAuth && this.googleUser) {
          const authResponse = await this.googleUser.reloadAuthResponse();
          this.updateUserDataByRefreshToken(authResponse);
        }
      }
    }
    catch (ex) {
      console.error(`AuthenticationService -> refreshToken -> ex`, ex)
    }
  }

  updateUserDataByRefreshToken(authResponse: gapi.auth2.AuthResponse) {
    const userData = {
      ...this.user$.getValue(),
      idToken: authResponse.id_token,
      accessToken: authResponse.access_token,
      expiresAt: authResponse.expires_at,
    };
  }
}
```


As I experienced in Ionic with Firebase Authentication , the normal browser based Firebase Authentication does not work in the Android platform. So we have to use a Ionic Native plugin to support Google sign in. Note that there is calendar plugin, it only gets the calendar on the phone device and it would not work in the browser platform...

Google Authentication

# Google Calendar API
##### Octember 3rd, 2020 By Alex Hu
![main](/images/google-calendar-api.jpg)

I would to show a summary of events of the next few days from my calendar and
[Google Calendar API](https://developers.google.com/calendar/overview) has good support
for it.

There are a few ways that you can fetch the data. With my limited knowledge on Angular,
I decided to do the work on the server side using my personal Node.js / Express server.

### [How To Use The Google Calendar API In Node.js](https://www.youtube.com/watch?v=zrLf4KMs71E)

This tutorial has a step by step instruction on how to setup the Google Calendar API and getting
an OAuth token of my own Google account to be included in the personal server. This is not a
general solution for multiple users, but it works for my single account mobile app.

Overall, it took less than 40 lines of code to get the calendar events of the next 2 weeks.
It is filtered down to just the summary and the start and end day.

```js
import { Request, Response } from 'express'
import { google } from 'googleapis'
import { addWeeks, format, startOfToday } from 'date-fns'
import * as R from 'ramda'

const { OAuth2 } = google.auth

const CLIENT_ID = 'YOUR_CLIENT_ID'
const CLIENT_SECRET = 'YOUR_CLIENT_SECRET'
const REFRESH_TOKEN = 'YOUR_REFRESH_TOKEN'

const oAuth2Client = new OAuth2(CLIENT_ID, CLIENT_SECRET)
oAuth2Client.setCredentials({
  refresh_token: REFRESH_TOKEN,
})

const calendar = google.calendar({ version: 'v3', auth: oAuth2Client })

export const getEvents = async (req: Request, res: Response) => {
  const eventStartTime = format(startOfToday(), 'yyyy-MM-dd') + 'T00:00:00.000Z'
  const eventEndTime = format(addWeeks(startOfToday(), 2), 'yyyy-MM-dd') + 'T00:00:00.000Z'
  const result = await calendar.events.list({
    calendarId: 'primary',
    singleEvents: true,
    timeMin: eventStartTime,
    timeMax: eventEndTime,
    orderBy: 'startTime',
  })
  const events = R.map((item: any) => ({
    id: item.id,
    summary: item.summary,
    start: item.start.date || item.start.dateTime,
    end: item.end.date || item.end.dateTime,
  }), R.defaultTo([], result.data.items))
  res.send(events)
}
```
### [Ramda](https://ramdajs.com/)
By the way, Ramda is like [Lodash](https://lodash.com/). Both are functional programming libraries and this article
explains my preference quite well:
[Functional JavaScript: Why I prefer using Ramda over Lodash or Underscore!](https://www.codementor.io/@michelre/functional-javascript-why-i-prefer-using-ramda-over-lodash-or-underscore-dzovysq11)

### [RxJS Map and Pipe](https://indepth.dev/reading-the-rxjs-6-sources-map-and-pipe/)

On the client side, the component does a simple HTTP GET and do a little mapping to make the data show up nicely
in the component.
```js
import { HttpClient, HttpErrorResponse } from '@angular/common/http';
import { Observable, throwError } from 'rxjs';
import { catchError, map } from 'rxjs/operators';

export class CalendarService {

  constructor(private http: HttpClient) {}

  errorHandler(error: HttpErrorResponse) {
    return throwError(error.message || 'Server error');
  }

  getEvents(): Observable<any> {
    return this.http.get(CALENDAR_URL)
      .pipe(
        map((events: any) => {
          return events.map((event: any) => ({
            ...event,
            iconName: getIconName(event.summary),
            day: getDayName(event.start),
            time: getTime(event.start),
          }))
        }),
        catchError(this.errorHandler)
      );
  }
}
```


I would to show a summary of events of the next few days from my calendar and Google Calendar API has good support for it. There are a few ways that you can fetch the data. With my limited knowledge on Angular, I decided to do the work on the server side using my personal Node.js / Express server...

Google Calendar API

# GraphQL with Knex
##### June 16th, 2020 By Alex Hu
![main](/images/graphql-with-knex.jpg)

Back to basic [building a GraphQL server in Next.js](https://www.youtube.com/watch?v=Hn5neKIfJs8)
using [knex.js](https://github.com/knex/knex) which is *a SQL query builder that is flexible, portable, and fun to use!*

Knex supports a good number of SQL database, although MongoDB is not one that it support for MongoDB is a NoSQL database.
You access a SQL database by building a query like this:
```
knex.select().from('articles').orderBy('article_order', 'asc')
```
What I especially like is it's support for [database migrations](http://perkframework.com/v1/guides/database-migrations-knex.html)
and [seeding](https://dev.to/cesareferrari/database-seeding-with-knex-51gf). Yes, you have to write the migration files and seed files
by hand but they are easy to to do. In fact, instead of creating the table on a SQL table by hand, you can and you should create the
table in your development machine using a migration file, so that the table can be created in the production database automatically.
After adding the migration file, running the *knex migrate:latest* command will bring the system up to the latest migration.

```js
exports.up = function(knex) {
  return knex.schema.createTable('sections', table => {
    table.increments()
    table.string('name').notNullable()
    table.integer('section_order').notNullable()
    table.timestamp('created_at').defaultTo(knex.fn.now())
    table.timestamp('updated_at').defaultTo(knex.fn.now())
  })
}

exports.down = function(knex) {
  return knex.schema.dropTable('sections')
}
```

Running the *knex seed:run* command with the seed file below will seed the sections table.

```js
exports.seed = function(knex) {
  // Deletes ALL existing entries
  return knex('sections').del()
    .then(function () {
      // Inserts seed entries
      return knex('sections').insert([
        {id: 1, name: 'Main', section_order: 1},
        {id: 2, name: 'Blog', section_order: 2},
        {id: 9, name: 'About', section_order: 9},
      ]);
    });
};
```
Knex is just a thin layer on top of the normal SQL query, and it also supports raw SQL shall you desire it.

This little side project also showed me how all the pieces are tied together, namely GraphQL resolvers, typeDefs
and Apollo server.


Back to basic building a GraphQL server in Next.js using knex.js which is a SQL query builder that is flexible, portable, and fun to use! Knex supports a good number of SQL database, although MongoDB is not one that it support for MongoDB is a NoSQL database. You access a SQL database by building a query like this:...

GraphQL with Knex

# GraphQL with TypeORM and TypeGraphQL
##### June 12th, 2020 By Alex Hu
![main](/images/graphql-with-typeorm-and-typegraphql.jpg)

[**GraphQL**](https://graphql.org/) gains a lot of steam in the last few years. It is easy to understand why it has
a good following as [there are a lot to like](https://graphql.org/learn/):

* Easy to learn query language
* JSON result that match up with the query
* Strong data type and schema
* GraphiQL query browser

What sold me was actually [GraphiQL](https://github.com/graphql/graphiql) query browser. There is nothing like a
good interactive query browser as you can build and test the server side changes without touching a line of client code.

On the other hand, I am not too crazy about having to define the data types 3 times, namely

1. GraphQL schema
2. Database models
3. TypeScript data types

Wouldn't it be good to define the model only once? Well, the community already build this beast using
[TypeORM](https://github.com/typeorm/typeorm) and [TypeGraphQL](https://typegraphql.com/) and YouTube
has an excellent [Typescript GraphQL CRUD Tutorial](https://www.youtube.com/watch?v=WhzIjYQmWvs) for it.
Basically,

```
npx create-graphql-api
```

will get you started with all the packages and you create the models in TypeScript using TypeORM and TypeGraphQL annotations.
TypeORM also supports a wide array of databases, including MySQL, Postgres and MongoDB NoSQL database.

If I were starting a large scale project for a business, it would be a right fit for it. However, since this project is a
learning tool for me, TypeORM and TypeGraphQL hide too much details and actually hampering the learning process.
I also notice that there are a good number of annotations to map between the different data types. It would be difficult
for me to judge if TypeORM and TypeGraphQL worths the effort until I have a chance to go back to basic with just barebone
database access.


GraphQL gains a lot of steam in the last few years. It is easy to understand why it has a good following as there are a lot to like:  Easy to learn query language  JSON result that match up with the query  Strong data type and schema  GraphiQL query browser What sold me was actually GraphiQL...

GraphQL with TypeORM and TypeGraphQL

# Ionic with Firebase Authentication
##### Octember 5th, 2020 By Alex Hu
![main](/images/ionic-with-firebase-authentication.jpg)

While the Google Calendar API works with Node.js, I want to move the logic to the mobile app.
In order to access the calendar, the mobile app need to have authentication logic to access
the Google account.

### [How to Add Firebase Authentication in Ionic 5 App](https://www.positronx.io/ionic-firebase-authentication-tutorial-with-examples/)

Firebase Authentication is in my to-learn list and it is the right time to implement it. The step-by-step instruction
works quite well with some minor adjustment. The authentication works inside the browser environment.
I can log in and retrieve my profile picture without problem.

Sadly, it failed inside the Android environment. When the log in button is clicked, the Android app would
launch the browser app for the Google account login, but would not return to my app afterward.
If I close the browser app, my Android app is still in the previous state pending log in. That's not good.

From all indications, it appears that the authentication is going to need a Cordova plugin and accessing the
calendar will need another one.

- [Google+ Cordova/PhoneGap Plugin](https://www.npmjs.com/package/cordova.plugin.googleplus)
- [PhoneGap Calendar plugin](https://www.npmjs.com/package/cordova-plugin-calendar)

Such is the limitation of hybrid app when the normal Javascript script expect a normal browser environment
but the hybrid app is in another environment. For now, I would stick to fetching the Google calender events
from the server side and feed them through HTTP GET. As the app mature more, I may explore the Cordova plugins.


While the Google Calendar API works with Node.js, I want to move the logic to the mobile app. In order to access the calendar, the mobile app need to have authentication logic to access the Google account...

Ionic with Firebase Authentication

# Kotlin Coroutines and Retrofit
##### September 25th, 2020 By Alex Hu
![main](/images/kotlin-coroutines-and-retrofit.jpg)

I wrote my own Android video player quite a few years ago (Gingerbread) in Java, and rewrote it in Kotlin using ExoPlayer.
It has been playing audio and video files in the phone's SD card all these time.

After a brief test with HLS, DASH and streaming MP4 files, I found that the [ProgressiveMediaSource](https://exoplayer.dev/progressive.html)
can handle high resolution MP4 files over my local network just fine. So I took some time adding support for streaming files
and have a private server provide the list of media files along with information such as name, URL and duration.
The server can also move and delete files when requested by the video player so it is a basic REST service.



### [Retrofit](https://androidpedia.net/en/tutorial/1132/retrofit2)

Retrofit turns your REST API into a Java interface. It uses annotations to describe HTTP requests, URL parameter replacement and
query parameter support is integrated by default.

Brandan Jones, Adjunct Assistant Professor at the University of Cincinnati, have a full course on
[Develop MVVM Android Apps with Q, Kotlin, LiveData, CircleCI, GitHub, Retrofit, and JSON](https://www.youtube.com/watch?v=OtZbZGfa4jk&list=PL73qvSDlAVVgRp1aUnPHO0P1nzU1HPj0-) which I highly recommend. It is like going back to school!

Later in the same playlist, [the code is refactored to use Kotlin Coroutines](https://www.youtube.com/watch?v=Yq0mXsk2teM&list=PL73qvSDlAVVgRp1aUnPHO0P1nzU1HPj0-&index=69)

Just be aware that if you subscribe to his channel, YouTube will start suggesting videos about plants :-)

### [Android Kotlin - Retrofit + Coroutines + Gson Fetch API Data - MVVM Tutorial Course](https://www.youtube.com/watch?v=RSYTn-O3r34&list=PLB6lc7nQ1n4jTLDyU2muTBo8xk0dg0D_w&index=2O3r34)

You should watch the first video in this YouTube playlist to setup your gradle dependancy, but long story short, you can setup
the GET and POST methods to the server with the following code, which is a lot less code than what I would have written by hand.

```
interface StreamingMediaService {

    @GET("api/media")
    fun browse(): Deferred<ArrayList<StreamingMediaFolder>>

    @GET("api/media/{name}")
    fun browse(@Path("name") name: String): Deferred<ArrayList<StreamingMediaFile>>

    @POST("api/media")
    @Headers("Content-Type: application/json", "Accept: application/json")
    fun execute(@Body action: StreamingMediaAction): Deferred<StreamingMediaResult>

    companion object {

        const val CONNECT_TIMEOUT_SECONDS = 1L

        operator fun invoke(): StreamingMediaService {

            val okHttpClient = OkHttpClient.Builder()
                    .connectTimeout(CONNECT_TIMEOUT_SECONDS, TimeUnit.SECONDS)
                    .build()
            return Retrofit.Builder()
                    .client(okHttpClient)
                    .baseUrl(getStreamingServerPath())
                    .addCallAdapterFactory(CoroutineCallAdapterFactory())
                    .addConverterFactory(GsonConverterFactory.create())
                    .build()
                    .create(StreamingMediaService::class.java)
        }
    }
}
```

### [Kotlin Coroutines](https://www.youtube.com/watch?v=BOHK_w09pVA)

A coroutine is a concurrency design pattern that you can use on Android to simplify code that executes asynchronously.
Consider coroutine a light weight thread, and a replacement for [AsyncTask](https://developer.android.com/reference/android/os/AsyncTask).

There are a lot of boilerplate code in AsyncTask and the syntax of AsyncTask is not natural. Consider the service above, we can
just call the StreamingMediaService.browse().

```
suspend fun getStreamingFolders(): List<String> {
    try {
        return mStreamingMediaService.browse().await()
    }
    catch (ex: Exception) {
        Logger.logException(ex)
    }
    return listOf()
}
```
And run the suspend function inside CoroutineScope.launch, like this:
```
CoroutineScope(Dispatchers.Main).launch {
    mStreamingFolders = getStreamingFolders()
}

```


I wrote my own Android video player quite a few years ago  in Java, and rewrote it in Kotlin using ExoPlayer. It has been playing audio and video files in the phone's SD card all these time. After a brief test with HLS, DASH and streaming MP4 files, I found that the ProgressiveMediaSource can handle high resolution MP4 files...

Kotlin Coroutines and Retrofit

# Material-UI Timeline
##### July 7th, 2020 By Alex Hu
![main](/images/material-ui-timeline.jpg)

The [Material-UI Timeline](https://material-ui.com/components/timeline/) component is just the
user interface to provide an outline of development progress. It puts a
[vertial timeline](https://uicookies.com/vertical-timeline/) in the center of the page
leaving a lot of white space on both side of it. I tried putting the article content
to fill those white spaces, but they make a big bad long scrolling page.

At the end, only the article title are placed at the timeline and the article is shown in a
[Dialog](https://material-ui.com/components/dialogs/) that
[slide up](https://material-ui.com/components/dialogs/#transitions) from the bottom.

Since I am using the [Material-UI Timeline](https://material-ui.com/components/timeline/) component,
I might as well replace all the [Semantic-UI-React](https://react.semantic-ui.com/) components with
the correponding ones in [Material-UI](https://material-ui.com/). Beside some minor differences,
the conversion process went quite smoothly.

The timeline component has too much white space so I decided to tighten it up a bit putting it on
the left side of the screen, and show the selected article at the right side of the screen.
The screen is also made responsive for smartphone screen to only show the timeline but not the article.


The Material-UI Timeline component is just the user interface to provide an outline of development progress. It puts a vertial timeline in the center of the page leaving a lot of white space on both side of it. I tried putting the article content to fill those white spaces, but they make a big bad long scrolling page. At the...

Material-UI Timeline

# Node.js and Express
##### September 26th, 2020 By Alex Hu
![main](/images/node-and-express.jpg)

After my advantage of Deno and Abc, I decided to give Node.js and Express a try, and give them fair comparison.
Next.js has been a big help in getting this site up and running. This time, I want to use setup a simple private
server that I can run at home to support a peronal assistant.

### [Node.js](https://nodejs.org/) and [Express](http://expressjs.com/)

Instead of setting up the Node.js / Express / TypeScript from scratch, I decided to start with this
[barebone minimalistic starter-kit for TypeScript-based ExpressJS app](https://github.com/soelinn/express-ts-starter) .
There are quite a few templates that generate more codes, but I like this barebone one as I am in a learning mode
and probably worth going through very basic, especially I started with Next.js which is very well structured.

### [Testing NodeJs/Express API with Jest and Supertest](https://dev.to/nedsoft/testing-nodejs-express-api-with-jest-and-supertest-1km6)

I want to try out the Jest testing framework and convert the test suites that I wrote in Deno.test() to test this Express server.
Once all the tests pass, then the job is done.

Typescript introduced a little bit of complexity in setting up the tests, but all is good following:
[Testing Typescript Api With Jest and Supertest](https://tutorialedge.net/typescript/testing-typescript-api-with-jest/)
and the hello test is as simple as
```js
import request from 'supertest'
import server from '../server'

describe('request Hello', () => {
  it('Hello API Request', async () => {
    const result = await request(server).get('/api/hello')
    expect(result.status).toEqual(200)
    expect(result.text).toContain('Hello')
  })
})
```

Then there is an warning message after running the test:
```
A worker process has failed to exit gracefully and has been force exited. This is likely caused by tests leaking due to improper teardown.
Try running with --runInBand --detectOpenHandles to find leaks.
```
indicating that the server is still listening to the port. To tear down the server gracefully, we have to close the
 server connection after all the tests.
```js
afterAll(async () => await server.close())
```

### [Continuous Integration and Continuous Delivery](https://www.infoworld.com/article/3271126/what-is-cicd-continuous-integration-and-continuous-delivery-explained.html)

I am using [BitBucket](https://bitbucket.org/) to host my Git repository. The have a feature call Pipeline to enable
[CI/CD](https://www.infoworld.com/article/3271126/what-is-cicd-continuous-integration-and-continuous-delivery-explained.html)
Continuous Integration and Continuous Delivery. So every commit will run the build, just one way to keep myself honest.

### [async / await](https://javascript.info/async-await)

In order to use the async / await for the fs module, you can use the fs.promises module instead.
For example, you can call fs.promises.stat() function like this if you want to have a convenient
exists() function.

```js
import cp from 'fs'

const fsp = fs.promises

export const exists = async (path: string): Promise<boolean> => {
  try {
    await fsp.stat(path)
    return true
  }
  catch (ex) {
  }
  return false
}
```

For the child_process module, you can wrap the function with the util.promisify() utility function.

```js
import cp from 'child_process'
import util from 'util'

const execFile = util.promisify(cp.execFile)

const moveAllFiles = async () => {
  try {
    await execFile(MOVE_ALL_COMMAND)
  }
  catch (ex) {
  }
}
```

A couple of things that you need to watch out for:

1. only the happy path will continue after the await, the error path will be thrown as an exception.
So the exists() wrapper above is catching file not found as an exception.

2. looping a bit more tricky. If you are use to forEach, then you are in for a
[big surprise](https://zellwk.com/blog/async-await-in-loops/).
This [asyncForEach](https://codeburst.io/javascript-async-await-with-foreach-b6ba62bbf404)
seems to be a good wrapper around the loop if you want to keep your code as close as before.
```js
async function asyncForEach(array, callback) {
  for (let index = 0; index < array.length; index++) {
    await callback(array[index], index, array);
  }
}
```
You can use this wrapper function as follows:
```js
asyncForEach([1, 2, 3], async (num) => {
  await waitFor(50)
  console.log(num)
})
```

3. [async map](https://stackoverflow.com/questions/53269920/javascript-promise-all-and-async-await-and-map)
also need some TLC as well. You just need to be aware of it. This is where having strong end-to-end tests
will help a lot.


After my advantage of Deno and Abc, I decided to give Node.js and Express a try, and give them fair comparison. Next.js has been a big help in getting this site up and running. This time, I want to use setup a simple private server that I can run at home to support a peronal assistant...

Node.js and Express

# Open Weather API
##### Octember 2nd, 2020 By Alex Hu
![main](/images/open-weather-api.jpg)

Ionic Framework is an open source mobile UI toolkit for building high quality, cross-platform native and web app experiences.
Move faster with a single codebase, running everywhere.

@ionic/angular combines the core Ionic experience with the tooling and APIs that are tailored to Angular Developers.

[ionic start](https://ionicframework.com/docs/cli/commands/start)

Starting the ionic project is easy enough. After downloading the ionic cli, you just need to run this command:
```
ionic start my-assistant tabs --type=angular --capacitor
```
Then it is about learning the in-and-out of [ionic components](https://ionicframework.com/docs/components)
as well as Angular itself.

You can generate components and services with the normal ng commands like 'ng g c' and 'ng g s' or use the
ionic version of them 'ionic g c' and 'ionic g s'.

### [Open Weather API](https://openweathermap.org/api)

The first component I want for my app is a simple weather component that show the current temperature and
the forecast of the next few days.

Open Weather provides a free tier of service, and it is easy to work with. Just get a API key and you are in.

The next step is to find out how state is managed in Angular with service, as well as making HTTP call.
It tooks me a while to figure out how everything wire together, i.e. service, module, component, html template.
While it is certainly nice to have a place where for each responible party, it is a bit tough to separate them
over 7 files!

```js
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

const OPEN_WEATHER_URL = 'http://api.openweathermap.org/data/2.5/onecall?lat=0.0&lon=0.0&exclude=minutely,hourly&units=imperial&appid=YOUR_API_KEY';

@Injectable({
  providedIn: 'root'
})
export class WeatherService {

  constructor(private http: HttpClient) {}

  getCurrentWeather(): Observable<any> {
    return this.http.get(OPEN_WEATHER_URL);
  }
}
```

### [Android Development](https://ionicframework.com/docs/developing/android)

There are quite a few steps to get the app up and running in the Android device. But at the end, it boils down to
```
ionic cap run android
```
assuming that you already familar with Android development and have Android Studio and Virtual Device already installed.

The app showed up. However, the weather data is not coming through. Just what is happening here. I throught it is
develop-once-run-everywhere!

### [RxJS Error Handling](https://blog.angular-university.io/rxjs-error-handling/)

This prompts me to add some error handling in the service with catchError and throwError.
```js
import { HttpClient, HttpErrorResponse } from '@angular/common/http';
import { Observable, throwError } from 'rxjs';
import { catchError } from 'rxjs/operators';

export class WeatherService {

  constructor(private http: HttpClient) {}

  errorHandler(error: HttpErrorResponse) {
    return throwError(error.message || 'Server error');
  }

  getCurrentWeather(): Observable<any> {
    return this.http.get(OPEN_WEATHER_URL)
      .pipe(
        catchError(this.errorHandler)
      )
  }
```
Then the component can catch the error and present a toast with the error message. Unforunately,
the error message is a useless 'http failure response' unknown error. Not much details there.
```js
import { ToastController } from '@ionic/angular';

export class WeatherComponent implements OnInit {

  constructor(private weatherService: WeatherService, private toastController: ToastController) {}

  ngOnInit() {
    this.weatherService.getCurrentWeather().subscribe(
      (data) => {
        ...
      },
      async (error) => {
        const toast = await this.toastController.create({
          message: error,
          duration: 3000,
        });
        toast.present();
      }
    );
  }
```

### [Debugging Android Apps](https://ionicframework.com/docs/developing/android#debugging-android-apps)

Okay, time to find out how to debug into the Android app. Given that the console.log() does not show in Android logcat,
it would be difficult to track down the problem without it.

Ionic website is quite helpful and the [Chrome DevTools](chrome://inspect/#devices) can provide the Javascript console
from the simulator or physical device. ERR_CLEARTEXT_NOT_PERMITTED shows up in the console log which indicates Android
security is in play here.

[ERR_CLEARTEXT_NOT_PERMITTED in debug app on Android](https://forum.ionicframework.com/t/err-cleartext-not-permitted-in-debug-app-on-android/164101/20)
solved my problem with the usesCleartextTraffic attribute in the AndroidManifest.xml.

```
<application
    ...
    android:usesCleartextTraffic="true"
    android:theme="@style/AppTheme">
```
Okay, first component finally done.


Ionic Framework is an open source mobile UI toolkit for building high quality, cross-platform native and web app experiences. Move faster with a single codebase, running everywhere. @ionic/angular combines the core Ionic experience with the tooling and APIs that are tailored to Angular Developers. ionic start Starting the ionic project is easy enough. After downloading the ionic cli, you just...

Open Weather API

# Restarting the App
##### June 23rd, 2020 By Alex Hu
![main](/images/restarting-the-app.jpg)

After looking through a number of frameworks, it is time to restart the app with [Next.js](https://nextjs.org/)
for the Server-Side Rendering, and [Apollo GraphQL](https://www.apollographql.com/) for the [GraphQL](https://graphql.org/)
server and client request.

The simple way to get a Next.js started is to run *create-next-app* with the desired example template. I picked this
example as a starting point as it has all the hooks for Apollo server and client, along with some example codes to
calling useQuery and useMutation, and the simple sign up / sign in / sign out pages. Othen than those, it is bare bone
enough to experience the full back-end development.
```
npx create-next-app --example api-routes-apollo-server-and-client-auth
```
[MongoDB](https://www.mongodb.com/) hosted in by MongoDB [Altas](https://www.mongodb.com/cloud/atlas) in the cloud,
and MongoDB [Compass](https://www.mongodb.com/products/compass) for viewing the database.

[TypeScript](https://www.typescriptlang.org/) and [Semantic UI React](https://react.semantic-ui.com/) will be used on the
client side. The content will be entered the form of [Markdown](https://www.markdownguide.org/) using
[react-markdown](https://www.npmjs.com/package/react-markdown) as the UI component.

The Posts section will be built using the [Semantic UI's Card](https://react.semantic-ui.com/views/card/) component.

Each Post will have its own page hosting the Edit and Delete buttons. An Add button will be put in the Posts section.


After looking through a number of frameworks, it is time to restart the app with Next.js for the Server-Side Rendering, and Apollo GraphQL server and client request. The simple way to get a Next.js started is to run create-next-app with the desired example template. I picked this example as a starting point as it has all the hooks for Apollo...

Restarting the App

# RxJS Data Update
##### Octember 9th, 2020 By Alex Hu
![main](/images/rxjs-data-update.jpg)

A good exercise to dive into RxJS is data update. The app has a need to both automatic update
as well as manual update. And there are local update (like the date and time) as well as update
using http request.

### Auto Refresh on Interval

At the top of the app, the current date and time is shown and is refresh every minute
to keep it up to date. A simple 60 seconds interval will do the trick.

```js
const ONE_MINUTE = 60 * 1000;

const formatToday = (): string => {
  const date = new Date();
  return format(date, 'LLL d EEE') + ' ' + format(date, 'p').toLocaleLowerCase();
}

export class CalendarService implements OnDestroy {
  constructor(private http: HttpClient) {}

  private minuteInterval: any;

  ngOnDestroy(): void {
    if (this.interval) {
      clearInterval(this.minuteInterval);
    }
  }

  getToday(): Observable<string> {
    return new Observable((subscriber: Subscriber<string>) => {
      subscriber.next(formatToday());
      this.minuteInterval = setInterval(() => {
        subscriber.next(formatToday());
      }, ONE_MINUTE);
    })
  }
```
Later I simplified the above with the [timer](https://rxjs.dev/api/index/function/interval) function that
creates a Observable to emit data every 10 seconds. Here I just [map](https://rxjs.dev/api/operators/map)
(and ignore) the given sequential number into the current time, then apply the
[distinctUntilChanged](https://rxjs.dev/api/operators/distinctUntilChanged) operator to avoid unnecessary UI update.
```js
import { Observable, timer } from 'rxjs';
import { distinctUntilChanged, map } from 'rxjs/operators';

  getToday(): Observable<string> {
    return timer(0, TEN_SECOND).pipe(
      map(() => formatToday()),
      distinctUntilChanged(),
    );
  }
```

### Manual Refresh UI

The [ion-refresher](https://ionicframework.com/docs/api/refresher) provides pull-to-refresh functionality on a content component.
Using the component is easy enough, just place it into your ion-conent and handle the ionRefresh event, and the documentation
provides a good async timeout function to dismiss the refresher after 2 seconds.

The only confusing part is where to put my own content. At first, I try putting the weather and calendar inside the ion-refresher-content
tag but that does not work. It turns that that I just have to put my components in the normal place, and just add the ion-refresher tags
into the ion-content.
```
<ion-content [fullscreen]="true">
  <ion-refresher slot="fixed" (ionRefresh)="doRefresh($event)">
    <ion-refresher-content></ion-refresher-content>
  </ion-refresher>

  <app-weather name="Weather"></app-weather>
  <app-calendar name="Calendar"></app-calendar>
</ion-content>
```
and my refresh function just call the update functions in the service to trigger an asychronize update. The
refreshed date will come through from the subscription. Note that we are going to change the http.get Observable
into a BehaviorSubject in the next section for this to work as the http.get Observable unsubcribe itself upon
completion of the http request.
```js
doRefresh(event) {
  this.calendarService.updateEvents();
  this.weatherService.updateCurrentWeather();
  event.target.complete();
}
```

### HttpClient Data Update

Performing the actual data refresh is not as simple. There is quite
[a few articles](https://stackoverflow.com/questions/44947551/angular2-4-refresh-data-realtime)
on this subject. So I finally get it after experimenting with RxJS more.

The weather service code started like this:
```js
@Injectable({
  providedIn: 'root'
})
export class WeatherService {

  constructor(private http: HttpClient) {}

  getCurrentWeather(): Observable<any> {
    return this.http.get(OPEN_WEATHER_URL)
      .pipe(
        retry(3),
        map(mapData),
        catchError(handleError)
      )
  }
}
```
A [BehaviorSubject](https://rxjs.dev/api/index/class/BehaviorSubject), with initial value of an empty array,
is added as a middle man between the http request and the UI component. When getCurrentWeather() is called,
it triggers a call to updateCurrentWeather() for the initial data fetch, then return the weatherSubject as
the Obserable for the component.

An automatic update is also triggered on a hourly interval so always keep the information update to date.

Note that I have to forgo forwarding the error to the BehaviorSubject as the error event is considered completion
as well and the component will no longer receive data update even if http get succeeds on further request.
In my case, the app will keep showing the last received weather data or calendar events.
```js
@Injectable({
  providedIn: 'root'
})
export class WeatherService implements OnDestroy {

  constructor(private http: HttpClient) {}

  private hourInterval: any;
  private weatherSubject = new BehaviorSubject<any>([]);

  ngOnDestroy(): void {
    if (this.hourInterval) {
      clearInterval(this.hourInterval);
    }
  }

  getCurrentWeather(): Observable<any> {
    this.updateCurrentWeather()
    this.hourInterval = setInterval(() => {
      this.updateCurrentWeather()
    }, ONE_HOUR);
    return this.weatherSubject;
  }

  updateCurrentWeather(): void {
    this.http.get(OPEN_WEATHER_URL)
      .pipe(
        retry(3),
        map(mapData),
        catchError(handleError)
      )
      .subscribe(
        data => this.weatherSubject.next(data)
      );
  }
}
```
The weather component below calls getCurrentWeather() just as before, unaware of the implementation change,
except that when new data come through, the UI will automatically display the new data.
```js
@Component({
  selector: 'app-weather',
  templateUrl: './weather.component.html',
  styleUrls: ['./weather.component.scss'],
})
export class WeatherComponent implements OnInit {

  public weatherData = [];

  constructor(private weatherService: WeatherService, private toastController: ToastController) {}

  ngOnInit() {
    this.weatherService.getCurrentWeather().subscribe(
      data => this.weatherData = data,
      error => showToastOnError(this.toastController, error),
    );
  }
}
```

### Unsubscribe with SubSink

[SubSink](https://www.npmjs.com/package/subsink) is a dead simple class to absorb RxJS subscriptions in an array
and allows you to unsubscribe gracefully in a component. It is especially useful when you have multiple
subscriptions and you can unsubscribe to them all on one call inside ngOnDestroy.
```js
import { SubSink } from 'subsink'

export class CalendarComponent implements OnInit, OnDestroy {

  private subs = new SubSink();

  ngOnInit() {
    this.subs.add(this.calendarService.getEvents().subscribe(data => this.events = data));
  }

  ngOnDestroy() {
    this.subs.unsubscribe()
  }
}
```



A good exercise to dive into RxJS is data update. The app has a need to both automatic update as well as manual update. And there are local update  as well as update using http request...

RxJS Data Update

# Server Side Rendering
##### June 11th, 2020 By Alex Hu
![main](/images/server-side-rendering.jpg)

For [Server Side Rendering, React has a StaticRouter](https://alligator.io/react/react-router-ssr/)
instead of the Client-Side BrowserRouter.

That works well for the simple Hello World app with no data to preload into the page. It gets more complicated as
soon as you try to load real data into the page. In a Client-Side React app, all the data are loaded after the page is loaded.
With Server Side Rendering, you have to load the data before the page is rendered in the server side *and* also load
additional data on the client side especially if your app is a single page app. In the worst case, you will have to implement
the data fetching logic twice, once on the server side and again on the client side.

The server side data fetching portion feel like it is a afterthought of the whole architecture, but in fareness it is not
a bad way to convert existing React app to support Server Side Rendering. Since I am starting a new project, there is
no restriction on what I can use. So it opens up more possibility for a better framework for the job.

[Static Site Generation](https://dev.to/matfrana/server-side-rendering-vs-static-site-generation-17nf)
seems to be back in fashion now and it makes sense giving that a lot of the article pages are static
instead of highly interactive. So finding a framework that can support and mix-and-match both Server Side Rendering
and Static Site Generation would be ideal.

[**Next.js**](https://nextjs.org/) quickly comes up as just the solution for both of them, and it has an active community behind it.
```
npx create-next-app
```
will create a skeleton app to get you started.

For Server Side Rendering, React has a StaticRouter instead of the Client-Side BrowserRouter. That works well for the simple Hello World app with no data to preload into the page. It gets more complicated as soon as you try to load real data into the page. In a Client-Side React app, all the data are loaded after the page is...

Server Side Rendering

# Smart Home Devices
##### Octember 11th, 2020 By Alex Hu
![main](/images/smart-home-devices.jpg)

I have a fan and a light switch controlled by TP-Link smart switch in my office. My son and I installed them
so that we don't have to reach over to turn them on and off :-) Now we just say the words and Google Assistent
will obey my command, until it does not. Once in a while, Goolge Assistent just don't want to listen to me and
I find myself looking for the Kasa app on my phone to execute the command. So I want to see if I can integrate
the TP-Link smart switches into my personal mobile app.

### [TP-Link Cloud API](https://www.npmjs.com/package/tplink-cloud-api)

The tplink-cloud-api NPM module allows your to remotely control your TP-Link smartplugs, smart switches,
and smartbulbs using the TP-Link cloud web service, from anywhere, without the need to be on the same wifi/lan.

A [BehaviorSubject](https://rxjs.dev/api/index/class/BehaviorSubject) is used to store the list of devices.
When the device component becomes visible, the service is contructed with a periodic timer to update
```js
export class DeviceService implements OnDestroy {

  devices$ = new BehaviorSubject<any>([]);

  private minuteInterval: any;
  private tplink: any;

  constructor(private http: HttpClient) {
    this.updateDevices().then();
    this.minuteInterval = setInterval(() => {
      this.updateDevices().then();
    }, ONE_MINUTE);
  }

  ngOnDestroy(): void {
    if (this.minuteInterval) {
      clearInterval(this.minuteInterval);
    }
  }

  async connect() {
    if (!this.tplink) {
      this.tplink = await login(TPLINK_USER, TPLINK_PASSWORD);
    }
  }

  async updateDevices() {
    await this.connect();
    if (this.tplink) {
      const deviceList = await this.tplink.getDeviceList();
      ...
      this.devices$.next(deviceList;
    }
  }
```

### Naming Convention for Observable

I am seeing a lot of $ in examples, which simply indicates that variable$ is an observable.
```js
export class DeviceComponent {

  devices$ = this.deviceService.devices$;

  constructor(private deviceService: DeviceService) {}
}
```

### async Pipe
Subscription is also simplified with the async pipe in the template which will unsubscribe automatically,
eliminated the needs for OnInit and OnDestroy. Now the component is much smaller.
```
<ion-item *ngFor="let device of (devices$ | async)">
  <ion-icon name="{{ device.icon }}" size="large"></ion-icon>
  <h5>{{ device.alias }}</h5>
</ion-item>
```

### Data Update Revisited

After watching [Complex features made easy with RxJS](https://youtu.be/B-nFj2o03i8?t=876), I want to try
the refresh$ pipe approach. For example, the following code just look a bit odd, calling an async function
in the constructor, therefore the Promise.then() was called to trigger the function.
```js
constructor(private http: HttpClient) {
  this.updateDevices().then();
  this.minuteInterval = setInterval(() => {
    this.updateDevices().then();
  }, ONE_MINUTE);
}
```
The code I ended up looks more cryptic but I guess it is actually a common pattern in RxJS.
The refresh$ below is a a manual trigger while refreshTimer$ will periodically trigger the
refresh. The devices$ will get the devices from the async updateDevices() function.
```js
export class DeviceService implements OnDestroy {

  refresh$ = new BehaviorSubject<any>(null);
  refreshTimer$ = timer(0, ONE_MINUTE);

  devices$ = this.refresh$.pipe(
    exhaustMap(() => from(this.updateDevices())),
  )

  private subs = new SubSink();
  private tplink: any;

  constructor(private http: HttpClient) {
    this.subs.add(this.refreshTimer$.subscribe(this.refresh$));
  }

  ngOnDestroy(): void {
    this.subs.unsubscribe()
  }

  async connect() {
    if (!this.tplink) {
      this.tplink = await login(TPLINK_USER, TPLINK_PASSWORD);
    }
  }

  async updateDevices() {
    await this.connect();
    if (this.tplink) {
      const deviceList = await this.tplink.getDeviceList();
      ...
      return deviceList;
    }
    return [];
  }
```
The component UI has a button to toggle the device on and off, and will refresh the UI by calling
a refresh$.next().
```js
  async toggleDevice(name: string) {
    await this.connect();
    if (this.tplink) {
      await this.tplink.getHS100(name).toggle();
      this.refresh$.next(null);
    }
  }
}
```
In the case of the calendar service, the updateEvent$ is used instead of from(Promise),
just like the tutorial video.
```js
export class CalendarService implements OnDestroy {

  refresh$ = new BehaviorSubject<any>(null);
  refreshTimer$ = timer(0, ONE_MINUTE);

  updateEvents$ = this.http.get(CALENDAR_URL).pipe(
    map(mapEvents),
    catchError(handleError)
  )

  events$ = this.refresh$.pipe(
    exhaustMap(() => this.updateEvents$),
  )

  private subs = new SubSink();

  constructor(private http: HttpClient) {
    this.subs.add(this.refreshTimer$.subscribe(this.refresh$));
  }

  ngOnDestroy(): void {
    this.subs.unsubscribe();
  }
```
With this pattern, all setInterval() are replaced by the refresh$ and refreshTimer$.


I have a fan and a light switch controlled by TP-Link smart switch in my office. My son and I installed them so that we don't have to reach over to turn them on and off :-) Now we just say the words and Google Assistent will obey my command, until it does not. Once in a while, Goolge Assistent...

Smart Home Devices

# Sprint 1 Gearing Up
##### June 8th, 2020 By Alex Hu
![main](/images/sprint-1-gearing-up.jpg)

Goal: Evaluate Different Frameworks

### TypeScript & Materialize CSS ✔

1. Create a React app with TypeScript
2. Style a NavBar with Materialize CSS

[React, Redux & Firebase App Tutorial](https://www.youtube.com/watch?v=Oi4v5uxTY5o&list=PL4cUxeGkcC9iWstfXntcj8f-dFZ4UtlN3)

### GraphQL with TypeScript ✔

1. Create a GraphQL Server with TypeScript and Data Modeling Tools
```
npx create-graphql-api
```
[Typescript GraphQL CRUD Tutorial](https://www.youtube.com/watch?v=WhzIjYQmWvs)

2. Create a Next.js GraphQL Server with TypeScript for Server-Side-Rendering

```
npx create-next-app --example with-typescript-graphql
```


Sprint 1 Gearing Up

# Sprint 2 Deciding on a Framework
##### June 15th, 2020 By Alex Hu
![main](/images/sprint-2-deciding-on-a-framework.jpg)

Goal: Decide on a Framework

### Next.js + GraphQL + Database ✔

1. Create a Next.js GraphQL Server using Knex as database connector

>[Building a GraphQL server in Next.js](https://www.youtube.com/watch?v=Hn5neKIfJs8)

2. Create a Next.js GraphQL Server Connecting to MongoDB

>[Build an app with NextJS and MongoDB](https://www.youtube.com/watch?v=tt9hws5JGRc)

### Evaluate Different CSS Frameworks ✔

1. Bootstrap / React-Bootstrap

>[Bootstrap Beginner Crash Course](https://www.youtube.com/watch?v=5GcQtLDGXy8)

2. Materialize / Material-UI

>[Materialize Tutorial](https://www.youtube.com/watch?v=gCZ3y6mQpW0&list=PL4cUxeGkcC9gGrbtvASEZSlFEYBnPkmff&index=1)

3. Semantic-UI / Semantic-UI-React

>[Semantic UI In 60 Minutes](https://www.youtube.com/watch?v=a9mUH1EWp40)


Sprint 2 Deciding on a Framework

# Sprint 3 Start Coding
##### June 22nd, 2020 By Alex Hu
![main](/images/sprint-3-start-coding.jpg)

Goal: Build a Functional Posts Page with a Real Backend

### Database ✔

1. Create a [MongoDB](https://www.mongodb.com/) in the cloud [MongoDB Altas](https://www.mongodb.com/cloud/atlas)
2. Use [MongoDB Compass](https://www.mongodb.com/products/compass) to view database records

### Back End ✔

1. Create a [Next.js](https://nextjs.org/) app
2. Use [Apollo GraphQL](https://www.apollographql.com/) server and client
3. Use [Mongoose](https://mongoosejs.com/) for database connection and schema

### Front End ✔

1. Create a React client in [TypeScript](https://www.typescriptlang.org/) with a NavBar
2. Create a Posts section and present each post in a [Semantic UI's Card](https://react.semantic-ui.com/views/card/) component,
along with a Add button for adding new post
3. Create individual Post page with Edit and Delete buttons.
4. Accept [Markdown](https://www.markdownguide.org/) as article content


Sprint 3 Start Coding

# Sprint 4 Unit Testing
##### June 29th, 2020 By Alex Hu
![main](/images/sprint-4-unit-testing.jpg)

Goal: Implement Unit Testing and Improve User Experience

### Unit Testing ✔

1. Create a simple Jest self test
2. Set up the React Testing Library to fetch the About page
3. Create an integration test to fetch Posts page
4. Create a test suite for CRUD operations
5. Add a new field to the data model with unit test


Sprint 4 Unit Testing

# Sprint 5 User Interface Improvement
##### July 4th, 2020 By Alex Hu
![main](/images/sprint-5-user-interface-improvement.jpg)

### Improve User Experience ✔

1. Convert database fields to static Markdown files on the server
2. Enter posts with Markdown files
3. Switch to [Material-UI](https://material-ui.com/)
4. Add [Vertical Timeline](https://material-ui.com/api/timeline/)
5. Cloud Deployment


Sprint 5 User Interface Improvement

# Sprint 6 Refinement
##### July 19th, 2020 By Alex Hu

### Animation ✔

Animation soften up the user interface a bit. Even a short duration of animation will ease the harsh
feeling of sudden pop in and out of hover style.

### Minimizing File Size ✔

One of the side effect of adding the back / next buttons is that too much data is loaded in the query.
As the return value of getStaticProps() become the static content inside the generated static html,
we can do all the calculation in the getStaticProps() and just return the necessary information, in this
case, all I need are the href for the back and next buttons and the article for the page. This reduces the
file size from 80K to only 8K bytes.
```js
export const getStaticProps: GetStaticProps = async (context: Context) => {
  ...
  return {
    props: {
      backHref,
      nextHref,
      article,
    }
  }
}
```


Sprint 6 Refinement

# Sprint 7 Private REST Server
##### September 20th, 2020 By Alex Hu

Goal: Create a private REST server at home to serve up some media files, as well as
performing operations on my computer when requested by a new peronal assistant mobile app.

### Deno & abc ✔

[Deno Course - Better than Node.js?](https://www.youtube.com/watch?v=TQUy8ENesGY)
[Deno Jump-start Tutorial](https://www.youtube.com/playlist?list=PL4cUxeGkcC9gnaJdxuGvEGYQ9iHb8mxsh)

### Node.js & Express ✔

[How to build a REST API with Node js & Express](https://www.youtube.com/watch?v=pKd0Rpw7O48)

### My Impression on Deno and Node.js

Overall, the Node.js & Express experience has been smoother and definitely more refined. Things
work just as it advertised. I do miss the native async / await support in Deno, but a quick
[util.promisify()](https://masteringjs.io/tutorials/node/promisify) converted the callback functions
into Promise without problem. For the fs module, there is already a promisified module called fs.promises
which async / await calls quite painless.


Goal: Create a private REST server at home to serve up some media files, as well as performing operations on my computer when requested by a new peronal assistant mobile app...

Sprint 7 Private REST Server

# Sprint 8 Personal Assistant Mobile App
##### September 20th, 2020 By Alex Hu

Goal: Create a personal assistant mobile app.

### [Angular](https://angular.io/)

Angular is an application design framework and development platform for creating efficient and sophisticated single-page apps.

### [Ionic Framework](https://ionicframework.com/))

Ionic Framework is is an open source mobile UI toolkit for building high quality, cross-platform native
and web app experiences. Move faster with a single codebase, running everywhere.

### [Ionic Angular](https://ionicframework.com/docs/angular/overview)

Ionic Angular combines the core Ionic experience with the tooling and APIs that are tailored to Angular Developers.


Sprint 8 Personal Assistant Mobile App

# Sprint 9 Ionic Native Plugins
##### Octember 15th, 2020 By Alex Hu

Goal: Add Ionic Native Plugins to Mobile App

### [Ionic Native Community](https://ionicframework.com/docs/native/community)

Ionic Native Community is a collection of TypeScript wrappers for open source Cordova and Capacitor plugins that
make it easy to add native functionality to any Ionic app.



Sprint 9 Ionic Native Plugins

# Start and Stop
##### June 10th, 2020 By Alex Hu
![main](/images/start-and-stop.jpg)

Today is a quick start with [create-react-app](https://github.com/facebook/create-react-app)
with [scss](https://sass-lang.com/) and a little bit of [Materialize css](https://materializecss.com/).
All smooth sailing until...

I learned about [the importance of Server-Side Rendering](https://stackonfire.com/scraping-server-side-rendered-react-apps/)
for search enghine. Oh boy, got my brian all wrecked up. Well, this thing is just not going to work with a normal
create-react-app fetching data after the page source is loaded. Search engines are just not going to find the page content
a real human would see. So all my client side skill for single page app would need to be throw out the window.

Quite a few questions rushed into my head when I realized the complexity of the problem:

 * Does it mean I have to server side generate the page using some sorts of templating? I worked with the Python
[Django](https://www.djangoproject.com/) server side [templates](https://docs.djangoproject.com/en/3.0/topics/templates/)
before, but it would just take the fun out of the whole project.

 * What about the rich client side interactive that we are accustom to over the years?

 * Does it mean I would need to use Client-Side React along with server side rendering templates? How would that work!

Fortunately, [React Server-Side Rendering](https://www.digitalocean.com/community/tutorials/react-server-side-rendering)
came to the rescue, by rendering the virtual DOM on the server side and then populating the page content as part of the page source.
The React app can still work the same afterwards by fetching additional data when navigating to another page and so on.
It was a sigh of relief when the smart community has already solved the problem.

By the way, I was also wrong on search engine not able to read page content for Client-Side React app. Google has tools like
[Puppeteer](https://developers.google.com/web/tools/puppeteer/) and [Fetch as Goolge](https://www.javascriptstuff.com/react-seo/)
that wait for Client-Side React app to be fully loaded before scraping the page. Unforunately,
[Google might not see the page content](https://blog.pusher.com/seo-react-fetch-as-google/) if the data took a while to be fetched.


Today is a quick start with create-react-app with scss. All smooth sailing until... I learned about the importance of Server-Side Rendering for search enghine. Oh boy, got my brian all wrecked up. Well, this thing is just not going to work with a normal create-react-app fetching data after the page source is loaded. Search engines are just not going to...

Start and Stop

# Static Markdown Files on the Server
##### July 5th, 2020 By Alex Hu
![main](/images/static-markdown-files-on-the-server.jpg)

As it turns out, this project does not need a database for the articles. There are actually
static site generators, like [MkDocs](https://www.mkdocs.org/user-guide/writing-your-docs/),
that accept Markdown files and generates the whole site just from the files.

### Static Markdown files on the Server

I use similar file layout as in [MkDocs](https://www.mkdocs.org/user-guide/writing-your-docs/#file-layout)
where *docs* is the parent folder of the articles. The subfolder under docs are *Posts* and *Sprints*
and these folder names become the section name of the articles. The file name starts with a timestamp followed by
the article id, which is a slug of the title. For example, the full path of this article is
*docs/Posts/20200705-static-markdown-files-on-the-server.md*.

With the file layout defined, all it took was to change the GraphQL resolvers to read from the files
instead of the database. Since GraphQL implementation is completely decoupled from the client,
it makes the switch easy.
```
docs/
  Posts/
    20200608-a-new-beginning.md
    20200610-start-and-stop.md
    ...
    20200705-static-markdown-files-on-the-server.md
  Sprints/
    20200609-sprint-1-gearing-up
    20200615-sprint-2-deciding-on-a-framework.md
    ...
    20200704-sprint-5-user-interface-improvement.md

```
These folders are under the project's root folder and are checked into Git Repository, along with the code,
and therefore provide a safe archive for the documents.

### Enter Articles with Markdown files

The first 2 lines of the Markdown files always start with a H1 title and a H5 timestamp.
This allows the resolvers to parse the Markdown files for the article title.
The H5 allows the timestamp to be styled through normal CSS.

```
# Static Markdown Files on the Server
##### July 5th, 2020 By Alex Hu
```

### Automatic Refresh

There are quite a bit of markdown files to edit. It would be nice to have the page
content automatically refresh as the markdown files are changed. The
[Apollo useQuery hook](https://www.apollographql.com/docs/react/api/react-hooks/)
supports a *pollInterval* option, so we just have to update the page when useQuery
returns new data. Note that Apollo cache the data and only trigger the change only
when necessary.
```js
const POLLING_INTERVAL = process.env.NODE_ENV === 'production' ? 0 : 2000

const { data } = useQuery<ArticlesResult>(ArticlesQuery, {
  pollInterval: POLLING_INTERVAL,
})
const [articles, setArticles] = useState(() => filterAndSortArticles(data?.articles))

useEffect(() => {
  setArticles(filterAndSortArticles(data?.articles))
}, [data])
```

### Styling Images with Markdown

There is an excellent article on
[How to Style Images With Markdown](https://www.xaprb.com/blog/how-to-style-images-with-markdown/).
I put *main* as the image alt text

!\[main\](https://images.unsplash.com/photo-1558981806-ec527fa84c39)

and style it through normal CSS
```
img[alt=main] {
  display: block;
  margin: 1rem auto;
  width: 60%;
  height: auto;
}
```


As it turns out, this project does not need a database for the articles. There are actually static site generators, like MkDocs, that accept Markdown files and generates the whole site just from the files...

Static Markdown Files on the Server

# Swipe Gesture
##### Octember 13th, 2020 By Alex Hu
![main](/images/swipe-gesture.jpg)

The mobile app uses the tabs interface to switch between the calendar tab and the device tab.
In additional to tapping the tab button, I found myself trying to swipe between tabs but it is
not a default action provided by the framework.

### [Gestures](https://ionicframework.com/docs/utilities/gestures)

After reading up on the topic and a few iterations, I finally settle down on a base page component class.
It makes use of the ngAfterViewInit() lifecycle hook to create the gesture. At the end of the pan gesture,
the velocity of the x-axis and y-axis are compared and check for some minimal requirements to determine
if it is a left or right swipe and navigate to the tab accordingly.

```js
import { AfterViewInit, ElementRef, NgZone, ViewChild } from '@angular/core';
import { Router } from '@angular/router'
import { GestureController } from '@ionic/angular'

export class SwipeTabPage implements AfterViewInit {

  @ViewChild('swipeTabPage') swipeTabPage: ElementRef;

  private panStartX = 0;

  constructor(
    protected router: Router,
    protected zone: NgZone,
    protected gestureController: GestureController,
    protected swipeLeftUrl: string,
    protected swipeRightUrl: string,
  ) {}

  ngAfterViewInit(): void {
    this.createGesture();
  }

  createGesture(): void {
    if (this.swipeTabPage?.nativeElement) {
      const gesture = this.gestureController.create({
        gestureName: 'swipe-tab',
        gesturePriority: 100,
        el: this.swipeTabPage.nativeElement,
        direction: 'x',
        onStart: (ev) => this.onStart(ev),
        onEnd: (ev) => this.onEnd(ev),
      })
      gesture.enable()
    }
    else {
      console.error(`SwipeTabPage -> createGesture -> swipeTabPage`, this.swipeTabPage)
    }
  }

  private onStart(ev) {
    this.panStartX = ev.currentX;
  }

  private onEnd(ev) {
    if (ev.type === 'pan') {
      const panStartX = this.panStartX;
      const panEndX = ev.currentX;
      if (Math.abs(ev.velocityX) > 0.10 && Math.abs(ev.velocityX) > Math.abs(ev.velocityY) * 2) {
        if (panStartX > panEndX) {
          this.onSwipeLeft();
        }
        else {
          this.onSwipeRight();
        }
      }
    }
  }

  protected onSwipeLeft(): void {
    this.zone.run(async () => {
      await this.router.navigate([this.swipeLeftUrl]);
    });
  }

  protected onSwipeRight(): void {
    this.zone.run(async () => {
      await this.router.navigate([this.swipeRightUrl]);
    });
  }
}
```

The child tab page component simply provides all the necessary controllers to and links
to the base class.

```js
export class Tab2Page extends SwipeTabPage {

  constructor(
    router: Router,
    zone: NgZone,
    gestureController: GestureController,
  ) {
    super(router, zone, gestureController, '/tabs/tab1', '/tabs/tab3');
  }
}
```
In the html template, I have to add a #swipeTabPage block to surround the actual content and specify
the minimum height to the calc(100vh - 130px), where 130px roughly accounts for the header and
the bottom tabs panel. 100vh is simply the viewport height. So the minimum height is going to cover
almost all the screen area.
```
<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-title>{{ today$ | async }}</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true">
  <div #swipeTabPage class="swipe-tab-page">
    <app-device name="Devices"></app-device>
  </div>
</ion-content>
```
This #swipeTabPage block allows the swipe gesture to work even on blank area below the component content. Without it,
the swipe gesture occurs outside of the SwipeTabPage component and therefore ignored by the gesture controller.
```
.swipe-tab-page {
  min-height: calc(100vh - 130px);
}
```


The mobile app uses the tabs interface to switch between the calendar tab and the device tab. In additional to tapping the tab button, I found myself trying to swipe between tabs but it is not a default action provided by the framework...

Swipe Gesture

# Test Suite for CRUD operations
##### July 3rd, 2020 By Alex Hu
![main](/images/test-suite-for-crud-operations.jpg)

When adding new fields to the data models, it was apparent that adding additional fields to the
data model is a troublesome area, as the app was broken in numerious area, namely

1. GraphQL query
2. GraphQL mutation
3. GraphQL resolver
4. Data migration

So we need a safety net before adding new fields to minimize the potential breakage.

### Create a test suite for CRUD operations

The test suite performs these tests:

1. Create a new article in the beforeAll() function
2. Test the newly created article
3. Read all the articles and test for the newly created article
4. Read the newly created article by id
5. Update the article and test the changes
6. Read all the articles and check the migrated fields for the appropriate default values
7. Delete the article and read all the articles back to check for non-existance

```js
describe('GraphQL for Article', () => {
  let newArticle: IArticle

  beforeAll(async () => {
    // create an article for all the tests below
    const apolloClient = createApolloClient()
    try {
      const result = await apolloClient.mutate({
        mutation: CreateArticleMutation,
        variables: {
          title: 'TEST title',
          summary: 'TEST summary',
          content: 'TEST content',
        }
      })
      // console.log('result', result)
      const { data } = result
      newArticle = data.createArticle
    }
    catch (error) {
      console.error(error)
    }
  })

  it('Create Article', () => {
    const createArticle = newArticle
    expect(createArticle).toBeDefined()
    expect(typeof createArticle.id).toBe('string')
    expect(createArticle.title).toBe('TEST title')
    expect(createArticle.summary).toBe('TEST summary')
    expect(createArticle.content).toBe('TEST content')
    expect(createArticle.createdAt).toBeDefined()
    expect(new Date(createArticle.createdAt)).toBeTruthy()
    expect(createArticle.updatedAt).toBeDefined()
    expect(new Date(createArticle.updatedAt)).toBeTruthy()
    expect(createArticle.createdAt).toBe(createArticle.updatedAt)
  })

  // read all the articles and check that the newly created article is part of it
  it('Read Articles', async () => {
    const apolloClient = createApolloClient()
    const result = await apolloClient.query({
      query: ArticlesQuery,
    })
    expect(result).toBeDefined()
    const { data } = result
    expect(data).toBeDefined()
    const { articles } = data
    expect(articles).toBeDefined()
    expect(articles.length).toBeGreaterThan(0)
    expect(articles.find(article => article.id === newArticle.id)).toBeDefined()
  })

  // read the newly created article
  it('Read Article', async () => {
    const apolloClient = createApolloClient()
    const result = await apolloClient.query({
      query: ArticleQuery,
      variables: {
        id: newArticle.id,
      }
    })
    // console.log('ArticleQuery result =', result)
    expect(result).toBeDefined()
    const { data } = result
    expect(data).toBeDefined()
    const { article } = data
    expect(article).toBeDefined()
    expect(article.id).toBe(newArticle.id)
  })

  // update the newly created article
  it('Update Article', async () => {
    const apolloClient = createApolloClient()
    const result = await apolloClient.mutate({
      mutation: UpdateArticleMutation,
      variables: {
        id: newArticle.id,
        title: 'TEST title updated',
        summary: 'TEST summary updated',
        content: 'TEST content updated',
      }
    })
    // console.log('UpdateArticleMutation result = ', result)
    expect(result).toBeDefined()
    const { data } = result
    expect(data).toBeDefined()
    const { updateArticle } = data
    expect(updateArticle).toBeDefined()
    expect(updateArticle.id).toBe(newArticle.id)
    expect(updateArticle.title).toBe('TEST title updated')
    expect(updateArticle.summary).toBe('TEST summary updated')
    expect(updateArticle.content).toBe('TEST content updated')
    expect(updateArticle.createdAt).toBe(newArticle.createdAt)
    expect(updateArticle.updatedAt).not.toBe(newArticle.updatedAt)
  })

  // delete the newly created article and then read all the articles checking
  // that the deleted article is not there any more
  it('Delete Article', async () => {
    {
      const apolloClient = createApolloClient()
      const result = await apolloClient.mutate({
        mutation: DeleteArticleMutation,
        variables: {
          id: newArticle.id,
        }
      })
      // console.log('DeleteArticleMutation result =', result)
      expect(result).toBeDefined()
      const { data } = result
      expect(data).toBeDefined()
      const { deleteArticle } = data
      expect(deleteArticle).toBeTruthy()
    }
    {
      const apolloClient = createApolloClient()
      const result = await apolloClient.query({
        query: ArticlesQuery,
      })
      expect(result).toBeDefined()
      const { data } = result
      expect(data).toBeDefined()
      const { articles } = data
      expect(articles).toBeDefined()
      expect(articles.length).toBeGreaterThan(0)
      expect(articles.find(article => article.id === newArticle.id)).toBeUndefined()
    }
  })
})
```

### Add a new field to the data model with unit test

With the unit test in place, adding the section field is a matter of adding the expect()
function as below, then implement the resolvers and data migration to pass the test.
For the new field, we also test for the migration by check the appropriate default values.
```js
  // update the newly created article
  it('Update Article', async () => {
    const apolloClient = createApolloClient()
    const result = await apolloClient.mutate({
      mutation: UpdateArticleMutation,
      variables: {
        id: newArticle.id,
        title: 'TEST title updated',
        summary: 'TEST summary updated',
        content: 'TEST content updated',
        section: 'TEST section updated',
      }
    })
    //...
    expect(updateArticle.section).toBe('TEST section updated')
  })

  // read all the articles and check that the existing articles has the section default to Posts
  it('Migrate Articles', async () => {
    const apolloClient = createApolloClient()
    const result = await apolloClient.query({
      query: ArticlesQuery,
    })
    expect(result).toBeDefined()
    const { data } = result
    expect(data).toBeDefined()
    const { articles } = data
    expect(articles).toBeDefined()
    expect(articles.length).toBeGreaterThan(0)
    expect(articles.find(article => article.section === DEFAULT_ARTICLE_SECTION)).toBeDefined()
  })

```


When adding new fields to the data models, it was apparent that adding additional fields to the data model is a troublesome area, as the app was broken in numerious area, namely 1. GraphQL query 2. GraphQL mutation 3. GraphQL resolver 4. Data migration So we need a safety net before adding new fields to minimize the potential breakage...

Test Suite for CRUD operations

# Text-to-Speech
##### November 14th, 2020 By Alex Hu
![main](/images/text-to-speech.jpg)

The [Text-to-Speech Plugin](https://ionicframework.com/docs/native/text-to-speech/)
provides an easy way to read the note out loud. Not an essential feature, but it is another plugin that I can try out.
Installing and using the plugin is quite straight forward, you just need to put the TextToSpeech in the
AppModule as a provider, and call speak() to start, and then speak('') to stop.

```js
import { TextToSpeech } from '@ionic-native/text-to-speech/ngx';

export class NoteModalPage {
  @Input() id: string;
  @Input() content: string;

  constructor(
    ...
    private tts: TextToSpeech,
  ) { }

  speak(): void {
    if (this.isAndroid()) {
      this.tts.speak(this.content);
    }
  }
```

### [Modal](https://ionicframework.com/docs/api/modal)

The speak button is hosted in a modal page that also allow me to edit the note.

```
<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-button (click)="cancel()">
        <ion-icon name="arrow-back"></ion-icon>
      </ion-button>
    </ion-buttons>
    <ion-buttons slot="end">
      <ion-button (click)="save()">Save</ion-button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

<ion-content padding>
  <ion-fab vertical="bottom" horizontal="center" slot="fixed">
    <ion-fab-button color="light" (click)="speak()">
      <ion-icon name="mic"></ion-icon>
    </ion-fab-button>
  </ion-fab>
  <ion-textarea autoGrow autoFocus [(ngModel)]="content"></ion-textarea>
</ion-content>
```

The current speech is stopped by tts.speak('') in ngOnDestory(), when the modal is
dismissed by the Save button, the Back arrow in the toolbar or Android's Back button.

```js
import { Component, Input, OnDestroy } from '@angular/core';
import { TextToSpeech } from '@ionic-native/text-to-speech/ngx';
import { isPlatform, ModalController } from '@ionic/angular';
import { NoteService } from '../services/note.service';

@Component({
  selector: 'app-note-modal',
  templateUrl: './note-modal.page.html',
  styleUrls: ['./note-modal.page.scss'],
})
export class NoteModalPage implements OnDestroy {
  @Input() id: string;
  @Input() content: string;

  constructor(
    private modalController: ModalController,
    private noteService: NoteService,
    private tts: TextToSpeech,
  ) { }

  ngOnDestroy() {
    if (this.isAndroid()) {
      this.tts.speak('');
    }
  }

  async cancel(): Promise<void> {
    this.modalController.dismiss();
  }

  async save(): Promise<void> {
    if (this.id || this.content) { // don't save a new empty note
      await this.noteService.update(this.id, this.content)
    }
    this.modalController.dismiss();
  }

  speak(): void {
    if (this.isAndroid()) {
      this.tts.speak(this.content).then();
    }
  }

  isAndroid(): boolean {
    return isPlatform('capacitor');
  }
}
```

Bringing up the modal page is trigger by tapping the note in the list.

```
<ion-card>
  <ion-list>
    <ion-item *ngFor="let note of (notes$ | async)">
      <h5 (click)="edit(note.id, note.content)">{{ firstLine(note.content) }}</h5>
      <ion-button color="light" slot="end" (click)="remove(note.id)">
        <ion-icon name="trash"></ion-icon>
      </ion-button>
    </ion-item>
  </ion-list>
</ion-card>
```

```js
import { Component, OnInit } from '@angular/core';
import { ModalController } from '@ionic/angular'
import { NoteModalPage } from '../note-modal/note-modal.page'
import { NoteService } from '../services/note.service'

@Component({
  selector: 'app-note',
  templateUrl: './note.component.html',
  styleUrls: ['./note.component.scss'],
})
export class NoteComponent {

  notes$ = this.noteService.notes$;

  constructor(
    private modalController: ModalController,
    private noteService: NoteService,
  ) {}

  firstLine(content: string): string {
    return content.trim().split('\n')[0];
  }

  async edit(id: string, content: string): Promise<void> {
    const note = { id, content };
    const modal = await this.modalController.create({
      component: NoteModalPage,
      componentProps: note,
    });
    modal.present();
  }

  async remove(id: string): Promise<void> {
    await this.noteService.remove(id);
  }
}
```


The Text-to-Speech Plugin provides an easy way to read the note out loud. Not an essential feature, but it is another plugin that I can try out. Installing and using the plugin is quite straight forward, you just need to put the TextToSpeech in the AppModule as a provider, and call speak to stop...

Text-to-Speech

# Unit Testing with Jest
##### June 30th, 2020 By Alex Hu
![main](/images/unit-tesitng-with-jest.jpg)

### [Jest](https://jestjs.io/)

There are many articles written on the topic. So a simple self test is not difficult.
```js
describe('Jest self test', () => {
  it('true be true', () => {
    expect(true).toBe(true)
  })
})
```
### [React Testing Library](https://testing-library.com/docs/react-testing-library/intro)

The React Testing Library allows the page to be rendered and perform test on the resulting DOM.
In this case, we just check for the existance of a footer-divider:
```js
describe('About page', () => {
  it('About render correctly', () => {
    const result = render(<About />)
    const { queryByTestId } = result
    expect(queryByTestId('footer-divider')).toBeTruthy()
  })
})
```
And the Footer.tsx has ```data-testid='footer-divider'``` in it to allow for the test.
```js
import React from 'react'
import { Divider } from 'semantic-ui-react'

const Footer = () => {
  return (
    <footer>
      <Divider data-testid='footer-divider' />
    </footer>
  )
}

export default Footer
```
