SlideShare a Scribd company logo
1 of 26
아이오닉 하이브리드 앱 개발 과정
(아이오닉2로 동적 모바일 앱 만들기)
아이오닉2를 사용해 재미있고 몰입되는 모바일 앱을 제작할 수 있
도록 다양한 아이오닉 2의 컴포넌트를 배우고, 외부 서비스를 통합
하며, 기능을 구현해보는 전문적인 앱 제작 과정을 풍부한 예제를 통
해 쉽게 따라가며 배울 수 있는 수업
과정특징
- 애플리케이션 개발을 위한 아이오닉 기능 이해
- 파이어베이스와 아이오닉을 이용한 채팅 앱 제작
- 써드 파티 REST API를 사용한 주식 추적 앱 제작 및
아이오닉 네비게이션과 페이지를 활용한 레이아웃 구성
- 아이오닉과 코르도바 플러그인을 사용한 미디어 플레이어 앱 구현
- 파이어베이스를 이용한 상용 애플리케이션 제작
- 실시간 아이오닉 애플리케이션 제작을 위한 모범 사례 연구
교육목표
아이오닉 2
과정대상 및 특징
※ 아이오닉 2는 Angular 2, 타입스크립트, SASS 같은 기술 위에
개발된 아이오닉 모바일 SDK의 최신 버전
※ 교육대상 :
- 모바일 앱 개발자
- 프론트 개발자
- 웹 개발자
※ 교육시간 : 평일/주말 주간 3일 21시간
평일주간반 신청 주말주간반 신청
아이오닉 하이브리드 앱 개발 과정
(아이오닉2로 동적 모바일 앱 만들기)
교육내용
파이어베이스를 이용한 채팅 애플리케이션
Marketcloud를 이용한 쇼핑몰 애플리케이션
학회 애플리케이션
StockMarket 애플리케이션
워드프레스 클라이언트 애플리케이션
미디어 플레이어 앱
파이어베이스를 이용한 소셜 애플리케이션
아이오닉 모바일 앱
프로그래밍
1장. 파이어베이스를 이용한 채팅 애플리케이션
__파이어베이스
____AngularFire2
____리스트와 오브젝트
____템플릿
____파이어베이스 시작
____파이어베이스 애플리케이션 만들기
____비밀번호 인증 활성화
____파이어베이스 설정 정보 가져오기
__소프트웨어 설치
____Node와 npm 설치
____깃 설치
____플랫폼 SDK 설치
아이오닉 모바일 앱
프로그래밍
____아이오닉 CLI와 코르도바 설치
__애플리케이션 정의
____기능
____애플리케이션 흐름
____유저 인터페이스 모형
____파이어베이스의 데이터 구조
__애플리케이션 스캐폴딩과 설정
____코르도바 플러그인 설치
____파이어베이스와 AngularFire2 설치
____Typings 설치
____파이어베이스용 타입스크립트 데피니션 설치
__애플리케이션 코딩
____app.ts 파일 정의하기
아이오닉 모바일 앱
프로그래밍
____애플리케이션 프로바이더
________AuthProvider 정의
________UserProvider 정의
________ChatsProvider 정의
________UtilProvider 정의
____애플리케이션 페이지
________LoginPage 정의
________템플릿
________커스텀 이메일 검사기 정의
________TabsPage 정의
________템플릿
________UsersPage 정의
아이오닉 모바일 앱
프로그래밍
________템플릿
________ChatsPage 정의
________템플릿
________ChatViewPage 정의
________템플릿
________스타일시트
________AccountPage 정의
________템플릿
__스타일 추가
__애플리케이션 실행
____애플리케이션 화면
__정리
아이오닉 모바일 앱
프로그래밍
2장. Marketcloud를 이용한 쇼핑몰 애플리케이션
__소개
__Marketcloud
____Marketcloud 애플리케이션 생성
____Marketcloud 대시보드 사용
________카테고리 만들기
________상품 만들기
________애플리케이션을 위한 통화 설정
____Marketcloud JS SDK
________API 레퍼런스
__결제 통합
__애플리케이션 정의
____기능
____애플리케이션의 흐름
__애플리케이션 스캐폴딩과 설정
아이오닉 모바일 앱
프로그래밍
____모듈 설치
________Marketcloud JS SDK 설치
________Braintree 코르도바 플러그인 설치
__애플리케이션 코딩
____index.html 파일
____app.ts 정의
________템플릿
____애플리케이션의 프로바이더
________StorageProvider 작성
________UtilProvider 작성
________MarketProvider 작성
________CartProvider 작성
________UserProvider 작성
____애플리케이션 페이지
아이오닉 모바일 앱
프로그래밍
________StorePage 작성
________템플릿
________CategoryPage 작성
________템플릿
________ProductPage 작성
________템플릿
________ImageModal 작성
________템플릿
________스타일시트
________CartPage 작성
________템플릿
________AuthPage 작성
________템플릿
________OrderPage 작성
________템플릿
__스타일 추가
__애플리케이션 실행
____플랫폼을 추가하고 실제 기기에서 애플리케이션 구동
____애플리케이션 화면
__정리
아이오닉 모바일 앱
프로그래밍
3장. 학회 애플리케이션
__소개
__JSON 데이터
____JSON 이해
__애플리케이션 정의
____기능
____애플리케이션 흐름
__애플리케이션 스캐폴딩과 설정
____모듈 설치
__애플리케이션 코딩
____탭 스타터의 구조
____app.ts 작성
________ConfProvder 작성
아이오닉 모바일 앱
프로그래밍
____애플리케이션 페이지
________TabsPage 페이지 작성
________SpeakersPage 페이지 작성
________SchedulePage 페이지 작성
________SessionDetail 페이지 작성
________SpeakerDetail 페이지 작성
________AboutPage 페이지 작성
________FavoritePage 페이지 정의
__애플리케이션 실행
____애플리케이션 화면
__정리
아이오닉 모바일 앱
프로그래밍
4장. StockMarket 애플리케이션
__소개
__Yahoo Finance API
____주식 정보 엔드포인트
____심볼명 엔드포인트
____과거 정보 엔드포인트
____자세한 주식 정보
__앱 기능 정의
____애플리케이션 흐름
__애플리케이션 스캐폴딩과 설정
____모듈 설치
________Chartist 라이브러리 설치
__코딩 부분
____index.html 파일
아이오닉 모바일 앱
프로그래밍
4장. StockMarket 애플리케이션
__소개
__Yahoo Finance API
____주식 정보 엔드포인트
____심볼명 엔드포인트
____과거 정보 엔드포인트
____자세한 주식 정보
__앱 기능 정의
____애플리케이션 흐름
__애플리케이션 스캐폴딩과 설정
____모듈 설치
________Chartist 라이브러리 설치
__코딩 부분
____index.html 파일
____app.ts 정의
____애플리케이션 프로바이더
________StorageProvider 정의
아이오닉 모바일 앱
프로그래밍
________StockInfo 프로바이더 정의
____애플리케이션 컴포넌트
________StockCmp 컴포넌트
________StockChart
________StockDetailCmp
____애플리케이션 페이지
________StockList 페이지 정의하기
________QuoteSearch 모달 정의
________Detail 페이지 정의하기
__core 스타일 추가
__애플리케이션 실행
____애플리케이션 화면
__정리
아이오닉 모바일 앱
프로그래밍
5장. 워드프레스 클라이언트 애플리케이션
__백엔드
____푸시 알람
____구글 애널리틱스
____워드프레스 JSON API
__워드프레스 설정
____플러그인 설치
________푸시 알람 설정
__애플리케이션 흐름
__애플리케이션 스캐폴딩과 설정
____코르도바 플러그인 설치
____CORS 문제
아이오닉 모바일 앱
프로그래밍
__애플리애케이션 코딩
____애플리케이션 설정
____app.ts 정의
____애플리케이션 프로바이더
________UtilProvider 정의
________WpProvider 정의
________PushProvider 정의
____HtmlPipe
____Post 컴포넌트
________입력
________출력
____애플리케이션 페이지
________TabsPage 정의
________PostsPage 정의
아이오닉 모바일 앱
프로그래밍
________템플릿
________PostPage 정의
________CategoryListPage 정의
________WpPageList
________WpPage 정의
________FavoritePage 정의
________SettingsPage 정의
__애플리케이션 스타일링
__애플리케이션 실행
____애플리케이션 화면
__정리
아이오닉 모바일 앱
프로그래밍
6장. 미디어 플레이어 앱
__주요 핵심
____재생
____파일 시스템
____로컬 저장소
__애플리케이션 흐름
__애플리케이션 스캐폴딩과 설정
____모듈 설치
____애플리케이션 실행 및 디버깅
__애플리케이션 코딩
____최상위 앱 컴포넌트
____애플리케이션 프로바이더
________UtilProvider 정의
________FileProvider 정의
아이오닉 모바일 앱
프로그래밍
________PlayerProvider 정의
____Imclock 파이프
____ImControls 컴포넌트
________입력
________출력
____애플리케이션 페이지
________BrowsePage 정의
________템플릿
________PlaylistPage 정의
________PlayerPage 정의
__애플리케이션 실행
____애플리케이션 화면
__정리
아이오닉 모바일 앱
프로그래밍
7장. 파이어베이스를 이용한 소셜 애플리케이션
__애플리케이션 정의
____게시물 동작 원리
____기능
____애플리케이션 흐름
____파이어베이스 데이터 구조
__애플리케이션 스캐폴딩과 설정
____코르도바 플러그인 설치
____Typings 설치
____파이어베이스와 AngularFire2 설치
____ng2-moment 설치
____파이어베이스를 위한 타입스크립트 데피니션 설치
__애플리케이션 코딩
아이오닉 모바일 앱
프로그래밍
____app.ts 정의
____애플리케이션 프로바이더
________UtilProvider 정의
________AuthProvider 정의
________UserProvider 정의
________SocialProvider 정의
____post 컴포넌트
________입력
____애플리케이션 페이지
________LoginPage 정의
________CreateAccount 페이지 정의
아이오닉 모바일 앱
프로그래밍
________TabsPage 정의
________TimelinePage 정의
________PostPage 정의
________PeoplePage 정의
________UserProfilePage 정의
________AccountPage 정의
__스타일 추가
__애플리케이션 실행
____추가로 앱 개선
____애플리케이션 화면
__정리
02-851-4790
http://topcredu.co.kr

More Related Content

Similar to [아이오닉학원]아이오닉 하이브리드 앱 개발 과정(아이오닉2로 동적 모바일 앱 만들기)

my activities before getting a job
my activities before getting a jobmy activities before getting a job
my activities before getting a jobDeo Kim
 
[I2max 아이투맥스] 2015 salesforce 발표자료 cloud동향에서 salesforce 앱 개발까지_ salesfroce 1...
[I2max 아이투맥스] 2015 salesforce 발표자료  cloud동향에서 salesforce 앱 개발까지_ salesfroce 1...[I2max 아이투맥스] 2015 salesforce 발표자료  cloud동향에서 salesforce 앱 개발까지_ salesfroce 1...
[I2max 아이투맥스] 2015 salesforce 발표자료 cloud동향에서 salesforce 앱 개발까지_ salesfroce 1...i2max
 
한 번에 개발하는 안드로이드&iOS 앱 with 앱메소드
한 번에 개발하는 안드로이드&iOS 앱 with 앱메소드한 번에 개발하는 안드로이드&iOS 앱 with 앱메소드
한 번에 개발하는 안드로이드&iOS 앱 with 앱메소드Devgear
 
앱 디자인 시작하기
앱 디자인 시작하기앱 디자인 시작하기
앱 디자인 시작하기Sangho Lee
 
[특강] 현업 개발자에게 듣는 모바일 개발자의 삶과 매력 / 노현석(카카오뱅크)
[특강] 현업 개발자에게 듣는 모바일 개발자의 삶과 매력 / 노현석(카카오뱅크)[특강] 현업 개발자에게 듣는 모바일 개발자의 삶과 매력 / 노현석(카카오뱅크)
[특강] 현업 개발자에게 듣는 모바일 개발자의 삶과 매력 / 노현석(카카오뱅크)CONNECT FOUNDATION
 
브랜디드어플리케이션 소개자료 1_2(100512)
브랜디드어플리케이션 소개자료 1_2(100512)브랜디드어플리케이션 소개자료 1_2(100512)
브랜디드어플리케이션 소개자료 1_2(100512)ideaguide
 
하이브리드 앱(Hybrid App)
하이브리드 앱(Hybrid App)하이브리드 앱(Hybrid App)
하이브리드 앱(Hybrid App)Changhwan Yi
 
Android Developer JeongJaeyun
Android Developer JeongJaeyunAndroid Developer JeongJaeyun
Android Developer JeongJaeyunjaeyunjeong1
 
목적에 맞게 Angular, React, Vue
목적에 맞게 Angular, React, Vue목적에 맞게 Angular, React, Vue
목적에 맞게 Angular, React, VueGunhee Lee
 
Appview 소개
Appview 소개Appview 소개
Appview 소개logeo
 
어랍쇼 발표자료
어랍쇼 발표자료어랍쇼 발표자료
어랍쇼 발표자료NikYromi
 
Jandy - Introduction Paper
Jandy - Introduction PaperJandy - Introduction Paper
Jandy - Introduction Paper진성 박
 
Angular Popular Tools
Angular Popular ToolsAngular Popular Tools
Angular Popular ToolsSangHun Lee
 
가장 쉬운 안드로이드 앱 개발 방법 앱인벤터
가장 쉬운 안드로이드 앱 개발 방법 앱인벤터가장 쉬운 안드로이드 앱 개발 방법 앱인벤터
가장 쉬운 안드로이드 앱 개발 방법 앱인벤터Choulhyouc Lee
 
Citrine소개서
Citrine소개서Citrine소개서
Citrine소개서logeo
 

Similar to [아이오닉학원]아이오닉 하이브리드 앱 개발 과정(아이오닉2로 동적 모바일 앱 만들기) (20)

my activities before getting a job
my activities before getting a jobmy activities before getting a job
my activities before getting a job
 
[I2max 아이투맥스] 2015 salesforce 발표자료 cloud동향에서 salesforce 앱 개발까지_ salesfroce 1...
[I2max 아이투맥스] 2015 salesforce 발표자료  cloud동향에서 salesforce 앱 개발까지_ salesfroce 1...[I2max 아이투맥스] 2015 salesforce 발표자료  cloud동향에서 salesforce 앱 개발까지_ salesfroce 1...
[I2max 아이투맥스] 2015 salesforce 발표자료 cloud동향에서 salesforce 앱 개발까지_ salesfroce 1...
 
수정수정
수정수정수정수정
수정수정
 
한 번에 개발하는 안드로이드&iOS 앱 with 앱메소드
한 번에 개발하는 안드로이드&iOS 앱 with 앱메소드한 번에 개발하는 안드로이드&iOS 앱 with 앱메소드
한 번에 개발하는 안드로이드&iOS 앱 with 앱메소드
 
[PandoraCube] APK를 출시한다면
[PandoraCube] APK를 출시한다면[PandoraCube] APK를 출시한다면
[PandoraCube] APK를 출시한다면
 
앱 디자인 시작하기
앱 디자인 시작하기앱 디자인 시작하기
앱 디자인 시작하기
 
[특강] 현업 개발자에게 듣는 모바일 개발자의 삶과 매력 / 노현석(카카오뱅크)
[특강] 현업 개발자에게 듣는 모바일 개발자의 삶과 매력 / 노현석(카카오뱅크)[특강] 현업 개발자에게 듣는 모바일 개발자의 삶과 매력 / 노현석(카카오뱅크)
[특강] 현업 개발자에게 듣는 모바일 개발자의 삶과 매력 / 노현석(카카오뱅크)
 
브랜디드어플리케이션 소개자료 1_2(100512)
브랜디드어플리케이션 소개자료 1_2(100512)브랜디드어플리케이션 소개자료 1_2(100512)
브랜디드어플리케이션 소개자료 1_2(100512)
 
하이브리드 앱(Hybrid App)
하이브리드 앱(Hybrid App)하이브리드 앱(Hybrid App)
하이브리드 앱(Hybrid App)
 
Android Developer JeongJaeyun
Android Developer JeongJaeyunAndroid Developer JeongJaeyun
Android Developer JeongJaeyun
 
목적에 맞게 Angular, React, Vue
목적에 맞게 Angular, React, Vue목적에 맞게 Angular, React, Vue
목적에 맞게 Angular, React, Vue
 
Architect
ArchitectArchitect
Architect
 
Appview 소개
Appview 소개Appview 소개
Appview 소개
 
[IT교육/IT학원]Develope를 위한 IT실무교육
[IT교육/IT학원]Develope를 위한 IT실무교육[IT교육/IT학원]Develope를 위한 IT실무교육
[IT교육/IT학원]Develope를 위한 IT실무교육
 
어랍쇼 발표자료
어랍쇼 발표자료어랍쇼 발표자료
어랍쇼 발표자료
 
Jandy - Introduction Paper
Jandy - Introduction PaperJandy - Introduction Paper
Jandy - Introduction Paper
 
Angular Popular Tools
Angular Popular ToolsAngular Popular Tools
Angular Popular Tools
 
가장 쉬운 안드로이드 앱 개발 방법 앱인벤터
가장 쉬운 안드로이드 앱 개발 방법 앱인벤터가장 쉬운 안드로이드 앱 개발 방법 앱인벤터
가장 쉬운 안드로이드 앱 개발 방법 앱인벤터
 
Hellotutorial
HellotutorialHellotutorial
Hellotutorial
 
Citrine소개서
Citrine소개서Citrine소개서
Citrine소개서
 

More from 탑크리에듀(구로디지털단지역3번출구 2분거리)

[뷰제이에스학원]뷰제이에스(Vue.js) 프로그래밍 입문(프로그레시브 자바스크립트 프레임워크)
[뷰제이에스학원]뷰제이에스(Vue.js) 프로그래밍 입문(프로그레시브 자바스크립트 프레임워크)[뷰제이에스학원]뷰제이에스(Vue.js) 프로그래밍 입문(프로그레시브 자바스크립트 프레임워크)
[뷰제이에스학원]뷰제이에스(Vue.js) 프로그래밍 입문(프로그레시브 자바스크립트 프레임워크)탑크리에듀(구로디지털단지역3번출구 2분거리)
 
(WPF교육)ListBox와 Linq 쿼리를 이용한 간단한 데이터바인딩, 새창 띄우기, 이벤트 및 델리게이트를 통한 메인윈도우의 ListB...
(WPF교육)ListBox와 Linq 쿼리를 이용한 간단한 데이터바인딩, 새창 띄우기, 이벤트 및 델리게이트를 통한 메인윈도우의 ListB...(WPF교육)ListBox와 Linq 쿼리를 이용한 간단한 데이터바인딩, 새창 띄우기, 이벤트 및 델리게이트를 통한 메인윈도우의 ListB...
(WPF교육)ListBox와 Linq 쿼리를 이용한 간단한 데이터바인딩, 새창 띄우기, 이벤트 및 델리게이트를 통한 메인윈도우의 ListB...탑크리에듀(구로디지털단지역3번출구 2분거리)
 
[자마린교육/자마린실습]자바,스프링프레임워크(스프링부트) RESTful 웹서비스 구현 실습,자마린에서 스프링 웹서비스를 호출하고 응답 JS...
[자마린교육/자마린실습]자바,스프링프레임워크(스프링부트) RESTful 웹서비스 구현 실습,자마린에서 스프링 웹서비스를 호출하고 응답 JS...[자마린교육/자마린실습]자바,스프링프레임워크(스프링부트) RESTful 웹서비스 구현 실습,자마린에서 스프링 웹서비스를 호출하고 응답 JS...
[자마린교육/자마린실습]자바,스프링프레임워크(스프링부트) RESTful 웹서비스 구현 실습,자마린에서 스프링 웹서비스를 호출하고 응답 JS...탑크리에듀(구로디지털단지역3번출구 2분거리)
 
C#기초에서 윈도우, 스마트폰 앱개발 과정(c#.net, ado.net, win form, wpf, 자마린)_자마린학원_씨샵교육_WPF학원...
C#기초에서 윈도우, 스마트폰 앱개발 과정(c#.net, ado.net, win form, wpf, 자마린)_자마린학원_씨샵교육_WPF학원...C#기초에서 윈도우, 스마트폰 앱개발 과정(c#.net, ado.net, win form, wpf, 자마린)_자마린학원_씨샵교육_WPF학원...
C#기초에서 윈도우, 스마트폰 앱개발 과정(c#.net, ado.net, win form, wpf, 자마린)_자마린학원_씨샵교육_WPF학원...탑크리에듀(구로디지털단지역3번출구 2분거리)
 
자바, 웹 기초와 스프링 프레임워크 & 마이바티스 재직자 향상과정(자바학원/자바교육/자바기업출강]
자바, 웹 기초와 스프링 프레임워크 & 마이바티스 재직자 향상과정(자바학원/자바교육/자바기업출강]자바, 웹 기초와 스프링 프레임워크 & 마이바티스 재직자 향상과정(자바학원/자바교육/자바기업출강]
자바, 웹 기초와 스프링 프레임워크 & 마이바티스 재직자 향상과정(자바학원/자바교육/자바기업출강]탑크리에듀(구로디지털단지역3번출구 2분거리)
 
3. 안드로이드 애플리케이션 구성요소 3.2인텐트 part01(안드로이드학원/안드로이드교육/안드로이드강좌/안드로이드기업출강]
3. 안드로이드 애플리케이션 구성요소 3.2인텐트 part01(안드로이드학원/안드로이드교육/안드로이드강좌/안드로이드기업출강]3. 안드로이드 애플리케이션 구성요소 3.2인텐트 part01(안드로이드학원/안드로이드교육/안드로이드강좌/안드로이드기업출강]
3. 안드로이드 애플리케이션 구성요소 3.2인텐트 part01(안드로이드학원/안드로이드교육/안드로이드강좌/안드로이드기업출강]탑크리에듀(구로디지털단지역3번출구 2분거리)
 

More from 탑크리에듀(구로디지털단지역3번출구 2분거리) (20)

자마린.안드로이드 기본 내장레이아웃(Built-In List Item Layouts)
자마린.안드로이드 기본 내장레이아웃(Built-In List Item Layouts)자마린.안드로이드 기본 내장레이아웃(Built-In List Item Layouts)
자마린.안드로이드 기본 내장레이아웃(Built-In List Item Layouts)
 
(스프링프레임워크 강좌)스프링부트개요 및 HelloWorld 따라하기
(스프링프레임워크 강좌)스프링부트개요 및 HelloWorld 따라하기(스프링프레임워크 강좌)스프링부트개요 및 HelloWorld 따라하기
(스프링프레임워크 강좌)스프링부트개요 및 HelloWorld 따라하기
 
자마린 iOS 멀티화면 컨트롤러_네비게이션 컨트롤러, 루트 뷰 컨트롤러
자마린 iOS 멀티화면 컨트롤러_네비게이션 컨트롤러, 루트 뷰 컨트롤러자마린 iOS 멀티화면 컨트롤러_네비게이션 컨트롤러, 루트 뷰 컨트롤러
자마린 iOS 멀티화면 컨트롤러_네비게이션 컨트롤러, 루트 뷰 컨트롤러
 
[뷰제이에스학원]뷰제이에스(Vue.js) 프로그래밍 입문(프로그레시브 자바스크립트 프레임워크)
[뷰제이에스학원]뷰제이에스(Vue.js) 프로그래밍 입문(프로그레시브 자바스크립트 프레임워크)[뷰제이에스학원]뷰제이에스(Vue.js) 프로그래밍 입문(프로그레시브 자바스크립트 프레임워크)
[뷰제이에스학원]뷰제이에스(Vue.js) 프로그래밍 입문(프로그레시브 자바스크립트 프레임워크)
 
[씨샵학원/씨샵교육]C#, 윈폼, 네트워크, ado.net 실무프로젝트 과정
[씨샵학원/씨샵교육]C#, 윈폼, 네트워크, ado.net 실무프로젝트 과정[씨샵학원/씨샵교육]C#, 윈폼, 네트워크, ado.net 실무프로젝트 과정
[씨샵학원/씨샵교육]C#, 윈폼, 네트워크, ado.net 실무프로젝트 과정
 
[정보처리기사자격증학원]정보처리기사 취득 양성과정(국비무료 자격증과정)
[정보처리기사자격증학원]정보처리기사 취득 양성과정(국비무료 자격증과정)[정보처리기사자격증학원]정보처리기사 취득 양성과정(국비무료 자격증과정)
[정보처리기사자격증학원]정보처리기사 취득 양성과정(국비무료 자격증과정)
 
[wpf학원,wpf교육]닷넷, c#기반 wpf 프로그래밍 인터페이스구현 재직자 향상과정
[wpf학원,wpf교육]닷넷, c#기반 wpf 프로그래밍 인터페이스구현 재직자 향상과정[wpf학원,wpf교육]닷넷, c#기반 wpf 프로그래밍 인터페이스구현 재직자 향상과정
[wpf학원,wpf교육]닷넷, c#기반 wpf 프로그래밍 인터페이스구현 재직자 향상과정
 
(WPF교육)ListBox와 Linq 쿼리를 이용한 간단한 데이터바인딩, 새창 띄우기, 이벤트 및 델리게이트를 통한 메인윈도우의 ListB...
(WPF교육)ListBox와 Linq 쿼리를 이용한 간단한 데이터바인딩, 새창 띄우기, 이벤트 및 델리게이트를 통한 메인윈도우의 ListB...(WPF교육)ListBox와 Linq 쿼리를 이용한 간단한 데이터바인딩, 새창 띄우기, 이벤트 및 델리게이트를 통한 메인윈도우의 ListB...
(WPF교육)ListBox와 Linq 쿼리를 이용한 간단한 데이터바인딩, 새창 띄우기, 이벤트 및 델리게이트를 통한 메인윈도우의 ListB...
 
[자마린교육/자마린실습]자바,스프링프레임워크(스프링부트) RESTful 웹서비스 구현 실습,자마린에서 스프링 웹서비스를 호출하고 응답 JS...
[자마린교육/자마린실습]자바,스프링프레임워크(스프링부트) RESTful 웹서비스 구현 실습,자마린에서 스프링 웹서비스를 호출하고 응답 JS...[자마린교육/자마린실습]자바,스프링프레임워크(스프링부트) RESTful 웹서비스 구현 실습,자마린에서 스프링 웹서비스를 호출하고 응답 JS...
[자마린교육/자마린실습]자바,스프링프레임워크(스프링부트) RESTful 웹서비스 구현 실습,자마린에서 스프링 웹서비스를 호출하고 응답 JS...
 
[구로자마린학원/자마린강좌/자마린교육]3. xamarin.ios 3.3.5 추가적인 사항
[구로자마린학원/자마린강좌/자마린교육]3. xamarin.ios  3.3.5 추가적인 사항[구로자마린학원/자마린강좌/자마린교육]3. xamarin.ios  3.3.5 추가적인 사항
[구로자마린학원/자마린강좌/자마린교육]3. xamarin.ios 3.3.5 추가적인 사항
 
3. xamarin.i os 3.3 xamarin.ios helloworld 자세히 살펴보기 3.4.4 view controllers an...
3. xamarin.i os 3.3 xamarin.ios helloworld 자세히 살펴보기 3.4.4 view controllers an...3. xamarin.i os 3.3 xamarin.ios helloworld 자세히 살펴보기 3.4.4 view controllers an...
3. xamarin.i os 3.3 xamarin.ios helloworld 자세히 살펴보기 3.4.4 view controllers an...
 
5. 서브 쿼리(sub query) 5.1 서브 쿼리(sub query) 개요 5.2 단일행 서브쿼리(single row sub query)
5. 서브 쿼리(sub query) 5.1 서브 쿼리(sub query) 개요 5.2 단일행 서브쿼리(single row sub query)5. 서브 쿼리(sub query) 5.1 서브 쿼리(sub query) 개요 5.2 단일행 서브쿼리(single row sub query)
5. 서브 쿼리(sub query) 5.1 서브 쿼리(sub query) 개요 5.2 단일행 서브쿼리(single row sub query)
 
3. xamarin.i os 3.1 xamarin.ios 설치, 개발환경 3.2 xamarin.ios helloworld(단일 뷰) 실습[...
3. xamarin.i os 3.1 xamarin.ios 설치, 개발환경 3.2 xamarin.ios helloworld(단일 뷰) 실습[...3. xamarin.i os 3.1 xamarin.ios 설치, 개발환경 3.2 xamarin.ios helloworld(단일 뷰) 실습[...
3. xamarin.i os 3.1 xamarin.ios 설치, 개발환경 3.2 xamarin.ios helloworld(단일 뷰) 실습[...
 
(닷넷,자마린,아이폰실습)Xamarin.iOS HelloWorld 실습_멀티화면,화면전환_Xamarin교육/Xamarin강좌
(닷넷,자마린,아이폰실습)Xamarin.iOS HelloWorld 실습_멀티화면,화면전환_Xamarin교육/Xamarin강좌(닷넷,자마린,아이폰실습)Xamarin.iOS HelloWorld 실습_멀티화면,화면전환_Xamarin교육/Xamarin강좌
(닷넷,자마린,아이폰실습)Xamarin.iOS HelloWorld 실습_멀티화면,화면전환_Xamarin교육/Xamarin강좌
 
C#기초에서 윈도우, 스마트폰 앱개발 과정(c#.net, ado.net, win form, wpf, 자마린)_자마린학원_씨샵교육_WPF학원...
C#기초에서 윈도우, 스마트폰 앱개발 과정(c#.net, ado.net, win form, wpf, 자마린)_자마린학원_씨샵교육_WPF학원...C#기초에서 윈도우, 스마트폰 앱개발 과정(c#.net, ado.net, win form, wpf, 자마린)_자마린학원_씨샵교육_WPF학원...
C#기초에서 윈도우, 스마트폰 앱개발 과정(c#.net, ado.net, win form, wpf, 자마린)_자마린학원_씨샵교육_WPF학원...
 
자바, 웹 기초와 스프링 프레임워크 & 마이바티스 재직자 향상과정(자바학원/자바교육/자바기업출강]
자바, 웹 기초와 스프링 프레임워크 & 마이바티스 재직자 향상과정(자바학원/자바교육/자바기업출강]자바, 웹 기초와 스프링 프레임워크 & 마이바티스 재직자 향상과정(자바학원/자바교육/자바기업출강]
자바, 웹 기초와 스프링 프레임워크 & 마이바티스 재직자 향상과정(자바학원/자바교육/자바기업출강]
 
3. xamarin.i os 3.1 xamarin.ios 설치, 개발환경 3.2 xamarin.ios helloworld_자마린학원_자마린...
3. xamarin.i os 3.1 xamarin.ios 설치, 개발환경 3.2 xamarin.ios helloworld_자마린학원_자마린...3. xamarin.i os 3.1 xamarin.ios 설치, 개발환경 3.2 xamarin.ios helloworld_자마린학원_자마린...
3. xamarin.i os 3.1 xamarin.ios 설치, 개발환경 3.2 xamarin.ios helloworld_자마린학원_자마린...
 
3. 안드로이드 애플리케이션 구성요소 3.2인텐트 part01(안드로이드학원/안드로이드교육/안드로이드강좌/안드로이드기업출강]
3. 안드로이드 애플리케이션 구성요소 3.2인텐트 part01(안드로이드학원/안드로이드교육/안드로이드강좌/안드로이드기업출강]3. 안드로이드 애플리케이션 구성요소 3.2인텐트 part01(안드로이드학원/안드로이드교육/안드로이드강좌/안드로이드기업출강]
3. 안드로이드 애플리케이션 구성요소 3.2인텐트 part01(안드로이드학원/안드로이드교육/안드로이드강좌/안드로이드기업출강]
 
2. xamarin.android 2.5.3 xamarin.android .aar binding(안드로이드 .aar file을 자마린 바...
2. xamarin.android  2.5.3 xamarin.android .aar binding(안드로이드 .aar file을 자마린 바...2. xamarin.android  2.5.3 xamarin.android .aar binding(안드로이드 .aar file을 자마린 바...
2. xamarin.android 2.5.3 xamarin.android .aar binding(안드로이드 .aar file을 자마린 바...
 
유니티,Unity 엔진을 활용한 VR/AR 콘텐츠 개발 _사물인터넷(IoT) 네크워크 프로그래밍
유니티,Unity 엔진을 활용한 VR/AR 콘텐츠 개발 _사물인터넷(IoT) 네크워크 프로그래밍유니티,Unity 엔진을 활용한 VR/AR 콘텐츠 개발 _사물인터넷(IoT) 네크워크 프로그래밍
유니티,Unity 엔진을 활용한 VR/AR 콘텐츠 개발 _사물인터넷(IoT) 네크워크 프로그래밍
 

[아이오닉학원]아이오닉 하이브리드 앱 개발 과정(아이오닉2로 동적 모바일 앱 만들기)

  • 1. 아이오닉 하이브리드 앱 개발 과정 (아이오닉2로 동적 모바일 앱 만들기)
  • 2. 아이오닉2를 사용해 재미있고 몰입되는 모바일 앱을 제작할 수 있 도록 다양한 아이오닉 2의 컴포넌트를 배우고, 외부 서비스를 통합 하며, 기능을 구현해보는 전문적인 앱 제작 과정을 풍부한 예제를 통 해 쉽게 따라가며 배울 수 있는 수업 과정특징
  • 3. - 애플리케이션 개발을 위한 아이오닉 기능 이해 - 파이어베이스와 아이오닉을 이용한 채팅 앱 제작 - 써드 파티 REST API를 사용한 주식 추적 앱 제작 및 아이오닉 네비게이션과 페이지를 활용한 레이아웃 구성 - 아이오닉과 코르도바 플러그인을 사용한 미디어 플레이어 앱 구현 - 파이어베이스를 이용한 상용 애플리케이션 제작 - 실시간 아이오닉 애플리케이션 제작을 위한 모범 사례 연구 교육목표 아이오닉 2
  • 4. 과정대상 및 특징 ※ 아이오닉 2는 Angular 2, 타입스크립트, SASS 같은 기술 위에 개발된 아이오닉 모바일 SDK의 최신 버전 ※ 교육대상 : - 모바일 앱 개발자 - 프론트 개발자 - 웹 개발자 ※ 교육시간 : 평일/주말 주간 3일 21시간 평일주간반 신청 주말주간반 신청 아이오닉 하이브리드 앱 개발 과정 (아이오닉2로 동적 모바일 앱 만들기)
  • 5. 교육내용 파이어베이스를 이용한 채팅 애플리케이션 Marketcloud를 이용한 쇼핑몰 애플리케이션 학회 애플리케이션 StockMarket 애플리케이션 워드프레스 클라이언트 애플리케이션 미디어 플레이어 앱 파이어베이스를 이용한 소셜 애플리케이션
  • 6. 아이오닉 모바일 앱 프로그래밍 1장. 파이어베이스를 이용한 채팅 애플리케이션 __파이어베이스 ____AngularFire2 ____리스트와 오브젝트 ____템플릿 ____파이어베이스 시작 ____파이어베이스 애플리케이션 만들기 ____비밀번호 인증 활성화 ____파이어베이스 설정 정보 가져오기 __소프트웨어 설치 ____Node와 npm 설치 ____깃 설치 ____플랫폼 SDK 설치
  • 7. 아이오닉 모바일 앱 프로그래밍 ____아이오닉 CLI와 코르도바 설치 __애플리케이션 정의 ____기능 ____애플리케이션 흐름 ____유저 인터페이스 모형 ____파이어베이스의 데이터 구조 __애플리케이션 스캐폴딩과 설정 ____코르도바 플러그인 설치 ____파이어베이스와 AngularFire2 설치 ____Typings 설치 ____파이어베이스용 타입스크립트 데피니션 설치 __애플리케이션 코딩 ____app.ts 파일 정의하기
  • 8. 아이오닉 모바일 앱 프로그래밍 ____애플리케이션 프로바이더 ________AuthProvider 정의 ________UserProvider 정의 ________ChatsProvider 정의 ________UtilProvider 정의 ____애플리케이션 페이지 ________LoginPage 정의 ________템플릿 ________커스텀 이메일 검사기 정의 ________TabsPage 정의 ________템플릿 ________UsersPage 정의
  • 9. 아이오닉 모바일 앱 프로그래밍 ________템플릿 ________ChatsPage 정의 ________템플릿 ________ChatViewPage 정의 ________템플릿 ________스타일시트 ________AccountPage 정의 ________템플릿 __스타일 추가 __애플리케이션 실행 ____애플리케이션 화면 __정리
  • 10. 아이오닉 모바일 앱 프로그래밍 2장. Marketcloud를 이용한 쇼핑몰 애플리케이션 __소개 __Marketcloud ____Marketcloud 애플리케이션 생성 ____Marketcloud 대시보드 사용 ________카테고리 만들기 ________상품 만들기 ________애플리케이션을 위한 통화 설정 ____Marketcloud JS SDK ________API 레퍼런스 __결제 통합 __애플리케이션 정의 ____기능 ____애플리케이션의 흐름 __애플리케이션 스캐폴딩과 설정
  • 11. 아이오닉 모바일 앱 프로그래밍 ____모듈 설치 ________Marketcloud JS SDK 설치 ________Braintree 코르도바 플러그인 설치 __애플리케이션 코딩 ____index.html 파일 ____app.ts 정의 ________템플릿 ____애플리케이션의 프로바이더 ________StorageProvider 작성 ________UtilProvider 작성 ________MarketProvider 작성 ________CartProvider 작성 ________UserProvider 작성 ____애플리케이션 페이지
  • 12. 아이오닉 모바일 앱 프로그래밍 ________StorePage 작성 ________템플릿 ________CategoryPage 작성 ________템플릿 ________ProductPage 작성 ________템플릿 ________ImageModal 작성 ________템플릿 ________스타일시트 ________CartPage 작성 ________템플릿 ________AuthPage 작성 ________템플릿 ________OrderPage 작성 ________템플릿 __스타일 추가 __애플리케이션 실행 ____플랫폼을 추가하고 실제 기기에서 애플리케이션 구동 ____애플리케이션 화면 __정리
  • 13. 아이오닉 모바일 앱 프로그래밍 3장. 학회 애플리케이션 __소개 __JSON 데이터 ____JSON 이해 __애플리케이션 정의 ____기능 ____애플리케이션 흐름 __애플리케이션 스캐폴딩과 설정 ____모듈 설치 __애플리케이션 코딩 ____탭 스타터의 구조 ____app.ts 작성 ________ConfProvder 작성
  • 14. 아이오닉 모바일 앱 프로그래밍 ____애플리케이션 페이지 ________TabsPage 페이지 작성 ________SpeakersPage 페이지 작성 ________SchedulePage 페이지 작성 ________SessionDetail 페이지 작성 ________SpeakerDetail 페이지 작성 ________AboutPage 페이지 작성 ________FavoritePage 페이지 정의 __애플리케이션 실행 ____애플리케이션 화면 __정리
  • 15. 아이오닉 모바일 앱 프로그래밍 4장. StockMarket 애플리케이션 __소개 __Yahoo Finance API ____주식 정보 엔드포인트 ____심볼명 엔드포인트 ____과거 정보 엔드포인트 ____자세한 주식 정보 __앱 기능 정의 ____애플리케이션 흐름 __애플리케이션 스캐폴딩과 설정 ____모듈 설치 ________Chartist 라이브러리 설치 __코딩 부분 ____index.html 파일
  • 16. 아이오닉 모바일 앱 프로그래밍 4장. StockMarket 애플리케이션 __소개 __Yahoo Finance API ____주식 정보 엔드포인트 ____심볼명 엔드포인트 ____과거 정보 엔드포인트 ____자세한 주식 정보 __앱 기능 정의 ____애플리케이션 흐름 __애플리케이션 스캐폴딩과 설정 ____모듈 설치 ________Chartist 라이브러리 설치 __코딩 부분 ____index.html 파일 ____app.ts 정의 ____애플리케이션 프로바이더 ________StorageProvider 정의
  • 17. 아이오닉 모바일 앱 프로그래밍 ________StockInfo 프로바이더 정의 ____애플리케이션 컴포넌트 ________StockCmp 컴포넌트 ________StockChart ________StockDetailCmp ____애플리케이션 페이지 ________StockList 페이지 정의하기 ________QuoteSearch 모달 정의 ________Detail 페이지 정의하기 __core 스타일 추가 __애플리케이션 실행 ____애플리케이션 화면 __정리
  • 18. 아이오닉 모바일 앱 프로그래밍 5장. 워드프레스 클라이언트 애플리케이션 __백엔드 ____푸시 알람 ____구글 애널리틱스 ____워드프레스 JSON API __워드프레스 설정 ____플러그인 설치 ________푸시 알람 설정 __애플리케이션 흐름 __애플리케이션 스캐폴딩과 설정 ____코르도바 플러그인 설치 ____CORS 문제
  • 19. 아이오닉 모바일 앱 프로그래밍 __애플리애케이션 코딩 ____애플리케이션 설정 ____app.ts 정의 ____애플리케이션 프로바이더 ________UtilProvider 정의 ________WpProvider 정의 ________PushProvider 정의 ____HtmlPipe ____Post 컴포넌트 ________입력 ________출력 ____애플리케이션 페이지 ________TabsPage 정의 ________PostsPage 정의
  • 20. 아이오닉 모바일 앱 프로그래밍 ________템플릿 ________PostPage 정의 ________CategoryListPage 정의 ________WpPageList ________WpPage 정의 ________FavoritePage 정의 ________SettingsPage 정의 __애플리케이션 스타일링 __애플리케이션 실행 ____애플리케이션 화면 __정리
  • 21. 아이오닉 모바일 앱 프로그래밍 6장. 미디어 플레이어 앱 __주요 핵심 ____재생 ____파일 시스템 ____로컬 저장소 __애플리케이션 흐름 __애플리케이션 스캐폴딩과 설정 ____모듈 설치 ____애플리케이션 실행 및 디버깅 __애플리케이션 코딩 ____최상위 앱 컴포넌트 ____애플리케이션 프로바이더 ________UtilProvider 정의 ________FileProvider 정의
  • 22. 아이오닉 모바일 앱 프로그래밍 ________PlayerProvider 정의 ____Imclock 파이프 ____ImControls 컴포넌트 ________입력 ________출력 ____애플리케이션 페이지 ________BrowsePage 정의 ________템플릿 ________PlaylistPage 정의 ________PlayerPage 정의 __애플리케이션 실행 ____애플리케이션 화면 __정리
  • 23. 아이오닉 모바일 앱 프로그래밍 7장. 파이어베이스를 이용한 소셜 애플리케이션 __애플리케이션 정의 ____게시물 동작 원리 ____기능 ____애플리케이션 흐름 ____파이어베이스 데이터 구조 __애플리케이션 스캐폴딩과 설정 ____코르도바 플러그인 설치 ____Typings 설치 ____파이어베이스와 AngularFire2 설치 ____ng2-moment 설치 ____파이어베이스를 위한 타입스크립트 데피니션 설치 __애플리케이션 코딩
  • 24. 아이오닉 모바일 앱 프로그래밍 ____app.ts 정의 ____애플리케이션 프로바이더 ________UtilProvider 정의 ________AuthProvider 정의 ________UserProvider 정의 ________SocialProvider 정의 ____post 컴포넌트 ________입력 ____애플리케이션 페이지 ________LoginPage 정의 ________CreateAccount 페이지 정의
  • 25. 아이오닉 모바일 앱 프로그래밍 ________TabsPage 정의 ________TimelinePage 정의 ________PostPage 정의 ________PeoplePage 정의 ________UserProfilePage 정의 ________AccountPage 정의 __스타일 추가 __애플리케이션 실행 ____추가로 앱 개선 ____애플리케이션 화면 __정리