This post is part of a Series of post which I’m describing a clock-in/out system
if you want to read more you can read the following posts:

Originally published at www.carloscaballero.io on November 25, 2018.

• Part 1. Clock-in/out System: Diagram.
• Part 2. Clock-in/out System: Basic backend — AuthModule.
• Part 3. Clock-in/out System: Basic backend — UsersModule.
• Part 4. Clock-in/out System: Basic backend- AppModule.
• Part 5. Clock-in/out System: Seed Database and migration data
• Part 6. Clock-in/out System: Basic frontend.
• Part 7. Clock-in/out System: Deploy backend (nestJS) using docker/docker-compose.
• Part 8. Clock-in/out System: Deploy frontend (Angular 2+) using environments.
• Part 9. Testing: Backend Testing — Unit Testing - Services
• Part 10. Testing: Backend Testing — Unit Testing - Controllers
• Part 11. Testing: Backend Testing — E2E Testing
• Part 12. Testing: Frontend Testing — Unit Testing
• Part 13. Testing: Frontend Testing — Integration Testing

In this first post of the series of post about the clock-in/out system I’m going to describe the system’s architecture. The best way to describe the problem
which our system will resolve is using a diagram. In this diagram you can see
different components which can be in different or in the same server. The Figure
1 show the diagram used to build the clock-in/out system.

Figure 1. Clock-in/out system: Diagram

So, the components of our system are the following:

• ID Card: All users have a card which is identified using an UID. The way to work is that the user pass their card near of a Arduino system which has a NFC reader.
• Arduino: There are two Arduino in the system. The first is used to clock-in and the second is used to clock-out. So, each Arduino send to the backend the UID’s card using the POST verb over HTTPS. The Arduino system have a NFC and a WiFi chip: 1) The first is used to read the card; 2) and the second is used to connect to the LAN to send the UID to the server.
• Backend: The backend is developed using NestJS which is a framework over express (although you can use other libraries as fastify) which can developed software using the SOLID principles and the syntax as Angular. This backend will be connected to a relational database Postgres using TypeORM as ORM.
• Frontend: The frontend is developed using Angular which is a framework over JavaScript which is a good option when you want scale large webapps (client-side). In this case, is used to illustrated how to using the last Angular's version and good practices. The frontend is develop using RxJS, RxJS is a library for reactive programming using Observables, to make it easier to compose asynchronous or callback-based code. The connection between frontend and backend could have been using sockets to obtain real-time but using polling you obtained a result as a socket (near real-time) but more easiest.

There are several components which could be developed in the future as an
admin panel to manage information about users and cards, personal
information about my check-in/out in the system, the frontend could do search by
users to know if the user is in the building or not. Maybe, in the future this
features could be develop but today will go to presented a basic system of
clock-in/clock-out.

The GitHub project is https://github.com/Caballerog/clock-in-out

Originally published at www.carloscaballero.io on November 25, 2018.