<\/div>\n

Merhaba,<\/p>\n

Bu i\u00e7eri\u011fimizde Ionic ekibi taraf\u0131ndan geli\u015ftirilmi\u015f olan ve Angular, React, Vue.js vs. gibi web uygulamalar\u0131n\u0131n mobil platformlarda \u00e7al\u0131\u015ft\u0131r\u0131labilmesini sa\u011flayan bir k\u00f6pr\u00fc(bridge) ve runtime \u00e7\u00f6z\u00fcm\u00fc olan Capacitor teknolojisini inceliyor olaca\u011f\u0131z.<\/p>\n

Capacitor Nedir?<\/h3>\n
Capacitor; Angular ve React gibi web tabanl\u0131 uygulamalar\u0131 platforma \u00f6zg\u00fc(native) \u00f6zelliklere eri\u015febilen mobil uygulamalara d\u00f6n\u00fc\u015ft\u00fcrmemizi kolayla\u015ft\u0131ran ve kamera, konum vs. gibi ilgili cihaz\u0131n yerel \u00f6zelliklerinden kolayca eri\u015fim sunarak istifade etmemizi sa\u011flayan ve bunun yan\u0131nda TypeScript deste\u011fi ve esnek eklenti sistemi sayesinde biz geli\u015ftiricilere basit ve h\u0131zl\u0131 deneyimler sa\u011flayan bir k\u00fct\u00fcphanedir.<\/p>\n
Capacitor sayesinde ayn\u0131 kod taban\u0131n\u0131 kullanarak modern web uygulamalar\u0131n\u0131z\u0131n iOS ve Android s\u00fcr\u00fcmlerini zahmetsizce yay\u0131nlayabilir ve b\u00f6ylece platformlar aras\u0131 \u00e7al\u0131\u015fma(cross-platform) ihtiyac\u0131n\u0131 rahatl\u0131kla kar\u015f\u0131layabilirsiniz. Tabi bunu yaparkende bir yandan geli\u015ftirme a\u015famas\u0131nda olan uygulamalar\u0131n\u0131z\u0131n iOS ve Android s\u00fcr\u00fcmlerinin takibini canl\u0131 yeniden y\u00fckleme(live reload) \u00f6zelli\u011fi sayesinde h\u0131zl\u0131ca\u00a0ger\u00e7ekle\u015ftirebilirsiniz.<\/p>\n
Normal \u015fartlarda bir Angular ya da React uygulamas\u0131, yaln\u0131zca taray\u0131c\u0131 API’leriyle\u00a0s\u0131n\u0131rl\u0131 kapsama sahipken, Capacitor sayesinde kamera, dosya sistemi, bildirimler vs. gibi cihaza\/platforma \u00f6zg\u00fc API’leri de kullan\u0131labilmesine imkan tan\u0131makta\u00a0ve b\u00f6ylece uygulaman\u0131n ger\u00e7ek bir mobil uygulama gibi \u00e7al\u0131\u015fabilmesini sa\u011flamaktad\u0131r.<\/p>\n
K\u0131saca Capacitor; geli\u015ftirilen modern web uygulamalar\u0131n\u0131n ger\u00e7ek bir mobil uygulamas\u0131na d\u00f6n\u00fc\u015ft\u00fcr\u00fclmesini ve bunu yaparkende mobil cihazlar\u0131n \u00f6zelliklerinden etkin bir \u015fekilde istifade edilmesini sa\u011flayan bir k\u00fct\u00fcphanedir.<\/p>\n

Capacitor Nas\u0131l Kullan\u0131l\u0131r?<\/h3>\n

Bir Angular uygulamas\u0131nda Capacitor’\u00fc\u00a0kullanabilmek i\u00e7in \u00f6ncelikle kurulumunun ger\u00e7ekle\u015ftirilmesi gerekmektedir. Bunun i\u00e7in npm i @capacitor\/core<\/code> ve npm i -D @capacitor\/cli<\/code> dependency’lerinin y\u00fcklenmesi ve ard\u0131ndan npx cap init<\/code> talimat\u0131 e\u015fli\u011finde Capasitor’\u00fcn ba\u015flat\u0131lmas\u0131 gerekmektedir. Tabi bu sonuncu i\u015flemi ger\u00e7ekle\u015ftirirken cli taraf\u0131ndan a\u015fa\u011f\u0131daki g\u00f6rselde oldu\u011fu gibi birka\u00e7 soruyla kar\u015f\u0131la\u015f\u0131lacakt\u0131r;<\/a>G\u00f6r\u00fcld\u00fc\u011f\u00fc \u00fczere Name<\/em> ve Package ID<\/em> bilgileri istenilmektedir. Name<\/em>, uygulaman\u0131n g\u00f6r\u00fcn\u00fcr ad\u0131 olarak d\u00fc\u015f\u00fcn\u00fclebilir. Misal olarak uygulaman\u0131z\u0131 Google Play yahut App Store gibi bir ma\u011fazada yay\u0131nlayacaksan\u0131z kullan\u0131c\u0131lar\u0131n g\u00f6rece\u011fi isme kar\u015f\u0131l\u0131k gelmektedir. Package ID<\/em> ise uygulaman\u0131n Android ve iOS platformlar\u0131nda e\u015fsiz bir \u015fekilde tan\u0131mlanmas\u0131 i\u00e7in kullan\u0131lan bir kimliktir. Burada dikkat edilmesi gereken nokta; Package ID<\/em> de\u011ferinin genellikle Java paket ismine benzer bir formatta yani ters domain ad\u0131 format\u0131nda yaz\u0131l\u0131yor olmas\u0131d\u0131r. (bknz: com.\u015firketadi.projeadi<\/code> gibi…)<\/span> Velhas\u0131l bizlerin uygun bir \u015fekilde bu de\u011ferleri vermemiz gerekmektedir.<\/p>\n

<\/a>E\u011fer ki Capasitor aya\u011fa kald\u0131r\u0131ld\u0131ysa uygulaman\u0131n ana dizininde i\u00e7eri\u011fi a\u015fa\u011f\u0131daki gibi olan capacitor.config.ts<\/em> isminde bir temel yap\u0131land\u0131rma dosyas\u0131 olu\u015fturulacakt\u0131r.<\/p>\n

\n\r\nimport type { CapacitorConfig } from '@capacitor\/cli';\r\n\r\nconst config: CapacitorConfig = {\r\n  appId: 'com.ngsoft.capacitorexample',\r\n  appName: 'capacitor-example',\r\n  webDir: 'dist'\r\n};\r\n\r\nexport default config;\r\n<\/pre>\n<\/div>\nG\u00f6r\u00fcld\u00fc\u011f\u00fc \u00fczere dosyan\u0131n i\u00e7erisinde biraz \u00f6nce girilen bilgiler tutulmakta ve bir yandan da platform ba\u011f\u0131ml\u0131l\u0131klar\u0131 tan\u0131mlanmaktad\u0131r.<\/p>\nEvet, bu a\u015famadan sonra art\u0131k uygulaman\u0131n Android ve iOS s\u00fcr\u00fcmlerini olu\u015fturabiliriz. Bunun i\u00e7in \u00f6ncelikle npm i @capacitor\/android @capacitor\/ios<\/code> talimat\u0131 e\u015fli\u011finde ilgili platformlar\u0131n y\u00fcklenmesi gerekmektedir. Platformlar y\u00fcklenip, dependency’leri package.json<\/em> dosyas\u0131na eklendikten sonra uygulaman\u0131n Android ve iOS projelerini olu\u015fturmak i\u00e7in npx cap add android<\/code> ve npx cap add ios<\/code> talimatlar\u0131n\u0131n \u00e7al\u0131\u015ft\u0131r\u0131lmas\u0131 gerekmektedir. Tabi bu talimatlar\u0131 \u00e7al\u0131\u015ft\u0131rmadan \u00f6nce uygulaman\u0131n ng build --configuration production<\/code> talimat\u0131 e\u015fli\u011finde derlenmesi gerekmektedir. \u00c7\u00fcnk\u00fc Capacitor, uygulaman\u0131n derlenmi\u015f halini kullanmaktad\u0131r.<\/a>Derleme neticesinde uygulaman\u0131n ana dizininde dist\/<\/code> klas\u00f6r\u00fc i\u00e7erisinde \u00e7\u0131kt\u0131n\u0131n hali haz\u0131rda sunuldu\u011funu g\u00f6receksiniz. Burada yukar\u0131daki g\u00f6rselden de dikkat ederseniz uygulaman\u0131n \u00e7\u0131kt\u0131s\u0131 dist\\capacitor-example\\browser<\/code> dizinine at\u0131lmaktad\u0131r. Ee haliyle biraz \u00f6nce olu\u015fturdu\u011fumuz capacitor.config.ts<\/em> dosyas\u0131ndaki webDir<\/code> alan\u0131n\u0131 buna g\u00f6re g\u00fcncellememiz gerekmektedir ki uygulaman\u0131n Android s\u00fcr\u00fcm\u00fc de do\u011fru kaynaktan beslenebilsin…<\/p>\n
\n\r\nimport type { CapacitorConfig } from '@capacitor\/cli';\r\n\r\nconst config: CapacitorConfig = {\r\n  appId: 'com.ngsoft.capacitorexample',\r\n  appName: 'capacitor-example',\r\n  webDir: 'dist\/capacitor-example\/browser'\r\n};\r\n\r\nexport default config;\r\n<\/pre>\n<\/div>\nEvet, art\u0131k uygulaman\u0131n Android ve iOS projelerinin olu\u015fturulmas\u0131 i\u00e7in yukar\u0131da bahsi ge\u00e7en gerekli talimat\u0131 verebiliriz;<\/a>Bu talimatlar neticesinde uygulaman\u0131n root dizininde ios\/<\/code> ve android\/<\/code> klas\u00f6rlerinin olu\u015fturuldu\u011fu g\u00f6r\u00fclecektir.<\/a><\/p>\n
iOS platformu i\u00e7in macOS bir cihaza ve Xcode’a ihtiya\u00e7 oldu\u011funu unutmay\u0131n\u0131z! Android platform i\u00e7in ise Windows, macOS yahut Linux i\u015fletim sistemlerinde g\u00f6n\u00fcl rahatl\u0131\u011f\u0131yla \u00e7al\u0131\u015fabilir, Android Studio IDE’si e\u015fli\u011finde de geli\u015ftirmelerinizi takip edebilirsiniz.<\/em><\/p><\/blockquote>\n
Bizler malumunuz Windows ortam\u0131nda \u00e7al\u0131\u015fma sergiledi\u011fimiz i\u00e7in ee haliyle Android s\u00fcr\u00fcm\u00fc \u00fczerine odakl\u0131 bir \u015fekilde i\u00e7eri\u011fimize devam ediyor olaca\u011f\u0131z. \u015eimdi, yapt\u0131\u011f\u0131m\u0131z bunca \u00e7al\u0131\u015fma neticesinde uygulaman\u0131n Android s\u00fcr\u00fcm\u00fcn\u00fc aya\u011fa kald\u0131rmaya \u00e7al\u0131\u015fal\u0131m.  Bu y\u00fczden  npx cap open android<\/code> talimat\u0131 e\u015fli\u011finde uygulaman\u0131n Android s\u00fcr\u00fcm\u00fcn\u00fc Android Studio IDE’sinde a\u00e7al\u0131m.<\/a>Yukar\u0131daki ekran al\u0131nt\u0131s\u0131ndan g\u00f6r\u00fcld\u00fc\u011f\u00fc \u00fczere uygulamam\u0131z\u0131n Android s\u00fcr\u00fcm\u00fc ba\u015far\u0131yla aya\u011fa kald\u0131r\u0131lm\u0131\u015f vaziyettedir.<\/p>\n
Uygulama Kodunun Mobil Projeyle Senkronize Edilmesi<\/h3>\nUygulaman\u0131n mobil versiyonunu olu\u015fturduktan sonra uygulamada meydana gelen yeniliklerin mobil versiyona anl\u0131k olarak yans\u0131t\u0131lmas\u0131 isteniyorsa e\u011fer i\u015fte burada uygulama kodu ile mobil versiyon aras\u0131nda bir senkronizasyon i\u015flemi yap\u0131lmas\u0131 gerekmektedir. Bunun i\u00e7in uygulamada de\u011fi\u015fiklikler yap\u0131ld\u0131ktan sonra \u00f6nce ng build<\/code> ile derlenmesi ve ard\u0131ndan npx cap sync<\/code> talimat\u0131n\u0131n verilmesi yeterli olacakt\u0131r. Bu talimat hem Android hem de iOS platformlar i\u00e7in t\u00fcm de\u011fi\u015fiklikleri senkronize edecektir. Ha yine de sizler tek bir platform \u00fczerinden senkronizasyon hedefliyorsan\u0131z bunun i\u00e7in de npx cap sync ios<\/code> – npx cap open ios<\/code> \u015feklinde talimatlar\u0131n\u0131z\u0131 platforma g\u00f6re \u00f6zelle\u015ftirebilirsiniz. Velhas\u0131l, yap\u0131lan bu senkronizasyon i\u015flemi neticesinde uygulaman\u0131n capacitor.config.ts<\/em> dosyas\u0131nda belirtilen webDir<\/code> alan\u0131ndaki dizinde olu\u015fturulan yenilikler mobil versiyonun ilgili dosyalar\u0131na aktar\u0131lacak ve varsa ekstradan dependency’ler de y\u00fcklenecektir.<\/p>\n\u00d6zellikle her major de\u011fi\u015fiklik sonras\u0131nda npx cap sync<\/code> talimat\u0131n\u0131n kullan\u0131lmas\u0131 gerekti\u011fini unutmay\u0131n\u0131z.<\/em><\/p><\/blockquote>\nCanl\u0131 Yeniden Y\u00fckleme (Live Reload) <\/h3>\n\u0130yi de hoca, Angular’da nas\u0131l ki ng serve<\/code> ile anl\u0131k de\u011fi\u015fiklikleri taray\u0131c\u0131ya yans\u0131tabiliyoruz, bunu mobil versiyonlar da da yapam\u0131yor muyuz?<\/strong><\/em> diye uzun kar\u0131\u015f\u0131k bir soru akl\u0131n\u0131zda canlanm\u0131\u015f olabilir… El-cevap, elbette ki yapabiliyoruz. Hat\u0131rlarsan\u0131z i\u00e7eri\u011fimizin ilk sat\u0131rlar\u0131nda bahsetti\u011fimiz gibi Capacitor canl\u0131 yeniden y\u00fckleme(live reload) \u00f6zelli\u011fine sahiptir. Bu \u00f6zellikten istifade edebilmek i\u00e7in uygulaman\u0131n IPv4 adresinden aya\u011fa kald\u0131r\u0131lmas\u0131 gerekmektedir. Bunun i\u00e7in de ng serve --host 0.0.0.0<\/code> \u015feklinde talimat\u0131n verilmesi gerekmektedir.<\/a>Bu talimat neticesinde uygulama yukar\u0131daki g\u00f6rselden de anla\u015f\u0131laca\u011f\u0131 \u00fczere IPv4 adresi \u00fczerinden de host edilecektir. Bu yapt\u0131\u011f\u0131m\u0131z\u0131n konuyla ne alakas\u0131 var la hoca?<\/strong><\/em> diye sordu\u011funuzu duyar gibiyim… Normal \u015fartlarda, ng serve<\/code> talimat\u0131 localhost<\/code> \u00fczerinden yani sadece geli\u015ftirme yap\u0131lan bilgisayar \u00fczerinden eri\u015filebilecek \u015fekilde uygulamay\u0131 aya\u011fa kald\u0131racakt\u0131r. Ancak telefon ya da tablet gibi fiziksel bir cihaz \u00fczerinden uygulama test etmek isteniyorsa bu taktirde uygulaman\u0131n ilgili cihaz taraf\u0131ndan eri\u015filebilir olmas\u0131 gerekmektedir. \u0130\u015fte tamda bu noktada uygulaman\u0131n t\u00fcm a\u011f aray\u00fczlerinden gelen istekleri dinlemesini sa\u011flayacak olan --host 0.0.0.0<\/code> parametresi kullan\u0131l\u0131r.<\/p>\n
Uygulamay\u0131 belirtilen \u015fekilde serve ettikten sonra capacitor.config.ts<\/em> dosyas\u0131nda a\u015fa\u011f\u0131daki gibi IPv4 adresinin bildirilmesi gerekmektedir;<\/p>\n
\n\r\nimport type { CapacitorConfig } from '@capacitor\/cli';\r\n\r\nconst config: CapacitorConfig = {\r\n  appId: 'com.ngsoft.capacitorexample',\r\n  appName: 'capacitor-example',\r\n  webDir: 'dist\/capacitor-example\/browser',\r\n  server: {\r\n    url: "http:\/\/192.168.0.26:4200\/",\r\n    cleartext: true\r\n  }\r\n};\r\n\r\nexport default config;\r\n<\/pre>\n<\/div>\nBu yap\u0131land\u0131rmay\u0131 ger\u00e7ekle\u015ftirdikten sonra da npx cap sync<\/code> talimat\u0131yla senkronizasyonun sa\u011flan\u0131p, bu yenili\u011fin mobil versiyonlara da aktar\u0131lmas\u0131 sa\u011flanmal\u0131d\u0131r. Vee b\u00f6ylece art\u0131k uygulamada yapt\u0131\u011f\u0131m\u0131z herhangi bir de\u011fi\u015fikli\u011fin anl\u0131k olarak mobil versiyonlara da yans\u0131d\u0131\u011f\u0131n\u0131 g\u00f6zlemleyebiliriz.<\/a><\/p>\n
Live reload \u00f6zelli\u011fi yaln\u0131zca geli\u015ftirme s\u0131ras\u0131nda kullan\u0131lmas\u0131 gereken bir ara\u00e7 oldu\u011fundan dolay\u0131 mobil uygulamay\u0131 yay\u0131nlarken kapat\u0131lmas\u0131 gerekmektedir.<\/em><\/p><\/blockquote>\n
Cihaz Kameras\u0131na, Konum Bilgisine vs. Eri\u015fim<\/h3>\nCapacitor ile mobil cihaz\u0131n bir\u00e7ok \u00f6zelli\u011fine eri\u015fim g\u00f6sterilip, kullan\u0131labilmektedir. Bizler burada kamera ve konum bilgisi \u00fczerinden \u00f6rneklendirme yapaca\u011f\u0131z. E\u011fer ki daha fazla mobil \u00f6zelli\u011fe eri\u015fim ihtiyac\u0131 s\u00f6z konusuysa Capacitor’\u00fcn resmi dok\u00fcmantasyonu \u00fczerinden (bknz: official plugins<\/a>)<\/span> gerekli incelemelerde bulunabilirsiniz.<\/p>\n
\nKamera Eri\u015fimi<\/strong>
\n<\/a>Angular uygulamas\u0131 \u00fczerinden Capacitor arac\u0131l\u0131\u011f\u0131yla kameraya eri\u015fim g\u00f6sterebilmek i\u00e7in \u00f6ncelikle npm install @capacitor\/camera<\/code> paketinin uygulamaya y\u00fcklenmesi gerekmektedir. Ard\u0131ndan kamera eri\u015fimine dair kullan\u0131c\u0131 taraf\u0131ndan telefon arac\u0131l\u0131\u011f\u0131yla gerekli izinlerin verilebilmesi i\u00e7in a\u015fa\u011f\u0131daki yap\u0131land\u0131rmalar\u0131n AndroidManifest.xml<\/code> dosyas\u0131na eklenmesi gerekmektedir.<\/p>\n\n\r\n<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"\/>\r\n<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" \/>\r\n<\/pre>\n<\/div>\n<\/a>Bu izinler anla\u015f\u0131laca\u011f\u0131 \u00fczere foto\u011fraf dosyalar\u0131n\u0131 okumak ve kaydedebilmek i\u00e7in storage ile ilgili izinlerdir.<\/p>\n
\u0130zin i\u015flemlerini tamamlad\u0131ktan sonra art\u0131k kamerayla ilgili \u00e7al\u0131\u015fmalara gelebiliriz. Bunun i\u00e7in a\u015fa\u011f\u0131daki gibi bir \u00e7al\u0131\u015fma yap\u0131labilir;<\/p>\n
\n\r\n.\r\n.\r\n.\r\n      <p>\r\n        <button (click)="fotografCek()">Foto\u011fraf \u00c7ek<\/button>\r\n        <br>\r\n        <img style="width: 343px; height: 330px;" [src]="photo()">\r\n      <\/p>\r\n.\r\n.\r\n.\r\n<\/pre>\n<\/div>\n\n\r\n.\r\n.\r\n.\r\n  photo = signal<string | undefined>("");\r\n  async fotografCek() {\r\n    const image = await Camera.getPhoto({\r\n      quality: 90,\r\n      allowEditing: false,\r\n      resultType: CameraResultType.Base64\r\n    });\r\n\r\n    this.photo.set(`data:image\/jpeg;base64,${image.base64String}`);\r\n  }\r\n.\r\n.\r\n.\r\n<\/pre>\n<\/div>\nYap\u0131lan t\u00fcm bu \u00e7al\u0131\u015fmalardan sonra npx cap sync<\/code> talimat\u0131yla uygulama senkronize edilmelidir. Ard\u0131ndan Android Studio \u00fczerinden yap\u0131lan \u00e7al\u0131\u015fmalar\u0131 test edebiliriz;<\/a>Yukar\u0131daki ekran al\u0131nt\u0131s\u0131ndan da g\u00f6r\u00fcld\u00fc\u011f\u00fc \u00fczere Android Studio \u00fczerinden kameray\u0131 test ederken bir kamera sim\u00fclasyonu \u00fczerinden test ger\u00e7ekle\u015ftirilebilmektedir. Uygulamay\u0131 yay\u0131nlay\u0131p, telefon \u00fczerinden \u00e7al\u0131\u015fma sergiledi\u011fimizde ise ger\u00e7ek kameran\u0131n kullan\u0131ld\u0131\u011f\u0131n\u0131 g\u00f6rece\u011fiz.<\/p>\n
\u015eimdi yapt\u0131\u011f\u0131m\u0131z bu \u00e7al\u0131\u015fma uygulaman\u0131n hem web hem de mobil versiyonlar\u0131nda varl\u0131k g\u00f6stermektedir. Halbuki kamerayla ilgili bu \u00e7al\u0131\u015fmalar\u0131 bizler sadece mobil versiyonunda kullanmak isteyece\u011fiz. \u0130\u015fte b\u00f6yle bir durumda tek yap\u0131lmas\u0131 gereken a\u015fa\u011f\u0131daki gibi k\u00fc\u00e7\u00fck bir css dokunu\u015fudur.<\/p>\n
\n\r\n.\r\n.\r\n.\r\n      <p class="mobil-goster">\r\n        <button (click)="fotografCek()">Foto\u011fraf \u00c7ek<\/button>\r\n        <br>\r\n        <img style="width: 343px; height: 330px;" [src]="photo()">\r\n      <\/p>\r\n.\r\n.\r\n.\r\n<\/pre>\n<\/div>\n\n\r\n.mobil-goster {\r\n    display: none;\r\n}\r\n\r\n@media(max-width:760px) {\r\n    .mobil-goster {\r\n        display: block;\r\n    }\r\n}\r\n<\/pre>\n<\/div>\n<\/a>Bak\u0131n, g\u00f6r\u00fcld\u00fc\u011f\u00fc \u00fczere mobil versiyona ge\u00e7ildi\u011fi taktirde kamera i\u015flevleri devreye girmektedir.\n<\/li>\n
Konum Eri\u015fimi<\/strong>
\nTelefonun konum eri\u015fimi i\u00e7in ise npm install @capacitor\/geolocation<\/code> paketinden istifade edilecektir. Paketi y\u00fckledikten sonra AndroidManifest.xml<\/code> dosyas\u0131nda a\u015fa\u011f\u0131daki izinlerin yap\u0131land\u0131r\u0131lmas\u0131 gerekmektedir.<\/p>\n\n\r\n<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" \/>\r\n<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" \/>\r\n<uses-feature android:name="android.hardware.location.gps" \/>\r\n<\/pre>\n<\/div>\nBu i\u015flemden sonra mevcut konumla ilgili bilgiler a\u015fa\u011f\u0131daki gibi \u00e7ekilebilir;<\/p>\n\n\r\n  async mevcutKonum() {\r\n    const position = await Geolocation.getCurrentPosition();\r\n\r\n    alert(`Enlem : ${position.coords.latitude}\\nBoylam : ${position.coords.longitude}`)\r\n  }\r\n<\/pre>\n<\/div>\n<\/li>\n<\/ul>\nIonic Component’lerinden \u0130stifade Etme<\/h3>\nIonic; HTML, CSS ve JavaScript gibi web teknolojilerini kullanarak mobil uygulama geli\u015ftirme deneyimini kolayla\u015ft\u0131ran bir framework’d\u00fcr. Ve bizler, Angular uygulamalar\u0131nda Ionic component’lerini kullanarak mobil cihazlara has tasarlanm\u0131\u015f olan ara\u00e7lardan istifade edebilmekte ve b\u00f6ylece kullan\u0131c\u0131 deneyimi a\u00e7\u0131s\u0131ndan daha elveri\u015fli \u00e7al\u0131\u015fmalar ger\u00e7ekle\u015ftirebilmekteyiz.<\/p>\n
Bunun i\u00e7in \u00f6ncelikle npm install @ionic\/angular<\/code> talimat\u0131 e\u015fli\u011finde Ionic’in uygulamaya y\u00fcklenmesi gerekmektedir. Ard\u0131ndan istenilen component’e dair HTML ve TypeScript geli\u015ftirmesi ger\u00e7ekle\u015ftirildikten sonra uygulamay\u0131 derleyip, senkronize edebilirsiniz.<\/p>\n
Misal olarak a\u015fa\u011f\u0131da ion-select<\/code> component’inin \u00e7al\u0131\u015fmas\u0131n\u0131 inceleyebilirsiniz;<\/p>\n\n\r\n        <label>Ionic<\/label>\r\n        <ion-list>\r\n          <ion-item>\r\n            <ion-select label="Default label" placeholder="Favorite Fruit">\r\n              <ion-select-option value="apple">Apple<\/ion-select-option>\r\n              <ion-select-option value="banana">Banana<\/ion-select-option>\r\n              <ion-select-option value="orange">Orange<\/ion-select-option>\r\n            <\/ion-select>\r\n          <\/ion-item>\r\n\r\n          <ion-item>\r\n            <ion-select label="Fixed label" label-placement="fixed" placeholder="Favorite fruit">\r\n              <ion-select-option value="apple">Apple<\/ion-select-option>\r\n              <ion-select-option value="banana">Banana<\/ion-select-option>\r\n              <ion-select-option value="orange">Orange<\/ion-select-option>\r\n            <\/ion-select>\r\n          <\/ion-item>\r\n\r\n          <ion-item>\r\n            <ion-select label="Stacked label" label-placement="stacked">\r\n              <ion-select-option value="apple">Apple<\/ion-select-option>\r\n              <ion-select-option value="banana">Banana<\/ion-select-option>\r\n              <ion-select-option value="orange">Orange<\/ion-select-option>\r\n            <\/ion-select>\r\n          <\/ion-item>\r\n\r\n          <ion-item>\r\n            <ion-select label="Floating label" label-placement="floating">\r\n              <ion-select-option value="apple">Apple<\/ion-select-option>\r\n              <ion-select-option value="banana">Banana<\/ion-select-option>\r\n              <ion-select-option value="orange">Orange<\/ion-select-option>\r\n            <\/ion-select>\r\n          <\/ion-item>\r\n        <\/ion-list>\r\n<\/pre>\n<\/div>\n\n\r\n.\r\n.\r\n.\r\nimport { IonItem, IonList, IonSelect, IonSelectOption } from '@ionic\/angular\/standalone';\r\n\r\n@Component({\r\n  selector: 'app-root',\r\n  standalone: true,\r\n  imports: [RouterOutlet, IonItem, IonList, IonSelect, IonSelectOption],\r\n  templateUrl: '.\/app.component.html',\r\n  styleUrl: '.\/app.component.scss'\r\n})\r\nexport class AppComponent {\r\n  .\r\n  .\r\n  .\r\n}\r\n<\/pre>\n<\/div>\n\n\r\n@import '@ionic\/angular\/css\/ionic.bundle.css';\r\n<\/pre>\n<\/div>\n<\/a>Nihai olarak;
\nB\u00f6ylece Angular mimarisiyle geli\u015ftirilen uygulamalar\u0131n olduk\u00e7a d\u00fc\u015f\u00fck maliyetler e\u015fli\u011finde, rahatl\u0131kla ve daha da \u00f6nemlisi h\u0131zl\u0131ca Android ve iOS s\u00fcr\u00fcmlerini \u00e7\u0131karabilir ve en k\u0131sa zamanda ma\u011fazalarda yay\u0131nda bulunarak, ticari faaliyetlerinizde mobil kitleyi de hesaba katabilirsiniz.<\/p>\n
\u0130lgilenenlerin faydalanmas\u0131 dile\u011fiyle…
\nSonraki yaz\u0131lar\u0131mda g\u00f6r\u00fc\u015fmek \u00fczere…
\n\u0130yi \u00e7al\u0131\u015fmalar…<\/p>\n
Not : \u00d6rnek \u00e7al\u0131\u015fmaya a\u015fa\u011f\u0131daki github adresinden eri\u015febilirsiniz.
\nhttps:\/\/github.com\/gncyyldz\/CapacitorExample<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
Merhaba, Bu i\u00e7eri\u011fimizde Ionic ekibi taraf\u0131ndan geli\u015ftirilmi\u015f olan ve Angular, React, Vue.js vs. gibi web uygulamalar\u0131n\u0131n mobil platformlarda \u00e7al\u0131\u015ft\u0131r\u0131labilmesini sa\u011flayan bir k\u00f6pr\u00fc(bridge) ve runtime \u00e7\u00f6z\u00fcm\u00fc olan Capacitor teknolojisini inceliyor olaca\u011f\u0131z. Capacitor Nedir? Capacitor; Angular...<\/p>\n","protected":false},"author":1,"featured_media":27528,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[626,2420,18],"tags":[5210,2156,5212,5209,5214,5215,5211,5213],"class_list":["post-27504","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-akilli-telefonlar","category-angular","category-javascript","tag-android","tag-angular","tag-canli-yeniden-yukleme","tag-capacitor","tag-ionic","tag-ionic-components","tag-ios","tag-live-reload"],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts\/27504","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/comments?post=27504"}],"version-history":[{"count":10,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts\/27504\/revisions"}],"predecessor-version":[{"id":27529,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts\/27504\/revisions\/27529"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/media\/27528"}],"wp:attachment":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/media?parent=27504"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/categories?post=27504"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/tags?post=27504"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}