Study week

I continued my study of NodeJs and React foundations last week. I found that that NodeJs and React were similar and hard to distinguish them. After doing some investigation, I’ve discovered that NodeJs is a framework of JavaScript and React is a front-end library. Since NodeJs lacks of library, the combination of NodeJs with React is the answer for web development. NodeJs connects websites to APIs, enabling the developers to create robust websites. Conversely, React aids in the developer’s creation of a fantastic user interface. The significance of these technologies is undeniable and great to be used in developing a website.

Next, I was then questioned regarding my familiarity with React testing. I provided a basic demonstration of JavaScript code and testing to Mr. Peter. After reviewing the code I written, Mr. Peter requested me to switch the language as TypeScript. Mr. Peter pointed me that I left several elements with the “any” variable when I changed the code to become Typescript. Following the corrections, the updated code was approved by sir and we moved on to the next task.

I’ve now been given an introduction to the idea of the website that has to be completed for this internship. I have to create three pages. Mr. Peter asked that we create a prototype before moving on with creating the page using mock data. Furthermore, he recommended that we use Figma to create the prototype. Since I am new to Figma, I research it online and learn the concept of the tools. By the end of the week, I had constructed the three page prototype using Figma and awaiting clearance.

Learning ASP.NET Core. Test Driven Development, Mock and SQL

I learned about configuring an application architecture for ASP.NET Core during the second week of internship. This course included some foundation architectural principles which were dependency injection, separation of concerns, single responsibility, persistence ignorance and others. By studying these foundation architectural principles, I can create testable and maintainable code for ASP.NET Core applications and develop unit tests for it. Besides that, I also studied clean architecture principles. This principle would separate the elements of a design into different ring levels. The goal of clean architecture was to structure the application so that the business object is encapsulated and to isolate them from implementation details.

Next, I also learned about test driven development (TDD). Test Driven Development (TDD) was an approach that used tests to drive the code design. The first step of this approach was to define a requirement for the application. Then, I would write a test that will fulfill the requirements. However, this test will fail since I haven’t implemented the logic in the core project. Next, I wrote the code that will let the test pass. Finally, I refactored the code. Test Driven Development (TDD) implemented the requirements by continuously iterating through the red/green cycle. The next thing I studied about testing was Mock and Moq. Mock was actually to replace the actual dependency that would be used at production time, with a test-time-only version to enable easier isolation of the code we want to test. Meanwhile, Moq was a NuGet package that allows us to implement the mocking features.

Furthermore, I also had the chance to study PostgreSQL. PostgreSQL was an object-relational database management system that provided us many flexibility in terms of data types, scalability, concurrency, and data integrity. I also used real database when studying PostgreSQL. Using software tool that allows us to experiment with the PostgreSQL code. I also tried to create tables, insert data, modify data, and query data in order to get more familiar with PostgreSQL.

In conclusion, I had studied ASP.NET Core, Test Driven Development (TDD), Mock, and PostgreSQL this week. It is a hectic week since I have learned a lot of new stuff. I hoped that I would be able to implement the lessons that I had learned this week in real world applications.

Learning Next.js with TypeScript and Using Figma to Create a Prototype

In this second week for joining Tong Hin as Internship, I am learning Next.js with TypeScript. Next.js is a very useful framework for building fast and search-engine friendly application. There are many key features include in Next.js especially Server-side Rendering (SSR), Next.js enables SSR out of the box. This means that when a user requests a page, the server generates HTML content, which can improve performance and SEO. Besides that, Next.js simplifies many complex aspects of web development, providing an excellent developer experience.

Mr. Peter give me a task in this week, to design a web page, we are using Figma as a tool to design the prototype. Figma is a versatile design and prototyping tool known for its collaborative capabilities. The reason why using Figma is it is a real-time collaboration, its allows multiple team members to work simultaneously on designs, making collaboration a breeze.

In conclusion, the task that I should complete involves server-site rendering by using Next.js, database by using NoSQL database and Figma for creating a prototype.

Creation of UI page and API Integration for CleanUp Process

Last week, my focus was on constructing the UI page for the cleanup process. I adhered to the previous design with minimal changes, removing unnecessary elements and incorporating new ones like checkboxes and buttons. Simultaneously, while working on the UI pages, I started developing the view model. During this process, I realized the necessity for a new API query to facilitate the cleanup procedure. Upon receiving confirmation from Mr. Peter, I proceeded to construct the API query.

During the query development, I encountered a confusion in combining lists from two different entities. After pondering for a while, I figured that the solution was surprisingly straightforward. Utilizing AutoMapper to map the data into a single DTO, the next task was simply to add it to a list separately using the AddRange method. The query also took future pagination into account. However, if the page size was set to lower than 0, the query would disregard the pagination option. After establishing the logic and handler, I thoroughly tested the query until it functioned flawlessly.

Following this, I continued developing the view model, ensuring that UI functionalities like the search bar, buttons, and checkboxes worked seamlessly. In the initial stages of UI development, I created an event parameter, considering its potential use later. However, as I realized that the UI primarily required one mode, I removed the parameter and only used the event for the loading bar dialog, triggered when retrieving data. Towards the end of the week, I successfully completed the UI. Nevertheless, further testing is needed to ensure both the UI and backend code are error-free and functioning perfectly for the cleanup process.

Learning Git and C# in First Week

I was excited to join the team as an intern for the first week at Tong Hin Company in order to learn new things. On the first day of the internship, Mr. Peter assigned me to learn Git as the first duty. I gained knowledge of some of Git’s fundamental features, including committing changes, branch creation, branch merging, and repository cloning. I also had the opportunity to experiment with pushing and pulling changes into the same branch, creating conflicts, and resolving them on cloud server.

After spending two days learning the fundamentals of Git, Mr Peter gave me various online courses that would aid in the development of practical business applications. The C# programming language was covered in the first online course. Microsoft created the high-level programming language C#, and I was ecstatic to have the chance to learn something new. I was familiar with C#’s fundamental structures and syntax. Additionally, I had the opportunity to study some contemporary C# ideas that I had never encountered during my time at university, including delegates, and property. I spent several hours learning the online course sessions and tried to study all the knowledge inside it. Furthermore, I also use the Microsoft Visual Studio and tried to do the exercise that was provided in the course. By practicing the code in Microsoft Visual Studio, I was able to understand the course easily.

In conclusion, I had learned the basic functionality of Git and C# in the first week of internship. Even though my first week of an internship was incredibly unfamiliar and difficult for me, I was still able to handle all the challenges I had encountered while learning. Although I still have several courses to complete, I am eager to learn more, advance my comprehension of how to create software programs effectively, and continuously broaden my skill set.

First Week Internship At Tong Hin

Last week, I had the opportunity to work and study at Tong Hin Company. The first task assigned to me was to understand the concept of the Git. Then, I need to collaborate with other interns and try to implement the concept of the git in a real-life situation. After the collaboration, I learned that the possibility of getting conflict is high when more people are involved in the same repository. Thus, I need to be careful when merging files into a single repository.

On the third day of my internship, Mr. Peter required us to study further about the fundamentals of Typescript, React, React testing and other libraries. I found that the videos provided were related since these videos were using Typescript or JavaScript when presenting. On the first day of learning these languages, I had some trouble with React. The videos provided by Mr. Peter React were hard to understand. I had used another two days to absorb the knowledge.

In conclusion, the first week in Tong Hin company was useful since I learned the fundamentals of these languages and Git. I will be able to use these languages in my job. Also, I will be able to combine the files in a smarter way by using Git.

Additional API Queries for Clean Up’s Initiative

In this week’s blog post, I continued the progress from last week’s clean-up initiative. My focus was on refining the logic used to manage data. The latest logic I developed was crucial for handling different data. It involved creating one and two API queries respectively, designed outside the context but essential for its functionality. These developments were not only pertinent for the present but also aimed at easing future processes.

Achieving the accurate data of certain context posed a challenge as it required data beyond the one database. Fortunately, Mr. Peter patiently guided me on the approach to obtain this information.

Diving into the code, I initially drafted the solution and managed to complete it within a day. However, during code cleanup, I realized I had mixed up service and calling entities in a repository, a mistake that highlighted the importance of writing clean and efficient code. Learning from this, I refactored the entire codebase, ensuring that the code was organized properly, with context and inventory used only in their intended places.

Moving forward, I tackled the next API query with meticulous care, being mindful of my code structure. Towards the end of the week, I presented my progress, Mr. Peter then provided valuable insights, and demonstrated the need for specific validators in the API queries. His guidance ensured that I wrote the validators correctly, enabling efficient utilization without the need for additional checks or data validation in subsequent parts of the code.

While I made significant strides, there was still a need for a minor refactor in the clean-up service before I could proceed to work on the clean-up view page, a task that will be continued in the upcoming week.

Learning Git and TypeScript with React

Joining Tong Hin for the first two days of first week internship, Mr. Peter was explaining the usage of Git. We are using Git which is a distributes version control system to help us to manage and track changes in the codebase. The reason why using Git is because it easy for developers to collaborate by allowing us work on the same project at the same time and organising their changes together. It can also monitor code-level changes making it simple to locate and revert to previous versions if needed. The branching and merging features let us to work separately on various features or fixes, then merge them when ready.

Towards the last few days in this week, Mr Peter recommended me to learn TypeScript which is main language that I will use during the internship. He also recommended me to learn React which is the JavaScript library for building user interface, is widely used in front-end web development. The two key testing tools for React are Jest and Enzyme. To test the work become more effective, isolate components and test them individually to ensure that each one behaves as expected. Good testing are using mocks and stubs to isolate them from the actual implementation, provide clear and descriptive test names and assertions to make test results more meaningful as well as ensure that the tests cover not only typical scenarios but also edge names and error conditions.

Comprehensive Unit Testing and API Query Implementation

Continuing my task from the previous week, based on the latest explanations by Mr Peter, I reviewed and analyzed my code and its underlying logic. Subsequently, I made necessary corrections. Once I outlined my corrected logic, I concentrated on conducting comprehensive unit tests for the clean up functionality within the context. This task was a vital part of ensuring the reliability and accuracy of the system.

To facilitate this process, a dedicated testing environment was established using a factory class, ensuring controlled and isolated test scenarios. Then I also included initialization of diverse sample data, including all the entities and a few more which were meticulously handled. These data initialization was necessary to cover a wide array of potential use cases and scenarios. Subsequently, I meticulously implemented unit tests to validate the clean-up operations for all entities. 

These tests were designed to target specific barcodes, reflecting real-world scenarios where clean-up is essential. Next, I employed FluentAssertions to assert the correctness of HTTP status codes and response data. Notably, I verified intricate changes in all quantities that are important for this clean up process. 

Approaching the end of the week, I developed a new API query to retrieve ordered quantities. The intention behind this was to enable users to obtain ordered quantities effortlessly, without the need for manual counting or redundant logic. This approach ensures convenience for future use. Following the CQRS pattern, I created the necessary properties, handler, and validator to implement the API function. Mr. Peter emphasized the critical role of the validator, emphasizing its importance in validating input data for queries. It ensures that either data is provided and is a non-empty, positive integer when the other corresponding property is not provided. This validation logic guarantees the integrity of the data used in the query, maintaining consistency and validity by enforcing the requirement for a valid identifier while allowing flexibility when data is present. This upcoming week, there’s still few of the clean up service logic must re-analyzed and to be updated as this new API query will be implemented in the clean up logic.

Navigating Data Discrepancies in Development

Last week, I had the opportunity to develop a new feature. It was specifically designed for cleaning up items data as their data count is erroneous due to the experiment and error logic across the application. Addressing these issues was crucial for resolving bugs in future fixes. The new feature I worked on aimed to rectify these data discrepancies. When a user clicks a designated button, the feature automatically cleans up the data.

I began by outlining the necessary tasks in Trello and understanding the database’s data flow where the data originated, where it was headed, and which parts needed cleaning. I brainstormed and devised a theoretical framework for the cleanup process.

To kickstart the project, I created a new cleanup folder within the project feature directory and defined essential CQRS components in the command and commandHandler. I meticulously determined the placement of a new service and registered it accordingly. With the fundamental groundwork in place, I concentrated on the logic required to retrieve and recalculate the data before updating them. During this brainstorming phase, I also developed the basic page layout, aligning it with the structure of the main list page. My initial draft of the logic for the clean up service consisted of a list of items that users wanted to clean up, each item paired with its corresponding data.

At this point, Mr. Peter noticed my confusion and patiently explained the key aspects I needed to understand. He emphasized the importance of using a list of Barcodes from the UI. From these Barcodes, I had to calculate the correct data and compare them. If disparities were found, the newly calculated data should overwrite the inaccurate data. Unfortunately, my progress was cut short at the end of the week, and will continue working on this task in this coming week.