Forem: Thang Cam Duong

Asynchronous Programming (Async/Await) With C#

Thang Cam Duong — Tue, 23 Feb 2021 01:17:28 +0000

What we will build

Source code

What is `Synchronous`?

By default, any method we normally create in the C# applicication is synchronous by default.

Synchronous represents a set of the activities that starts happening in sequences.
The synchronous call waits for the method to be completed before continuing with the program flow.

Synchronous programming problem

The problem with the synchronous application is that no one else can do anything until the previous task get completes.

How does synchronous cause trouble?

It badly affects the user interface (UI) that has just one thread to run its entire user interface code. It blocks UI whenever the user attempts to perform some code lengthy (time-consuming) operation
It causes performance on the application if there are multiple operations that do not rely on the other operation. For example, if you have 3 operations called A, B, C; and they are not depending on each other. In the synchronous environment, operation B will have to wait for A to be completed before it can be executed, and the same for C to wait for B. Therefore, it causes the performance impact on the application.

What is `Asynchronous`?

Asynchronous programming is to fix the problem of synchronous programming, it is allowing multiple tasks to run parallel.
An asynchronous method call (a thread will be created) will return immediately so that the application can continue to perform the rest of the operations while the called method completes its works in its conditions.

Asynchronous program usages

The UI-intensive application in which the user experience is the primary concern. An asynchronous application allows the user interface to remain responsive to the user.
The application has a complex and expensive computational task, the user can continue interacting with the UI while waiting for the result from the long-running task.

Async and await asynchronous

The two new keywords, async and await, were introduced in C# 5.0 and .NET 4.5. There are implemented at the compiler level and build on top of the System.Threading.Tasks.Task feature of .NET 4.0. Async/Await offers a completely different and easy way to do asynchronous programming.

Async

The keyword is used to tell a function as an asynchronous.

public async Task ExecuteLongTask() {
    // Your task
}

Here the Executetask() method is declared as an asynchronous method. Now, it is ready to be called asynchronous.
It is very important here, do not return void from an asynchronous method, if there is nothing to return, we just put the return type Task. If you have something to return, for example, return the string value

public async Task<string> ExecuteLongTask() {
    // Your task
}

However, if the method is an event, then the async event can returns void

Await

This keyword is used when we call it an asynchronous method. For example, we have a long process to be called

public async Task ExecuteLongTask() {
    await Task.Run();
    ///
    /// Handle result
    ///
}

Code Explanation

In the example async_programming_demo, the application has two buttons Synchronous Execute and Asynchronous Execute. The button has the event click corresponding to its name, and the events are performing the task as their names.

What does the application do?

The application simply go to the list of the websites and download each website and put the content to the string.

If you click on the Synchronous Execute, you will notice the application will run and the UI will freeze until the task has completed and the result will write to the window at once. And this is how the code looks like.

private void executeSync_Click(object sender, RoutedEventArgs e)
{
    var watch = System.Diagnostics.Stopwatch.StartNew();
    RunDownloadSync();
    watch.Stop();
    long elapseMs = watch.ElapsedMilliseconds;
    results.Text += $"Total execution time: {elapseMs}";
}

/// <summary>
/// Run download synchronous
/// </summary>
private void RunDownloadSync()
{
    results.Text = "";
    WebClient client = new WebClient();
    List<string> websites = WebsiteList();
    foreach (string url in websites)
    {
        string response = client.DownloadString(url);
        results.Text += String.Format("Download from {0}: total {1} characters\r", url, response.Length);
    }                        
}

If you click on the button Asynchronous Execute, your UI does not freeze, you can move the window around while the code runs, and you will notice the output display one at a time.

private async void executeASync_Click(object sender, RoutedEventArgs e)
{
    var watch = System.Diagnostics.Stopwatch.StartNew();
    await RunDownloadASync();
    watch.Stop();
    long elapseMs = watch.ElapsedMilliseconds;
    results.Text += $"Total execution time: {elapseMs}";
}

/// <summary>
/// Run download asynchronous
/// </summary>
private async Task RunDownloadASync()
{
    results.Text = "";
    WebClient client = new WebClient();
    List<string> websites = WebsiteList();
    foreach (string url in websites)
    {
        string response = await Task.Run(() => client.DownloadString(url));
        results.Text += String.Format("Download from {0}: total {1} characters\r", url, response.Length);
    }
}

NOTE: In this implementation, we only solve the first issue of the synchronous application. And it is the UI interaction. But it does not help to improve any performance for the application

Improve the code to speed up the application

private async void executeASync_Click(object sender, RoutedEventArgs e)
{
    var watch = System.Diagnostics.Stopwatch.StartNew();
    await RunDownloadParallelASync();
    watch.Stop();
    long elapseMs = watch.ElapsedMilliseconds;
    results.Text += $"Total execution time: {elapseMs}";
}

/// <summary>
/// Run download asynchronous
/// </summary>
private async Task RunDownloadParallelASync()
{
    results.Text = "";
    // List of the task
    List<Task<string>> tasks = new List<Task<string>>();

    List<string> websites = WebsiteList();
    foreach (string url in websites)
    {
        tasks.Add(Task.Run(() => {
            WebClient client = new WebClient();
            return String.Format("Download from {0}: total {1} characters\r", url, client.DownloadString(url).Length);                    
        }));                
    }
    // Wait for all the tasks are done
    string[] responses = await Task.WhenAll(tasks);
    foreach(string response in responses)
    {
        results.Text += response;
    }            
}

In the previous implementation, we are waiting for each download to finish and perform the next download. Therefore, it only solves the UI interaction issue. In the RunDownloadParallelASync we are implementing all the tasks that will run in parallel, so we only wait for the longest task to be completed before the data can be displayed.

foreach (string url in websites)
{
    tasks.Add(Task.Run(() => {
        WebClient client = new WebClient();
        return String.Format("Download from {0}: total {1} characters\r", url, client.DownloadString(url).Length);                    
    }));                
}

creates each task and places them in tasks collection.

// Wait for all the tasks are done
string[] responses = await Task.WhenAll(tasks);

is waiting for all the tasks in the collection to be completed.
So, the difference here is RunDownloadASync telling the application to do the download in sequence and wait for it to complete. RunDownloadParallelASync tells the application do the download in parallel for all the websites.

Conclusion

We have successfully implemented the asynchronous application using Async/Await syntax.

Build Weather App With React

Thang Cam Duong — Sat, 20 Feb 2021 02:36:59 +0000

Source code

Here

Introduction

In this article, we will learn to build the weather app using

Prerequiestes

Install Visual Studio Code (VS Code) from here
Install NodeJS from here
Create account for open weather api here

Create project

Create weather app project

npx create-react-app weather-app

The command above will create a new React project with the name weather-app

Change the directory to the new project

cd weather-app

Let run the application to make sure, the project was created successfully by using the command

npm start

Install the dependencies

I am using the feather icons for any icons using in the project. All the icons can be found here
To add the feather icons to the react prject we are using the command

npm i react-feather

The usage for react-feather icon can be seen here

Open the project in VS Code

code .

Update the CSS style

Because this is a simple project, therefore I put all the style code in one single file App.css.
Replace all the content in the App.css with the content from App.css

Create reducers

Make a new folder reducers under the src directory.
Then make a new index.js under the reducers folder.
Copy the following code the index.js file

export const getWeather = async (api) => {
    const response = await fetch(api);
    if (!response.ok) {
        // throw an error if response has not successed
      throw new Error(`${response.status}, ${response.statusText}`);
    } else {
        return await response.json();
    }
}

export const updateWeather = (dispatch, data) => {
    let weather = {};
    weather.temprature = {
        unit: "celsius"
    };
    weather.temprature.value = Math.floor(data.main.temp - KELVIN);
    weather.description = data.weather[0].description;
    weather.iconId = `http://openweathermap.org/img/w/${data.weather[0].icon}.png`;
    weather.city = data.name;
    weather.country = data.sys.country;          


    dispatch({
        type: "UPDATE_WEATHER",
        payload: weather
    });
};

export const KEY = "This is the key from your account openweather";

export const KELVIN = 273;

const reducer = (state, action) => {
    const { type, payload } = action;        
    switch (type) {                     
        case "SET_ERROR": 
            return {
                ...state,
                error: payload.error,
                city: payload.city,
                weather: null
            };
        case "SET_LOCATION":
            return {
                ...state,
                latitude: payload.latitude,
                longitude: payload.longitude
            };
        case "UPDATE_WEATHER":
            return {
                ...state,                
                weather: payload,
                error: null,
                city: payload.city
            };
        default:
            return state;
    }
};

export default reducer;

getWeather is to perform the async event to get the data from the open weather with the provided URL as the parameters
updateWeather takes the dispatch method, and the data return from the getWeather to format data as desired and dispatch the method to update the state values.
reducer is defining all the action and payload data to update to the state. There are a total of three actions here
SET_ERROR will notify the component to display the error message if fails to get the weather
SET_LOCATION will set the latitude and longitude value from your current location, this is a one-time set. The values will be reused when the location icon is clicked
UPDATE_WEATHER update the weather information in the state so they will be displayed in the component # Create StateProvide (store) Make a new folder store under the src directory. Then make a new index.js under the store folder. Copy the following code the index.js file

import React, { createContext, useContext, useReducer } from 'react';
import reducer from '../reducers';

export const initialState = {
    weather: null,
    latitude: 0.0,
    longitude: 0.0,
    city: "",
    error: null
};

export const StateContext = createContext(initialState);
const { Provider } = StateContext;

export const StateProvider = ({children}) => {
    return <Provider value={useReducer(reducer, initialState)}>{children}</Provider>;
};

export const useStateValue = () => useContext(StateContext);

initialState is the initial values of the state
reducer is defined from our reducers
useContext returns the current context value for that context. # Make use of StateProvide Open the index.js under the src folder, and update the script content as below

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { StateProvider } from './store';

ReactDOM.render(
  <React.StrictMode>
    <StateProvider>
      <App />
    </StateProvider>
  </React.StrictMode>,
  document.getElementById('root')
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

App component is now surrounded by our StateProvider. This will make the state available for the whole application.

Adding Notification component

Notification component is to display the error message.
Create a new file Notification.js under the src directory

import React from 'react';
import { useStateValue } from './store';

function Notification() {    

    const [{error, city}] = useStateValue();  

    return (
        <div className="notification">
            {error && <p>{error.message}, <b><i>"{city}"</i></b> is not a valid city</p>}
        </div>
    )
}

export default Notification

const [{error, city}] = useStateValue(); allows to access the data from the global state.

Adding Header/City component

Header/City component is to display the title message, and the input field to allow user to enter the city name. it is also included the button icon to allow re-set the location back to the current location of the user machine.
Create a new file City.js under the src directory

import React, { useState, useEffect } from 'react';
import { MapPin } from 'react-feather';
import { useStateValue } from './store';
import { getWeather, KEY, updateWeather } from './reducers';

function CityInfo() {
    const [currentCity, setCurrentCity] = useState('');
    const [{city, latitude, longitude}, dispatch] = useStateValue();    

    useEffect(() => {
        setCurrentCity(city);
    }, []);

    /**
     * Use click on the location button to see the weather
     * at the current location
     */
    const defaultLocation = () => {
        let api = `http://api.openweathermap.org/data/2.5/weather?lat=${latitude}&lon=${longitude}&appid=${KEY}`;
        getWeatherData(api);
    };

    /**
     * Key up event to capture keyboard
     * Firing to update the city in the store if the key is Enter
     */
    const onCityChange = (event) => {
        if (event.keyCode === 13) {
            event.preventDefault();           
            let api = `http://api.openweathermap.org/data/2.5/weather?q=${currentCity}&appid=${KEY}`;    
            getWeatherData(api);
        }
    };

    const getWeatherData = (api) => {
        getWeather(api)
        .then((data) => {    
            setCurrentCity(data.name); 
            updateWeather(dispatch, data);
        })
        .catch (e => {            
            dispatch({
                type: "SET_ERROR",
                payload: {
                    error: e,
                    city: currentCity
                }
            }); 
        }); 
    };

    /**
     * Handle the input change
     */
    const handleChange = (event) => {
        setCurrentCity(event.target.value);
    }

    return (
        <div className="app-title">
            <p>Weather Info</p>
            <input type="text" placeholder="Enter the city" autoComplete="off" 
            onChange={handleChange}
            value={currentCity} onKeyUp={onCityChange} />
            <div className="location-icon" onClick={defaultLocation}>
                <MapPin />
            </div>        
        </div>
    )
}

export default CityInfo;

const [currentCity, setCurrentCity] = useState(''); is to keep the value which user is entering in the input field
const [{city, latitude, longitude}, dispatch] = useStateValue(); allows to access data from global state. There is dispatch is the method paired with the state, the dispatch will be passed to the call-back methods to update the state.

Adding WeatherInfo component

WeatherInfo component is to display the weather data.
Create a new file WeatherInfo.js under the src directory

import React from 'react';
import { useStateValue } from './store';

function WeatherInfo() {
    const [{weather}] = useStateValue();

    return weather && (
        <div className="weather-container">
            <div className="weather-icon">
              <img src={weather.iconId} alt={weather.description} />
              <div className="temprature-value">
                <p>{weather.temprature.value} *<span>C</span></p>
              </div>
              <div className="temprature-description">
                <p>{weather.description}</p>
              </div>
              <div className="location">
                <p>{weather.city}, {weather.country}</p>
              </div>
            </div>          
        </div>
    )
}

export default WeatherInfo;

const [{weather}] = useStateValue(); allows to access the weather data from the global state.

Update the App.js

Now we have all the components, we will add them to our main app component

import React, { useEffect } from 'react';
import './App.css';
import { useStateValue } from './store';
import Notification from './Notification';
import WeatherInfo from './WeatherInfo';
import CityInfo from './CityInfo';
import { getWeather, KEY, updateWeather } from './reducers';

function App() {
  const [{error}, dispatch] = useStateValue();  

  useEffect(() => {     
    if ("geolocation" in navigator) {
      navigator.geolocation.getCurrentPosition((position) => {  
        let payload = {
          latitude: position.coords.latitude,
          longitude: position.coords.longitude
        };
        dispatch({
          type: "SET_LOCATION",
          payload
        });
        let api = `http://api.openweathermap.org/data/2.5/weather?lat=${payload.latitude}&lon=${payload.longitude}&appid=${KEY}`;
        getWeather(api)
        .then((data) => {
          updateWeather(dispatch, data);          
        })
        .catch (e => {            
            dispatch({
              type: "SET_ERROR",
              payload: {
                error: e
              }
            });
        });                   
      }, (error) => {  
        dispatch({
          type: "SET_ERROR",
          payload: {
            error
          }
        });              
      });
    }
  }, []);  

  return (    
    <div className="app">      
      <CityInfo />
      {error && <Notification />}
      {!error && <WeatherInfo />}
    </div>
  );
}

export default App;

navigator.geolocation.getCurrentPosition allows to gets the current position of the user, this will prompt the message when launch for accessing the location.
{error && <Notification />} renders if there is an error.
{!error && <WeatherInfo />} renders if there is no error

Congrats!!!

Congrats!!! You have completed building the weather application from start to end.

Simple Todo App with Vue, Google Firestore, and Google Authentication

Thang Cam Duong — Fri, 29 Jan 2021 02:35:26 +0000

Introduction

I find the fastest and easiest learning any programming language by doing the meaning projects. By doing a real project, you can benefit from the design, manage the project from start to end. In this article, we will learn to build an application using Vue and state management for Vue application by using Vuex

We will learn the following in this article

Create a project by using Vue CLI (version 2)
Create and use the Vue component
Using Bootstrap Vue to style the component
Using Vuex for state management
Authentication with Google firebase authentication
CRUD events with Google fire store

Source Code

You can find the full source from the GitHub

Prerequiestes

Install Visual Studio Code (VS Code) from here
Install NodeJS from here
Install the Vue CLI from here

npm install -g @vue/cli

Create project

Make sure you have the Vue Command Line Interface (CLI) installed on your machine. You can install Vue CLI by run the command below in your terminal command

Create a todo application project

vue create todo-app

The command above will create a new Vue project with the name todo-app

Change the directory to the new project

cd todo-app

Install Vuex

npm install vuex --save

Install Vue Bootstrap

npm install bootstrap bootstrap-vue --save

Install firebase

npm install firebase --save

Compiles and hot-reloads for development

npm run serve

Compiles and minifies for production

npm run build

Lints and fixes files

npm run lint

Customize configuration

See Configuration Reference.

Open the project in VS Code

code .

You will see the default file structure generated by Vue CLI

We will delete the HelloWorld.vue component for now. We will add our components later.

Open the terminal in the VS Code by pressing the combination key (Ctrl + J or CMD + J)

Create firebase.js

Firebase will provide the authentication and database events (CRUD)

Please make sure you already configured firebase project from Google Firebase

Now create a new named firebase.js under the src directory

Copy the following code to the file

import firebase from 'firebase';
// For Firebase JS SDK v7.20.0 and later, measurementId is optional
const firebaseConfig = {
  // Add your firebase config here
};

const firebaseapp = firebase.initializeApp(firebaseConfig);

// database
const db = firebaseapp.firestore();

// authentication
const auth = firebase.auth();
const provider = new firebase.auth.GoogleAuthProvider();

export { auth, provider };
export default db;

Please make sure you modify the configuration firebaseConfig with yours

Create store object for state management

We want to have all the states located in the store directory under the source (src) directory.
Now we create a new folder named store under the src folder.

Create user state (store)

User state to manage the user who signs in/out by using Google firebase. It will control the user signed in or signed out. And the user interface will be updated based on the user status.

Create a new JavaScript file named user.js under the store directory.

Copy the following code to the file

const state = {
  user: null
};

const getters = {
  user: state => state.user
};

const actions = {
  signIn ({commit}, user) {
    commit('signIn', user);
  },
  signOut({commit}) {
    commit('signOut');
  }
};

const mutations = {
  signIn: (state, user) => {
    state.user = user;
  },
  signOut: state => state.user = null
};

export default {
  state,
  getters,
  actions,
  mutations
};

Create todos state (store)

Todos state to manage the todo list and todo item. Todos state will controll

Loading data from Google firestore database
Adding data to firestore database
Update data to firestore database
Delete data from firestore database

Create a new JavaScript file named todos.js under the store directory.

Copy the following code to the file

import db from '../firebase'

// State declaration
const state = {
  /**
   * each todo item will have the format
   * {
   *  id: String,
   *  title: String,
   *  completed: Boolean
   * }
   */
  todos: []
};

// Getters
const getters = {
  // Get all todo items in the current state
  allTodos: state => state.todos
};

// actions
const actions = {
  /**
   * Loading todos   
   * This is fetch data from database
   */
  fetchTodos ({commit}, user) {        
    db.collection('user')
      .doc(user.uid)
      .collection('todos')
      .onSnapshot(snapshot => {
        commit('setTodos', snapshot.docs.map(doc => {
          return {
            id: doc.id,
            doc: doc.data()
          }
        }));
      })    
  },
  /**
   * Add a new todo action
   * This is fired when the user submit the form add a new todo 
   * @param {String} payload - The title string of the the new todo
   */
  addTodo({ commit}, payload) {
    const uid = payload.user.uid;
    const title = payload.title;

    const newtodo = {
      title,
      completed: false
    };

    db.collection('user')
      .doc(uid)
      .collection('todos')
      .add(newtodo)
      .then(docRef => {
        commit('addTodo', {
          id: docRef.id,
          data: newtodo
        });
      }) 
  },
  /**
   * Update the status of the todo item in the state
   * @param {Object} payload - The object contains
   * - the id to identify the todo item in the collection list
   * - completed property to update the status of the todo item
   */
  toggleCompleted ({commit}, payload) {
    const uid = payload.user.uid;
    const id = payload.id;
    const completed = payload.completed;
    db.collection('user')
      .doc(uid)
      .collection('todos')
      .doc(id)
      .update({
        completed: completed
      })
    commit('toggleCompleted', {
      id,
      completed
    });
  },
  /**
   * 
   * @param {*} param0 
   * @param {Number} payload - The number id to identify the todo item in the collection
   */
  deleteTodo ({commit}, payload) {
    const uid = payload.user.uid;
    const id = payload.id;
    db.collection('user')
      .doc(uid)
      .collection('todos')
      .doc(id)
      .delete();
    commit('deleteTodo', id);
  }
};

// mutations
const mutations = {
  setTodos: (state, todos) => {    
    state.todos = todos.map(todo => {
      return {
        id: todo.id,
        title: todo.doc.title,
        completed: todo.doc.completed
      }
    });
  },
  addTodo: (state, {id, data}) => {      
    console.log('addTodo');
    const newtodo = {
      id,
      title: data.title,
      completed: data.completed
    };  
    const oldTodos = [...state.todos];
    const index = oldTodos.findIndex(todo => todo.id === id);    
    // adding new todo the list
    if (index < 0) {
      state.todos.unshift(newtodo); // = [newtodo, ...state.todos];
    }

    console.log(state.todos);
  },
  toggleCompleted: (state, {id, completed}) => {
    const index = state.todos.findIndex((todo) => todo.id === id);
    if (index >= 0) {
      state.todos[index].completed = completed;
    }
  },
  deleteTodo: (state, id) => {
    const index = state.todos.findIndex((todo) => todo.id === id);
    if (index >= 0) {
      state.todos.splice(index, 1);
    }
  }
};

export default {
  state,
  getters,
  actions,
  mutations
};

Create Vuex Store

Now we have states for both user and todos, we want to use them in the store collection

Create a new file named store.js under the src folder.

Copy the following code to the file

// Create a store
import Vue from 'vue'
import Vuex from 'vuex'
import todos from './todos';
import user from './user';

Vue.use(Vuex);

// create store
export default new Vuex.Store({
  modules: {
    todos,
    user
  }
});

Adding store to the project

Open the main.js to adding store to our application.

We also add the bootstrap to our application here

import Vue from 'vue'
import App from './App.vue'
// Import store
import store from './store/store'
// Bootstrap
import { BootstrapVue, IconsPlugin } from 'bootstrap-vue'

// import bootstrap and BootstrapVue css
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'

Vue.use(BootstrapVue);
Vue.use(IconsPlugin);

Vue.config.productionTip = false;

new Vue({
  render: h => h(App),
  store
}).$mount('#app')

Create components

Now we have all the set-up. We will start to create our components for the application. Our application will have the following component

Login component - To show user logged in or logged out
NewTodo component - This is form component to add a new todo item
TodoList component - This is the list view to display each todo item
TodoItem component - This is the todo item to be display

Create Login component

We create a new file Login.vue under the component folder. And copy the following script to the file

<template>
  <div class="login">
    <div @click="logout" v-if="user" class="logout">
      <b-avatar variant="info" :src="imageSrc" class="mr-3"></b-avatar>
      <span class="mr-auto">{{user.user.displayName}}</span>      
    </div>
    <b-button v-else variant="primary" @click="login">Sign In</b-button>    
  </div>
</template>
<script>
import { mapGetters, mapActions } from 'vuex';
import { auth, provider } from '../firebase'

export default {
  name: 'Login',
  data() {
    return {
      imageSrc: ''
    };
  },
  computed: mapGetters(['user']),
  methods: {
    ...mapActions(['signIn', 'signOut']),
    login() {
      auth
      .signInWithPopup(provider)
      .then(authUser => {
        this.imageSrc = authUser.user.photoURL;
        this.signIn(authUser);
      })
      .catch(error => alert(error.message))      
    },
    logout() {
      this.signOut();
    }
  }
}
</script>
<style>
.login {
  text-align: center;
}

.logout {
  cursor: pointer;
}
</style>

Create NewTodo component

We create a new file NewTodo.vue under the component folder. And copy the following script to the file

<template>
  <b-form @submit="AddNewTodo">
    <b-form-group
      label="Add new todo"
      label-for="newTodo"
    >
      <b-form-input
        id="newTodo"
        placeholder="What needs to be done"
        v-model="todo"
        required
      >        
      </b-form-input>
    </b-form-group>
    <b-button type="submit" variant="primary">Add New Todo</b-button>
  </b-form>
</template>
<script>
// import actions
import { mapGetters, mapActions } from 'vuex'

export default {
  name: "NewTodo",
  data() {
    return {
      // data for binding to the input text
      todo: ''
    }
  },
  computed: mapGetters(['user']),
  methods: {
    ...mapActions(['addTodo']),
    /**
     * Form submit hanlder
     */
    AddNewTodo (event) {
      event.preventDefault();
      if (this.todo && this.todo !== "") {
        // update data base
        this.addTodo({
          user: this.user.user,
          title: this.todo
        })                  
        // clear todo
        this.todo = "";
      }      
    }
  }
}
</script>
<style>

</style>

Create TodoItem component

We create a new file TodoItem.vue under the component folder. And copy the following script to the file.

TodoItem will take three properties from the parent (TodoList)

id - Identifier the item (this value is generated by firestore database)
title - This is string represent the item description
completed - This is a boolean represent the item has been completed or not

<template>
  <b-form>
    <b-row>
      <b-col cols="11">
        <b-form-checkbox switch size="lg" :checked="completed" 
            @change="toggleComplete">                    
          <label :class="{complete: completed}">{{title}}</label>      
        </b-form-checkbox>       
      </b-col>      
      <b-col cols="1">
        <b-icon icon="trash" class="hover-trash" @click="removeTodo"></b-icon>
      </b-col>
    </b-row>

  </b-form>
</template>
<script>
import { mapGetters, mapActions } from 'vuex'

export default {
  name: 'TodoItem',
  props: {
    id: String, // The todo item key
    title: String, // The title description of the todo item
    completed: Boolean // indicating if the todo item has been completed
  },
  computed: mapGetters(['user']),
  methods: {
    ...mapActions(['toggleCompleted', 'deleteTodo']),
    toggleComplete () {
      // change the status of the todo item
      this.toggleCompleted({
        user: this.user.user,
        id: this.id,
        completed: !this.completed
      })
    },
    removeTodo () {
      // delete the todo from the state collection
      this.deleteTodo({
        user: this.user.user,
        id: this.id
      });
    }
  }
}
</script>
<style scoped>
.complete {
  text-decoration: line-through;
}

.hover-trash:hover {
  color: red;
}

.row {
  border-bottom: 1px solid gray;
}
</style>

Create NewTodo component

We create a new file TodoList.vue under the component folder. And copy the following script to the file

<template>
  <b-container fluid class="ml-3">
    <h1>Todo list goes here</h1>
    <ul>
      <li v-for="todo in allTodos" :key="todo.id">
        <todo-item :title="todo.title" :completed="todo.completed" :id="todo.id" ></todo-item>        
      </li>
    </ul>
  </b-container>
</template>
<script>
import TodoItem from './TodoItem.vue'
// vuex actions and getters
import { mapGetters, mapActions } from 'vuex';

export default {
  name: 'TodoList',
  components: {
    TodoItem
  },
  computed: mapGetters(['allTodos', 'user']),
  methods: {
    ...mapActions(['fetchTodos'])
  },
  created() {
    this.fetchTodos(this.user.user);
  }
}
</script>
<style scoped>
ul li {
  list-style: none;
}
</style>

Adding components to App component

Open the App.vue and update the code as follow

<template>
  <div class="mt-5">
    <img alt="Vue logo" src="./assets/logo.png"> 
      <login></login>
      <div v-if="user">
        <b-container>        
          <new-todo></new-todo>      
        </b-container>
        <todo-list></todo-list>   
      </div>
  </div>
</template>

<script>
import NewTodo from './components/NewTodo.vue'
import TodoList from './components/TodoList.vue'
import { mapGetters } from 'vuex'
import Login from './components/Login.vue'

export default {
  name: 'App',
  computed: mapGetters(['user']),
  components: {
    NewTodo,
    TodoList,      
    Login
  }
}
</script>

<style>
* {
  margin: 0;
  padding: 0;
}

img {
  display: block;
  margin-left: auto;
  margin-right: auto;
}
</style>

Build and deploy

Now we have completed all the components and have tested the application locally. it is time for build and deploy the application.

Build the application

npm run build

This command will compile our application and generate all neccessary files under the folder dist. This is the folder will be deployed to google cloud hostting.

Deploy

Please make sure you have firebase-tools installed globally

npm install -g firebase-tools

Now you will need to login

firebase login

Initalize firebase project

firebase init

Select the hosting option.

When be asked for public directory, type dist

When be asked for single-page app, type 'y'

Type N when asking for GitHub automation build.

Type N when be asked for overwrite the index.html. We want to keep our file

Then select the hosting project, you can select an existing one if you already created or create a new one.

Deploy the project

firebase deploy

Congrats!!! You have completed build the todo application from start to end, and successfully deploy the application.

Basic validate Angular Reactive Forms

Thang Cam Duong — Sat, 09 Jan 2021 03:00:21 +0000

Introduction

I find the original documentation for Angular Reactive Forms from angular.io guide is very confused. Therefore, I love to give the simplest article to demonstrate how to use the validation in Angular Reactive Forms
In this article, we will learn the following

Build a simple user form using Angular reactive form
Implement some inbuilt validation
Implement some custom validation

We will consider the following custom validations for this demo

Check for user name availability
Check the password pattern
Check the password matching

Prerequiestes

Install Visual Studio Code (VS Code) from here
Install NodeJS from here
Install the Angular CLI from here

Source Code

You can find full source from the GitHub

Create the Angular application

ng new form-control-app --routing=false --style=css

In this project, we will not use any routing feature, and we will use bootstrap as CSS for styling the DOM (Document Object Module) element.
The command above will create a new Angular project with the name form-control-app

Install Bootstrap

Change the directories to the new project

cd .\form-control-app
npm install bootstrap --save

Open the project in VS Code

code .

Open the terminal in the VS Code by pressing the combination key (Ctrl + J)

Adding Bootstrap to the application

Open the style.css file under the location src\styles.css
Adding the following import definition

@import "~bootstrap/dist/css/bootstrap.css";

Create the reactive form component

Run the following command in the terminal

ng generate component user-form

You can also use the short form of the command

ng g c user-form

Import the `FormsModule` and `ReactiveFormsModule`

Open the file src\app\app.module.ts, and copy the code below

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';

import { AppComponent } from './app.component';
import { UserFormComponent } from './user-form/user-form.component';

@NgModule({
  declarations: [
    AppComponent,
    UserFormComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    ReactiveFormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Adding simple form with built-in validations

Open the src\app\user-form\user-form.component.ts and copy the following code below

import { Component, OnInit } from '@angular/core';
// Import Form Control Module from angular/forms
import { FormGroup, FormControl, Validators } from '@angular/forms';

@Component({
  selector: 'app-user-form',
  templateUrl: './user-form.component.html',
  styleUrls: ['./user-form.component.css']
})
export class UserFormComponent implements OnInit {

  // Create the property to hold the FormGroup
  userForm: FormGroup;

  submitted: boolean = true;

  constructor() { }

  ngOnInit(): void {
    this.userForm = new FormGroup({
      // First Name field
      firstName: new FormControl('', [
        Validators.required // required validator                
      ]),
      lastName: new FormControl('', [
        Validators.required // required validator                
      ]),
      userName: new FormControl('', [
        Validators.required, // required validator                
        Validators.minLength(4), // Minimum length of the username is 4 characters
        Validators.maxLength(20), // Maximum length of the username is 20 characters
      ]),
      email: new FormControl('', [
        Validators.required
      ]),
      password: new FormControl('', [
        Validators.required // required validator                
      ]),
      confirmedPassword: new FormControl('', [
        Validators.required // required validator                
      ]),
    })
  }

  // Get the form control
  get userFormControl () {
    return this.userForm.controls;
  }

  // Handle submit event
  onSubmit () {
    this.submitted = true;
    // Check the validation
    if (this.userForm.valid) {
      alert("Thank you for register");
      console.log(this.userForm.value); // Log out the form values in the console browser
    } else {
      alert("Thank you for register");
    }
  }
}

We create a variable userForm of type FormGroup. In the ngOnInit method, we set the form by initializing it with all the default values and built-in validators.
The userFormControl property will return the form controls of this form.
The on submit handler event onSubmit will print out the content of the form on the browser console.
Now, open the src\app\user-form\user-form.component.html and put the following code in it

<div class="container">
  <form [formGroup]="userForm" (ngSubmit)="onSubmit()">
    <label for="firstName">First Name</label>
    <input type="text" id="firstName" class="form-control" name="firstName" formControlName="firstName" />
    <div class="text-danger"
      *ngIf="(userFormControl.firstName.touched || submitted) && userFormControl.firstName.errors?.required">
      First Name is required
    </div>
    <label for="lastName">Last Name</label>
    <input type="text" id="lastName" class="form-control" name="lastName" formControlName="lastName" />
    <div class="text-danger"
      *ngIf="(userFormControl.lastName.touched || submitted) && userFormControl.lastName.errors?.required">
      First Name is required
    </div>
    <label for="userName">Username</label>
    <input type="text" id="userName" class="form-control" name="userName" formControlName="userName" />
    <div class="text-danger"
      *ngIf="(userFormControl.userName.touched || submitted) && userFormControl.userName.errors?.required">
      UserName is required
    </div>
    <label for="email">Enter your email:</label>
    <input type="email" id="email" name="email" class="form-control" formControlName="email">
    <div class="text-danger"
      *ngIf="(userFormControl.email.touched || submitted) && userFormControl.email.errors?.required">
      Email is required
    </div>
    <label for="password">Password</label>
    <input type="password" id="password" class="form-control" name="password" formControlName="password" />
    <div class="text-danger"
      *ngIf="(userFormControl.password.touched || submitted) && userFormControl.password.errors?.required">
      Password is required
    </div>
    <label for="confirmedPassword">Confirmed Password</label>
    <input type="password" id="confirmedPassword" class="form-control" name="confirmedPassword"
      formControlName="confirmedPassword" />
    <div class="text-danger"
      *ngIf="(userFormControl.confirmedPassword.touched || submitted) && userFormControl.confirmedPassword.errors?.required">
      Password is required
    </div>
    <br />
    <button type="submit" class="btn btn-primary" [disabled]="userForm.invalid">Submit</button>
  </form>
</div>

Update the `app.component.html`

We update the src\app\app.component.html file to display our form. Please copy the code below and put it in src\app\app.component.html

<div class="container mt-5">
  <app-user-form></app-user-form>
</div>

In the termminal, we will run the command to start the application

ng serve --open

This will open the application in the web browser at the post 4200 http://localhost:4200/

Create custom validation service

Open the new terminal windows and run the following command to create a new service

ng generate service user-validation

or the short-form of the command

ng g s user-validation

The command will generate the new file src\app\user-validation.service.ts and src\app\user-validation.service.spec.ts.
Open the file src\app\user-validation.service.ts and put the following code in

import { Injectable } from '@angular/core';
// Import the validation interface from angular
import { ValidatorFn, AbstractControl } from '@angular/forms';
import { FormGroup } from '@angular/forms';

@Injectable({
  providedIn: 'root'
})
export class UserValidationService {

  constructor() { }

  /**
   * Use to validate the password pattern in the form
   * The password should be
   * 1 - Minimum 8 characters
   * 2 - Has at least one lower case letter
   * 3 - Has at least one upper case letter
   * 4 - Has at least one number
   * If the password fails the check, the property invalidPassword is true
   */
  passordPatternValidator(): ValidatorFn {
    return (passowrdControl : AbstractControl) : { [key: string]: any } => {                
      if (!passowrdControl.value) {
        // password empty or not valid        
        return null;
      }
      const regex = new RegExp('^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9]).{8,}$');
      const valid = regex.test(passowrdControl.value);
      return valid ? null : { invalidPassword: true };
    }
  }

  /**
   * Use to compare the passwords in two fields.
   * The method takes two parameters of type string, which represent the name of the fields to be matched
   * The values of two fields will get from the form control and matching them
   * If the value does not match, the property passwordMismatch will be true
   * @param {string} password 
   * @param {string} confirmedPassword 
   */
  matchingPassword (password: string, confirmedPassword: string) {
    return (userForm: FormGroup) => {
      const passwordControl = userForm.controls[password];
      const confirmedPasswordControl = userForm.controls[confirmedPassword];

      if (!passwordControl || !confirmedPasswordControl) {
        // invalid
        return null;
      }

      if (confirmedPasswordControl.errors && !confirmedPasswordControl.errors.passwordMismatch) {
        // password not match
        return null;
      }

      if (passwordControl.value !== confirmedPasswordControl.value) {
        // password not match
        confirmedPasswordControl.setErrors({ passwordMismatch: true });
      } else {
        confirmedPasswordControl.setErrors(null);
      }
    };
  }

  /**
   * Use to validator the username already taken
   * setTimeout function to invoke checking half second, this will make sure the error will be thrown when the user stops typing
   * @param userControl 
   */
  userNameValidator (userControl: AbstractControl) {
    return new Promise(resolve => {
      setTimeout(() => {        
        if (this.validateUserName(userControl.value)) {               
          resolve({
            userNameNotAvailable: true
          })
        } else {          
          resolve(null);
        }
      }, 500);
    })
  }

  /**
   * Validate the username
   * The username should not be any of the following
   * admin, user, superuser
   * @param {string} userName 
   * @requires {boolean} true if the user is satisfied the condition, false otherwise
   */
  validateUserName (userName: string) {
    const excludeUser = ['admin', 'user', 'superuser'];        
    return excludeUser.indexOf(userName) > -1;
  }
}

Method passordPatternValidator is used to validate the password pattern in the form. the password pattern should be
1 - Minimum 8 characters
2 - Has at least one lower case letter
3 - Has at least one upper case letter
4 - Has at least one number
If the password fails the check, the property invalidPassword is true. Mode detail can be seen in Defining custom validators

Method matchingPassword is used to compare the passwords in two fields. The method takes two parameters of type string, which represent the name of the fields to be matched. The values of the two fields will be get from the form control and matching them. The detail on this method can be seen in the documentation for cross-field validation

Method userNameValidator is used to validator the username already taken, the check for taken username is defined in validateUserName. The setTimeout function to invoke checking every half second, will make sure the error will be thrown when the user stops typing. If the username fails check the property userNameNotAvailable set to true. Mode detail can be seen in custom validators

Update form component to use custom validators

`src\app\user-form\user-form.component.ts`

Open the src\app\user-form\user-form.component.ts file and put in the code

import { Component, OnInit } from '@angular/core';
// Import Form Control Module from angular/forms
import { FormGroup, FormControl, Validators } from '@angular/forms';
import { UserValidationService } from '../user-validation.service';

@Component({
  selector: 'app-user-form',
  templateUrl: './user-form.component.html',
  styleUrls: ['./user-form.component.css']
})
export class UserFormComponent implements OnInit {

  // Create the property to hold the FormGroup
  userForm: FormGroup;

  submitted: boolean = false;

  constructor(private userValidator:  UserValidationService) { }

  ngOnInit(): void {
    this.userForm = new FormGroup({
      // First Name field
      firstName: new FormControl('', [
        Validators.required // required validator                
      ]),
      lastName: new FormControl('', [
        Validators.required // required validator                
      ]),
      userName: new FormControl('', [
        Validators.required, // required validator                
        Validators.minLength(4), // Minimum length of the username is 4 characters
        Validators.maxLength(20), // Maximum length of the username is 20 characters        
      ], [this.userValidator.userNameValidator.bind(this.userValidator)]),
      email: new FormControl('', [
        Validators.required,
        Validators.email
      ]),
      password: new FormControl('', Validators.compose([
        Validators.required,
        this.userValidator.passordPatternValidator()
      ])),
      confirmedPassword: new FormControl('', [
        Validators.required // required validator                
      ]),
    }, {
      validators: this.userValidator.matchingPassword('password', 'confirmedPassword')
    })    
  }

  // Get the form control
  get userFormControl () {
    return this.userForm.controls;
  }

  // Handle submit event
  onSubmit () {
    this.submitted = true;
    // Check the validation
    if (this.userForm.valid) {
      console.log(this.userForm.value); // Log out the form values in the console browser
      alert("Thank you for register");      
    } else {
      alert("Thank you for register");
    }
  }
}

`src\app\user-form\user-form.component.html`

Open the src\app\user-form\user-form.component.html file and put in the code

<div class="container">
  <form [formGroup]="userForm" (ngSubmit)="onSubmit()">
    <label for="firstName">First Name</label>
    <input type="text" id="firstName" class="form-control" name="firstName" formControlName="firstName" />
    <div class="text-danger"
      *ngIf="(userFormControl.firstName.touched || submitted) && userFormControl.firstName.errors?.required">
      First Name is required
    </div>
    <label for="lastName">Last Name</label>
    <input type="text" id="lastName" class="form-control" name="lastName" formControlName="lastName" />
    <div class="text-danger"
      *ngIf="(userFormControl.lastName.touched || submitted) && userFormControl.lastName.errors?.required">
      First Name is required
    </div>
    <label for="userName">Username</label>
    <input type="text" id="userName" class="form-control" name="userName" formControlName="userName" />
    <div class="text-danger"
      *ngIf="(userFormControl.userName.touched || submitted) && userFormControl.userName.errors?.required">
      UserName is required
    </div>
    <div class="text-danger"
      *ngIf="(userFormControl.userName.touched && userFormControl.userName.errors?.userNameNotAvailable)">
      UserName is not available
    </div>
    <label for="email">Enter your email:</label>
    <input type="email" id="email" name="email" class="form-control" formControlName="email">
    <div class="text-danger"
      *ngIf="(userFormControl.email.touched || submitted) && userFormControl.email.errors?.required">
      Email is required
    </div>
    <div class="text-danger" *ngIf="(userFormControl.email.touched && userFormControl.email.errors?.email)">
      Enter a valid email address
    </div>
    <label for=" password">Password</label>
    <input type="password" id="password" class="form-control" name="password" formControlName="password" />
    <div class="text-danger"
      *ngIf="(userFormControl.password.touched || submitted) && userFormControl.password.errors?.required">
      Password is required
    </div>
    <div class="text-danger"
      *ngIf="(userFormControl.password.touched && userFormControl.password.errors?.invalidPassword)">
      Password should have minimum 8 characters, at least 1 uppercase letter, 1 lowercase
      letter and 1 number
    </div>
    <label for="confirmedPassword">Confirmed Password</label>
    <input type="password" id="confirmedPassword" class="form-control" name="confirmedPassword"
      formControlName="confirmedPassword" />
    <div class="text-danger"
      *ngIf="(userFormControl.confirmedPassword.touched || submitted) && userFormControl.confirmedPassword.errors?.required">
      Password is required
    </div>
    <div class="text-danger"
      *ngIf="(userFormControl.confirmedPassword.touched && userFormControl.confirmedPassword.errors?.passwordMismatch)">
      Passwords does not match
    </div>
    <br />
    <button type="submit" class="btn btn-primary" [disabled]="userForm.invalid">Submit</button>
  </form>
</div>

Run Demo

Open the terminal and run the following command

ng serve -o

If you already serve and having the error, please try to terminate the application and re-run it.

Summary

The Angular reactive form is successfully created
Get the source code from GitHub and play around.

Forem: Thang Cam Duong

Asynchronous Programming (Async/Await) With C#

What we will build

What is Synchronous?

Synchronous programming problem

How does synchronous cause trouble?

What is Asynchronous?

Asynchronous program usages

Async and await asynchronous

Async

Await

Code Explanation

What does the application do?

Improve the code to speed up the application

Conclusion

Build Weather App With React

Source code

Introduction

Prerequiestes

Create project

Install the dependencies

Open the project in VS Code

Update the CSS style

Create reducers

Adding Notification component

Adding Header/City component

Adding WeatherInfo component

Update the App.js

Congrats!!!

Simple Todo App with Vue, Google Firestore, and Google Authentication

Introduction

Source Code

Prerequiestes

Create project

Compiles and hot-reloads for development

Compiles and minifies for production

Lints and fixes files

Customize configuration

Open the project in VS Code

Create firebase.js

Create store object for state management

Create user state (store)

Create todos state (store)

Create Vuex Store

Adding store to the project

Create components

Create Login component

Create NewTodo component

Create TodoItem component

Create NewTodo component

Adding components to App component

Build and deploy

Build the application

Deploy

Basic validate Angular Reactive Forms

Introduction

Prerequiestes

Source Code

Create the Angular application

Install Bootstrap

Open the project in VS Code

Adding Bootstrap to the application

Create the reactive form component

Import the FormsModule and ReactiveFormsModule

Adding simple form with built-in validations

Update the app.component.html

Create custom validation service

Update form component to use custom validators

src\app\user-form\user-form.component.ts

src\app\user-form\user-form.component.html

Run Demo

Summary

What is `Synchronous`?

What is `Asynchronous`?

Import the `FormsModule` and `ReactiveFormsModule`

Update the `app.component.html`

`src\app\user-form\user-form.component.ts`

`src\app\user-form\user-form.component.html`