1 INTRODUCTION
Introduction
Background
Problem Statement
Unable to find expiration date when users remove product from original container/packaging. It makes it difficult for the user to trace the product, as the expiration date is normally written on the product packaging.
Project Objectives
Project Solution
The application should allow the user to take a picture of the product so that a user is not confused when several similar products are available. The application should allow users to scan the product barcode and search the product for users.
Project Approach
Scope of the Project
- User Scope
- System/Project Scope
- Features Covered
- Hardware Used
- Software Used
The application must allow users to search for a product and perform inventory by scanning barcodes. The application must allow users to take inventory by changing the number of stocks of each product.
Introduction
Similar Mobile Application Study and Evaluation
- Expiry Wiz by Terrific Mobile Adopted from
- The User Interface Design 1. Neat and clean design
- Hardware Used 1. Phone Camera
- Aladdinpro-expiry reminders by Aladdinpro Adopted from
- The User Interface Design 1. Minimalistic user interface
- Technology and Hardware Used 1. Linode’s SSD Servers
- Expired – Grocery Reminder & Alerts App by Mobile Farm Adopted from
- The User Interface Design
- Before Expiry by Law Gie joo
- The User Interface Design 1. Consistent UI Design
- Expiry Reminder by AppNextDoor Labs
- The User Interface Design 1. The interface design is too simple
- Technology and Hardware Used 1. Camera
- Comparison Table of The Application Studied
- Basic Features
- User Interfaces
- Advantages and Disadvantages
- Overall Comparisons
As shown in Figure 2-12, users can search for the desired product in each category. On the main page, users can filter the products by category and location, as shown in Figure 2.23.
System Development Methodologies
- The Waterfall Model
- The Agile Methodology
- Extreme Programming
- Personal Extreme Prototyping (PXP)
- Overall Comparisons
The waterfall model does not change the required specifications and the high-level design of the project in the early stage of the development life cycle, taking precedence over engaging in more detailed design and implementation work. Finally, the waterfall model is suitable when the project has well-defined requirements that are fixed and clear and the work must proceed linearly while following the project plan and time constraints set at the early stage of the project. Extreme Programming (XP) is one of the agile development methods currently widely used in the industry.
The downside of this methodology is that it relies heavily on automating most of the developer's work. A new replay will start and the same process will be repeated until all tasks are completed. In short, no single methodology can address all important aspects of the software design process.
The methodology should be chosen based on the nature of the project and the way the development team and customers work in order to produce high-quality software on time.
Technology Used
- Framework for Creating a Hybrid App
- Xamarin
- Flutter
- React Native
- Overall Comparisons
Xamarin, Flutter and React Native will be the framework to be studied in this section. React Native is an open source cross-platform mobile app development framework developed by Facebook. React Native also offers a hot refresh that allows developers to change the app in real time.
The React Native framework also allows the user to customize the application with platform-specific code to further improve the UX when the application is used on a different platform. React Native also requires extensive platform-specific code to ensure that the user interface works smoothly on different platforms. The availability of React Native is higher than Xamarin due to the popularity of the framework (Avdic, 2018).
According to the study by Fentaw (2020), overall CPU, GPU and Memory performance is almost equal for both Flutter and React Native frameworks.
Deep Learning
- Artificial Neural Network (ANN)
- Convolutional Neural Network (CNN)
- Recurrent Neural Networks (RNN)
- Overall Comparisons
- Application of Deep Learning in Actual Problems
ANN is a feedforward neural network that has the simplest structure compared to CNN and RNN. CNN is also a feedforward neural network that consists of an input layer, an output layer and several hidden layers. CNN is a more powerful neural network than ANN for performing tasks such as face recognition, image classification and object recognition.
In the research by Lake et al. 2015), a comparison is made between humans and the Deep Neural Network (DNN), and the DNN is seen to model typical judgments of humans on a range of products. Apart from that, Geirhos et al. 2017) also made a thorough comparison between human and deep learning models, where humans and DNNs are needed to classify degraded images, which include grayscale images, reduced contrast images, images with uniform white noise, and image with distortion. While deep learning cannot yet outperform humans in certain situations, such as classifying noisy images, it works well in most of them.
As a result, deep learning implementations for real-world problems can be accurate much of the time with limited human oversight.
Introduction
System Development Methodology
- Personal Extreme Prototyping (PXP)
In the implementation phase, the objects and classes defined in the design phase will be used in the actual code. The code must compile without errors and pass all unit tests to complete the deployment phase. This is where the developer identifies and analyzes problems faced during the iteration, traces its root cause and comes out with a solution to solve the problem.
Deep Neural Network
- Deep Neural Network Architecture
- Generate Dataset
- Hyperparameter Tunning
- Data Augmentation
- Prevent Overfitting
- Training, Validation and Testing
To improve the accuracy of the model, different noisy backgrounds are applied to the image generated by TRDG to simulate the actual product packaging, which may contain multiple patterns or be in different colors. Batch size is the number of training examples fed to the model in an iteration. The learning rate determines how much the model can adjust to the expected error each time the model weights are changed.
It automatically trains the model with hyperparameter intervals using trial and error methods and returns the best hyperparameter that provides the best accuracy. This implies that the model has a high variance and will not perform as well as it did in the trained data while predicting new, unknown data. Therefore, the number of images for each class should be sufficient for the complexity of the model and features to prevent overfitting.
Early stopping can be used to detect the validation loss at each epoch and to stop the model training if the validation loss starts to rise, indicating overfitting.
Work Plan
- Work Breakdown Structure (WBS)
- Gantt Chart
The dataset needs to be divided into three parts to train a deep learning model: the training dataset, the validation dataset, and the test dataset. To train Inception ResNet V2, the training dataset, validation dataset, and test dataset are used in the following proportions, meaning 70 percent of the dataset is used for training, 15 percent for validation, and 15 percent for testing. The training dataset will be used to train the deep learning algorithm to learn the characteristics of each class, while the validation dataset will be used to evaluate model performance in each era.
The reason for choosing such a ratio is that the dataset is large, with a total of 696670 images. The training dataset contains 487669 training instances, while the validation and testing datasets will each contain 104500 examples.
Introduction
Functional Requirement
The mobile application should allow the user to search for the product by product name or barcode. The mobile application must notify the user according to the reminder method (eg Push Notification, SMS Reminder, E-mail Reminder) selected by the user. The mobile app should allow the user to use OCR (Optical Character Recognition) to scan the product name and product details when adding a product.
The mobile application must disable the automatic product reminder when the product stock becomes zero. The mobile application should move the product to the restock list when the stock of the product becomes zero.
Non-Functional Requirement
- Adaptability Requirements
- Availability Requirements
- Development Requirements
- Performance Requirements
- Responsiveness Requirements
- Reliability Requirements
- Security Requirements
- Usability Requirements
The mobile app should handle 99% of the exception thrown at runtime and display readable error messages. The mobile application will save the state and return to the same state when terminated. The mobile application will display a confirmation message when the user performs an important action such as deleting a product.
The mobile application will verify the user's phone number and email using OTP (One Time Password) when the user adds or updates the phone number and email. The mobile application will ask the user's permission to access all authentication tokens.
Use Case
- Use Case Diagram
- Use Case Description
5 SYSTEM DESIGN
System Design Models
- System Architecture Design
- Firebase as the Backend Services
- Data Flow Diagram (DFD)
- Context Diagram
- Level-1 Data Flow Diagram (DFD)
- Activity Diagram .1 Login
- Sign Up
- View Product List
- View Product
- Delete Product
- Search Product
- Add Category
- View Product in Category
- Edit Category
- Delete Category
- Search Product with Barcode
- Add Shopping List Item
- Edit Shopping List Item
- Change Preferred Alert Time
The controller in the MVC architecture is the part of the application that handles user requests from the view, processes data from the model and manipulates it according to the user request. Dart packs pass the input to the controller, which is also known as services. If the alert type is a push notification, the service sends a request to Firebase Cloud Messaging to send a push notification to the user device.
If the alert type is an SMS notification, the service will send a request to Twilio SMS API to send an SMS to the user's phone number. If the alert type is email notification, the service will send a request to Node Mailer API to send an email to the user's email address. The whole process is automated, and the warning messages are adapted according to the situation.
On the other hand, Firebase Cloud Messaging is used to send push notifications to the user.
Database Design
- Entity Relational Diagram (ERD)
- Data Dictionary Entity Name: User
NULL Product ID The unique identifier for the product Varchar PK N User ID The user who owns this product Varchar FK N Product. Category Product category Varchar N Description Description of the product Varchar Y Barcode The barcode of the product that can be. NULL Alert ID The unique identification for the alert Varchar PK N Product Id The product that this Varchar FK N Alert consists of.
User Interface Design .1 Sign In Page
- Forgot Password Page
- Sign Up Page
- Home Page
- Add Product Page
- Add Image
- Add Category
- Expiry Date
- Barcode
- Reminder and Alert
- Scan Product Name Using OCR
- Added Successful Message
- View Product Page
- Delete Confirmation Message
- Edit Product
- Search Product
- View Category Page
- Add Category
- Edit Category
- Delete Category
- View Product of the Category
- Search Product with Barcode
- Shopping List Page
- Settings Page
If the email is successfully sent, the message will be sent successfully and the user will be redirected back to the login page. The user will then be redirected back to the login page to log into their account. When the user taps the add button on the home page, they will be redirected to the product add page.
When the user clicks on the list of suggestions, the user will be redirected to the product details page.
6 IMPLEMENTATION
Implementation of Mobile Application
- User Module
- Settings View
- Personal Product Module
- Product by Category View
- Search by Category View
- Search by Name View
- Search by Barcode
- Product Action View
- View Product View
- Home View
- Personal Product Services 1. Get Products function
The figure below shows the code segments of getCategory function in the Add Product Form function setup. The figure below shows the code segments of getCategory function and getProductById function in the configuration Add Product form function. The figure below shows the code segments of addNewPersonalProduct function and removeUnuseCategory function in the Submit Add Product Form.
The figure below shows the code segments for the editPersonalProduct function and the removeUnuseCategory function in the Submit Edit Product form. In addition, the user can also delete the product via the permanent Delete Product function in Personal Product Services. The code segments for calculating the total number of expired products, soon-to-be-expired products and safe to use products are shown in the figure below.
The code segments for calculating the percentage of the circular indicator are shown in the figure below.
