Team ID: 5548
Team Members:
- Quah Han Rong, Glenn (Skylab ID: 5132)
- Tan Zhi Wei (Skylab ID: 5133)
Proposed Level of Achievement: Apollo 11
Difficulty Attempted: Advanced
Year: 2023
- Foreword by Developers
- Poster & Video
- Deployment
- Motivation
- Aim
- How are we different from Existing Platforms
- Tech Stack
- User Stories
- Project Scope
- App Demo & Walkthrough
- System Design
- Software Engineering Practices
- Testing
- Changes made through development
- Challenges faced
- Project Log
- Sources & References
Welcome to ConnectCard! This namecard application is designed to revolutionize the way you exchange and manage contact information.
As developers, we embarked on this journey with a simple yet powerful idea – to create a seamless and digital solution for sharing your professional identity. In today's fast-paced world, where networking and connections play a vital role, we recognized the need for a modern approach to exchanging contact details.
Gone are the days where you carry around a physical namecard. With ConnectCard, you are able to showcase your unique brand and professional identity anytime and anywhere. By seamlessly scanning a QR Code, your namecard information can be exchanged easily.
We have poured our hearts and expertise into every aspect of this application, ensuring that it delivers a delightful user experience. Our focus on simplicity and intuitive design means that anyone, regardless of their technical proficiency, can effortlessly navigate and make the most of our application.
But our journey does not end here. We are committed to continuous improvement and evolution, guided by your valuable feedback and suggestions. Our passion for innovation and our dedication to providing a cutting-edge product drive us to push the boundaries of what this application can achieve.
So, without further ado, welcome to ConnectCard – Networking made easy
Regards,
Glenn Quah
Linkedln: https://www.linkedin.com/in/glenn-quah-59390a18b/
Github: https://github.com/glennquah
Tan Zhi Wei
Linkedln: https://www.linkedin.com/in/zhi-wei-tan-92b02525b/
Github: https://github.com/ZhiWei1010
Elevator Pitch Video: https://drive.google.com/file/d/1KqCCN2fL1QiHnOnuNatBzYJn6tmiY9W4/view?usp=share_link
Poster: https://drive.google.com/file/d/1Xfcv88yRIS-P9JojkY_17qMARUUyWp3c/view?usp=share_link
Figma Design: https://www.figma.com/file/hVvHnTKv5smJBOPmTPnpZP/Connect-Card?type=design&node-id=0%3A1&t=8YLkiicqGAFXCIrQ-1
Project Demo: https://drive.google.com/file/d/1_FYtio2JPChTIyvzL8KLP-Jp_Hdezmzm/view?usp=sharing
Milestone 1 Prototype: https://drive.google.com/file/d/1_FYtio2JPChTIyvzL8KLP-Jp_Hdezmzm/view?usp=sharing
A1 Poster: https://drive.google.com/file/d/1ClhH5edK67TUENlC-zsqnikMv52tSPE3/view?usp=sharing
Project Demo: https://drive.google.com/file/d/1rrZD2IqqNtiWg3TsZ2e1fOy9HcUg8kcs/view?usp=sharing
App APK: https://drive.google.com/drive/folders/1gHe2YpPyJYLERWdhZ95dpLA-nPWfbCxl
A1 Poster: https://drive.google.com/file/d/1ClhH5edK67TUENlC-zsqnikMv52tSPE3/view?usp=sharing
Project Demo: https://drive.google.com/file/d/1bNgsbRKgLQ5-xu79HLYNc3w_j2NT44GG/view?usp=drive_link
App APK: https://drive.google.com/drive/folders/1sdKgctwhZuty5yzFxVUUMiuW6nRoqbCH?usp=drive_link
A1 Poster: https://drive.google.com/file/d/1ClhH5edK67TUENlC-zsqnikMv52tSPE3/view?usp=sharing
Project Demo: https://drive.google.com/file/d/1tOFcYpV6C37tilautMI-HuXwmJSZrXCN/view?usp=sharing
App APK: https://drive.google.com/drive/folders/1O12f7ssKgRxBMdYrVPpWWC6XTMhmSG5b?usp=sharing
ConnectCard is currently only available on android. For users without an android device, you may download the app through an Android Emulator which can be downloaded from Android Studio. Otherwise, you may read the App Demo/Walkthrough or watch our App Demo Video which can be accessed under Poster & Video.
ConnectCard is packaged into an APK file, where you can download and install the APK on your android device directly.
Link to APK: https://drive.google.com/drive/folders/1O12f7ssKgRxBMdYrVPpWWC6XTMhmSG5b?usp=sharing
Carrying physical name cards and membership/loyalty cards can be burdensome, leading to lost contact information and a cluttered wallet. It is inconvenient for individuals who meet new people, engage in business interactions, or collect various membership cards to manage and access these cards efficiently.
ConnectCard provides a convenient solution by allowing users to scan physical name cards using their phone camera and convert them into digital cards stored within the application. Users can easily update their personal digital name cards, keeping their contact information up to date for seamless interactions. The application also enables users to add other users as friends easily by scanning a QR Code and sending the QR code through social media such as telegram and whatsapp. With our app, individuals can simplify their wallet, stay connected with ease, and take full advantage of membership benefits without the hassle of physical cards.
The primary objective of our Orbital project is to develop a sophisticated mobile application that facilitates effortless storage and management of personal name cards, along with seamless user connectivity. Our ultimate vision is to eliminate the reliance on physical name cards and alleviate the inconvenience of carrying a bulky wallet through the streamlined functionality of this app. Designed for recruiters, professionals, job seekers, and everyone else. Simplify networking, all in one place.
ConnectCard utilizes Firebase for data storage and manipulation, and Flutter for the user interface design. It offers various features such as scanning and storing name card information, linking the app to communication platforms like Telegram, Whatsapp, Phone, and Email, updating existing data, and QR Code technology for easy name card exchange.
Currently, there are existing name card applications that provide features such as storing and managing digital name cards of self and others. However, there are some few applications that satisfy some features that are important in a digital name card application.
Existing name card applications have limited functionality in these areas:
- Converting current physical name cards into digital name cards easily
- Sharing digital name cards with others easily
ConnectCard utilizes OCR technology to extract text and relevant information from scanned name cards. This technology enables automatic data entry and ensures accurate digitization of the name card details.
Image processing techniques are employed to enhance the scanned name card images, improve readability, and optimize the visual quality of the digitized cards. This helps in creating clear and professional-looking digital name cards.
ConnectCard seamlessly integrates with the mobile device's camera functionality, allowing users to capture images of physical name cards directly within the app. This integration simplifies the scanning process, making it convenient for users to convert physical cards into digital format effortlessly.
To ensure data accessibility across multiple devices, our application integrates with cloud storage services. The digital name cards and associated data are securely stored in the cloud, enabling users to access and manage their cards from any device with the application installed. Synchronization functionality ensures that any updates made to the cards are reflected across all devices.
ConnectCard leverages QR code technology for the seamless exchange of digital name cards between users. Users can instantly add other users as friends by scanning their QR code, or even share their own personal QR code via social media such as telegram and whatsapp, fostering efficient networking and eliminating the need for manual contact input.
We decided to swap out the initially planned out NFC technology for the seamless exchange of digital name cards for QR Code Sharing. This is because QR Code is a widely used technology that users are used to using. Additionally, we are also using the camera for other functions such as the OCR to convert physical name cards into digital name cards, which means users would be more familiar with the scanning action with the camera, allowing easier familiarization of the app.
- Figma: Prototyping and Frontend UI Design
- Flutter: Frontend UI Framework
- Firebase: Authentication & Database (Backend)
- As a working adult, I want to be able to sign up to have my own account, login and logout of the application.
- As a working adult, I want to be able to have a profile page where I can upload my profile picture, name and headline.
- As a working adult, I want to be able to get customer support easily.
- As a working adult, I want to be able to create, edit and delete digital name cards easily.
- As a working adult, I want to be able to connect with other users easily.
- As a working adult, I want to be able to convert physical name cards into digital name cards easily.
- As a working adult, I want to be able to view the scanned named cards easily.
- UI/UX of Application: Finalized the design using FIGMA to be used as a template to guide
- Login / Registration: By using an email & password to login
- Database: The app uses Firebase as the backend database to store and manipulate data, ensuring efficient data management and retrieval.
- Updating existing Data: Users have the flexibility to update their personal digital name cards at any time. This feature is especially useful when users experience changes in their job positions or roles within their existing company.
- Scanning Feature: Users can use their device's camera to scan name cards and extract relevant information. Users cannot do anything with the extracted text just yet, but in Milestone 3, Users will be able to use the extracted information to create their own personal name cards or a friends’ name card.
- Friends system The app uses Firebase as a backend database to store friend's card. Users can send, accept or reject friend requests.
- Communication Integration (QR Code): The app allows users to add other users as friends seamlessly by scanning their personal QR code. The app is also integrated with popular communication platforms such as Telegram, Whatsapp, Phone, and Email, where they can send their personal QR code easily . This enables users to easily connect with their clients directly from the app.
- Scanning and storing feature (continuation from Milestone 2): Users can now use the extracted text from the OCR feature to create new personal name cards or friend’s name cards which will be stored in the firebase.
Allows users to log in to their ConnectCard account using their email and password.
Provides a toggle option to switch to the Registration page for new users.
Allows new users to create a Connect Card account by providing their email and password.
Validates the user's email and password to ensure they meet the necessary requirements.
Allows users to select options such as editing profiles, contacting customer support, or logging out.
Allows users to edit their profile picture, name, and headline, which will be displayed when other users want to add them as friends.
Displays a list or card view of the user's stored name cards, showing basic information such as name, organization, position, phone number, and email address for each card.
Includes a bottom navigation bar to access other pages.
Provides a profile bar at the top to access the user's profile page.
Provides a help icon at the top right for instructions on how to use the app.
Provides an edit icon at the top right, bringing them to the card editor form page.
Users can view their cards in more details by clicking into them.
Allows users to add new name cards and edit the selected name cards.
Validates the entered information and displays error messages if required fields are not filled.
Loads the selected name card information from the database.
Allows users to add a display picture and update various information fields.
Provides an option to delete name cards, with a snack box appearing when attempting to delete the last card.
After editing the card details, it is automatically updated on Firebase.
When adding new cards, the List of Cards will add on
Each User will have their unique QR Code that can be accessed by clicking on the ‘connect’ button.
Users can choose to scan another user’s QR Code to them as a friend or send their QR code via social media
After users click the ‘Scan’ button, they can scan other user’s QR codes to add them as friend
Users can also choose to click the ‘Share’ button to share their personal QR code with other users via social media
Requests permission to use the camera for name card scanning.
Enables users to capture a photo of a name card.
Utilizes Google ML Kit and text recognition technology to convert the image into text and extract relevant information.
Users can click on the help icon at the top right for instructions on how to use this feature.
Displays the results of the text conversion and extraction process.
Filters out Phone number, Address, Email, and Website and prefills in the scanned card editor page.
When they click add card, an alert dialog appears and users can choose to add the scanned card as their own personal card or a friend’s card.
The phone number, email, website and address are prefilled automatically prefilled.
All other extracted text will be prefilled inside the more information area and users can cut and paste the information into the relevant fields.
Users are able to select personal card and the card will be added into their list of cards
Users are able to select friend card and the card will be added into the cards tab where they can view the information.
This allows users to digitalize their name card, having easy access whenever or wherever they are
Users are able to view the list of scanned cards on the scanned card page.
A search function is also included for users to easily find the scanned card
Users will be able to edit or view the scanned card in more detail when they click on each card.
Users are able to view the scanned card with more detailed information after clicking on the card.
Users list of friends will appear in the friends tab. User is able to press onto the list view to their friends cards
User can click into the card to view more information
When user receives a friend request, the friend request tab will turn red and indicate the number of request he has.
User can choose to accept or decline the request
After accepting the request, the person is now your friend and you are able to view their cards
User is able to view the list of users using connect card, with the ability to search for their friend via their name, headline or UID.
After finding your friend, you can send them a friend request
You can view the request pending tab and you can see that the list of request pending
When the ConnectCard app is opened, it checks for persistent login information. If the user is already logged in, they are directed to the Home Page. Otherwise, they are brought to the Login Page to authenticate their credentials.
On the Login Page, users have the option to toggle between the Login and Register pages. After inputting the correct email and password values, the app authenticates these values with Firebase. If the email and password are correct, the user is directed to the Home Page. If the authentication fails, the user is given the opportunity to try again.
By pressing the top app bar button, the user is able to edit their profile, including their name, headline, and profile picture. Users can also click the "Contact Us" button to get in touch with customer service via email or phone or log out of the application.
Users have the ability to edit their card information, add and delete new cards.
On the Home Page, users can view their existing cards in either a list or card view. The cards display basic information such as name, organization, position, phone number, and email address. By clicking on a card, they will be directed to another screen showing detailed information, with the ability to interact with the phone number, email, and website for communication.
By clicking on the "Connect" button, the QR Code generator will be triggered, and a personalized QR Code will appear. Users can choose to scan other users' QR Codes to add them as friends or share them via social media, enabling others to connect with them.
The Scan Cards Page requires permission from the user to access the camera. Once permission is granted, users can take a photo of a name card. The app utilizes Google ML Kit and text recognition technology to convert the image into text, extracting relevant information from the name card. It filters the phone number, email address, website, and address. Users can choose to add the information as a personal card, which will be reflected in their list of cards, or as a friend's card, which will appear in the cards tab for easy reference. This allows users to digitize all their name cards, capturing them as pictures for convenient access in case of discrepancies.
After scanning other users' physical name cards, the user can view or edit the following cards.
By clicking on the blue button, users can easily search for friends as it displays the full list of users using ConnectCard. Additionally, they can search for friends through their UID, name, and headline. After finding their profile, users can send a friend request. Upon receiving a friend request, the friend request tab turns red, indicating the number of requests. Users are able to accept or decline the friend requests.
After the request is accepted, users can click on their friend's profile and look through their list of cards. The color of the card will be different to indicate that it belongs to the friend, not the user.
Every user document is split into 2 collection. “Friends” and “UserData”. This is to ensure security, easy access to specific data and to reduce impact on existing functionalities when updating user information.
To separate sensitive data, ensuring that users only have access to the information they are authorized to see. This prevent potential security breaches and unauthorized access to sensitive ser relationship
By having a dedicated “Friends” collection, it allows for efficient querying and retrieval of friend related information. When a user wants to retrieve their list of friends, accept or decline friend requests, or perform any action related to their friends, the system can directly access the "Friends" collection without needing to fetch unnecessary data from the "UserData" collection. This separation simplifies data retrieval and improves the overall performance of friend-related operations.
When a user updates their profile information (e.g., name, headline, profile picture), having a separate "UserData" collection ensures that changes to user-specific data won't interfere with friend-related data. This separation minimizes the risk of accidental data corruption or inconsistencies. Additionally, it simplifies the process of updating user data without affecting friend connections or vice versa.
Splitting data into logical collections can improve the management of user-related data. Administrators or developers can focus on specific tasks related to friends and friend requests without having to navigate through unrelated user data. This compartmentalization streamlines maintenance and development processes.
Here are some of the software engineering practices that we used for our Orbital project.
When embarking on a new feature, we establish dedicated milestones that align with the overarching project goals. Each milestone serves as a crucial stepping stone towards the successful completion of the feature, ensuring that our efforts are focused and well-organized.
As part of our milestone-driven development process, we leverage Git issues to effectively manage and track the progress of our work. Once we have established milestones, we break down feature development into smaller, manageable tasks and create Git issues to encapsulate them. This granular breakdown enables us to focus on specific aspects of the feature, promoting efficiency and collaboration among team members. Moreover, we will delegate the tasks, apply labels for easy categorization, and assign them to our project for efficient project management.
By using Git labels, after creating each issue, we will apply different labels to categorize it based on its content. This will help us easily understand what each issue is about and organize them accordingly.
By utilizing a Git project spreadsheet, we can have an overview of the work allocation. All the issues are listed down as tasks, and we can track the status of each task. This provides a clear picture of how the work is distributed among team members and helps us monitor progress efficiently. The spreadsheet allows us to keep track of completed tasks, ongoing work, and pending items, ensuring that the project stays on track and all team members are aligned with their assigned tasks.
By utilizing the branching feature in Git, we ensure a structured and organized development process. Whenever we work on a new feature or bug fix, we create a separate branch for it. This approach allows multiple team members to work on different features concurrently without causing conflicts or discrepancies in the codebase.
Each branch represents a specific task or feature, which helps us maintain code isolation and makes it easier to review and test changes independently. Once the feature is completed or the bug is fixed, we thoroughly test the code to ensure its functionality and reliability.
Only after testing and verification, we proceed with creating a pull request to merge the branch into the main branch. By following this branching workflow, we minimize the risk of introducing bugs and maintain a stable main branch that represents the most up-to-date and tested version of the project. It promotes collaboration, transparency, and effective code management throughout the development process.
We follow a structured approach by first testing our branches thoroughly. Instead of directly updating the main branch, we utilize Git pull requests. This enables others to review the code and helps prevent any discrepancies before merging. This collaborative process ensures code quality and maintains a stable main branch.
By creating releases and tagging them with version numbers via milestones, it becomes easy to track and manage different versions of the software. This helps in keeping a clear record of each release and allows us to revert to specific versions if needed.
For testing, we have split it into 2, automated testing and user testing.
- Automated TestingUnit test: To test a single function, method or class
- Integration test: to test the complete app or a large part of the app
- User Testing
- Scenario based testing: design test scenarios that replicate real-world situation that users might encounter
- Diverse user representation: including different demographics, skill levels and backgrounds
- Bug reporting and tracking: provide a simple and clear way for users to report bus and issues through a google form
Please visit the link to view more information on our testing! Link: https://docs.google.com/document/d/1GVsOisbiYp4yAPMlSFgj1nU5VWP4nFaO/view#bookmark=id.1d90lqkwji6o
Please visit this link to view more information on our Google survey form responses. Link: https://docs.google.com/document/d/1GVsOisbiYp4yAPMlSFgj1nU5VWP4nFaO/view#bookmark=id.d6e3y2etbxv
Please visit this link to see the changes made through development! Link: https://docs.google.com/document/d/1GVsOisbiYp4yAPMlSFgj1nU5VWP4nFaO/edit#bookmark=id.5dnbtaz1ches
Here are some challenges that we have faced during our journey of creating ConnectCard.
| ID | Challenges | Explanation and Actions taken |
| 1 | We had a huge commit issue on github due to a circleci.yaml file that existed in our repo when we did not even set it up. | Research on circleci, github commit & also seek advice from our advisor, Ruby. Manage to remove the circleci.yaml file and resolve the commit issue. |
| 2 | OCR integration into our app. Using the camera in the phone requires appropriate permissions and life cycles to be set up. | It was not easy to set up the OCR integration into our app. After setting up the appropriate permissions and life cycle for using the phone camera, we were able to recognise the text successfully with rather decent accuracy. However, to filter out the appropriate information that should be used to pre-fill the fields for our name card forms is a huge challenge to us as we were not familiar with AI/ML. Instead we decided to use a simple regex of finding matching patterns to filter out the appropriate information such as ‘+65’ for phone numbers, ‘@’ for email address and 6 digit numbers (postal code) for address. In the future, we are planning to use some Large language models to more accurately filter out the appropriate information to pre-fill the fields correctly and filter out unnecessary information. |
| 3 | App crashing bug. During the start of Milestone 3, there was a bug with the app where the app would crash everytime a new page is opened. | We explored around with the app to try to find out when the crash happened. Initially, we thought that the cause of the crash was from the inappropriate life cycle set up for using the phone camera in the OCR function. However, we found out that any other tabs also caused the crash of the app, which means that the crash was not due to the inappropriate life cycle. We then decided to trace back the commits to find out when the bug first appeared. This would help us find out which code is causing the crash of the app. We also researched the error message shown. Turns out that there was some dependency issue, and it was solved quickly after. |
| 4 | NFC integration into our app. | Currently, flutter only has packages that support NFC communication between a NFC Device and a NFC tag. For peer to peer communication via NFC, it is basically not possible. Also, after careful consideration, we felt that using QR code is instead a better alternative as compared to NFC as QR code is a widely used technology that almost everyone is familiar with. This allows new users to easily learn how to use the feature without much learning curve. In addition, we are already using the phone camera for the OCR feature, this provides an extra layer of familiarity for the users, allowing them to get familiar with using the app quickly. |
| 5 | Bluetooth integration into our app. | Bluetooth integration was another alternative that we considered during our discussion to replace the NFC technology. However, after careful considerations, we felt that QR code technology is still the ideal alternative due to the same reasons stated in point 4. |
| 6 | Deployment of app in both Android and IOS. | Initially, our app is supposed to be deployed on both IOS and Android. However, due to many dependency, permissions conflicts as well as time constraints, we were only able to deploy the app on android devices. We decided to follow through the development in Android devices and only fix up the IOS deployment in the future when we have more time. |
Link: https://docs.google.com/spreadsheets/d/1aPRcCrV2DgaXbIsEnaVfjLGABb_CIqXqBk_hmSb5DgI/edit?usp=sharing
- https://www.youtube.com/watch?v=1ukSR1GRtMU&list=PL4cUxeGkcC9jLYyp2Aoh6hcWuxFDX6PBJ
- https://www.youtube.com/watch?v=sfA3NWDBPZ4&list=PL4cUxeGkcC9j--TKIdkb3ISfRbJeJYQwC
- https://docs.github.com/en/issues/using-labels-and-milestones-to-track-work/managing-labels
- https://docs.github.com/en/organizations/managing-organization-settings/managing-default-labels-for-repositories-in-your-organization
- https://docs.github.com/en/rest/issues/assignees?apiVersion=2022-11-28
- https://docs.github.com/en/rest/git/tags?apiVersion=2022-11-28
- https://docs.github.com/en/actions/managing-issues-and-pull-requests/adding-labels-to-issues
- https://pub.dev/packages/google_nav_bar
- https://www.youtube.com/watch?v=Uw0T4ZIgFgs
- https://davidserrano.io/text-recognition-in-flutter-create-ocr-scanner-app
- https://pub.dev/packages/google_mlkit_text_recognition
- https://pub.dev/packages/permission_handler
- https://api.flutter.dev/flutter/widgets/FutureBuilder-class.html
- https://pub.dev/packages/camera
- https://medium.flutterdevs.com/nfc-in-flutter-43e419f48b47
- https://pub.dev/packages/nfc_manager
- https://pub.dev/packages/showcaseview
- https://resocoder.com/2021/08/03/flutter-showcaseview-tutorial-introduce-app-features-to-your-users/
- https://docs.flutter.dev/cookbook/testing/unit/introduction
- https://medium.com/@a.poichet/flutter-and-the-practical-test-pyramid-with-the-bloc-pattern-6e6bf10dda9d
- https://www.youtube.com/watch?v=GuGdIg4iH_k
- https://www.youtube.com/watch?v=jSaoTC1ULB8
- https://www.youtube.com/watch?v=TQhMCFGaIOQ&t=2712s&ab_channel=SYLVAINTAIO
- https://www.youtube.com/watch?v=RwsDVQFrH2o&ab_channel=QRTIGER-QRCodeGenerator
- https://www.youtube.com/watch?v=tGSWzsxJCsA&ab_channel=BaabaDevs
- https://www.youtube.com/watch?v=WTSPwr0vJmM&t=792s&ab_channel=JensTofte
- https://www.youtube.com/watch?v=o1XuW6DKkEs&t=530s&ab_channel=SujanBhattarai
- https://www.youtube.com/watch?v=11OoD1rhV9I&ab_channel=ChidiebereEdeh
- https://www.youtube.com/watch?v=4YxGA3OC0c4&t=341s&ab_channel=TheTechBrothers
- https://www.youtube.com/watch?v=N8x63LJlpD0&ab_channel=dbestech
- https://www.youtube.com/watch?v=7Z2Wqm8waSM&t=952s&ab_channel=DevMo
- https://www.youtube.com/watch?v=haMOUb3KVSo&ab_channel=Firebase
- https://www.youtube.com/watch?v=S-8v9nOCUfw&t=27s&ab_channel=TrueCoders
- https://www.youtube.com/watch?v=QyChOayFQDk&ab_channel=CodingCafe
- https://www.youtube.com/watch?v=P6OTh-5NDN4&ab_channel=HMTutorials
- https://www.youtube.com/watch?v=LlQimtjqZ9A&ab_channel=CodingWithTea
- https://www.youtube.com/watch?v=F_OUGeNyiMk&t=6s&ab_channel=TechnicalSkillz
- Special mention to Ruby our orbital advisor for comments, feedback and guidance!
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent