Design Thinking

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.

New Screen to the 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.

Connecting with API

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.

Generating Client API and Defined with the OpenAPI

On the past week, I finished the OpenId server login last week and started a new work, which is generating the swagger API.

Mr. Peter added the log out to the server, and then the thing was quite easy, it’s almost like the log but just has two arguments, the issuer and the logout argument, so now the user can log in and log out to the system through the OpenId server.

After completing this task, the next goal is to convert the swagger API to Typescript. This was a new technology for me, and all I knew was that we could link the backend to the front end using the endpoint’s URL. Mr. Peter provided me with a link to the Swagger CodeGen library so that I could investigate it and integrate it into our system.

I found the instructions for that library to be a little hazy, so I started watching YouTube videos where YouTubers hardcoded the generation, and I did the same until Mr. Peter came along and showed me that I only needed to perform one command. Then there was the difficulty of the SSL certificate, where I needed to figure out how to include those certifications on the command. This technology isn’t widely used, so I couldn’t find much information about it. Eventually, I figured it out and generated the code.

Integrating OpenId to System

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.