1. İyonik ortam kurulumu
İyonik geliştirme Nodejs ortamına bağlıdır, bu yüzden geliştirmeden önce Nodejs kurmamız gerekiyor. İndir ve Kurulum:Bağlantı girişi görünür. Kurulum tamamlandıktan sonra, PowerShell'i açın ve kurulumun başarılı olduğunu doğrulamak için -v ve npm -v komutlarını girin; sürüm numarası geri dönerse başarılı olduğu anlamına gelir. PowerShell komut satırında çalıştırın:
Bu, cordova ve ionic'i npm paket yöneticisi ile kurmak içindir, -g küresel kurulum anlamına gelir ve küresel kurulumdan sonra PowerShell'deki herhangi bir dizinde cordova ve ionic komutlarını kullanabilirsiniz.
Aşağıdaki hatayla karşılaşabilirsiniz:
2. İyonik bir proje oluşturun
Ionic'in resmi web sitesi üç proje şablonu sunuyor: boş, sekmeler ve sideMenu, lütfen şuna bakınız:Bağlantı girişi görünür.
Uygulamamızı sekmeler şablonunu kullanarak oluşturuyoruz, PowerShell cd'sini geliştirme dizinine açıyoruz ve şu adresi çalıştırıyoruz:
burada myApp proje adımızdır
Aşağıda gösterildiği gibi:
C:\project\android>ionic start myApp tabs √ Dizin oluşturuluyor.\myApp - tamam! √ Başlangıç sekmelerini indirip çıkarıyor - tamam!
? Yeni uygulamanızı Cordova ile entegre etmek ve yerel iOS ve Android'i hedeflemek ister misiniz? Evet √ ionic.config.json kişiselleştirme ve package.json - tamam! > İyonik entegrasyonlar Cordova --sessiz √ Entegrasyon Cordova indirildi - tamam! √ Entegrasyon dosyalarını projeye kopyalıyor - bitti! [Tamam] Cordova entegrasyonu eklendi!
Bağımlılık kurulumu birkaç dakika sürebilir.
* İYONIK DEVAPP *
Hızlı, cihaz üzerinde test yapan mobil uygulamamız Ionic DevApp ile geliştirmeyi hızlandırın
- Yerel SDK'lar olmadan iOS ve Android'de test - Anında stil ve JS güncellemeleri için LiveReload
️--> DevApp'i Yükle:Bağlantı girişi görünür. <--
> NPM i × Çalıştırılan komut - başarısız oldu! [HATA]
>node-sass@4.9.0install C:\project\android\myApp\node_modules\node-sass > düğüm scriptleri/install.js
İkili dosyayı indirmekBağlantı girişi görünür. İndirme tamamlandı C:\project\android\myApp\node_modules\node-sass\vendor\win32-x64-57\binding.node olarak ikili kaydedildi Caching binary to C:\Users\itsvse_pc\AppData\Roaming\npm-cache\node-sass\4.9.0\win32-x64-57_binding.node
>uglifyjs-webpack-plugin@0.4.6postinstall C:\project\android\myApp\node_modules\uglifyjs-webpack-plugin > node lib/post_install.js
>node-sass@4.9.0postinstall C:\project\android\myApp\node_modules\node-sass > düğüm scriptleri/build.js
İkili dosya C:\project\android\myApp\node_modules\node-sass\vendor\win32-x64-57\binding.node adresinde bulunuyor İkili test İkili yeterli npm ERR! path C:\project\android\myApp\node_modules\fsevents\node_modules npm ERR! code EPERM npm ERR! ERRNO -4048 npm ERR! syscall lstat npm ERR! Hata: EPERM: işlem yasak, lstat 'C:\project\android\myApp\node_modules\fsevents\node_modules' npm ERR! { Hata: EPERM: işlem yapılmadı, lstat 'C:\project\android\myApp\node_modules\fsevents\node_modules' npm ERR! stack: 'Hata: EPERM: işlem yapılmıyor, lstat \'C:\\android\\myApp\node_modules\\fsevents\\node_modules\'', npm ERR! Errno: -4048, npm ERR! kod: 'EPERM', npm ERR! Syscall: 'Lstat', npm ERR! path: 'C:\\project\\android\\myApp\\node_modules\\fsevents\\node_modules' } npm ERR! npm ERR! Lütfen bu komutu root/Administrator olarak tekrar çalıştırmayı deneyin.
npm ERR! Bu koşunun tam bir günlüğü şu adreste bulunabilir: npm ERR! C:\Users\itsvse_pc\AppData\Roaming\npm-cache\_logs\2018-06-19T06_52_38_238Z-debug.log Hata meydana geldi,Çözüm, yönetici olarak cmd'yi çalıştırmak ve yukarıdaki komutu tekrar çalıştırmak!!
CD'yi kullanarak projemize girin ve ardından tarayıcı servisini başlatmak için aşağıdaki komutu çalıştırın:
Yürütme tamamlandıktan sonra, Ionic otomatik olarak varsayılan tarayıcımızı açmamıza ve uygulama sayfamıza atlamamıza yardımcı olur, tarayıcı sayfayı açtığında, Ionic bizim için canlı yükleme modunu açmıştır, açtıktan sonra dosyayı www altında düzenleyip kaydederiz, Ionic tarayıcıya sayfayı websocket üzerinden yenilemesini bildirir,Her değişiklik yaptığımızda sayfayı manuel olarak yenilemek zorunda değilizve iş verimliliğimizi büyük ölçüde artırdı.
Aşağıda gösterildiği gibi:
|