Mobile Application Development

FaCiPa Series – 3

FaCiPa Series 2 I wanted to write the mobile application side, which is the last series of my articles because I got very nice returns leftover from my article. It’s an amazing feeling to be able to talk to you today about the project I’ve been developing for a year! In this article, we will talk with you about FaCiPa’s mobile interface.
Since the project included Python programming language and API-side encodings, different options such as kiwi or Ionic were available as a platform. Other articles I have written for Ionic can be found at the links below. In these links, you can briefly get information about What is Ionic, The working structure of the Ionic project, and its use with the Semantic UI. In addition, since TypeScript is written with a code structure, you can also review the article I wrote about it. Below are the most common explanations about the Ionic Framework:

👉 This open source library is built on Cordova.
👉 It is a library that allows even Web developers to develop mobile applications.

Mobile Application Design
First, we start by creating a new project on the Ionic Framework, the mobile platform for FaCiPa.

Then we create a page with the ionic generate command.
Generate Page
Ionic Page
In the application, there is a home page, registration page, and analysis page to start with, so 4 pages should be created together with the home page in total.
All files


The framework that will be used in FaCiPa’ s mobile interface has been selected as Ionic. More use of mobile devices than computers, the increase of mobile applications, the diversity of mobile devices, and the presence of different operating systems have led software developers to find different mobile solutions. In addition to native application development, it has become an important need to create an application structure that can also be run on any platform over time, and hybrid applications that can be developed with the support of languages such as HTML5 and JavaScript have emerged [1].
Ionic Framework, especially Angular.js, the first choice of programmers with JS or Angular 2 experience is usually Ionic. Open source, Ionic is home to thousands of mobile apps with thousands of followers and supporters. The Ionic Framework, which in its own words has “first-class” documentation, is a convenient and easy-to-learn library.
🏗 The Ionic Framework is built on Cordova. Cordova provides access to the hardware and system resources of the mobile device. You can run it on mobile operating systems such as Android, IOS, or Windows Phone. You can even publish this app as a mobile-compatible website in a convenient way. HTML, JavaScript, and Angular are basically the basis for developing applications with Ionic. knowing js will be enough. Visual Studio Cide platform was used as a platform in the project. The designs of the application are src\pages\home\home.html like .HTML files with the HTML extension are laid out with HTML5. The necessary CSS designs are src\pages\home\home.scss like .scss files it was done in files with the SCSS Extension [1].
📷 The photos that will be used in the project are determined to be taken from the user in the first step and then reduced to 1 photo in order to not tire the user and reduce the processing load of the machine. The user receives the app from Mobile stores and instantly takes photos and sends this photo to the server for processing.
🛡 The backend section of the application is src\pages\home\ ts .files with the TS extension are made in TypeScript.
Upload Camera


A warning appears above the content of the application and must be manually removed by the user so that they can continue to interact with the application. In the application, an ion-alert warning is given for the user to take the correct photo.
🔎 Title: Title of the warning box
🔎 Subtitle: Warning text
🔎 Buttons: The button used to remove the warning if the OK button is clicked, the photoOne() method is executed and the photo is taken.
Ionic Alert


The Ionic camera plug-in is a necessary plug-in for taking photos or videos from mobile devices. Cordova plugin requires: cordova-plugin-camera
🔎 Quality
🔎 destinationType: Destination Type
🔎 encodingType: Coding Types
🔎 media Type: Media Type (Picture)
Install Camera
Install Cam


Wireframe Templates
As content, you can design your application’s pages completely freely. The wireframe drawing you saw above was a drawing designed when the project first started. Then we created the designs of the project. I have to say as a footnote that, unfortunately, our product does not support English, so I have to share it in Turkish.
The visuals I have given above are the analysis page of the project and the feedback on the analysis result. Thus, we have come to the end of FaCiPa. Thank you for following it patiently. Stay healthy ✨


  2. R. L. Delinger, J. M. VanSwearingen, J. F. Cohn, K. L. Schmidt, “Puckering and Blowing Facial Expressions in People With Facial Movement Disorders,” J. Phys Ther, vol. 88, pp. 909-915, August 2008.
  3. The Spreading of Internet and Mobile Technologies: Opportunities and Limitations, Hasan GULER, Yunis SAHİNKAYASİ, Hamide SAHİNKAYASİ. Journal of Social Sciences Volume 7 Issue 14 December 2017, 03.10.2017-27.10.2017.