Category: Experiential

I had made a new screen the week before.

The user must choose the warehouse that he is currently in on the new screen, which appeared right after logging in.

So I created a checkbox for react native paper where the status should have been checked or unchecked on that screen. So, when I had located the warehouse’s data, I mapped a new feature to it called isChecked with type Boolean and set it to false.
Next, I created a function called handle function that accepts an id parameter and has a condition that, if true, changes the value of isChecked to the opposite value. Thus, alter it from true to false if it was true, and vice versa if it was false.

When I no longer needed to use that screen, I didn’t want to keep it on the navigator and be able to find it by pressing the back button, so I destroyed the screen. They will only be able to call again through the button to change, and then I destroyed it once more. I made all of that in order to use multi-selection; if it were single selection only, it wouldn’t be as complicated.

I also work on the docker registry, but I was unable to complete the assignment that Mr. Peter assigned me because I was still struggling with the SSL. I also generated a SalesApi using a different generator, but I was unable  to utilise it. I am still searching for examples of how to use that to resolve  the problem with the format of the array when submitting the warehouses.

I had a lot of new tasks last week. Configuring the Docker Registry is one of them.

I used my system in production last week, and as a result, I now know the limitations of the program and what has to be improved. One of the things that I identified is a bug that no one else caught but me. The pick-and-pack bug prevented appropriate item scanning, therefore I updated the app to fix it by eliminating the barcode’s leading number and comparing it to the item code. If the barcode is incorrect, the user will not be able to proceed.

The second task is setting up Docker and experimenting with the Docker Registry, so I install Docker Desktop on the device and attempt to push and pull, which was a bit confusing until Mr. Peter sent me a link where they explain how to use the Docker Registry, so I started to follow until I get the result so I was able to push the images and get them from the other computer through the IP address and the port of the device that I pushed with.

It was novel to experiment with Docker using only a console. We may now host our images utilising Docker Registry because Mr. Peter assured me that it will be very significant in the coming years.

Tong Hin switched from utilising the old system to the new system last week. To make that transfer, there were three primary screens.

The first and most important one is Movement Adjustment, where they can restore all of their items with the same status to captured locations without changing a single thing on the database. They can’t simply clear the data base or deal with two scenarios with location and without, so this screen forces them to do so.

The quantity of the items in stock at particular locations is updated on the second screen, which is called Stock Adjustment. The user may alter the location of objects with quantities and status on the third screen, which was called item Adjustment.

Therefore, those were the primary displays prior to moving to the new location, switching from the old system to the new system, and putting the app into production.

It was not possible to generate barcodes on third parties where the use device contained a printer because our warehousing system deals primarily with barcodes whether Items or location. Therefore, there were two ways to connect the printer’s hardware to the system.

The trickiest method of using that printer is to do it through Java, which is what Mr. Peter sent me as our backup option.

Alternately, use the react-native printer library. As per usual, I began by investigating the library. My first chore was to install and set it up, and the library documentation provided two options for linking it: manually or by using the command line. I tried both, but nobody wants to collaborate with me because the whole software won’t launch. After some research and searching, I discovered a person having the same issue as me, but with a different library. They offered him some solutions, one of which was to declare the library outside the Java manifest, allowing me to attempt anything without having to code it in Java.

I discovered that the printer accepts photos once I declared the library, so I’m just waiting for Mr. Peter to develop the backend to create the barcode of our item or location, which will lower the error rate compared to printing from a third party who might put it incorrectly.

Because the emulator’s size wasn’t the same as the device last week when I exhibited the system on a real device, there were numerous UI deformities. I thus spend some time resolving this UI issue.

After resolving the UI problem, I began testing the app with a real barcode and scan, where I discovered a number of issues. They were major issues that might cause the software to fail or have negative effects, but because they were display issues, we view them as minor issues.

I also spent some time fixing various issues, such as the focus issues, but the hardest was figuring out how to set the interval following a go-back navigation so I could restart the timer that I had stopped when moving to the next screen.

I came up with a plan to refresh the screens following go back navigation. The solution wasn’t very formal, but I was able to solve the issue by applying critical thinking. I did this by sending nonsense parameters to useDidMountEffect, which is similar to a use effect but doesn’t call on the initial render. I then used that hook that would be called once the parameters changed, and I placed the function that makes the request on it. Inside the function, I set the timer to true.

In the previous week, we worked to design a better concept and solution to satisfy our customer by thinking and acting like a user.

As I did the week before, I continued to work on the system’s programming, linking the Pick navigation to the API, and creating a new screen that is intended to help the user comprehend the specifics of that item as well as the stages that have been passed from.

We went through a few steps before deciding to add that screen.

For a human-centered design method like design thinking, empathy is essential. It enables you to put aside your own worldview assumptions and obtain genuine understanding of our users and their needs.

Then we evaluate our findings and defined the main issues that the current design shows. After that, we started looking for solutions to these issues, and one of those solutions was to design a screen with a choose details view attached to it, allowing the user to switch between them by using the bottom tab navigation.

So as a programmer or designer, you should consider and care about what the user needs and feels, and you should also always look for better ways to improve the user experience. I then started applying that principle into our system.

In the last week, I produced a new screen, which now completes the new navigator.

My new objective was to construct a new screen after linking the API with the navigator last week. as the prior wasn’t too difficult to make
This screen is connected to create API, and it has two API queries, just like last week. The first is a GET request, followed by a POST request.

Following that, I began creating databases to test if there were any bugs. After experimenting with several cases, I discovered that there is something wrong with the answers, as the server provides a 200 status response and accepts the request when it should be an error. Mr. Peter saw the bag and is now repairing it.

Mr. Peter was really concerned about it, so I saw the benefit of the automation testing that I had done previously. By adopting a variety of scenarios, automation testing aids in the detection of any issues.

Add pagination to the two list view screens, and this time the page number and size are provided with the request, rather than dividing the pages as I obtain the data as before.

We had a lot of trouble connecting the system to the backend last week.

Last week, I realised the significance and necessity of dealing with setup to the programmers. The initial problem was with the SSL certificate, which prevented us from creating a purchase order to test whether the service worked or not. This was a backend issue that was resolved by Mr. Peter.

After that, we discovered another IP address issue, which required me to update all of the IP addresses with my computer’s IP address. Also, we discovered that the ports we declared were not the same as the ones on the docker. After making the necessary changes, we are now able to connect the produced API to the system.

I provide a header to the API that includes the URL and the access token, but it doesn’t function and returns an error. After doing some research to figure out what that error meant, I discovered that we needed to install the react-native-url-polyfill library and add its function to the header to make  everything to work properly, and that was the clue. After installing it and adding it to my API service, I was able to request the API and receive a 200 status.

After testing all of the requests, the service is now completely functional, and the responses are exactly what I expected. Also, all of this is created by a type model, with the exception of the error, which I will resolve next week.

I finalised the design of the Navigators this week, and I’m working on integrating the openId identity into our app.

In order to design the app, I added a search box to some UI so that the user could search for the customer’s name if they couldn’t find it in the long list, and I’ll also utilise the search bar to look through all of our system’s lists.

The second task is to integrate OpenId technology into our app, for which I watched many videos and read a lot of information in order to grasp the technology and apply it to our system. It wasn’t easy to grasp at first, as I assumed we would simply connect the app to the backend using the url endpoint.

I could only discover theories about it and couldn’t find anyone who has used it to see how it was implemented, so I followed the react native auth library and began to explore. After numerous attempts, I was able to get the program to launch Chrome and login view. However, the challenge I’m having now is calling back the app after a successful log in, which is something I’m going to investigate over the next week in order to make the app completely functional with this OpenId server.