See discussions, stats, and author profiles for this publication at: https://www.researchgate.

net/publication/332524872

Food Recipe Finder Mobile Applications Based On Similarity Of Materials

Conference Paper · November 2018

DOI: 10.1109/SIET.2018.8693218

CITATION READS

1 2,909

3 authors:

Gusti Pangestu Afif Supianto

Brawijaya University Brawijaya University
8 PUBLICATIONS   12 CITATIONS    73 PUBLICATIONS   198 CITATIONS   

SEE PROFILE SEE PROFILE

Fitri Utaminingrum
Brawijaya University
95 PUBLICATIONS   284 CITATIONS   

SEE PROFILE

Some of the authors of this publication are also working on these related projects:

Image Processing and Computer Vision View project

Doctoral Thesis View project

All content following this page was uploaded by Gusti Pangestu on 08 October 2019.

The user has requested enhancement of the downloaded file.

 Food Recipe Finder Mobile Applications
Based On Similarity Of Materials
Gusti Pangestu Ahmad Afif Supianto Fitri Utaminingrum
Faculty of Computer Science, Faculty of Computer Science, Faculty of Computer Science,
Brawijaya University Brawijaya University Brawijaya University
Malang, Indonesia Malang, Indonesia Malang, Indonesia
Gustipang@student.ub.ac.id afif.supianto@ub.ac.id F3_ningrum@ub.ac.id

Abstract--The era of technology today has become a In the current era of gadget technology,
bridge that connects humans with all the ease. Many innovations have been created to help people gather
of the activities carried out by humans using and search for the recipes they want, including a
technology as a media help, ranging from address mobile-based app like Cookpad that features to
search, to shopping. Technology is becomes small
search for recipes based on the name desired by the
things that always included in our daily lives, such as
cooking example. This study utilizes a smartphone user. However, there are often conditions where the
app called recepiece which has a function as a place to user has only limited ingredients for
store and search for recipes based on materials owned cooking. While the applications that exist before it
by the user. By using several methods and approach does not provide this feature.
such as Euclidean distance and Agile development
program, this application are designed and develop The research we did here is to build a mobile
based on mobile application especially for android app that has a feature to search for recipes based on
smartphone. In this research, several samples are material owned by the user. In this app we develop,
obtained to fill the survey and reviews the application the user is asked to load the materials owned, then
performance include the functionality and non- the application will look for recipes that have the
functionality. The result showed that Recepiece material most similar to the material owned by the
application are capable to be used by user and have
user. In this research, we also had been reading
better performance although this application are
behaviors performed by the user by recording all
build by using hybrid framework called Ionic. From
survey result this application gained 90% approval activity of what is being done in a logcat. From the
from user if this application released globally. logcat data stored then made a analysis based on
the most frequently used materials and materials
Keywords-- Android, Cook, Recipe, behavior, log, most sought after. From the results of the analysis
hybrid, ionic will be seen the most frequently used food by some
I. INTRODUCTION people.

Food is one of the main human There are many studies that utilize user data
needs. Through food is the source of energy and computer ability for specific purposes, such
obtained. In its development, food today is not only as research on public security services [2] to detect
as a filler of energy needs, but more than that food a malware from the log activity of an app
has become an art and has added value. A wide software [3], computer for controlling a wheelchair
variety of innovative creations in food have been [4], and a polyclinic queue application [5].
developed and spread widely. Many of them use
In this research, the user log in though and in
only the minimal amount of material to create the analysis to produce a certain information
an original recipe. A recipe is a set of instructions
presentation which will be useful for the
telling you how to prepare and cook food, development of the application and also provide
including a list of what food is needed for benefits to the user user of the application. There
[1]. Cooking recipe consists of several aspects
are several stages and schemes done in this
including: name, step, tools and materials, time and research, the first user is asked to register an
amount of dish.
account, then the user is requested to use this
Not everyone can memorize well the recipes application for some time, everything done by the
they want. Their material is also an obstacle in user will be read and recorded by the
cooking. Limited ingredients also become one of application. The output of this research is a
the causes of limited cooking creations, especially graphical data info that represents the average of
for someone who does not have passion in cooking. user approval that represent the functionality and
non-functionality performance of this application.
 II. METHODOLOGY

This research begins with designing and

building a mobile application. The mobile app is
built with an IONIC framework. The app is
designed and built for 1 month. Please note that the
application is only used in the regional city of
Malang, East Java, Indonesia only. With
respondents as many as 10 people. The steps of this
study are explained in the next few points.

A. IONIC

Ionic is a framework devoted to building

hybrid mobile apps with HTML5, CSS and Fig.1. Agile Development Architecture
AngularJS. Ionic uses Node.js, SASS, AngularJS
as its engine. Ionic comes with CSS components development that requires rapid adaptation of the
like buttons, lists, cards, forms, grids, tabs, and developer to changes in any form, as shown in Fig
more. So Ionic is a web technology that can be 1.
used to create a mobile application. Because the
hybrid then the application is only made 1 time but Agile Method has a way of working close to
can be released on more than 1 platform alias the user, using this method the user will be able to
cross-platform. Ionic Using the Opensource directly assess the running of the application and
license, using the latest web technologies Ionic what things are missing and need to be added to the
utilizes AngularJS for its logic implementation that application [6] . The pattern is what makes the
offers fast, native app performance and software stepped by agile has a fast update rate,
responsiveness. In addition to the free and C. MySQL Database
opensource Ionic Framework, Ionic also introduced
the Ionic Platform. Ionic Platform provides The term SQL can be interpreted as a
additional services for ionic developers. Ionic language used to access a data in relational and
Platfrom adds Create, Deploy, Update, Analytics, structured database while MySQL in this case
Marketing (Ionic Market) and Push Notifications become software or tools to manage or manage
features to applications built with Ionic. SQL by using Query or special language. Basically
the database managed in MySQL is not much
different from Microsoft Access is a form of tables
B. Agile Development - tables that contain certain information. The
difference lies in the use and management of such
Agile methods are one of the few methods databases.
used in software development. Agile method is a
type of short-term system development that MySQL is classified as an open source
requires rapid adaptation and developers to change software and licensed GPL or General Public
in any form. License. This GPL license is only aimed at certain
software for the purposes of the GNU project, this
In Agile Software Development interactions is the factor of the number of MySQL users
and personnel are more important than processes worldwide. Besides of easy for use, this
and tools, software that functions more important software can manage data more effectively because
than complete documentation, collaboration with it uses a particular script or language and
clients is more important than contract negotiation, automatically will be a command to the system.
and the attitude of responding to change is more
important than following the plan. In the world of websites, the interface or
face-to-face form for MySQL is often called
Agile Method can also be interpreted as a phpMyAdmin. This is one of the factors of the
group of software development methodologies relationship between the PHP language with
based on the same principles or short-term system MySQL, especially in terms of web
management. Some examples of MySQL
implementation can also be found on E-Commerce,
Blog sites or a CMS (WordPress, Joomla, and
others).

D. Euclidean Distance

In mathematics, the Euclidean distance or

Euclidean metric is the "ordinary" straight-line
distance between two points in Euclidean space.
With this distance, Euclidean space becomes a
metric space. The associated norm is called the
Euclidean norm. Older literature refers to the
metric as Pythagorean metric. Any Euclidean
equations are described in Equation (1).

(1) Fig. 3. Write Page design

team and then displayed in the timeline and can be

viewed also in access by all users of this
E. Application Design application. The page views on this app are shown
in Fig 3.
This app is designed using the ionic
framework. With this framework, the language In Fig. 2. Users can fill the number of
used as logic is Javascript with additional CSS and materials that users have, user can write down the
also PHP. There are 4 main features in this steps in making the cooking according to the
application, namely write page, search page and material in the step column. Users can also add
timeline and login, showed in Fig. 2. Before photos as a complement to user posts.
designing the application, mockup design will be
added first. 2. Search Page

In this case, the user can find the recipe that

the user needs based on the material that the user
1. Write page has. There are a total of 7 materials that can be
used as a reference. The look of this search page is
This page has functions for writing or shown by Fig 4.
adding recipes. This page can be accessed by any
user who already has an account. The results of this
recipe written by the user will be reviewed by our

Fig. 4. Search page design

Fig. 2. Use Case diagram of Recepiece application

 Users can also specify the number of
materials in units of Kilo Gram or Gram, the
program will automatically convert input provided
by the user and look for recipes that have similarity
of material with user input in the database.

The method or step used by this application

to find the recipe with the most similar material
possessed by the user is by applying the Euclidean
equation. User input data is first converted into a
data vector, then by using Euclidean data is
calculated one by one with existing data on the
database to know the distance that appears on each
data. After that new ranking for each data from the
lowest or most similar to the highest distance or the Fig. 5. Timeline page design
least close to the similarity.
user. In this page, newly written recipes will
In Equation 1, the value of is automatically appear and be on the top. Users can
the Euclidean distance value from point p to point view more details by pressing the recipe box in a
q. While for each p value and q has a data length of news release. The display of this page is shown in
6 data in accordance with the list of existing Fig 5.
ingredients of rice, meat, chicken, eggs noodles and
F. Database Structure
fish. The length of the data is denoted by the value
of n, with the value of n itself being 6. By using MySQL, the database of this
application is built on PhpMyAdmin applications
The reason for using Euclidean distance itself
that have been hosted online on a particular web
is because of its ability to calculate the distance
host. The structure of the application database table
between 2 data vectors. According to statistics, the
itself is shown in Fig 6.
most common method used to calculate
the Euclidean distance vector is with this [7]. In From Fig 6 can be seen there are 5 tables
addition, the use of this method is also quite easy to namely Table Recipes, Table User, Main Recipe
implement in the programming language web or Table, Activity Table and Table Log. Recipes are
android specifically. located and stored in Table Recipes and user data
are in Table User. For Table Log and
The result of a recipe search will be Activity contents list of activities undertaken by the
displayed on a new page called recipe search user in this application complete with the time and
results. The results will display a list of recipes activities, finished task or recipe that also often
starting from top to bottom according to the level seen or selected by user. Through this table later
of similarity. The higher the level of similarity is analysis can be done to determine the user's habits
higher. and what things done by the user.
Agile Development
3. Timeline Page
The development method used in this
This page serves to display a list of dishes application is by using Agile Development. Where
created by all users of the Recepiece application there is link between user and us as developer.

Fig. 6. Relationship design between tables in database recepiece

Each application is finished in release, then the user
will immediately try and provide input and input is
also in the base of the next development.

III. RESULT & IMPLEMENTATION

As described in the previous chapter, this research

uses several tools to build the application. The
steps in the development of this application will
be explained in this section.
Fig. 8. User responses of Recepiece features
This app is deployed through chat apps and
social media like Whatsapp, Telegram and other web language and run in native. This size of
popular chat apps. Where the target user is a local software when installed on the phone was 10,93
user who is in Indonesia. Users are selected
MB included the local storage data like user
randomly regardless of any background.
account and password. By doing functional
In this section, the result and analysis has analytic, software must be sure to run well on the
divided into 2 categories, first category is the phone.
functional analysis and second is the nonfunctional
In this application there are 4 features, with
analysis including the log activities and user
1 main feature that runs the recipe search feature
behavior. User Interface of this app are shown in
based on similarity of materials. Testing of this
Fig.7.
application involves 20 respondents with some
A. Functional Analysis questions related to the performance of recepiece
applications. Rating forms are randomly shared to
Recepiece software build in ionic firmware, users who have signed up and tried features in the
in other words it develop by utilize programming recepiece application. Assessment data collection
conducted for 3 days by utilizing google form.
Questions posed to respondents are related to their
opinions about this application and their responses
to application features and performance. The
results of the ratings are shown in Fig. 8.

According to the Fig.8 it can be found that

more than 80% of respondents said the application
is feasible to use and has a feature that can work
well, the feature in question is a recipe search
feature based on similarity of material owned.
From the survey results can be obtained conclusion
that this application is able to run well. The
completeness features are shown in Table 1.

Table 1 shows the functional analytic in recepiece

software. From the User Activity Diagram, it can
assume that recepiece had 4 main activity including
TABLE 1. FUNCTIONAL FEATURE TESTING OF
APPLICATION
No Features Status Validator User
Agree

1 Login & Register Work User 90%

2 Timeline Work User 89%

3 Write Recipe Work User 81%

Fig. 7. (a) Write recipe page. (b) Search recipe page (c)
Timeline Page 4 Find Recipe Work User 80%
 Regardless of the imperfection of this
application, the core features offered can still run
well. This is evidenced by the survey results that
show about 90% of users agree if the application is
released globally.

REFERENCES

[1] a. Kirkness, “Review: Cambridge

Advanced Learner’s Dictionary,” ELT J.,
vol. 58, no. 3, pp. 294–300, 2004.
Fig. 9. User reaction of recepiece released globally [2] H. Park, E. Kwon, E. Jung, S. Byon, H.
Lee, and Y. Lee, “Multi-Log Analysis
Platform for Supporting Public Safety
Service ‫ٻ‬,” pp. 1137–1139, 2017.
[3] N. Lageman, M. Lindsey, and W. Glodek,
“Detecting malicious Android applications
from runtime behavior,” Proc. - IEEE Mil.
Commun. Conf. MILCOM, vol. 2015–
Decem, pp. 324–329, 2015.
[4] F. Utaminingrum et al., “Development of
computer vision based obstacle detection
and human tracking on smart wheelchair
Fig. 10. User reaction of the application beneficial for disabled patient,” 5th Int. Symp.
Comput. Bus. Intell. ISCBI 2017, pp. 1–5,
register, Timeline view, write the recipe and find 2017.
recipes.
[5] R. A. Zulfikar and A. A. Supianto,
B. Nonfunctional analysis “Rancang Bangun Aplikasi Antrian
Poliklinik Berbasis Mobile,” J. Teknol. Inf.
Nonfunctional analysis contains about the dan Ilmu Komput., vol. 5, no. 3, p. 361,
application analysis of the user's interest level, in 2018.
this section will explain how the application is
tested in such a way and get the user's assessment [6] P. Abrahamsson, O. Salo, J. Ronkainen,
of the appropriateness and condition of the and J. Warsta, “Agile software
application. in this test the user is required to try to development methods: Review and
run this application by installing and running it for analysis,” Espoo, Finl. Tech. Res. Cent.
Finland, VTT Publ., p. 478, 2002.
several days, after which the user is asked to
provide their judgment regarding the feasibility of [7] H. Abdi, “Distance,” Encycl. Meas. Stat.,
this application to be used and released to the 2007.
market. User survey result are shown in Fig. 9 and
Fig. 10.

IV. CONCLUSION

Recepiece application is an application that

moves in the search field, more specifically this
application has a function to find recipes online
with the basis of similarity of materials owned by
the user. With this application users can find
recipes with ingredients that match what is owned
by the user.

From various surveys and series of tests

performed related to the functional Recepiece
application, it can be concluded that this
application is able to be accepted by the user well.

View publication stats