ionic Örnek Uygulama

  1. mtncaliskan
    4
    25
    16.03.2020 12:04:00

    Türkçe kaynak bulmadığımdan, ionic ile örnek bir uygulama yapımı için sizden yardım istiyorum, ilk uygulamamızı nasıl geliştirip çalıştırabiliriz ionic ile ? Neler kurmalıyız bilgisayarımıza, node.js ile vs code var şu an bilgisayarımda.

    ionic angular typescript 4 ay önce 444 Görüntüleme

( 1 ) Cevap

  1. mfatih
    3
    4683
    16.03.2020 14:51:00

    Ionic Örnek Uygulama yı ben Angular ile yapacağım.

    Gerekli kurulumlar ;

    1) node.js
    https://nodejs.org/en/

    2) android studio

    https://developer.android.com/studio

    Aslında android studio yu, ionic uygulamasını emulatorde çalıştırmak için kullanacağız, siz sadece tarayıcıda çalıştıracaksanız Android studioya gerek yok

    3) Vs Code

    https://code.visualstudio.com/

    kodlamayı ben Vs code da yapacağım, içerisinde bulunan terminal sayesinde de gerekli komutları çalıştırabileceğiz.

    Ionic Kurulumu Ve İlk Projeyi Oluşturma

    Önceden kurmuş olduğumuz Visual Studio Code idesini başlatıyoruz.

    Terminal-> New Terminal menüsünden bir terminal açıyoruz. Ve şu komutu yazıyoruz. Ionic kurulumu için;

    npm install -g @ionic/cli native-run cordova-res
    

    Kurulum bitince ilk projemizi oluşturuyoruz

    ionic start replyfeed-resim-cek tabs --type=angular --capacitor
    

    Not; Ben cd komutuyla E diskimin altında ionicdenemeler klasöründe ilk uygulamamı oluşturdum

    Bundan sonraki komutları, ilk örneğimiz içinden çalıştıracağımız için, yeni oluşan alt klasörümüzün içine giriyoruz

    cd .\replyfeed-resim-cek\
    

    Ardından aşağıdaki komutu çalıştırıyoruz. Bu kod sayesinde pwa elementlerini dahil ediyoruz projemize, Kamera API'sı da dahil olmak üzere bazı Kapasitör eklentileri web tabanlı işlevsellik ve kullanıcı arayüzü vb.

    npm install @ionic/pwa-elements
    

    Ardından Visual Studio code -> File -> Open Folder menüsünden replyfeed-resim-cek uygulamamızın kodlarını açıyoruz.

    src/main.ts ye şu kodları ekliyoruz.

    import { defineCustomElements } from '@ionic/pwa-elements/loader';
    
    defineCustomElements(window);
    

    main.ts son hali şu şekilde olacak.

    import { enableProdMode } from '@angular/core';
    import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
    
    import { AppModule } from './app/app.module';
    import { environment } from './environments/environment';
    import { defineCustomElements } from '@ionic/pwa-elements/loader';
    
    defineCustomElements(window);
    
    if (environment.production) {
      enableProdMode();
    }
    
    platformBrowserDynamic().bootstrapModule(AppModule) .catch(err => console.log(err));
    

    İlk Uygulamamızı Web Browser da Açma/Çalıştırma

    İlk uygulamamız default olarak 3 tane tab olan ve tablar arasında gezinmemezi sağlayan bir arayüzle geliyor. Gelin şimdi bunu web tarayıcısında çalıştıralım. Terminale şu komutu yazıyoruz.

    ionic serve
    

    Bu komut sonrası ilk örneğimiz tarayıcıda açılacaktır.

    Resim Çeken Mobil ve Web Uygulaması Geliştirme

    Ionic projelerimizi şu platformlarda çalıştırabiliriz.

    Web Browser
    Android
    Ios
    

    Web Browser da nasıl çalıştırdığımızı gördük. Burdan sonra uygulamamızı biraz geliştirip birde Android de çalıştıralım.

    Şimdi ilk uygulamamızı biraz geliştirelim ve kameradan resim çekebilir hale getirelim, sonra da Android Studio da Emulatorde deneyelim, çalıştıralım.

    src/app/tabs altındaki tabs.page.html sayfasını bu şekilde düzenleyelim

    <ion-tab-bar slot="bottom">
      <ion-tab-button tab="tab1">
        <ion-icon name="triangle"></ion-icon>
        <ion-label>Tab 1</ion-label>
      </ion-tab-button>
    
      <ion-tab-button tab="tab2">
        <ion-icon name="images"></ion-icon>
        <ion-label>Resim Çek</ion-label>
      </ion-tab-button>
    
      <ion-tab-button tab="tab3">
        <ion-icon name="square"></ion-icon>
        <ion-label>Tab 3</ion-label>
      </ion-tab-button>
    </ion-tab-bar>
    

    Ardından projemize cameradan resim çekme işlemini yapacak servisimizi oluşturalım

    ionic g service services/photo
    

    Yukarıdaki komutumuzla services altında photo.service.ts olarak oluşan typscript dosyamızın içerisini şu şekilde yazalım.

    //resim çekme işlemini yapacağımız servis
    import { Injectable } from '@angular/core';
    import {
      Plugins, CameraResultType, Capacitor, FilesystemDirectory,
      CameraPhoto, CameraSource
    } from '@capacitor/core';
    
    const { Camera, Filesystem, Storage } = Plugins;
    
    @Injectable({
      providedIn: 'root'
    })
    export class PhotoService {
    
      constructor() { }
    
    //bu metodu ui da resim çekme için kullanacağız
      public async addNewToGallery() {
        // resim çekme
        const capturedPhoto = await Camera.getPhoto({
          resultType: CameraResultType.Uri,
          source: CameraSource.Camera,
          quality: 100
        });
      }
    
    }
    

    Servisimiz hazır, şimdi tab2 de bu servisi kullanacağız,

    src/app/tab2 de, typescript dosyasında şu geliştirmeleri yapıyoruz.

    resim çekme servisimizi enjekte ediyoruz.

    tab2.page.ts

    import { Component } from '@angular/core';
    import { PhotoService } from '../services/photo.service';
    
    @Component({
      selector: 'app-tab2',
      templateUrl: 'tab2.page.html',
      styleUrls: ['tab2.page.scss']
    })
    export class Tab2Page {
    
      constructor(public photoService: PhotoService) { }
    
    }
    

    html tarafımızda şu şekilde olacak.

    tab2.page.html

    <ion-title>replyfeed resim çekme uygulaması</ion-title>
    <ion-content>
      <ion-fab vertical="bottom" horizontal="center" slot="fixed">
        <ion-fab-button (click)="photoService.addNewToGallery()">
          <ion-icon name="camera"></ion-icon>
        </ion-fab-button>
      </ion-fab>
    </ion-content>
    

    Bura da geliştirmemiz tamamlanıyor. Bilgisayarınızda camera varsa resim çekme uygulamasını tarayıcıda çalıştırabilirsiniz.

    ionic serve
    

    Projeyi Mobil de Android de Çalıştırma

    Uygulamamızı şimdi Android Studio da Emulator üzerinde çalıştıralım.

    Terminalden şu komut ile projemizi build ediyoruz.

    ionic build
    

    ardından şu komutu çalıştırıyoruz

    ionic cap add android
    

    Not IOS için şu komut ionic cap add ios

    Ardından şu komut

    ionic cap copy
    

    Ardından şu komut

    ionic cap sync
    

    Son olarak Android studioda Emulatörde çalışmak için

    ionic cap open android
    

    komutunu çalıştırıyoruz.

    Burdan sonra işimiz Android Studio tarafında.

    Android studio da şu tarz bir hata alabilir siniz.

      • Exception is: org.gradle.api.GradleScriptException: A problem occurred evaluating project ':app'. Caused by: org.gradle.internal.metaobject.AbstractDynamicObject$CustomMessageMissingMethodException: Could not find method testImplementation() for arguments

    Çözüm için belirttiği dosyaları açıp TestImplementation kodlarını sileceğiz.

    örneğin bulduğunuz şu şekilde kodları yorum satırı yapınız

    dependencies {
        implementation fileTree(include: ['*.jar'], dir: 'libs')
        implementation 'com.android.support:appcompat-v7:28.0.0'
        implementation project(':capacitor-android')
        testImplementation 'junit:junit:4.12'
        androidTestImplementation 'com.android.support.test:runner:1.0.2'
        androidTestImplementation 'com.android.support.test.espresso:espresso-core:3.0.2'
        implementation project(':capacitor-cordova-android-plugins')
    }
    

    şu şekilde düzeltiniz

     dependencies {
        implementation fileTree(include: ['*.jar'], dir: 'libs')
        implementation 'com.android.support:appcompat-v7:28.0.0'
        implementation project(':capacitor-android')
        //testImplementation 'junit:junit:4.12'
        //androidTestImplementation 'com.android.support.test:runner:1.0.2'
        //androidTestImplementation 'com.android.support.test.espresso:espresso-core:3.0.2'
        implementation project(':capacitor-cordova-android-plugins')
    }
    

    Ve ardından ilgili sayfada sağ üstte Sync Now çıkacaktır, ona tıklayınız.

    Bu işlemlerden sonra projeniz, Emulatörde kullanacağınız, device, android sürümünü vb yi önceden ayarladıysanız, Android Studio da Run edilebilir hale gelecektir.

    Android Studio da Run tuşuna basıyoruz ve ilk uygulamamız Emulatörde açılıyor.

    ionic ornek uygulama first example

    Uygulamaya tıklayınca ;

    ionic_ornek_kamera_resim_cekme

Cevabınız