// android/app/src/build.gradle
// 앱아이디 = capacitor.config.json의appId
defaultConfig {
applicationId "앱아이디"
}
//versionCode, versionName을 통해서 버전을 변경할 수 있습니다.
퍼미션은 AndroidManifest 에서 uses-permission 테그에서 확인 할 수 있습니다.
App/res를 마우스 오른쪽 후 new Image Assets을 누릅니다. 다운받은 Icon Png File을 서택합니다.
splashscreen을 Image Gorilla를 통해 다운받습니다.
App/res/drawable-land.../splash.png를 변경해 줍니다.
Android Deploy
안드로이드 스튜디오 에서
Build->Generate Signed Bundle/APK -> next
key store path : 나의 저장소
password : 마음대로
next를 하다보면 buildType이 나옵니다. 반드시 release로 해야합니다.
iOS Deploy - 유료계정이 없네요 ㅠㅠ
Web - progressive web app Deploy
www폴더가 배포할 수 있는 폴더입니다.
하지만 PWA로 진행해보겠습니다.
아래 2개를 명령어를 실행합니다.
ng add @angular/pwa
ng build --prod
filrebase를 이용하는 경우에 다음과 같이 실행합니다.
fireabse init
? What do you want to use as your public directory? www ? Configure as a single-page app (rewrite all urls to /index.html)? Yes ? File www/index.html already exists. Overwrite? 마음것 하세용~
//service.ts
import { BehaviorSubject } from 'rxjs';
// BehaviorSubject<제네릭>(초기값)으로 Subject로 객체를 주입합니다.
private _places = new BehaviorSubject<Place[]> ([
new Place(), new Place()
]);
// Observable로 리스트를 보냅니다. 가장 최신의 async값을 보내기 위함입니다.
get places() {
return this._places.asObservable();
}
import { take, tap, delay } from 'rxjs/operators';
/* Observable을 반환 하는 take, delay, tap operator입니다.
tap:
탭은 3가지의 경우에 쓰일 수 있습니다.
nextOrObserver: Observable이 실행 될 경우.
error: 에러가 발생한 경우.
complete: 완료된 경우.
*/
addPlace() {
const newPlace = new Place(); //Place를 생성하는 값들을 제거한 버전입니다.
// pipe operator들을 연속해서 사용할 수 있도록 합니다.
return this.places.pipe(
//가장 최근의 값만 가져와 처리합니다.
take(1),
//Http의 로딩을 해야하지만, 코드가 길어지므로 대체. 시간을 1초로 합니다.
delay(1000),
//해당 매쏘드에서 consume하지 않고 return합니다.
tap(places => {
// BehaviorSubject.next() 실행할 작업을 기입합니다.
this._places.next(places.concat(newPlace)); // 해당 리스트에 newPlace를 추가합니다.
})
);
}
// page.ts
isLoading = false;
import { LoadingController } from '@ionic/angular';
// 로딩시 spinner를 작동할 수 있도록 LoadingContorller 사용.
constructor(private loadingCtrl: LoadingController) {}
onCreateOffer() {
this.loadingCtrl
.create({
message: 'Creating place...' // 스피너와 함께 나올 문구
})
.then(loadingEl => {
loadingEl.present(); // 스피너를 UI에 표시.
this.placesService
// 위에서 구현한 매쏘드
.addPlace()
// next()를 구독(subscribe)
.subscribe(() => {
loadingEl.dismiss(); // UI에서 스피너 제거.
});
});
}
번외.
ionic의 lifeCycle을 관리해주어야 합니다.
ngOnInit() 의 경우 angular가 관리를 해주지만, Subject는 사용자가
ngOnDestroy()를 해주어야 합니다.
//page.ts
import { Subscription } from 'rxjs';
// Subscription을 주입합니다.
private placeSub: Subscription;
매쏘드() {
this.placeSub = this.placesService
.addPlace()
.subscribe(
... // 여러 작업 수행
});
});
}
ngOnDestroy() {
if (this.placeSub) {
this.placeSub.unsubscribe();
}
}
