Category: Experiential

I updated the UI of the app and added a new screens to the system last week.

A novel navigator, comprises two screens, the first of which contains data and the second of which contains some information and implementation. Actually, I had no problems with the navigation. It was different from the prior screens, but it was simple for me to complete.

I also work on the user interface of all screens, beginning with the picker navigation. At first, I assumed that designing was as simple as changing colors and gridding the data on the screen. But I was completely wrong, because I need to build a design that promotes user engagement, improves functionality, and establishes a great friendship between the user and the app.

I learned a lot of useful information about user interfaces, and I also discovered the react native paper library, which provides a better component than react native library.

Finally, as I do every week, I implemented plenty of hooks, beginning with useState and finishing with useRef. I also addressed a problem highlighted by Mr. Peter, which was data loading delay.

So far, I’ve completed everything Mr. Peter has given me.

By the end of last week, I had completed the shifting navigation and two other navigations that Mr. Peter had requested, as well as all of the logic business that was required on the screens.

The picking and packing screens were similar to the shifting screens. definitely still not exactly the same, I believe I have a better understanding of how the system works and have begun to formulate a strategy to cope with it. I am grateful to Mr. Peter and the Tong Hin Company for providing me with this opportunity to further my development skills.

I also included an unpicked option to the PickNavigation that lets the user to unpick any product, similar to the Pick Screen. Then I started beautifying the system’s user interface.

The issues I worked on last week were with the focus of UI, which refused to focus on the next input. After many attempts, I discovered that the useEffect is not closed after the initial rendering, and that to close it, I must include an empty array at the end of the hook.

During the previous week, I improved the pick navigation and added Pack displays.

Last week, I added two new screens to the warehouse system: packs screens and pick navigator screens. Pack screens allow users to pack things that have previously been picked.

The first page is about tables, where data about the client is displayed, and the second screen is about pack detail view, where information about the packed item is displayed, as well as some implementation details.

When I finished the final touches on the choose navigation screens, I limited the user’s flexibility in using it by creating preconditions to practically everything to limit the error rate at work .

The most difficult problem I encountered last week was focusing on the same area after receiving an error, where the app did not respond to the focus until we read the useref documentation and determined that we needed to remove focus to allow it to work again by blurring focus.

In the passed week I have completed The PickNavigator screens

I finished The PickNavigator last week. After finishing the log-in, my task was to make 3 more screens. This past week I created three more screens for the PickNavigator, the first of which had a button to access to the rest of the screens. The second screen appears with tables after you click on the button.

The third screen, the order detail view, is about displaying details based on the tables. The most challenging thing I’ve faced on making this screens is using the useRef to focus on a field on the screen and perform the default location. For useRef, Mr. Peter set an example for me and let me deal with the remainder, where I discovered how simple it is.

Setting the default location was a little more difficult comparing with the other difficulties that I have a faced. I wanted to make a useRef to focus on that location, so I started looking for a useRef for TouchableOpacity that would focus on a click on the location once the screen appeared. Since it was my first time utilising useRef, that was my logic until Mr. Peter explained the way, which was not too far from my logic.

In the last week, I’ve learned a lot of useful stuff, such as how to utilise the scanner, which I was completely unfamiliar to me at the start of the week, and how to use the useRef Hook to focus in any textInput field. I also was dealt with a bunch of useEffect hooks and others.

Following the completion of the design phase, we move on to the development phase.

This new system will be integrated with the old one, which has its own tracking. That the very first task was to handle the log in for two different users: those who will navigate to the Picker and those who will navigate to the Item Navigator. Mr. Peter guided me through the JWT method for solving this problem.

I first learned about JWT when I tried to make a user log into a separate navigation depending on his role. Finally, I created a token that, if the user role is Picker, navigates to the PickerNavigator; otherwise, he navigates to the ItemNavigator. And it was the first time I used the useEffect Hook that I truly grasped its concept.

After logging in, I also construct a screen for the Picker role. After hitting the button on that screen, you will be taken to the following screen. The second screen is about tables and orders data, and when you arrive there, you’ll see a table with all of the clients who have placed orders, along with their data, and the raw of each client is clickable, which will take you to another table.

I finished testing the app the week before and began designing the new system’s prototype.

I was able to continue testing the App after having found a solution to the issues that I had encountered last week.

Except for the ImageItemView, I finished testing all of the navigation components. The testing was not tough for the ItemListView, which was 100% tested, but I couldn’t test the image Picker for the ItemAdjustmentDetailView, which turned out to be difficult to test after I attempted several methods to mock and test the function. However, the attempts were in vain. After many attempts, Peter advised me to ignore it.

My next task after the testing is to add some additional screens to the software that was tested. To begin, I must design the interface for that screen, which I will accomplish using other tools because I am familiar with it and have previously used it, as well as creating a prototype of how the app would work.

While the testing was in progress, we discovered that we were testing from the cache, so I cleared the caches, and the errors reappeared.

After clearing the caches and modifying the setup so that the test does not utilise caches, I was unable to render any component, including the LoginView, which was meant to be completed previously.

The navigation issue continued appearing, and I tried several alternative solutions but none of them worked until we messed up the setup. Fortunately, Mr. Peter reminded me to commit, and I was able to erase the modifications I made using GIT, demonstrating how important it is.

After several tries and searches, Mr. Peter and I discovered that the navigation library had a flaw. That suggests we have no control over the situation. Someone on Stackoverflow has either encountered the problem or is aware of the flaw, and has offered a workaround in the form of a comment that must be written before the navigation. The comment makes it so that the navigation does not throw an error.

Finally, we found a solution, and I continued to test the system. The progress was a little faster than the previous unit. After finishing the ItemListView, I moved on to the ItemAdjustmentDetailView. Everything seemed OK until I was testing the update function and discovered a bug in the fireevent when the button was pushed. I’m still looking for a solution to the problem of not being able to locate comparable issue online.

On the previous week I completed the testing for the LoginView component.

I examined all of the scenarios on the LoginView testing unit, starting with the components’ UI. Then the alert comes when an unknown user tries to l. Lastly, the successful login.

The Axios mock adapter, which performs such magic work with the endpoints callback, was a new mocking technique I learnt that was really handy in mocking the promises and providing false responses to make the fetch work.

Finally, I tested the next unit’s UI, which was the ItemListView, as well as the searching function, using the same approach that I did on the LoginView with different HTTP request methods.

In my second week, I was trying to solve the problem that I had faced during the testing. I spent most of my time trying to solve the problem that I have faced in the testing. So I have tried many types of mocking to reach the solution, but unfortunately, all the tries still couldn’t solve it.

However, this problem helped me a lot in understanding the concept of testing, where it gave me the opportunity to deal with many different types of mocking or rendering. I became more confident with testing .

I made my first commit and pushed it into the project file, after I opened a branch called “Testbranch” , I committed to the settings that I had made in the testing setup.
Finally, I used the breakpoint for the first time, where I did the setup and made it useful in the Visual Studio Code. After that I started using it to keep track of the problems that I have faced .

My first week is like any new student who starts a new job in a new environment where things start to blur. However, I started learning a new thing to make the fog fade away. 

On the first day and second, I started learning about Git. It was my first experience with it since I used to only know about it. I was able to create a repository and I played around with it, learning how to add taggs, files and commit to it. I also used the clone where I cloned Peter’s project to my desktop and learnt about the git-flow and how to push the feature.

In the next days, I was trying to fix the configuration of the project (testing confusion and also visual studio code configuration), and I also learned about I also started learning how to deal with testing since my first task is to test the company’s system, so I took my first step and I understood the concept of testing and saw some of the examples.

Besides that, I learned about asynchronous and synchronous programming and the differences between the two programming styles, and I referred to some exercises online.