Mobile (Hybrid)/Ionic4
-
#5 Ionic4(아이오닉4) http get 방식Mobile (Hybrid)/Ionic4 2019. 5. 8. 15:40
이제 json data를 http 통신을 통해서 가져오도록 해보자 https://ionicframework.com/docs/native/http Ionic Documentation Ionic is the app platform for web developers. Build amazing mobile, web, and desktop apps all with one shared code base and open web standards ionicframework.com 만약에 import를 할때 다음과 같은 에러가 나온다면 npm i @ionic-native/http@beta --save npm i @ionic-native/core@beta --save 진행 후 다시 한번 http를 install해보자 (필..
-
#4 Ionic4(아이오닉4) GoogleMap 주소검색Mobile (Hybrid)/Ionic4 2019. 5. 8. 09:58
#3번까지 왔으면 이미 구글맵은 뷰잉했다는 가정하에 정리를 시작하도록 하겠다 PlacesLibary를 써야 하기 때문에 이와 같이 선언해준다. 장소검색할 SearchBar를 먼저 html에 추가해주도록 한다 *ngIf를 통해 searchToggled가 true일 경우에만 보여주도록하고 ionInput 이벤트를 통해서 서치바를 운용해보자 //boolean public searchToggled: boolean = false; 이와 같이 변수를 설정해주고 /* 서치바 토글 */ public searchToggle(): void { this.searchToggled = !this.searchToggled; } 해당 Function을 실행시켜주면 된다 /** * SearchEvenet 실행 * @param : e..
-
#3 Ionic4(아이오닉4) GoogleMap 적용Mobile (Hybrid)/Ionic4 2019. 4. 25. 16:42
요즈음 Ionic4 Framework를 공부중인데 너무나 어렵다. 자료가 죄다 영어인지라, 각설하고 시작하겠다 ionic start googleMap blank 프로젝트를 생성해준다. npm i --save @ionic-native/geolocation@beta 터미널에서 geolocation npm install을 해준다. import {Component, NgZone, ViewChild, OnInit, ElementRef} from '@angular/core'; import {Geolocation} from '@ionic-native/geolocation/ngx'; 자신의 컴포넌트 ts에서 위 자료를 import 해준다. export class HomePage implements OnInit{ ngO..
-
#2 Ionic4(아이오닉4) Validation 체크Mobile (Hybrid)/Ionic4 2019. 4. 24. 00:38
1. 필요한 모듈 import를 한다. import {AlertController} from '@ionic/angular'; import { FormGroup, FormControl, FormBuilder, Validator, ReactiveFormsModule, Validators} from '@angular/forms'; import { Router } from '@angular/router'; 2. constructor에 추가해준다. constructor( public alertCtrl: AlertController, public formBuilder: FormBuilder, public reactiveFormsModule : ReactiveFormsModule, public router: Rout..
-
#1 Ionic4(아이오닉4) 개발환경Mobile (Hybrid)/Ionic4 2019. 4. 24. 00:16
1. node.js 설치 2. ionic 설치 cmd창 열고 아래와 같이 적는다. npm install -g cordova ionic 3. cd 자신의 디렉토리 이동 ionic start (앱 이름) blank, sidemenu, tabs 4. cd 자신의 앱 이동 ex) D:\ionic\test ionic serve or ionic servce -lab 5. IOS 및 Andriod 빌드 ionic platform add android ionic platform add ios