Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Ionic Framework is good for creating apps
Search
kkeeth
November 21, 2018
Programming
1
120
Ionic Framework is good for creating apps
kkeeth
November 21, 2018
Tweet
Share
More Decks by kkeeth
See All by kkeeth
とある EM の初めての育休からの学び
clown0082
1
1.5k
The history of Javascript frameworks: changes in front-end design philosophy
clown0082
2
140
Visually experience the beauty of mathematics with p5.js
clown0082
1
2.9k
Rediscover the joy of coding with Creative Coding
clown0082
0
1.5k
全員が意思決定する会社で開発者体験や生産性を見る大変さについて
clown0082
0
580
JavaScript × Mathematics go to Digital Art
clown0082
1
350
In-house study group at YUMEMI
clown0082
0
190
Playing Ionic Logo by p5.js
clown0082
0
250
Skills that employers recommend students to acquire
clown0082
1
280
Other Decks in Programming
See All in Programming
責務と認知負荷を整える! 抽象レベルを意識した関心の分離
yahiru
8
1.5k
PEPCは何を変えようとしていたのか
ken7253
3
290
AIプログラミング雑キャッチアップ
yuheinakasaka
19
4.8k
sappoRo.R #12 初心者セッション
kosugitti
0
280
LINE messaging APIを使ってGoogleカレンダーと連携した予約ツールを作ってみた
takumakoike
0
120
Go 1.24でジェネリックになった型エイリアスの紹介
syumai
2
300
Honoのおもしろいミドルウェアをみてみよう
yusukebe
1
230
Jakarta EE meets AI
ivargrimstad
0
480
「個人開発マネタイズ大全」が教えてくれたこと
bani24884
1
270
15分で学ぶDuckDBの可愛い使い方 DuckDBの最近の更新
notrogue
3
730
Honoとフロントエンドの 型安全性について
yodaka
7
1.5k
kintone開発を効率化するためにチームで試した施策とその結果を大放出!
oguemon
0
170
Featured
See All Featured
Music & Morning Musume
bryan
46
6.4k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9.3k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
49k
[RailsConf 2023] Rails as a piece of cake
palkan
53
5.3k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
10
520
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
21
2.5k
Code Reviewing Like a Champion
maltzj
521
39k
4 Signs Your Business is Dying
shpigford
183
22k
Building a Scalable Design System with Sketch
lauravandoore
461
33k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
59k
Optimizing for Happiness
mojombo
377
70k
Six Lessons from altMBA
skipperchong
27
3.6k
Transcript
Ionic Framework is good for creating apps k-kuwahara @kuwahara_jsri clown0082
About me
About me const my_info = { Name: ‘܂ݪਔ’, Workplace: ‘Yumemi
Inc’, twitter: ‘kuwahara_jsri’, GitHub: ‘k-kuwahara’, Npm: ‘k-kuwahara’, }
Communities collaborator translator staff staff
Communities github.com/k-kuwahara
Let’s start the today’s Ionic talks !!
In the past: Web First ↓ Currently: Mobile First
Mobile First …?
Mobile First …? It’s Responsive!!
Mobile First = Responsive
Mobile First = Responsive ×
Mobile First ⊃ Responsive
Mobile First is … Optimizing UI/UX design for mobile
Mobile first example ‣ Design tailored to each terminal
Mobile first example 'JSTU1BJOU 'JSTU$POUFOUGVM1BJOU 'JSTU.FBOJOHGVM1BJOU 'VMMZ-PBEFE ‣ First view
optimized for mobile
For more mobile first ⚡AMP (Accelerated Mobile Pages) PWA (Progressive
Web Apps)
‣ Served over HTTPS PWA examples ‣ Add to home
screen APP
PWA examples ‣ Offline Experience ‣ Push Notifications
How to make it PWA? See “Progressive Web App Checklist”.
URL: https://developers.google.com/web/progressive-web-apps/checklist See “Your First Progressive Web App”. URL: https://codelabs.developers.google.com/codelabs/your-first-pwapp/ index.html?index=..%2F..%2Findex#0
Web with PWA ≒ Mobile Application
In recently years, Develop applications with HTML5
So, how about “Ionic Framework” ?
What is “Ionic Framework”?
What is “Ionic Framework” ? image by: https://ionicframework.com/
What is “Ionic Framework” ? image by: https://ionicframework.com/
What is “Ionic Framework” ? +
What is “Ionic Framework” ? Android iOS Web
What is “Ionic Framework” ? UI Base WebView
What is “Ionic Framework” ? UI Base WebView Ionic Native
Native API Cordova API
Ionic v4 + other frameworks
Ionic + other frameworks +
Ionic + other frameworks +
Q. How do we get started?
Step1: install nodejs Please install
Step2: execute the following commands
For example
Step3: place component in html file image by: https://ionicframework.com/docs/components/
Step4: write the logic to the ts file
See also: for details URL: https://qiita.com/clown0082/items/5405c53eb955f985edda
Q. What are the features of Ionic framework?
Summary of Ionic features 1. PWA(by default) 2. It's fun
to develop 3. Support of slack is profound 4. Clean, simple, and functional 5. Abundant API to native function
Q. But, it's really difficult, isn’t it?
A. It is roughly No. (The difficult point is Angular)
Application Example: ʮϗϏϯΰʯ Web URL: https://app.houbingo.com App URL : https://play.google.com/store/apps/details?id=com.houbingo
This app was developed by a designer about 3 days.
with this book ↓
Let’s Create Mobile Application by Ionic Framework!!
None