SLC S23W2 - Real-Time Accessibility Feedback App: Issue Reporting Page (Cloudinary Image Uploading, Firebase Data Storage, and OpenStreetMap)

Hello everyone!

I warmly welcome you to the second week of the Steemit Learning Challenge and especially I invite you in the Technology and Development Club where you can share and learn tech.

Designed with ^Canva

I am working on a real-time accessibility feedback application. Last week we developed the login and sign up screens with splash screen. I setup the complete user authentication of the application for the login and sign up using firebase. Today I will continue to develop the next big part of this application.

The major focus of this application is on the issue reporting and tracking. Today I will build the major functionality of reporting an issue with following attributes:

Issue title
Issue description
Drop-down category of issue
Urgency of issue
Manual location
Attach an image
Picking location on map
Submission button

I will store all these details in the firebase do that we can use this data to display in the issue tracking page for the admin and to show to the student as their submitted issues. Due to the limited free storage of firebase I will use another cloud based website to store the images.

I will use Cloudinary to store the images as it offers 25 GB free storage and for my application it is going to be enough for now. Actually after storing the image in the cloudinary I will fetch the URL of the image and I will store it in the firebase. To use Cloudinary I have already made an account and I created a project to store the images.

And to use Cloudinary and OpenStreetMap this I have installed these packages from pub.dev cloudinary_flutter: ^1.3.0, flutter_map: ^7.0.2, latlong2: ^0.9.1, geolocator: ^13.0.2, nominatim_geocoding: ^0.0.6 and http: ^1.3.0. Without importing these packages we cannot use cloudinary and map integration in our project which we are developing by using the flutter framework.

For the submission of the issue we need a user interface screen with all the elements as I mentioned earlier. First of all I have wrapped the body in a container to give it gradient colours. Here you can see I have given blue line gradient colours for the background by playing with the Opacity of the colours.

At the top I have used an icon with big size which is representing this screen related to issue submission. Then there is a Text widget which is holding Report an issue. Then there is an input field beautifully designed with rounded corners, a prefix icon and padding inside and a hintText. Then there is a large input field for the collection of the description about the issue. Then I have added a drop-down list where the user can select the category of the issue such as electrical, plumbing, IT Support, Maintenance, and other.

The user can select the urgency level of the issue from low to high. Indeed I have added the map to choose the location about the place for which you are submitting an issue but I have still added the field to I put the location manually for the easy navigation and understanding for the administration. There is the use of the image_picker package where the user can add the image about the issue by selecting from the gallery. Then when the user click on the Submit Issue then all the details are submitted. The image is uploaded to the cloudinary and the URL of the image is stored in the firebase along with other details of issue.

To store the details of the issue in the firebase firestore database I have created the instance of the firebase in the issue_page.dart. Then I have created 3 controllers for the handling of the input fields texts. These controllers will catch the input text from the fields and then I will use these controllers to send the information to the firebase firestore database. There are six more variables which will be used for their specific purpose.

I have defined two lists for the drop-downs. One list is having the different categories and the other has different urgency levels.

This is the function to upload image from the user to the Cloudinary. It checks if the image is selected then it starts uploading the image to the Cloudinary storage. It uses the Cloudinary API to access the storage folder. I have hidden my username asd it is unique for everyone and you can use your own. Each project has a specific upload_preset which you set manually in the Cloudinary. But be sure to use the same in your code for the synchronization. When the uploading of the image to the cloidinary server is completed then the boolean variable becomes false and it returns the url of the image.

I have defined an asynchronous _submitIssue() function which is the performing the core logic of this screen to submit all the details of the issue into the firebase. First of all it checks the user who is login in the application so that it can send the data of the issue in the relevant user's database. It creates an issue document and then in the issue document it stores all the details of the issue with respect to their defined names of variables in the database schema.

To get the location I have used OpenStreetMap. It is easy to use and free to use in the applications. In the map I have added an option to select the current location of the user on the basis of the GPS.

In order to get the current location the user can click on the icon present in the appBar. It asks about the user location and display a pointer on the user's location.

Similarly there is a search option which is the need of each map for the easy location navigation. The users can easily search the location on the map.

Here is the breakdown of the code which is used to perform all these functions of the map for the location picking:

As I have mentioned it earlier that I have used OpenStreetMap in my application to pick the location. Now in order to search the location on the map I have used the Nominatim API of the OpenStreetMap. It gets the query for the search from the user and if it find the location searched by the user it moves the map to that place. If it does not find the location searched by the user then it shows the message Location not found in the SnackBar.

Then I have defined a function _getCurrentLocation() which returns the current location of the user by using the GPS of the device. When the user clicks on the button the get the current location location icon then this function is called and it returns the current location of the user by getting the permission of the location for the device.

Generally the map returns the longitude and latitude of the location. But I have implemented a function to fetch the name of the location as well by using the reverse geocoding. This reverse geocoding uses Nominatim API of the OpenStreetMap.

Here I have shown the working of the issue submission page while entering all the details of issue and submission of issue.

For the testing purposes I uploaded some sample images of mine in the cloudinary to test if it works correctly or not but it worked. Then we can see that the first image at the left side was uploaded successfully in the Cloudinary while submitting the issue as I selected this image in the issue.

Here I have checked the Firebase database for the verification of the details of the issue if they are collected and stored here correctly or not. Under the issues document there is a classification of the issue with respect to the unique id and the details of the issue are present in this section in different unique values.

I am working on this project and It will have a lot of more features but so far I have shared the login and sign up screens, issue page and location picker screens with their user interface as well as with the Firebase Authentication, Cloudinary Storage and Firestore Database.

GitHub Repository

In this GitHub repository I have shared login_screen.dart, signup_screen.dart, splash_screen.dart, issue_page.dart, and location_picker_page.dart for the learning purpose only and as I will progress I will share the other files as well.

What I have learnt

I have learnt these things while working on the project:

Firebase authentication and Firestore integration
Handling user inputs and validation
State management in Flutter while managing the user session and controlling the user inputs through controllers.
Enhanced user experience and UI design with the implementation of the multi-step sign up process. The use of the gradient in the layout to make it look more attractive.
Error handling and debugging. I managed the error handling of the duplicate accounts, invalid credentials and empty fields.
Image uploading and accessing it via Cloudinary.
Storing the data in firestore database.
Implementation of OpenStreetMap and Nominatim API.

What can you share in the club?

Our club is all about technology and development including:

Web & Mobile Development
AI & Machine Learning
DevOps & Cloud Technologies
Blockchain & Decentralized Applications
Open-source Contributions
Graphic Design & UI/UX

Any posts related to technology, reviews, information, tips, and practical experience must include original pictures, real-life reviews of the product, the changes it has brought to you, and a demonstration of practical experience

The club is open to everyone. Even if you're not interested in development, you can still share ideas for projects, and maybe someone will take the initiative to work on them and collaborate with you. Don’t worry if you don’t have much IT knowledge , just share your great ideas with us and provide feedback on the development projects. For example, if I create an extension, you can give your feedback as a user, test the specific project, and that will make you an important part of our club. We encourage people to talk and share posts and ideas related to Steemit.

For more information about the #techclub you can go through A New Era of Learning on Steemit: Join the Technology and Development Club. It has all the details about posting in the #techclub and if you have any doubts or needs clarification you can ask.

Our Club Rules

To ensure a fair and valuable experience, we have a few rules:

No AI generated content. We want real human creativity and effort.
Respect each other. This is a learning and collaborative space.
No simple open source projects. If you submit an open source project, ensure you add significant modifications or improvements and share the source of the open source.
Project code must be hosted in a Git repository (GitHub/GitLab preferred). If privacy is a concern, provide limited access to our mentors.
Any post in our club that is published with the main tag #techclub please mention the mentors @kafio @mohammadfaisal @alejos7ven
Use the tag #techclub, #techclub-s23w2, #country, other specific tags relevant to your post.
In this first week's #techclub you can participate from Monday, February 24, 2025, 00:00 UTC to Sunday, March 02, 2025, 23:59 UTC.
Post the link to your entry in the comments section of this contest post. (Must)
Invite at least 3 friends to participate.
Try to leave valuable feedback on other people's entries.
Share your post on Twitter and drop the link as a comment on your post.

Each post will be reviewed according to the working schedule as a major review which will have all the information about the post such as AI, Plagiarism, Creativity, Originality and suggestions for the improvements.

Other team members will also try to provide their suggestions just like a simple user but the major review will be one which will have all the details.

Rewards System

Sc01 and Sc02 will be visiting the posts of the users and participating teaching teams and learning clubs and upvoting outstanding content. Upvote is not guaranteed for all articles. Kindly take note.

Each week we will select Top 4 posts which has outperformed from others while maintaining the quality of their entry, interaction with other users, unique ideas, and creativity. These top 4 posts will receive additional winning rewards from SC01/SC02.

Note: If we find any valuable and outstanding comment than the post then we can select that comment as well instead of the post.

Best Regards
Technology and Development Club Team