Case Study: Gini Web Routing

Introduction

Help from Experts, Coaches, and Consultants

Help from Experts, Coaches, and Consultants

Gini matches you with coaches, consultants, advisors, and other service professionals via video, text, and voice chat that help you with the problems you are t…



GINI: Get Expert’s Help is a platform for connecting both knowledge seekers and experts. Making it easy to find specialized experts, coaches, and consultants from a variety of fields.

Provider.gininow.com, the web app for experts on Gini which was built with Flutter for cross-platform availability provides all the tools needed by an expert, but there was an issue with routing users to different pages in the app with the use of unique urls.

Problem Statement

A basic flutter app is well optimized for mobile, where the current state of the app is kept until it is closed, and restarting the app means you have to navigate to the page you wish to go. Unlike mobile apps, you can navigate to a particular page by inputting a unique URL into the browser’s address bar. Because of this problem, any time a user refreshes the web app, they have to navigate again to that page which can be tasking and lead to a bad user experience.

Goals and Objectives

Gini needed a way to let users navigate to a certain page with a unique URL. It also needed the browser’s address bar to update the current URL based on any page the user has navigated to while using the app. This will ensure that the user is brought back to the same page when they refresh.

My Role

As a Flutter developer, I had to complete these objectives, using the existing design patterns and state management techniques while at the same time fixing any bugs that may come up as a result of this major change.

Process 

Interacting with a web browser through an application means playing around with JavaScript code. While Flutter doesn’t run with JavaScript, they have provided a way for developers to interact with JavaScript code with the use of Dart and Method Channels. This means writing functions and operations in JavaScript and then using Dart to trigger those functions. Fortunately, we have a platform where people who have done this can upload their code in the form of a package. The package we needed for this web routing was called “GoRouter”, which was developed by the same team that developed Flutter. I added this package to the project, and I had a lot of web routing functions at my disposal.. all written in Dart.

Implementation

The first process was to get the number of pages we wanted users to be able to route to and then assign unique URLs to them. For example, to go to the Service Page, you need the unique URL “https://provider.gininow.com/#/services”. After creating these URLs, I added the GoRouter widget at the top level of the app and defined all the URLs and the pages they were supposed to navigate to.So now, when I input a specific URL into the address bar or refresh which restarts the app, the Router checks to see if the URL is defined and navigates to that particular page. If the URL is undefined, it shows a page I have created “404 NOT FOUND” to tell the user that the page doesn’t exist in the app. I can also redirect users to another specific page when they click on a button with the package since it allows me to programmatically change the URL in the address bar.

Challenges and Solution

The objectives were completed and then two issues arose, 

• Because the app is restarted when we refresh, any value we have saved in the state is lost, so routing to a page without the necessary values will cause a very big issue.
• Users could route to pages that needed special access at any time whether they were authenticated or not.

These challenges were somewhat related, and then I had to resume my research again. I discovered a feature in the package that allowed me to redirect users.

This function let me get the current in the address bar and I could run different functions before the page is finally loaded. I used this to put all the values needed by each page in the app state, also checked the authentication status of the user, if they are not logged in, I redirect them to the login page no matter the URL they input into the address bar.

Result and Impacts

Now that the web router has been implemented, users can navigate to a particular page on the website. URLs can be shared with others and will lead to the GINI website without having to worry about restarting on refresh. This has improved the overall performance and boosted the average user experience of the website.

Conclusion

By leveraging the "GoRouter" package and my Flutter expertise, I single-handedly resolved GINI's web routing challenge. I implemented dynamic URL navigation, enhancing user experience and eliminating the need for an additional web developer, showcasing my cross-platform problem-solving skills effectively.