This document provides an agenda and overview of a presentation on cross-platform mobile app development using Monaca. The presentation covers Cordova, building a basic "Hello World" app with Monaca, and a demo of an emotion detection app using Monaca, Cordova, React, and TensorFlow. The document also summarizes key features of Monaca like its cloud IDE, local development tools, and benefits such as being framework agnostic and allowing mixing of tools.

1. 1
Cross-Platform Mobile App
Development
Introduction to Monaca

2. 2
● Cross-Platform Mobile App Development
● Cordova
● Introducing Monaca
● First Application with Monaca - Demo
● Q&A
Agenda

3. 3
- Yong Sopheaktra
- Bsc@RUPP, Cambodia (2010)
- Msc@Kyoto University, Japan (2017)
- Asial corporation since 2017
- Monaca team since 2018
Little bit about Me

4. 4
- Cross-platform app development refers to the development of software
that is able to run on multiple devices - ios and android devices.
- Hybrid app development refers to app development that borrows
certain elements from native and web technologies.
Cross-Platform App Development

5. 5
Cross-Platform App Development
Advantages Disadvantages
- Cost
- Maintenance
- Scalability
- Development Time
- Performance
- Functionality
- UI
- 3D graphics

6. 6
- Created by Nitobi and initial release in 2009
- Adobe Systems purchased Nitobi in 2011
- Rebranded it as PhoneGap
- Released an open-source version of the software called
Apache Cordova.
Cordova

7. 7
Cordova

8. 8
- Monaca is a collection of software tools and services for building and
deploying HTML5 mobile hybrid apps.
- Monaca use Apache Cordova to build mobile apps.
Monaca

9. 9
Monaca - The Big Four (Monaca Cloud IDE)

10. 10
Monaca - The Big Four (Monaca Localkit)

11. 11
Monaca - The Big Four (Monaca CLI)

12. 12
Monaca - The Big Four (Monaca Debugger)

13. 13
- Monaca Cloud IDE
- Create new user account in Monaca
- Create new projects from Monaca template
- Break the bricks
- Hello World
- Show the students that we canʼt use phone (cordova) function in browser
- Monaca Debugger
- Connect debugger - iPhone
- And demo “Hello World” function (Camera, vibrate, …)
- Build Service
- Build project from Monaca Cloud and install on mobile devices.
First Application with Monaca (Demo)

14. 14
- Tech: Cordova, React.js, Framework7 (UI) and Tensorflow.js (AI)
- Cordova plugins needed
- com.virtuoworks.cordova-plugin-canvascamera
- cordova-plugin-file
- cordova-plugin-vibration
- AI npm package
- @vladmandic/face-api
- You can import project to Monaca with this link -
https://monaca.mobi/en/directimport?pid=636b7303e788853a3eb731d9
- You need “Pro plan” account to build this project.
- Other
- Github Repository
- English Blog
- Spanish Blog
Emotion Detection with Monaca (Demo)

15. 15
- Cloud-empowered development
- The complete cloud development environment gives you flexibility with no
setup required. The cloud-synced local development enables you to use your
own environment but enjoy features like device live-sync and remote build.
- Framework agnostic
- Our open source Onsen Framework (UI Framework) is tightly integrated with the
Monaca tools. However, you can use Monaca with any JavaScript frameworks.
We support Angular, React and Vue.js but you can also bring your own favorite
framework.
- Mix-and-match as you like
- Weʼve got you covered all the way from design, app development, backend
development, testing and debugging to build and distribution. Monaca can
be used as a whole or a piece, working with your favorite tools. Just pick
what you need. We will seamlessly plug into your workflow.
Why Monaca

16. Thank You

17. Q & A

18. 18
- We would like to ask your cooperation in doing a short survey to improve our next
workshop
- https://jp.surveymonkey.com/r/HGHJJTF
Questionnaire