#BMoreClean: My Journey Towards First Web App – Sagar Acharya

 

My name is Sagar Acharya, I am a Computer Science major senior at Coppin State University. BMoreClean is

Using technology (web and mobile app), our project enables residents and pedestrians to help keep Baltimore City clean. clean, previously known as KeepClean, specifically helps track and raise awareness of litter. Litter is the trash that does not make it into public trash cans. Baltimore city refers to these public trash cans as ‘Pedestrian Litter Receptacles’ (PLRs).”

I had joined the BMoreClean project in the Middle of 2019 and the rest of the year was invested in planning and brainstorming the application development plan. The application development started in late December 2019. Prince Me(Sagar) and Mercedes form the team and split the work. I had worked on most of the Server Side(backend). For the web app, we have used PHP and MySQL as our backend and HTML, JavaScript for frontend. The frontend design is handled by prince Web Backend is implemented by me to connect to the database fetch and get a request from the server. I had some experience in MYSQL which makes the SQL part easier to implement. PHP is completely new for me; the development is learning and improving the experience for me. There are very few times where I have a hard time to implement a few things on the PHP server. Implementing the camera on the user side is a great learning experience, I have changed the implementation 3 times. 

The first implementation works fine for the computer browser although it failed for some phones which force me to look for the new implementation. The second implementation was slick, and it works on all the devices we have. After finalizing the implementation, I figured out later that we missed the camera switch button for the front and the back camera. Again, after some Trial and Error, I was able to implement the code for the font and the back camera. This time I have looked into AOSP(Android Open Source Project) repo for the full proof implementation for android. I don’t have any IOS devices to test on at the time of writing. The camera implementation work by accessing the camera and drawing the captured image as canvas and preview to the user. Then the captured canvas is fetched to the server after the user clicks on upload.

 

The First Camera Bug Was

Camera Switcher for Front and Back Camera.

Environment

Web Browser Android based on the chromium And Firefox Browser.

Steps to reproduce

I was working most of the time on the desktop browser to test and debug my code. My laptop has only one webcam, so the emulated mobile environment shows the camera which is available. The phone browser seems to select the camera based on the phone Manufacturer and browser. On some phones the app uses the back and on some it uses the front camera.

Expected Result

Almost every phone has 2 cameras, so we need to have the camera switch to change the camera from front to the rear.

Actual Result

The app needs some way to switch the camera from front to back or vice versa. Although I forget to implement a Button to switch the Camera.

 

Severity/Priority

This is the serious problem for those phones which front camera open by default. That makes the problem for the user to capture picture as we need the back camera by default.

 NOTE:  We will have a campus-wide test phase of the project’s website and of the app during the Fall 2020 semester to get feedback.