melikeoguz/Soru-Havuzu

Mobil Programlama Final Projesi

Mobil Programlama Projesi

---

Melike Oğuz -170201028

Soru Havuzu uygulaması sınava hazırlanan öğrencilere yönelik bir uygulamadır. Öğrenciler, bu uygulama sayesinde kendilerini test edebilir ve yanlış çözdüğü soruları görebilmektedir. Çözülen sorular sonucunda öğrenciler belli bir puan kazanmaktadır. Bu uygulamadaki amaç, öğrencilerin hazırladığı sınava karşı pratik yapmalarıdır.

Proje içinde yer alan sınav türleri şunlardır:

👉 YKS (AYT /TYT)
👉 LGS
👉 KPSS
👉 ALES

Kurulum İşlemleri

Bu projemizin altyapısında Ionic, Angular, Typescript kullanılmaktadır. Projenin temel yapısını oluşturmak için gerekli aşamalar aşağıdaki gibidir:

• NodeJs indirme
• Angular Kurulumuve Proje Oluşturma
• Ionic Kurulumu ve Proje Oluşturma
• Typescript Kurulumu
• Database Bağlantıları

1- NodeJs İndirme

Bu projeyi gerçekleştirebilmeniz için öncelikle NodeJs'i indirmeniz gerekmektedir. Çünkü projemizin alt yapısında angular, ionic ve typescript kullanılıyor. Bu sistemlerin çalışabilmesi için buraya tıklayarak NodeJs'i bilgisayarınıza indirin.

Kullandığınız sisteme bağlı olarak linux ya da windows için gerekli projeleri indirin. Bu işlem tamamlandıktan sonra aşağıda yapmanız gereken adımlar şunlardır:

• Terminal ekranından gereken komutları yazabilmeniz için ortam değişkenlerine kullanacağınız sistemin pathini yazmalısınız.
• Bunun için indirdiğiniz NodeJs klasörünün içinde bulunan node_modules klasörünün içindeki npm dosyasının pathini eklemelisiniz.
• Böylelikle ionic, angular ya da gerekli komutları sorunsuz çalıştıracaktır.
• npm install yazarak gerekli kurulumların yapılmasını sağlayın.

Bu projede kullanılan path aşağıdaki gibidir.

	D:\node-v14.15.4-win-x64\node-v14.15.4-win-x64\node_modules\npm;

2- Angular Kurulumu

Projemizi oluşturmak için öncelikle derslerde de kullandığımız gibi genel bir dosya (lecture-mobil-gece) oluşturalım.

Daha sonra cmd ile lecture-mobil-gece dizinine geldikten sonra npm install -g @angular/cli metodunu çalıştıralım. Artık bir angular projesi oluşturabilmek için gerekli modüller sisteminize yüklenmiştir.

Bu adımdan sonra yapılması gereken tek işlem angular projesi oluşturmaktır. Hemen ng new angular-kickstart yazıp projemizi oluşturalım.

Soru Havuzu uygulamasında ionic projesi kullanıldığı için bundan sonra
yapılması gereken işlemleri yapmanıza gerek yoktur.

3- Ionic Kurulumu

Projemiz Ionic'in son sürümü ile yazılmıştır. Bu yüzden gerekli ionic altyapılarının yüklenmesi gerekmektedir. Bunun için npm install -g @ionic/cli kodunu çalıştırıp daha sonra bir adet ionic projesi oluşturmalısınız.

Yeni bir proje oluşturmak için ionic start yazıp kendi projenizin adını yazmalısınız. Bu proje için ionic start ionic-try blank yazılmıştır. Blank yerine sidemenu diyerek de proje oluşturabilirsiniz.

4- Typescript Kurulumu

Ionic tabanlı bir proje geliştiriyorsanız eğer dil olarak typescript formatında projenizi geliştirmeniz gerekmektedir. Typescript kurulumu için npm install -g typescript komutunu yazmanız yeterlidir.

Aşağıdaki görsele bakarak kurulumları görebilirsiniz. 👇

5- Database Bağlantıları

Projeyi oluştururken sqllite kullanarak yapmaya çalıştım ama karşılaştığım hatalardan ötürü projemde ilerleyemedim. Bu sebeplerden ötürü başka bir çözüm yöntemi olarak mySql ile database bağlantılarını gerçekleştirdim.

Database işlemlerini gerçekleştirimek için depolama yapacağımız için storage service yapısını kullandım. Bunun çalışması için öncelikle projenize storage için kullanılacak olan ayarlanmaların yapılması gerekmektedir. npm install @ionic/storage --save kodunu terminalden çalıştırmalısınız. Ayrıca typescript ile yazılmış (.ts uzantılı) modül sayfanıza sayfanızın başına import { Storage } from '@ionic/storage'; ekleyip, constructor kısmına private storage: Storage daha sonra Bu işlem tamamlandıktan sonra kayıt olma, uygulamaya giriş yapma işlemlerine başlayabiliriz.

Database işlemleri için xampp control panelini kullanarak mysql ve apache servislerini başlattım. Daha sonra veritabanı ile bağlantının sağlanması için config.php ile veritabanına bağlanmak için gerekli hostname, host gibi bilgilerin içinde bulunduğu sistem oluşturdum.

Ionic tarafında bir modül ekleyebilmek için ng generate page ....(component_adi) yazarsanız istediğiniz modül projenize eklenecektir. Ben bunun için bir pages componenti oluşturdum. Daha sonra bunun içine;

• login
• home
• registration
• crud

adında modüller ekledim.Aşağıdaki görsele bakarak page oluşturma işlemini görebilirsiniz.

---

Bu modüllerin içinde giriş ekranı kodları ve kayıt olma işlemi ekranının ionic yapısı ve css kodları bulunmaktadır. Bu kodlar dışında bir yere tıkladığında uygulamanın başka sayfa gitmesi için navigate kullanılmaktadır. this.router.navigate(['/anasayfa']); komutu ile yönlendirmelerinizi yapabilirsiniz.

Kısacası iki dil arasında bağlantının sağlanması için bir api yazdım ve böylelikle iki servis birbiri arasında iletişim sağlayabildi. Yapılan tüm işlemlerin sonucunu aşağıdaki gifi izleyerek görebilirsiniz.

Login işlemlerinin kontrollü bir şekilde gerçekleştirilip gerçekleştirilmediğini anlamak için sonucu döndüren bir liste için sayfa oluşturup içerisine düzenleme ve silme yetkileri verdim.

6- Kullanılan Özellikler

Uygulamamızın için form modülü de eklenmesi gerektiğinden ötürü heroes modülünün içine kullanıların, uygulama hakkında görüşlerini bildirecekleri kısım ekledim. Bu işlemi;

    import { NgModule } from '@angular/core';
    import { CommonModule } from '@angular/common';
    import { FormsModule } from '@angular/forms';

    import { IonicModule } from '@ionic/angular';

    import { HeroesPageRoutingModule } from './heroes-routing.module';

    import { HeroesPage } from './heroes.page';

    @NgModule({
      imports: [
        CommonModule,
        FormsModule,
        IonicModule,
        HeroesPageRoutingModule
      ],
      declarations: [HeroesPage]
    })
    export class HeroesPageModule {}

---

<ion-header>
  <ion-toolbar>
    <ion-title>heroes</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>

<h2><code>Sayfa Yöneticisi: {{hero.name | uppercase}}</code></h2>
<div>

<label>Uygulamamız Hakkında Düşünceleriniz:
  <input [(ngModul)]="hero.name" placeholder="Mesajınızı Yazınız.."/>
</label>
</div>
<br/>

</ion-content>

yazarak gerçekleştirdim.

Pipe kullanımı için ise {{hero.name | uppercase}} gibi sınav türlerine özel sayfalar açıldığında başlıkların hepsi bu formatta ekrana basılmaktadır.

Projemde kullanılan UI Componentleri;
• Alert Button
• Action Sheet
• Date & Time Pickers
• List
• Input
• Progress Indicators
• Routing
• Select
• Toast Segment

Ayrıca içinde geçmiş soru çözümlerinin kayıtlarını tutup, ilgili sınavın birincisini göstermektedir. Projeyi çalıştırmak için Ionic serve -l yazmanız yeterlidir.

Karşılaştığım Sorunlar

1- Ionic Bach Sorunu

2- Ionic Bach Sorunu Çözümü

3- Ng Has Unexpectedly Closed

Bu sorunu çözebilmek için yeniden bir proje oluşturup eski kaynak kodlarını içerisine yükledim.

4- Database'i Bağlarken Karşılaşılan Sorun

<npm i rxjs-compat komutunu eğer çalıştırmazsanız veritabanı ile iletişim kurulamamaktadır.

5- Router Hatası

6- Router Hatası Çözümü

Projenin Son Hali

Projemi aşağıdaki gifi izleyerek görüntüleyebilirsiniz.