Recyclone

Appendices

User Manuals

1. When you first enter the screen, you will see our entering page with Login button below.

2. Click the login button, then you will be able to sign in with your Microsoft account.

3. When you successfully sign in, our Welcome Intro screen will first greet you

4. After Welcome Screen, our second Intro screen will ask you to do 'Choose Your Fate' process. This process check your recycling preference by identifying the product you pictured. Click the button 'Choose My Fate' to take a photo and check your preference. ('Choose Your Fate' will be further informed below)

5. Our thrid Intro screen will briefly expalin the purpose of application.

6. After third Intro screen, you will be led to Quest screen. Check your quests and progress of each quest.

7. When you tab each quest, you will see information about each quest including instructions how to recycle.

8. Tab the icons of the menu bar below, it will lead you to other views.

9. This is Camera screen, take photo of product you
are going to recycle. 

10. When you take photo, you will be asked to type number of items you are recycling.

11. When you finish it, check your local album. You will see your photo with location and quantity information. This material will be used for recycling verification, proving that recycling is done by you.

12. This is Incentive screen. When you finish and verified your recycling, you'll get reward points and it will be shown as level.

13. In Incentive screen, you'll be able to find light green button in the buttom right. Click it, then your app will display your QR ID. QR ID will be used for verification process.

14. This is Stat screen. It will view your stat.

14-1. Tab Overall, then you will see your overall statistic (Total, Last week, Last Month).

14-2. Tab Weekly Progress, then you will see bar chart displaying your weekly progress.

15. This is Setting screen. You can customise the setting of your application.

16. In Setting, you can change the mode of your application. Tab 'Switch to manufacturer', you can switch your mode to manufacturer.

17. In Setting, you will see 'Choose your Fate' which you might have already experienced at Intro. Take photo of product you prefer to recycle. Our AI system will detect your product and ask your opinion. You are always welcome to change your fate whenever you want.

18. Welcome to Manufacturer mode! You can request the items you need through this mode.

18-1. This is Manufacturer Quest screen to check your requested items.

19. When you tab each quest, you will see your quest info and QR Scanner button. You can scan customer ID for each quests. When user is verified, you will be asked to type number of items you verified.

20. Click the light green plus button in the buttom right. You will be led to New Quest screen (right side). You can create your own quest with this page.

20-1. Choose the item type you want to request.

21. After choosing item, choose the quantity of item you want to request. Then choose the method of verification you want.

22. You can add your own verification method. Click plus button given in your 'New Quest' screen. Use 'Add verification' to customise your verification method.

Download link for Apk

Check out following link to download our application!

https://liveuclac-my.sharepoint.com/:u:/g/personal/zcabkh0_ucl_ac_uk/EUAffQwKZmpHn6XxonvhDuABW7JbVfarCYzZ1rXJPxqrrw?e=InzORS

Deployment Manual

This project is consist of two independent parts. One is the back-end, which is saved in the folder  /service  and the other one is the mobile applications saved in the folder /recyclone.

Back-end /service

The framework used by the back-end is Java 11 and Spring boot 2.4.1. For more detailed packages used, please refer to pom.xml and install the related dependencies.

To deploy it, there is existing Github Actions that can automatically deploy the web application to Azure App Service. However, in order to achieve that, the azure endpoint and the corresponding credentials must be changed.

Also, since the back-end is connected to a sql server database, the database detail in /service/src/main/resources/application.properties must be changed in order to work. To do that, you must have a database deployed already. We strongly suggest you to use Azure SQL server because there class for it is defined using azure packages. Otherwise, you may want to create another class implementing the Interface DBProvider. If you are using Azure SQL server, we suggest you imported the database /recyclone-backend-database.bacpac  as an example.

The back-end is also using Azure Recognition Service so you will also need to create the related resources in Azure and replace the corresponding information in /service/src/main/java/one/recycl/service/ai/Azure.java to make it work. Or, write another class that implements CVProvider to use other resources.

Application /recyclone

The application is developed in Flutter so in order to run it in an simulator or an actual phone, Flutter must be installed and properly configured. For more details about how to install Flutter, please refer to https://flutter.dev/docs/get-started/install.

To run the application, use command flutter run to run the application. For further information, please refer to https://flutter.dev/docs.

To run our pre-built version (which might not working because the backend is no longer maintained and will probably be closed very soon), see the files under /recyclone/build/app/outputs/apk/release. But this app might not work!

Legal Issues and Processes

Caution

The software is an early proof of concept for development purposes and should not be used as-is in a live environment without further redevelopment and/or testing. No warranty is given and no real data or personally identifiable data should be stored. Usage and its liabilities are your own.

Front-End

Library Description License Type
camera: ^0.5.2+1 https://pub.dev/packages/camera/license BSD
shared_preferences: ^0.5.12 https://pub.dev/packages/shared_preferences/versions/0.5.12+2/license BSD
http: ^0.12.2 https://pub.dev/packages/http/license BSD
test: ^1.15.7 https://pub.dev/packages/test/license BSD
commons: ^0.7.8+3 https://pub.dev/packages/commons/license GPL 3.0
curved_navigation_bar: ^0.3.7 https://pub.dev/packages/curved_navigation_bar/license BSD
percent_indicator: "^2.1.7+2" https://pub.dev/packages/percent_indicator/license BSD
is_first_run: ^0.1.0 https://pub.dev/packages/is_first_run/license BSD
introduction_screen: ^1.0.7 https://pub.dev/packages/introduction_screen/versions/1.0.7/license MIT
liquid_progress_indicator: ^0.3.2 https://pub.dev/packages/liquid_progress_indicator/license MIT
sqflite: ^1.1.6 https://pub.dev/packages/sqflite/license MIT
path_provider: ^1.2.0 https://pub.dev/packages/path_provider/versions/1.2.0/license BSD
path: ^1.6.2 https://pub.dev/packages/path/license BSD
fl_chart: ^0.12.3 https://pub.dev/packages/fl_chart/versions/0.12.3/license BSD
bubble_tab_indicator: ^0.1.4 https://pub.dev/packages/bubble_tab_indicator/license MIT
path_drawing: ^0.4.1+1 https://pub.dev/packages/path_drawing/license MIT
qr_flutter: ^3.2.0 https://pub.dev/packages/qr_flutter/license BSD
qr_code_scanner: ^0.3.5 https://pub.dev/packages/qr_code_scanner/license BSD
gallery_saver: ^2.0.3 https://pub.dev/packages/gallery_saver/license Apache 2.0
geolocator: ^6.2.1 https://pub.dev/packages/geolocator/versions/6.2.1/license MIT
geocoding: ^1.0.5 https://pub.dev/packages/geocoding/license MIT
image: ^2.1.19 https://pub.dev/packages/image/license Apache 2.0
google_maps_place_picker: ^1.0.1 https://pub.dev/packages/google_maps_place_picker/license MIT
google_maps_flutter: ^1.0.6 https://pub.dev/packages/google_maps_flutter/versions/1.0.6/license BSD
google_maps_webservice: ^0.0.19 https://pub.dev/packages/google_maps_webservice/license BSD
tuple: ^1.0.3 https://pub.dev/packages/tuple/license BSD
flutter_webview_plugin: ^0.3.11 https://pub.dev/packages/flutter_webview_plugin/license BSD

Assets

Name Descriptions Legal Type
Shirt Icon <div>Icons made by <a href="https://www.flaticon.com/authors/pixel-perfect" title="Pixel perfect">Pixel perfect</a> from <a href="https://www.flaticon.com/" title="Flaticon">www.flaticon.com</a></div> Free for personal and commercial purpose with attribution.
Can Icon <div>Icons made by <a href="" title="surang">surang</a> from <a href="https://www.flaticon.com/" title="Flaticon">www.flaticon.com</a></div> Free for personal and commercial purpose with attribution.
Check Icon <div>Icons made by <a href="https://www.flaticon.com/authors/pixel-perfect" title="Pixel perfect">Pixel perfect</a> from <a href="https://www.flaticon.com/" title="Flaticon">www.flaticon.com</a></div> Free for personal and commercial purpose with attribution.
Bottle Icon <div>Icons made by <a href="https://www.freepik.com" title="Freepik">Freepik</a> from <a href="https://www.flaticon.com/" title="Flaticon">www.flaticon.com</a></div> Free for personal and commercial purpose with attribution.
Question Mark Icon <div>Icons made by <a href="https://www.flaticon.com/authors/pixel-perfect" title="Pixel perfect">Pixel perfect</a> from <a href="https://www.flaticon.com/" title="Flaticon">www.flaticon.com</a></div> Free for personal and commercial purpose with attribution.
Paper Icon <div>Icons made by <a href="https://www.freepik.com" title="Freepik">Freepik</a> from <a href="https://www.flaticon.com/" title="Flaticon">www.flaticon.com</a></div> Free for personal and commercial purpose with attribution.
Quest Icon <div>Icons made by <a href="https://www.flaticon.com/authors/smashicons" title="Smashicons">Smashicons</a> from <a href="https://www.flaticon.com/" title="Flaticon">www.flaticon.com</a></div> Free for personal and commercial purpose with attribution.
‘How to Recycle’ image https://about.canva.com/license-agreements/ Attribution not required (but it’s appreciated).Don’t redistribute or sell the media on other stock photo, graphics, music, video or wallpaper platforms.
Microsoft Login Image https://docs.microsoft.com/en-us/azure/active-directory/develop/howto-add-branding-in-azure-ad-apps Free

BackEnd

Library Version License
Spring Boot 2.4.1 Apache
Com.microsoft.sqlserver / mssql-jdbc 7.4.1.jre8 MIT
Com.microsoft.azure.cognitiveservices / azure-cognitiveservices-computervision 1.0.5 beta MIT