Angular JWT authentication (#7 of 100 projects)

This project took me really long to finish. I spent so much time trying to write a comprehensive blog post on explaining the project. But I realized my goal is to create 100 projects in using Angular framework, not to produce 100 how-to tutorials on Angular.

So this post is rather an update on what I’ve done than a guide post.

In this project, I’ve created a website with a dashboard which is password protected. JWT authentication is implemented using a backend created in Django and hosted in my c9.io instance.

In this project, I’ve created the following:

  • A password protected dashboard component
  • An authentication service to post request to backend API
  • A login component
  • An http interceptor to include JWT token in the http request

Source code: https://github.com/zkkmin/angular-jwt-login

Live demo site at https://friendly-saha-a8644a.netlify.com

username: iunicorn
password: sunandstar

Angular concentration game #6

concentration

This project has taken more then what I’ve intended. In this project, I am creating a memory game called concentration. There are several versions of concentration game. But I’ve implemented the simplest one.

The Game

  • There 2 pairs of cards with number 1 to 8.
  • The cards are laid face down.
  • Each turn, the player click a pair of cards to flip.
  • If the pair matches, the player score points.
  • If the pair is not matched, the pair of cards turns back to face down.

It is a pretty simple project. But it had taken me more time than I should have because I have overcomplicated the overall game design.

Following are the steps I’ve taken to develop the game.

Design game engine

  • Card object
    • cardNumber
      • A string value which will be used to compare between two cards for similarity
    • image
      • A URL to image resource of the card
    • isFaceup
      • To keep track of the current state of the card
    • done
      • To keep track of whether the card is already matched
  • Deck object
    • cards
      • An array of card objects
    • shuffle( )
      • Shuffle cards
    • flipDown()
      • To put all the cards in the deck face down
  • Game object
    • score
      • current score of the player
    • move
      • total number of moves made by player
    • match
      • total number of matched pairs
    • deck
      • a deck to play
    • deal( )
      • call shuffle of the deck
    • checkScore( )
      • compare two cards which are facing up for similarity

Provide game functions in service

Create a service called game. Inside the game.service.ts file define two functions as follow:

  • createDeck(count: number)
    • Create and return a deck of card with the provided number of cards
  • getGame(deck: Deck)
    • Create and return a game object using the provided deck

Components

  • CardComponent
    • Uses card object as the data model
    • Implements flipping on click event
  • GameBoardComponent
    • Uses a list of CardComponents to create the game board to play

Design game board page

  • Create simple and ugly page to stop myself from wasting too much time fiddling with CSS and colors

Lesson learned: Keep it simple and stupid.

Live project link: https://keen-allen-a7c7db.netlify.com/

Github: https://github.com/zkkmin/concentration

 

Angular dharma page #5

DharmaPage

This is the number 5 of my 100 angular projects. This project is based on the previous one Angular dhamma player #4.

This project has two components; the main page and audio track player page. On the home page, four images of famous Burmese Monks are shown in card style. When the user clicked on a card, they are brought to a player with the dhamma talks of the selected monk.

Basically, I am trying to learn how to use the Angular router for navigation between different components in a single page application.

Everything went well, except for one thing. I have been spending way too much time messing around with CSS and colors instead of focusing on functionality.

So, from now on I will spend less time on design aspect and more on functional aspects for future projects.

Live project link: https://inspiring-benz-2fb43a.netlify.com

Github: https://github.com/zkkmin/dharma-page

 

Angular dhamma player #4

Screen Shot 2018-07-03 at 10.00.36 AM

This is the #4 in my attempt at building 100 projects with Angular.

In this project, I decided to build a simple audio player with a playlist attached. I learned the following concepts while implementing it.

  • *ngFor to display list
  • master/display components
  • event handling with (onclick)

HTML5 audio element is used for playing the mp3 files in the list. This audio player component is a very simple component and I intend to use it in the bigger project later.

Check out both live project and source code for more details.

Live address: https://condescending-einstein-c291a3.netlify.com/

Github: https://github.com/zkkmin/dhamma-player

Angular random quote #3

This is the third project of my ongoing challenge, 100 angular projects.

In this project, I created a web page which fetches a random quote from an API endpoint and displays it on the page.

Screen Shot Muse

I have learned a few new concepts while creating this simple web application, such as

  • using services to separate fetching data from components
  • using observable and Angular HttpClient for fetching data asynchronously and providing a way for the data to be consumed from a component
  • calling child component’s function from parent component using @ViewChild

Service, Observable and HttpClient for asynchronous API call

Using service to get a random quote from a component

Calling child component’s function from the parent component

Live address: http://5b3705ca02ed8359970e2262.silly-perlman-68e0f4.netlify.com/

Git: https://github.com/zkkmin/muse

 

Hello angular with style #2

Screen Shot 2018-06-28 at 4.19.43 PM

This is the second post from the series of 100 angular projects I am doing. You can check out the first post here.

Based on the previous hello world project, I decided to have a little fun by adding CSS framework Bulma which is the new cool kid on the block. Watch out Bootstrap!

First I added the Bulma in the project using npm install:

npm install --save bulma

Second I imported the Bulma in src\styles.css:

 @import "~bulma/css/bulma.css"

Now Bulma styles are available globally. Afterward, I created two components for header and footer.

ng generate component components/header
ng g component components/footer  ## g is shorthand for generate

This will create header and footer components in src/app/components folder.

Edit the header.component.html, footer.component.html, and app.component.html for the Bulma hero layout look.

Let’s create a header with only a brand logo.

And create a footer with license information.

Finally, add those components into the main app.component.html.

That’s it. We are done.

This time, I used Netlify for deployment. It is very easy and it works.

Live address: https://eloquent-dijkstra-37b634.netlify.com/

Git: https://github.com/zkkmin/hello/tree/hello-bulma

 

Hello angular #1

Screen Shot 2018-06-28 at 5.58.09 AM

I used to learn a lot of programming languages for fun. When I found someone recommends a language online, I would check out the tutorials and blogs, and learn basic syntax of the language for a few days. But eventually the initial curiosity wore off and I would move on to something new and shiny.

Yes, I am one of those people who do a lot of tutorial and online courses but never create anything. I hate myself for this and decided to do something about it.

So I am starting this experiment to create 100 web applications in Angular.io. They are not necessarily going to be good apps. They may be shitty and useless. I don’t care. What I want to know is can I make this hundred times no matter what?

As a first project, I am creating a time-honored tradition of creating a hello world app. The functional specifications are as followed:

  • A web page displaying “Hello World!!”
  • Deployed on a server
  • A git repo

The official guide from the Angular website has enough information to accomplish the task. For deployment, I use firebase, which provides a super easy deployment and hosting.

So here it is, my first Angular app, live!

Live address: https://angular-hosting-project-6c5cd.firebaseapp.com/

Git: https://github.com/zkkmin/hello

Database connection leak while using threads in Django

Oftentimes we need to call a third party API in our web application. The recommended way would be using a task runner and task queue like Celery and RabbitMQ.

But sometimes, in a small project it is overkill to use Celery. Especially for a small traffic web site. On the other hand, I don’t want to call external API directly because it will block the request and user may have to wait, and that is never a good thing, small traffic or not.

So I decided to use different thread to call API. And it worked for my purpose.

Everything was fine until I write the unit tests. When I run the tests, an error was thrown at at the end, saying the test database cannot be dropped because there was another user using it.

Usually Django will automatically close the database connections when they exceeds maximum age defined or are not usable any longer.

There was a database access using Django model object in the new thread. After a quick search on google, I found out that the database connection were not closed even after the threads execution finished. The connections need to be manually closed.

By placing the above code at the end of the thread function body solved the problem.

On a separate note, if you are using uWSGI in deployment, you need to add

--enable-threads

argument to enable multi threading.

 

 

 

Slow Django-Vagrant-VirtualBox On Windows Host

I’ve been learning Django Web framework for a while and started working on a few projects using it. I use Vagrant with VirtualBox as my development environment on Windows machine.

Issue

It gets slower and slower to run tests and runserver command locally. The reason is VirtualBox’s vboxsf used by Vagrant synced files has performance issue when there are large number of files/directories.

Solution

It seems that it was a known issue and the solution is to use NFS for synced folder. I search in Vagrant documentation , and it said that

Windows users: NFS folders do not work on Windows hosts. Vagrant will ignore your request for NFS synced folders on Windows.

So according to Vagrant’s documentation, NFS folders do not work on Windows hosts.
We need third party plugins to make it work on Windows host. After searching the net for a few hours, I stumbled upon a program called WinNFSdBinary which is a NFS server for Windows.

After setting up the NFS folders with Vagrant, the tests and runserver command run fast again.

Steps

Download WinNFSdBinary which is a NFS server for Winodws.
https://github.com/dziad/WinNFSdBinary

Follow instructions from wiki https://github.com/dziad/WinNFSdBinary/wiki to install and setup NSF in Windows.

In Vagrant file, add the following lines,

Vagrant.configure(“2”) do |config|
  # ....

   # VirtualBox provider needs private network setup for nsf to work
   Config.vm.network “private_network”, type: “dhcp”
   Config.vm.synced_folder “.”, “/vagrant’, type: “nfs”
end

Responsive OneMap UI using media query and flex box

In this tutorial, I will show you how to make responsive UI for web page using flex boxes and media query. I will redesign one of the examples available on OneMap API Help Web Site. We will see how to make pages using OneMap JavaScript API responsive. Please visit the OneMap API address search example  to check the original web page.

onemap_add_eg 1) Inspect the source code

By inspecting the source code, I found that the page is designed using HTML Table. It is quite a simple page with only a few sections, each section embedded in  table cell. I am going to use media query and flex boxes to make the page responsive.

2) Put viewport meta tag in the head of the document.

width=device-width” indicates the screen’s width in device independent pixels. “initial-scale=1.0” to indicates one to one relationship between CSS and device independent pixels.

3) Convert the HTML Table structure into separate sections as follow.

.searchbox and .results are put into .container2 so that they could be moved around together when the screen size becomes bigger.

4) Design smallest view first and use media query for different break points.

onemap_min

5) Slide in the results on the screen when the user clicked the search button.

Edit the displayData( ) function as above to slide in the divResults into the view.

6) Slide back and hide the results list when the user clicked on one of the result, and then show the clicked location on the map. 

Add the following code to ZoomTo( ) function to hide the list.

7) Add media query and styles for break point with minimum width 800px.

In a wider screen, container2, which contains search input box and result list, and map area are placed side by side. Result list is put back on screen by setting transform to 0,0.

onemap_800_min

8) Add media query and styles for break point with minimum width 1000px.

After minimum width 1000px is reached, the contents will stop growing, and left and right margins will be added automatically.

onemap_maximum

That is! We have a responsive page using OneMap as base-map. This is just a very simple rework on the existing code and by no means a complete work. But you get the basic idea of how to make your page responsive if you are using onemap api in it.