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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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:...

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

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

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