Ryan's Log

[IONIC Example] ngx-qrcode Example 앞 글에서 QRCode를 스캔했다면, 이번엔 QR코드를 생성해보도록 하자 이번 예제는 새로운 앱을 만들지 않고 앞글(QR Code Scan Example)의 소스를 활용하도록 한다. 원한다면 앞글의 기억을 되살려 새로운 blank앱을 만들어 진행해도 좋겠다. 앞 예제의 홈화면에 QR에 들어갈 Text를 직접 입력받고 생성 버튼을 클릭하면 즉시 화면에 QR이 출력되도록 한다. 먼저 ngx-qrcode를 설치 한다.> npm install --save ngx-qrcode2 다음으로 NgxQRCodeModule을 app.module.ts에 import한다. ./src/app/app.module.tsimport { BrowserModule } fro..

[IONIC Example] QR Code Scan Example IONIC에서 QRCode를 스캔하고, 스캔을 위해 카메라 권한을 얻어 오는 방법을 소개한다. IONIC 설치 등은 앞 글(설치 및 새로운 앱 시작)을 참조 우선 만들어진 화면부터 보자 하단 두개의 탭으로 구성된 두개의 화면 "Home" 과 "Scan" ... "Scan" 탭을 누르면 QR을 스캔할 수 있고, Home에서는 QR을 생성할 수 있도록 구성한다. IONIC Blank 앱을 시작한다. 홈에서 버튼을 클릭하면 QR 스캐너 화면으로 이동하게 구성할 것이며 메뉴나 탭이 필요하지 않다. blank 탬플릿을 선택한다.> ionic start QRCodeScannerApp blank QRCodeScannerApp이 만들어지면 바로 시작!>..

[IONIC Example] Youtube API IONIC에서 Youtube검색 결과를 출력하고, Native Youtube player를 이용해 영상을 플레이한다. IONIC 설치 등은 앞 글(설치 및 새로운 앱 시작)을 참조 우선 만들어진 화면부터 보자 HOME 화면에 정해진 키워드로 검색한 결과를 나열 할 예정이며, 화면 하나면 충분하므로 template은 blank로 선택하도록 한다. IONIC Blank 앱을 시작한다. > ionic start YoutubeExampleApp blank YoutubeExampleApp이 만들어지면 바로 시작!> cd GoogleMapExampleApp> ionic serve 바로 소스코드 작성 들어간다... ./src/pages/home/home.html을 열..

[IONIC Example] Google Map (Native) IONIC에서 GoogleMaps Native API를 이용하여 지도를 붙여보고자 한다. IONIC 설치 등은 앞 글(설치 및 새로운 앱 시작)을 참조하길 바라며... IONIC Blank 앱을 시작한다.> ionic start GoogleMapExampleApp blank특별한 메뉴나 기능이 필요한 것이 아닌, 첫 화면인 HOME에 구글 지도를 표시할 것이므로 blank로 앱을 생성한다. 앱 이름인 GoogleMapExampleApp 안으로 들어간후 앱을 실행한다.> cd GoogleMapExampleApp> ionic serve 바로 GoogleMap을 붙여 보도록 한다. 사용할 수 있는 GoogleMap은 iframe으로 동작하는 We..

[IONIC Example]설치 및 새로운 앱 시작 IONIC을 시작하고자 하는데 단순히 "Hello World"에 만족할 수 없다면 이 글이 큰 도움이 될것이다. 이 글은..IONIC 설치IONIC Start (새로운 앱 생성)IONIC Serve (실행)Hello World 출력 (Alert, AlertController)Rest Countries EU로 부터 REST API 호출 후 목록 출력을 다룬다. Ionic 설치 (Node가 설치되어 있어야함)> npm install -g ionic > npm install -g cordova OSX(MAC)인 경우에는 > sudo npm install -g ionic > sudo npm install -g cordova 설치된 IONIC과 버전을 확인한다...