https://risha-lee.tistory.com/34

↑위 글과 연결된 글입니다.

지난 글에서 언급했듯이 요청받은 내용은 그냥 스크롤이 보이는 것이 아닌,

스크롤을 이동할 땐 보이지만, 스크롤을 이동하지 않을 땐 숨겨져 있는 기능이었다.

그래서 좀 생각해보았는데 어차피 기본은 안 보이는 것이고,

css를 추가해야만 보이니 class를 이용하여 토글 하면 좋겠다고 생각하였다.

그래서 아래의 코드 형태로 결과를 내게 되었다.

1. scss를 작성한다.

.scroll_view .scroll-content{
  overflow-y: overlay;
}
.scroll_view .scroll-content::-webkit-scrollbar {
  -webkit-appearance: none;
}
.scroll_view .scroll-content::-webkit-scrollbar:vertical {
  width: 3px;
}
.scroll_view .scroll-content::-webkit-scrollbar:horizontal {
  height: 3px;
}
.scroll_view .scroll-content::-webkit-scrollbar-thumb {
  border-radius: 8px;
  background-color: rgba(0, 0, 0, .5);
}

2. html을 작성한다.

<ion-header>
  <ion-navbar>
    <ion-title>
      Ionic Blank
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content [ngClass]="scrolling ? 'scroll_view' : ''" 
			(ionScrollStart)="scrollStart()" 
			(ionScrollEnd)="scrollEnd()">
            
            <!-- 본문 내용 작성 -->
            
</ion-content> 

3. ts를 작성한다.

import { Component, NgZone } from '@angular/core';
import { Platform  } from 'ionic-angular';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  scrolling = false;

  constructor(public platform: Platform,
              public _zone: NgZone) {
  }

  scrollStart() {
    if (this.platform.is('android')) { 
      console.log("scrollStart");
      this._zone.run(() => {
        this.scrolling = true;
      });
    }
  }

  scrollEnd() {
    if (this.platform.is('android')) { 
      console.log("scrollEnd");
      this._zone.run(() => {
        this.scrolling = false;
      });
    }
  }
}

위의 코드를 적용하여 android에서 실행해보면 스크롤을 이동할 때만 스크롤이 보여지는 것을 볼 수 있다.

여기서 NgZone은 좀 생소할 수도 있는데

일전에 연동되는 변수를 이용하여 화면을 열심히 바꿔도 적용이 되지 않아 찾은 기능이다.

https://angular.io/guide/zone에서 다시 찾아보니

NgZone을 사용하면 HTML에서 업데이트하기 위해 구성 요소의 변경 사항을 자동으로 감지할 수 있다고 한다.

나는 보통 NgZone을 제대로 코드를 작성하였는데도 뭔가 화면 변화가 이루어지지 않을 때, 사용해보는 편이다.

오늘 ionic으로 만든 android app에서 scroll이 보이지 않아 보이게 해 달라는 요청에 의해

scroll이 보이도록 작업하였다.

특이하게도 ionic serve 명령어를 통해 웹으로 띄운 화면에서는 잘 보였는데

ionic cordova bulid 명령어를 통해 android에 올리면 보이지 않았다.

찾아보니 이 문제를 해결하고 싶은 경우가 좀 있었다.

ionic의 오류인 듯싶었다.

내가 적용한 해결법은 그냥 간단히 아래의 코드를 scss에 추가하면 된다.

(하지만 ios에서는 아쉽게도 작동하지 않았다. 추후 ios에서도 방법을 알게 된다면 글을 따로 올리도록 하겠다)

::-webkit-scrollbar {
  -webkit-appearance: none;
}
::-webkit-scrollbar:vertical {
  width: 3px;
}
::-webkit-scrollbar:horizontal {
  height: 3px;
}
::-webkit-scrollbar-thumb {
  border-radius: 8px;
  background-color: rgba(0, 0, 0, .5);
}

하지만 요청받은 내용은 그냥 스크롤이 보이는 것이 아닌,

스크롤을 이동할 땐 보이지만, 스크롤을 이동하지 않을 땐 숨겨져 있는 기능이었으므로

다음 글에서 해당 기능 추가하는 법을 설명하도록 하겠다.

출처 : https://stackoverflow.com/questions/43143299/ionic-scrollbar-is-not-visible-in-android-phone

인터넷에 ionic2, Angular 뒤로 가기 버튼에 대하여 검색하면

형식적으로 뒤로 가기 버튼 두 번 누르면 ionic 앱이 꺼지게 하는 기능이나,

팝업을 열어서 앱을 종료할 것인지 확인하는 등 아주 기본적인 뒤로 가기 버튼 동작을 알려준다.

그러나 개발을 하다 보면 뒤로 가기 종료 동작은 메인(root)에서만 가능해야 하며

(메인이 아니면 보통 이전 화면으로 가는 것이 맞다)

이미 팝업이 켜져 있는 상황이라든가

(종료 동작이나 그냥 이전 화면으로 가는 것보다는 팝업부터 끄는 것이 자연스러움), 

메뉴가 열려있는 상황

(역시나 종료 동작이나 그냥 이전 화면으로 가는 것보다는 메뉴부터 닫는 것이 자연스러움),

평범하게 nav로 이동하지 않고 view로 연 경우 등 고려할 것들이 많아진다.

아래 방법보다 더 쉬운 방법이 있을 수 있겠지만

작성 당시 ionic에 대한 자료가 충분치 않아 직접 몇 번의 실험 끝에 작성된 코드를 공유한다.

다른 곳(root page 정도)에 작성해도 무리 없지만 나는 app.component.ts에 작성하였다.

import { Component } from '@angular/core';
import { Platform, App, NavController, MenuController, ToastController } from 'ionic-angular';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';

import { HomePage } from '../pages/home/home';
@Component({
  templateUrl: 'app.html'
})
export class MyApp {
  private navCtrl: NavController;
  rootPage:any = HomePage;
  mFlag: boolean = false;
  
  constructor(platform: Platform, 
              statusBar: StatusBar, 
              public app: App, 
              public menu: MenuController,
              public toastCtrl: ToastController,
              splashScreen: SplashScreen) {
    platform.ready().then(() => {
      statusBar.styleDefault();
      splashScreen.hide();

      platform.registerBackButtonAction(() => {
          try {
                let nav = this.app.getActiveNav();

                let view = nav.last();
                const portal = app._appRoot._getPortal();

                if (this.menu.isOpen() == true) {
                    this.menu.close();
                } else if(portal.length() != 0) {
                    this.app._appRoot._overlayPortal.getActive().dismiss();//팝업 창이 뜬게 있다면 팝업 창도 닫아줌 
                } else if (view.isOverlay) {
                    view.dismiss({});
                } else if (view.isFirst()) { //root에서만 되게하기
                    if (!this.mFlag) {
                        this.mFlag = true;
                        let toast = toastCtrl.create({
                                        message: "뒤로 버튼을 한 번 더 누르시면 앱이 종료됩니다.",
                                        duration: 3000,
                                        position: "middle",
                                        cssClass: "toast-default"
                        });
                        toast.present();

                        //3초 기다리기  
                        setTimeout(() => {
                            this.mFlag = false;
                        }, 3000);
                    } else {
                        platform.exitApp();
                    }
                } else {
                    nav.pop();
                }
            } catch (e) {
                console.log("back action listener error :" + e);
            }
        });
    });
  }
}

ionic2, Angular에서 AndroidManifest.xml을 수정할 일이 생겼었다.

ionic2, Angular에서 AndroidManifest.xml를 직접 건드리면 나중에 개발자가 바뀐다거나 platform을 다시 추가할 때,

다시 같은 작업을 해줘야 하는 일이 생기기 때문에 (platform 쪽 소스는 Git이나 svn에 올라가지 않기 때문)

매우 꺼려지는 일 중에 하나였다.

그래서 찾아보니 다행히도 config.xml에서 config-file, edit-config 등등 태그를 이용하면

platform에 있는 파일(xml, plist 등)도 수정할 수 있음을 확인하였다.

그런데 여기서 문제가 하나 발생했다.

config-file 태그를 cordova 공식 홈페이지 대로 따라 해서 적용해보았는데 아래와 같은 오류가 난 것이다.

Execution failed for task ':app:mergeDebugResources'.
> java.util.concurrent.ExecutionException: com.android.builder.internal.aapt.v2.Aapt2Exception: Android resource compilation failed
  {{ionic_app_route}}\platforms\android\app\src\main\res\xml\config.xml:80: error: unbound prefix.

구글에 검색해보니 android 네임스페이스를 선언하지 않아서 생긴 문제라

간단히 config.xml 최상위 태그인 widget에

xmlns:android="http://schemas.android.com/apk/res/android" 를 추가하면 되는 일이었다.

참조 : https://cordova.apache.org/docs/en/latest/plugin_ref/spec.html#edit-config                     https://stackoverflow.com/questions/18871005/error-parsing-xml-unbound-prefix-on-library

다음 오류는 ionic2, Angular에서 firebase, media, camera 등등의 플러그인을 설치한 뒤,

안드로이드에 넣기 위해 빌드해보니 발생한 오류이다.

com.android.build.api.transform.TransformException: Error while generating the main dex list: 
  Error while merging dex archives: 
  Learn how to resolve the issue at https://developer.android.com/studio/build/dependencies#duplicate_classes. 
  Program type already present: android.support.v4.app.INotificationSideChannel$Stub$Proxy

해결하기 위해 찾아보니 Cordova 프로젝트에 Android 지원 라이브러리 및 AndroidX를 모두 참조하는 플러그인/라이브러리가 포함된 경우 Android 빌드가 실패한다고 한다.

그래서 이를 보완해주는 cordova-plugin-androidx-adapter를 추가 설치하니 정상적으로 빌드가 성공되었다.

참조 : https://github.com/dpa99c/cordova-plugin-androidx-adapter

최근 회사에서 MSA를 도입하면서 keycloak을 처음 사용하게 되었다.

검색해보면 java에서 keycloak을 사용하는 법은 여러 가지로 많이 나오지만 

ionic에서 keycloak을 사용하는 법은 쓸데없이 플러그인을 사용해서 하라고 한다.

나도 처음엔 플러그인으로 해보려 했지만(플러그인으로는 실패하였다) 그보다 간단히 되는 방법을 찾았다.

원래 java 소스였는데 그냥 http 통신하는 거라 ionic에도 쉽게 적용되었다.

이건 ionic-angular http만으로도 작동되지만, 혹시 필요한 사람을 위해 ionic-native http 버전도 함께 공유한다.

import { Component } from '@angular/core';
import { Platform } from 'ionic-angular';
import { Http, RequestOptions, Headers } from '@angular/http';
import { HTTP } from '@ionic-native/http';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  keycloakConfig = {
        url: 'https://your_keycloak_url/auth',
        realm: 'your_realm',
        client_id: 'your_client_id',
        client_secret : 'your_client_secret'
    };
    
  constructor(public http: Http,
                public n_http: HTTP,
                public platform: Platform) {
                
    this.getToken({email : "email@email.com"
                   pswd : "password!"}).then(res => {
      console.log(res);
    }).catch(error => {
      console.log("Error", error);
    });
  }

  getToken(userData) {
    if (this.platform.is('cordova') == false){ 
      return new Promise((resolve, reject) => {
        var body = "grant_type=" + "password"+
                   "&client_id=" + this.keycloakConfig.client_id +
                   "&username=" + userData.email +
                   "&password=" + userData.pswd +
                   "&client_secret=" + this.keycloakConfig.client_secret;
        var headers = new Headers();
        headers.append('content-type','application/x-www-form-urlencoded');
        let options = new RequestOptions({ headers:headers });
                
        this.http.post(this.keycloakConfig.url+'/realms/'+this.keycloakConfig.realm+'/protocol/openid-connect/token', body, options).timeout(5000).subscribe(res => {
            resolve(res.json());
          }, (err) => {
            reject(err);
          });  
        });
    } else {
      return new Promise((resolve, reject) => {
        var body = {grant_type: "password",
                    client_id: this.keycloakConfig.client_id,
                    username: userData.email,
                    password: userData.pswd,
                    client_secret: this.keycloakConfig.client_secret};
        this.n_http.setSSLCertMode('nocheck');
        this.n_http.setRequestTimeout(5);
        this.n_http.setHeader('*', 'content-type', 'application/x-www-form-urlencoded');
        this.n_http.post(this.keycloakConfig.url+'/realms/'+this.keycloakConfig.realm+'/protocol/openid-connect/token', body, {}).then(res =>{
            resolve(JSON.parse(res.data));
          }).catch(err =>{
            reject(err);
          });
        });
      }
    }
  }
}

이런 식으로 body만 아래 코드로 변경하여 토큰 리프레시도 가능하다.

var body = "grant_type=" + "refresh_token"+
           "&client_id=" + this.keycloakConfig.client_id +
           "&refresh_token=" + "your_refresh_token" +
           "&client_secret=" + this.keycloakConfig.client_secret;

*참고 Java source

String uri = "http://localhost:7080/auth/realms/{RealmName}/protocol/openid-connect/token";

HttpClient client = HttpClientBuilder.create().build();
HttpPost post = new HttpPost(uri);
post.setHeader("User-Agent",
"Mozilla/5.0 (Windows NT 6.1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/41.0.2228.0 Safari/537.36");
List<BasicNameValuePair> urlParameters = new ArrayList<BasicNameValuePair>();
urlParameters.add(new BasicNameValuePair("grant_type", "password"));
urlParameters.add(new BasicNameValuePair("client_id", {ClientName}));
urlParameters.add(new BasicNameValuePair("username", {UserName}));
urlParameters.add(new BasicNameValuePair("password", {Password}));
post.setEntity(new UrlEncodedFormEntity(urlParameters));
HttpResponse response = client.execute(post);
System.out.println("Response Code : " + response.getStatusLine().getStatusCode());
BufferedReader rd = new BufferedReader(new InputStreamReader(response.getEntity().getContent()));
StringBuffer result = new StringBuffer();
String line1 = "";
while ((line1 = rd.readLine()) != null) {
	result.append(line1);
}
System.out.println(result);

출처 : https://stackoverflow.com/questions/39356300/avoid-keycloak-default-login-page-and-use-project-login-page

2019/07/24 - [개발/ionic2, Angular] - ionic에서 모바일 접근성 적용하기 (1) : toast

↑위 글과 연결된 글입니다.

이전에 설명했던 ionic-angular http의 문제를 수정하는 법을 작성하겠다.

원인은 인증서 문제라면서 앱에 인증서를 고정하라는 답변을 발견하였다.

하지만 native 소스를 직접 건드리는 것은 좋은 방법이 아닌 것 같아 더 찾아본 결과, 

가장 효율적으로 보이는 https release error 수정하는 법은 다음과 같다.

(ionic-angular http를 이미 사용하고 있다고 가정하고 코드를 작성하였다)

2019/01/15 - [개발/ionic2, Angular] - Request header field authorization is not allowed by Access-Control-Allow-Headers in preflight response. error 해결법

그리고 위 포스팅에서 쓴 것과 달리 간혹 핸드폰에서도 CORS 오류가 나는 현상을 발견하였다.

이 문제도 아래 코드로 해결되는 것을 확인하였다. (디바이스에서 약간 디버깅이 어렵다는 것 말고는 여러모로 이득이다)

=> https://로 시작하는 URI를 제대로 동작시키지 못하는 이유는 서버에서 SSL을 제대로 적용 못해서였고 서버에서 제대로 적용해주면 ionic-angular http를 사용해도 apk를 release 했을 때 제대로 동작함을 확인했음

비슷한 이유로 CORS 오류도 서버 문제일 가능성이 높음

디버깅이 어려우므로 정말 서버를 수정할 수 없는 경우 이외엔 아래의 소스를 사용하지 않을 것 같음

그래도 필요한 경우가 생길 수도 있으니 소스는 삭제하지 아니함 (2020. 09. 03)

참고 : forum.ionicframework.com/t/ionic-native-http-ngx-v-s-angular-common-http-which-should-be-used-in-an-ionic4-app/169629/8

1. ionic-native http를 설치한다.

$ ionic cordova plugin add cordova-plugin-advanced-http
$ npm install --save @ionic-native/http

2. app.module.ts에서 ionic-native http를 providers에 넣는다.

import { HTTP } from '@ionic-native/http';

@NgModule({
   .....
providers: [
     .....
     HTTP
  ]
})

3. ts 파일을 수정한다.

import { Component } from '@angular/core';
import { Platform } from 'ionic-angular';
import { Http } from '@angular/http';
import { HTTP } from '@ionic-native/http';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
    url:string = "your_server_url";
    page_index: number = 1;
   
    constructor(public platform: Platform,
                public http: Http,
                public n_http: HTTP) {
      this.goGetNoti();
    }
    
    goGetNoti() {
        var param = "?page_index=" + this.page_index;
        this.getNoti(param).then(data => {
          console.log("getNoti", data);
          var _data:any = data;
                
          if (_data.isOk == 'Y') {
            // success
          } else {
            // server error
          }
        }).catch(error => {
            console.log("Error", error);
        });
    }
    
    public getNoti(param: string) {
       if (this.platform.is('cordova') == false){ 
            return new Promise((resolve, reject) => {
                this.http.get(url+'/v1/noti' + param).timeout(5000).subscribe(res => {
                    resolve(res.json());
                }, (err) => {
                    reject(err);
                });  
            });  
        } else {
            return new Promise((resolve, reject) => {
                this.n_http.setSSLCertMode('nocheck');
                this.n_http.setRequestTimeout(5);
                this.n_http.get(url+'/v1/noti' + param, {}, {}).then(res =>{
                    resolve(JSON.parse(res.data));
                }).catch(err =>{
                    reject(err);
                });
            });
        }
    }
}

(보통 getNoti와 같이 동작하는 함수는 다른 ts에 넣고 사용하기 때문에 getNoti와 goGetNoti로 분리하였다)

this.n_http.setSSLCertMode('nocheck'); 이 부분이 SSL 확인하지 않게 해주는 부분인듯하다.

찾아보았으나 아쉽게도 ionic-angular http에서는 ionic-native http처럼 SSL 확인을 하지 않아도 되는 기능이 없다.

그래서 앞으로 http onic-angular, ionic-native 분기 코딩은 계속될 거 같다.

보안 문제를 살짝 생각해봤는데 보통 서버도 같이 개발해서

이미 인증된 서버이므로 위와 같은 방법을 써도 문제는 없을 것 같다.

=> 위와 같은 이유로 취소선 추가

참고 : https://stackoverflow.com/questions/44833534/http-requests-fails-only-while-releasing-android-apk

https://forum.ionicframework.com/t/https-post-requests-not-working-in-release-build/154099/3

2019/07/25 - [개발/ionic2, Angular] - ionic에서 모바일 접근성 적용하기 (3) : ion-select ②

↑위 글과 연결된 글입니다.

Voice Assistant를 이용하여 들었을 때, 

기본 radio는 정상적으로 label과 선택되었는지 안 되었는지를 잘 읽어주지만

ion-radio는 label을 전혀 읽어주지 않았다.. 그냥 선택되었는지 안 되었는지만 읽어주는데

그것으로는 절대 접근성을 적용했다고 할 수 없을 거 같았다.

그렇다고 이것 역시 기본 radio로 바꾸기엔 ion-radio로 바꾼 이유가 명확해서

(기본 radio는 뭔가 안 눌리는 느낌이 있다)

ion-radio로 꼭 써야 하는 상황이었다.

사실 ion-radio는 앞의 글들과는 다른 유형의 문제였다.

그냥 내가 잘못 사용하고 있던 것일 뿐..

* ion-radio를 잘못 사용한 예

<ion-content>
  <ion-list radio-group>
    <span class="ion_radio_items">
      <span style="float: left;">
    	<ion-radio mode="md" id="no1" name="no1" value="N" ></ion-radio>
      </span>
      <ion-label text-wrap>아니오</ion-label>
    </span>
    <span>
      <span style="float: left;">
    	  <ion-radio mode="md" id="yes1" name="yes1" value="Y" ></ion-radio>
      </span>
      <ion-label text-wrap>예</ion-label>
    </span>
  </ion-list>
</ion-content>

대강 이런 식으로 사용하고 있었는데 공식 홈페이지를 보니

ion-list 안에 ion-item안에 하나의 ion-radio와 ion-label이 들어가 있었다..

아마 처음에 이런 식으로 코딩했던 이유는 ion-item을 사용하면 css가 굉장히 깨져서였던 거 같다.

하지만 ion-item을 입혀주니 Voice Assistant를 이용하여 들었을 때,

ion-radio에 ion-label을 잘 연결해서 읽어주는 것을 확인하여

별 수 없이 ion-item을 입히고 css를 수정하게 되었다.

* ion-radio를 제대로 사용한 예

<ion-content>
  <ion-list radio-group>
    <ion-item>
      <span style="float: left;">
        <ion-radio mode="md" id="no1" name="no1" value="N" ></ion-radio>
      </span>
      <ion-label text-wrap>아니오</ion-label>
    </ion-item>
    <ion-item>
      <span style="float: left;">
        <ion-radio mode="md" id="yes1" name="yes1" value="Y" ></ion-radio>
      </span>
      <ion-label text-wrap>예</ion-label>
    </ion-item>
  </ion-list>
</ion-content>

위처럼 코드를 수정하니 Voice Assistant를 이용했을 때 제대로 들려주는 것을 확인하였다!

참고: https://ionicframework.com/docs/api/radio