- Yes24 : 아이오닉 앱 프로그래밍
- 알라딘 : 아이오닉 앱 프로그래밍
- 교보문고 : 아이오닉 앱 프로그래밍
- 유페이퍼 : 아이오닉 앱 프로그래밍
2021년 12월 13일에 아이오닉 6가 정식으로 발표 됐습니다. 아이오닉 6 업그레이드 가이드
아이오닉 앱 프로그래밍은 크로스 플랫폼 앱과 프로그레시브 웹 앱을 빠르고 쉽게 구현하는 방법을 알려줍니다. 독자는 아이오닉 플랫폼을 사용하여 KMeetUp 소셜 앱, 프로그레시브 가상 화폐 웹 앱, 기계 학습 앱을 개발합니다.
독자는 아이오닉 플랫폼을 이용해서 실무 앱을 완성하는 과정을 단계적으로 학습할 수 있습니다. 먼저 아이오닉 플랫폼을 익힌 후에 구글 파이어베이스를 이용해서 클라우드 데이터베이스, 구글, 페이스북, 애플 소셜 로그인과 지도, 알림, 테마, 다국어 버전을 구현하는 방법을 다루며 RxJS 라이브러리, 공개 API 등을 사용해서 KMeetUp 소셜 앱을 완성합니다. 그리고 마지막에는 지금까지 학습한 기술을 응용해서 프로그레시브 웹 앱을 구현하고 텐서플로우와 클라우드 비전 API를 활용해서 기계 학습 앱을 개발합니다.
이 책은 웹 표준 기술을 바탕으로 아이오닉 플랫폼을 실무에 적용하고 싶은 코딩 입문자/개발자에게 제대로 된 활용서가 될 것입니다.
입문자부터 웹 표준 기술에 익숙한 웹 디자이너와 개발자를 위해 만들었습니다. 실무 중심 예제를 처음부터 개발하고 완성해나가면서 아이오닉 플랫폼, 외부 서비스 연동 및 다양한 플러그인의 사용법을 알기 쉽게 배울 수 있습니다.
옆집 개발자 유튜브 채널을 참고하세요.
윈도우즈에 아이오닉 설치하기 | How to install Ionic on Windows 10
맥에 아이오닉 설치하기 | How to install Ionic on Mac Big Sur
우분투에 아이오닉 설치하기 | How to install Ionic on Ubuntu 20.04
파이어베이스 실시간 데이터베이스와 파이어스토어 테스트 데이터 입력/삭제
파이어베이스 파이어스토어 페이지네이션과 무한 스크롤 파트 1
파이어베이스 파이어스토어 페이지네이션과 무한 스크롤 파트 2
| 장 | 프로젝트 이름 | 프로젝트 설명 |
|---|---|---|
| 1장 | ch01 | 아이오닉 플랫폼 소개 |
| 2장 | ch02 | 아이오닉 시작 프로젝트 |
| 2장 | ch02_lifecycle | 아이오닉 앱 생애 주기 |
| 3장 | ch03 | 타입스크립트 |
| 4장 | ch04_kmeetup_ui | 아이오닉 구조와 사용자 인터페이스 |
| 4장 | ch04_master_detail | 마스터 디테일 패턴 |
| 5장 | ch05_fb_firestore | 클라우드 파이어스토어 |
| 5장 | ch05_fb_firestore_data | 클라우드 파이어스토어 데이터 입력 |
| 5장 | ch05_fb_realtime | 실시간 데이터베이스 |
| 5장 | ch05_fb_realtime_data | 실시간 데이터베이스 데이터 입력 |
| 6장 | ch06_rxjs | RxJS |
| 6장 | ch06_user_guard | 아이오닉 가드 |
| 7장 | ch07 | 소셜 로그인, 지도, 알림 |
| 7장 | ch07_ios | iOS 전용 소셜 로그인, 지도, 알림 |
| 8장 | ch08 | 테마와 다국어 |
| 8장 | ch08_theme | 테마 전용 |
| 9장 | ch09_fb_firestore | KMeetUp 클라우드 파이어스토어 |
| 9장 | ch09_fb_realtime | KMeetUp 실시간 데이터베이스 |
| 9장 | ch09_fb_realtime_ios | KMeetUp iOS 전용 |
| 10장 | ch10_test | 테스트 |
| 11장 | ch11 | 배포와 출시 |
| 12장 | ch12_mycoinprice | 프로그레시브 웹 앱 |
| 13장 | ch13_google_vision_image | 기계 학습 이미지 인식 |
| 13장 | ch13_google_vision_ocr | 기계 학습 문자 인식 |
| 13장 | ch13_mnist | 기계 학습 숫자 인식 |
| 13장 | ch13_mnist_canvas | 기계 학습 숫자 그리기 인식 |
아래 프로젝트는 책 출간 이후에 추가한 내용입니다. 옆집 개발자 유튜브 채널의 동영상을 참고하세요.
| 프로젝트 이름 | 프로젝트 설명 | 강좌 링크 |
|---|---|---|
| extra_ch06_fb_firestore_paging_crud | 페이지네이션과 무한 스크롤 파트 1 | https://youtu.be/0XtsnVX7e2Y |
| extra_ch06_fb_firestore_paging_crud | 페이지네이션과 무한 스크롤 파트 2 | https://youtu.be/4HZ9aV8a14s |
| N/A | 텐서플로우로 학습된 모델 변환 | https://youtu.be/JPtXysC34xI |
| extra_ionic6_new_components | 아이오닉 6 신규 컴포넌트 | https://youtu.be/7qXkKBan8mc |
먼저 예제 폴더로 이동합니다.
- npm install 명령어를 실행합니다.
- ionic serve 혹은 ionic serve --lab 명령어를 실행합니다.
추가 사항
- 파이어베이스 프로젝트는 파이어베이스 SDK를 추가합니다.
- 구글 비전 프로젝트는 구글 비전 API 키를 추가합니다.
- 커패시터나 코도바 플러그인을 사용하는 프로젝트는 해당 플러그인의 추가 사항에 맞게 설치합니다.
- 플러그인 종류에 따라 config.xml 이나 index.html를 적절하게 수정합니다.
- 그 외 배포와 관련된 사항은 11장 배포와 설치 장을 참고합니다.
공식적인 하드웨어 요구사항이 정해져 있지는 않지만, 최소한 다음과 같은 사양을 가진 컴퓨터에서 개발하기를 권장합니다.
- 듀얼 코어 이상의 CPU
- 4GB 이상의 메모리
- 1280 * 1024 이상의 해상도를 지원하는 모니터
윈도우즈, 맥, 리눅스를 지원하므로 해당 운영체제에 맞는 개발 환경을 설정합니다.
IDE 선택은 각자 취향에 맞는 걸 선택합니다. 아래는 대표적인 세 가지 IDE입니다.
| IDE 종류 | 다운로드 주소 | 유료/무료 |
|---|---|---|
| 비주얼 스튜디오 코드 | https://code.visualstudio.com/download | 무료 |
| 웹스톰 | https://www.jetbrains.com/webstorm/ | 유료 |
| 이클립스 | https://www.eclipse.org/ide/ | 무료 |
이 저장소의 소스 코드는 MIT 라이선스를 따릅니다
'다크 테마' 문자열을 '어두운 테마'로 변경합니다.
다크 테마
어두운 테마
- ch08\src\assets\language\kr.json
- ch09_fb_firestore\src\assets\language\kr.json
- ch09_fb_realtime\src\assets\language\kr.json
- ch09_fb_realtime_ios\src\assets\language\kr.json
- ch10_test\src\assets\language\kr.json
아래 home.page.ts 컴포넌트 getListPagination 함수의 기본값 인자를 변경합니다.
- ch06_rxjs\src\app\home\home.page.ts
async getListPagination(startAtKey?: string) {...}
async getListPagination(startAtKey: string = ' ') {...}
아래 home.page.ts 컴포넌트 getData 함수의 기본값 인자를 변경합니다.
- ch09_fb_firestore\src\app\home\home.page.ts
- ch09_fb_realtime\src\app\home\home.page.ts
- ch09_fb_realtime_ios\src\app\home\home.page.ts
- ch10_test\src\app\home\home.page.ts
- ch10_test\src\app\home\home.page.spec.ts
코드 9-11 ch09_fb_realtime\src\app\home\home.page.ts
getData(event:any){...}
getData(event: any = null) {...}