/98developers-flutter-app

2023 Google Solution Challenge

Primary LanguageDart

What is ZIKIZA?

Goals

Motivation

  • We are living in an increasingly polluted environment. The fact that the flowering season is a month earlier in spring indicates a lot to us.

  • If the Earth does not become healthier, there will be no place for people to stay. That's why we have decided to provide solutions to protect the environment and address climate change.

  • We believed that individual efforts alone would have limited impact on environmental action. Moreover, we thought that without reasonable conditions, personal commitments to environmental protection would gradually weaken over time.

  • ZIKIZA(지키자) phrase in Korean has two meanings:

    • Protect the earth by practicing challenges related to the environment as individuals.
    • Complete the challenge that we have participated in.

Mobile

Clay-Home Clay-Challenges Clay-Explore Clay-Profile

figure 1: The initial screen that appears when logging in with a Google account, figure 2: Navigated to the challenges screen, figure 3: Navigated to the explore screen, figure 4: Navigated to the profile screen

  1. On the Home screen, you can submit photos for challenges you are participating in and view the details of challenges currently in progress.
  2. Challenges screen, you can find available challenge and enroll it.
  3. And you can find the location and information of the climate clubs.
  4. Profile screen has show your history and sign out.

Clay-Enroll Clay-Purchase Clay-TakeShot Clay-Submission

figure 5: enroll button is join the user this challenge, figure 6: Navigated to payment screen, figure 7: Take shot, figure 8: Submission

  1. The user pays a certain cost to participate in the challenge.
  2. Once the challenge starts, users take and submit certification photos at designated intervals during a set period of time.
  3. When the challenge begins, users need to take photos to confirm that they have completed the challenge at certain times throughout a specific period.
  4. You can upload submission photo.

How to run

  • We plan to conduct internal testing on Android devices. The status for iOS is undetermined due to the end of developer registration.

Step 1. Download the project

$ git clone https://github.com/GDSC-SKHU/98developers-flutter-app.git
$ pwd | code .
# Required dependency injection execute the following:
$ flutter pub get
$ flutter doctor -v

Step 2-1. Run on QEMU

1. Required Android SDK version must be 31 or higher.

2. Use a shortcut key to open the palette > Windows: `Ctrl+Shift+P` / MacOS: `CMD+Shift+P`

3. Flutter: Select Device

4. Launch flutter emulator

Step 2-2. Run on Simulator

1. The iOS version should be 12.0 or higher.

2. Use a shortcut key to open the palette > MacOS: `CMD+Shift+P`

3. Flutter: Select Device

4. Launch iOS Simulator

Web

1. Promotion website

  • This website has our project infomation

figure left: This image include introduction our service, figure right: This image promotion website footer

2. Manager website

  • This website has sign in only manager

figure left: Sign in manager with Google account, figure right: Users submission controll

  • The manager accesses the challenge website and logs in with a Google account.
  • Access the challenge website and view the list of ongoing challenges, as well as the submission status of the participants, and proceed with the review.

> Click here for more details

Server

1. Entity Relationship Diagram

figure 1: This illustrates the relational diagram of the our database.

2. Google Firebase

figure 2: Using firebase cloud messaging in Springboot applications

  • We used Firebase for authentication / authorization handling.

  • Firebase to easily perform the Google sign in process.

figure 3: Create a private key in the Firebase project service account

  • It can be easily developed in a short development period, and login processing is easy on the web and app, so I used it.
  • In addition, in order to save it to DB, you can receive the user's IDToken when you respond to the api, analyze it through the Firebase key, and save it.

3. Google Geocoding

figure 4: Geocoding API process

  • This allows recycling stores or community locations to be stored as latitude and longitude and displayed as Google Map markers.
  • Utilizing a structure that returns latitude and longitude when given an address input.
  • Save the corresponding data to the project database to create a Google Maps marker.

4. Google Cloud Storage

figure 5: Google Cloud Storage bucket structure

  • To successfully store challenge verification photos on the server, we use Google Cloud Storage.
  • Google Cloud Storage is a service that stores objects in Google Cloud. At this point, the object refers to any form of file and stores the object in a container called a bucket.

figure 6: Create a bucket

  • All buckets are connected to a project and can also be set up to allow the desired user to access the data in storage through project permissions.

> Click here for more details

Next Steps

  • The following items are part of our planned next steps: 
    1. Support for payment system.

2. Support for notification feature.

3. Server database optimization.

4. UX improvement and code refactoring.

5. Conduct internal testing on Google Play.

Members

yujinkim1 devPark435 LEEHYUNBOK yeeZinu
Yujin Kim Hyunryeol Park Hyunbok Lee Jinwoo Lee
Gmail Gmail Gmail Gmail