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. https://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