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

FACIPA MOBILE INTERFACE

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\home.like ts .files with the TS extension are made in TypeScript.
Upload Camera

IONIC ALERT (ION-ALERT) PLUGIN

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

IONIC CAMERA PLUGIN

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

FIRST DRAFT DRAWINGS OF THE PROJECT

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.
Facipa
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 ✨

REFERENCES

  1. http://devnot.com/2016/hibrit-uygulama-catisi-ionic-i-taniyalim/
  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.
Mobile Application Development

FaCiPa Serisi 3

FaCiPa Serisi 2 adlı yazımdan geriye kalan çok güzel dönütler elde ettiğim için yazılarımın son serisi olan mobil uygulama tarafını kaleme almak istedim. Bir sene boyunca geliştirdiğim projeyi bugün sizler ile konuşabiliyor olmak inanılmaz bir his! Bu yazıda sizler ile birlikte FaCiPa’ nın mobil arayüzü hakkında konuşacağız.
Projede Python programlama dili ve API taraflı kodlamalar yer aldığı için platform olarak Kiwi veya Ionic gibi farklı seçenekler mevcuttu. Ionic için yazdığım diğer yazılarıma aşağıdaki linklerden ulaşabilirsiniz. Bu bağlantılarda Ionic Nedir?, Ionic Proje Çalışma Yapısı ve Semantic UI ile kullanımı hakkında kısaca bilgiler edinebilirsiniz. Bunun yanı sıra TypeScript kod yapısı ile yazıldığı için bunun ile ilgili yazdığım yazımı da incelemeniz mümkün. Aşağıda Ionic Framework hakkında en sık karşılaştığımız açıklamalara yer vermiş bulunmaktayım:

👉 Açık kaynak kodlu olan bu kütüphane, Cordova üzerine inşa edilmiştir.

👉 Web geliştiricisi olanların bile mobil uygulama geliştirmesine olanak sağlayan bir kütüphanedir.

Mobile Application Design
İlk olarak işe FaCiPa için mobil platformu olan Ionic Framework üzerinde yeni bir proje oluşturmakla başlıyoruz.
Ionic Start
Daha sonra ionic generate komutu ile sayfa (page) oluşturuyoruz.
Generate Page
Ionic Page
Uygulamada başlangıç için giriş sayfası, kayıt ol sayfası ve analiz sayfası olması sebebiyke toplamda ana sayfa ile birlikte 4 adet sayfa oluşturulması gerekmektedir.
All files

FACIPA MOBİL ARAYÜZÜ

FaCiPa’ nın mobil arayüzünde kullanılacak olan framework Ionic olarak seçilmiştir. Mobil cihazların bilgisayarlardan daha fazla kullanılması, mobil uygulamaların artması, mobil cihazların çeşitliliği ve farklı işletim sistemlerinin bulunması yazılım geliştiricileri farklı mobil çözümler bulmaya yönlendirdi. Native uygulama geliştirmenin yanında zamanla her platformda da çalıştırılabilen bir uygulama yapısı kurmak önemli bir ihtiyaç haline geldi ve HTML5 ile JavaScript gibi dillerin desteğiyle geliştirilebilen hibrit uygulamalar ortaya çıktı [1].
Ionic Framework, bilhassa Angular.js veya Angular 2 deneyimi olan yazılımcıların ilk tercihi genellikle Ionic olmaktadır. Açık kaynak olan Ionic, binlerce takipçisi ve destekçisi ile binlerce mobil uygulamaya ev sahipliği yapmaktadır. Kendi ifadeleriyle “first-class” bir dokümantasyona sahip olan Ionic Framework kullanışlı ve öğrenmesi kolay kütüphanedir.

🏗Ionic Framework, Cordova üzerine inşa edilmiştir. Mobil cihazın donanımına ve sistem kaynaklarına erişim gibi işlemler Cordova sayesinde yapılmaktadır. Android, IOS veya Windows Phone gibi mobil işletim sistemlerinde çalıştırabilirsiniz. Hatta bu uygulamayı rahat şekilde mobil uyumlu bir web sitesi olarak da yayınlayabilirsiniz. Ionic ile uygulama geliştirebilmek için temel olarak HTMLJavaScript ve Angular.js bilmek yeterli olacaktır. Projede platform olarak Visual Studio Cide platformu kullanılmıştır. Uygulamanın tasarımları src\pages\home\home.html gibi .html uzantılı dosyalarda HTML5 ile ortaya konulmuştur. Gerekli CSS tasarımları ise  src\pages\home\home.scss gibi .scss uzantılı dosyalarda yapıldı [1].

📷Projede kullanılacak olan fotoğraflar ilk adımda kullanıcıdan 3 adet alınacak olarak belirlenmiş olup daha sonra kullanıcıyı yormamak ve makinenin işlem yükünü azaltmak adına 1 adet fotoğrafa indirgenmiştir. Kullanıcı uygulamayı mobil mağazalardan temin ederek anlık olarak fotoğraf çekmekte ve bu fotoğrafı sunucuya işlenmek üzere göndermektedir.
🛡Uygulamanın Backend bölümü ise src\pages\home\home.ts gibi .ts uzantılı dosyalarda TypeScript dilinde yapılmıştır.
Upload Camera

IONIC UYARI(ION-ALERT) EKLENTİSİ

Uygulamanın içeriğinin üstünde bir uyarı belirir ve uygulama ile etkileşime devam edebilmeleri için kullanıcı tarafından manuel olarak kaldırılması gerekir.  Uygulamada kullanıcının doğru şekilde fotoğrafı çekmesi için ion-alert ile uyarı veriliyor.
🔎 Title: Uyarı kutucuğunun başlığı
🔎 Subtitle: Uyarı metni
🔎 Butons: Uyarının kalkması için kullanılan buton eğer Tamam butonuna tıklanırsa photoOne() metodu çalıştırılıyor ve fotoğraf çekme işlemi yaptırılıyor.
Ionic Alert

IONIC KAMERA EKLENTİSİ

Ionic kamera eklentisi mobil cihazlardan fotoğraf ya da video çekmek için gerekli bir eklentidir. Cordova eklentisi gerektirir: cordova-plugin-camera
🔎 Quality: Kalite
🔎 destinationType: Hedef Türü
🔎 encodingType: Kodlama Türü
🔎 media Type:Medya Tipi (Picture) olması fotoğraf olduğunu belirtir.
Install Camera
Install Cam

PROJENİN İLK TASLAK ÇİZİMLERİ

Wireframe Templates
İçerik olarak uygulamanızın sayfalarını tamamen özgürce tasarlayabilirsiniz. Yukarıda gördüğünüz wireframe çizimi projeye ilk başlandığında tasarlanan bir çizimdi. Daha sonra projenin tasarımlarını oluşturduk.
Facipa
Yukarıda yer verdiğim görseller projenin analiz sayfası ve analiz sonucundaki dönütlerdir. Böylelikle FaCiPa’nın sonuna gelmiş olduk. Sabırla takip ettiğiniz için teşekkür ederim. Sağlıcakla kalın ✨
 

REFERANSLAR

  1. http://devnot.com/2016/hibrit-uygulama-catisi-ionic-i-taniyalim/
  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. İnternet Ve Mobil Teknolojilerin Yaygınlaşması: Fırsatlar Ve Sınırlılıklar, Hasan GÜLER, Yunis ŞAHİNKAYASI, Hamide ŞAHİNKAYASI. Sosyal Bilimler Dergisi Cilt 7 Sayı 14 Aralık 2017 Makale Gön. ve Onay Tar.: 03.10.2017-27.10.2017