Ionic Framework is good for creating apps

Transcript

1. Ionic Framework is good for creating apps k-kuwahara @kuwahara_jsri clown0082
2. About me
3. About me const my_info = { Name: ‘܂ݪ੟ਔ’, Workplace: ‘Yumemi Inc’, twitter: ‘kuwahara_jsri’, GitHub: ‘k-kuwahara’, Npm: ‘k-kuwahara’, }
4. Communities collaborator translator staff staff
5. Communities github.com/k-kuwahara
6. Let’s start the today’s Ionic talks !!
7. In the past: Web First ↓ Currently: Mobile First
8. Mobile First …?
9. Mobile First …? It’s Responsive!!
10. Mobile First = Responsive
11. Mobile First = Responsive ×
12. Mobile First ⊃ Responsive
13. Mobile First is … Optimizing UI/UX design for mobile
14. Mobile first example ‣ Design tailored to each terminal
15. Mobile first example 'JSTU
    1BJOU 'JSTU
    $POUFOUGVM
    1BJOU 'JSTU
    .FBOJOHGVM
    1BJOU 'VMMZ
    -PBEFE ‣ First view optimized for mobile
16. For more mobile first ⚡AMP (Accelerated Mobile Pages) PWA (Progressive Web Apps)
17. ‣ Served over HTTPS PWA examples ‣ Add to home screen APP
18. PWA examples ‣ Offline Experience ‣ Push Notifications
19. 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
20. Web with PWA ≒ Mobile Application
21. In recently years, Develop applications with HTML5
22. So, how about “Ionic Framework” ?
23. What is “Ionic Framework”?
24. What is “Ionic Framework” ? image by: https://ionicframework.com/
25. What is “Ionic Framework” ? image by: https://ionicframework.com/
26. What is “Ionic Framework” ? +
27. What is “Ionic Framework” ? Android iOS Web
28. What is “Ionic Framework” ? UI Base WebView
29. What is “Ionic Framework” ? UI Base WebView Ionic Native Native API Cordova API
30. Ionic v4 + other frameworks
31. Ionic + other frameworks +
32. Ionic + other frameworks +
33. Q. How do we get started?
34. Step1: install nodejs Please install
35. Step2: execute the following commands
36. For example
37. Step3: place component in html file image by: https://ionicframework.com/docs/components/
38. Step4: write the logic to the ts file
39. See also: for details URL: https://qiita.com/clown0082/items/5405c53eb955f985edda
40. Q. What are the features of Ionic framework?
41. 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
42. Q. But, it's really difficult, isn’t it?
43. A. It is roughly No. (The difficult point is Angular)
44. Application Example: ʮϗ΢Ϗϯΰʯ Web URL: https://app.houbingo.com App URL : https://play.google.com/store/apps/details?id=com.houbingo
45. This app was developed by a designer about 3 days.
46. with this book ↓
47. Let’s Create Mobile Application by Ionic Framework!!