Hybrid apps are developed using HTML, CSS, and Javascript, and then wrapped in a native application using platforms like Cordova. This PPT covers the initial setup of developing hybrid mobile applications using frameworks like Ionic, NativeScript, and Cordova.

1. HYBRID APP
DEVELOPMENT
FRAMEWORKS
-Akhil K

2. WHAT IS HYBRID APPLICATIONS?
Hybrid applications are web applications (or web pages)
in the native browser, such as UIWebView in iOS and
WebView in Android (not Safari or Chrome). Hybrid apps
are developed using HTML, CSS and Javascript, and
then wrapped in a native application using platforms like
Cordova.
2

3. WEBVIEW?
A “webview” is a browser bundled
inside of a mobile application
producing what is called a hybrid app.
3

4. 4

5. FRAMEWORKS
5

6. REQUIRED
» Install JAVA
» Install Android SDK for android devices
» Install Xcode for IOS
In this section the demo applications are using Angular,
so install Angular CLI.
6

7. 1.
CORDOVA
Let’s start with cordova
7

8. “Apache Cordova is an open-
source mobile development
framework. It allows you to
use standard web
technologies - HTML5, CSS3,
and JavaScript for cross-
platform development”
8

9. STEPS
» Install Cordova
⋄ npm install -g cordova
» Create new cordova project
⋄ cordova create demo
» Add cordova platform
⋄ cordova platform add [android/ ios]
9

10. STEPS
» Merge your Angular project with Cordova project created
by copying every folders and files, except your
package.json file from your Cordoav project root
directory to the Angular project root directory.
» Merge two package.json files.
10

11. 11
+ =

12. STEPS
» Add reference to cordova.js in angular project html file (src/index.html).
⋄ <script type=”test/javascript” src=”cordova.js”></script>
» Update the <base href=“/”> tag in your src/index.html to <base href=“./”>,
this will enable angular to access files in a directory path since we are not
hosting on a server.
12

13. STEPS
» Change the value of outputPath in .angular-cli.json/angular.json file in our
root directory [{projectName} -> architect ->build ->options] property from
“dist/{projectName}” to “www”.
» Build and run the Cordova project
⋄ cordova build android|ios|[platform]
13

14. 2.
NATIVESCRIPT
Let’s start with nativescript
14

15. “NativeScript is an open-
source framework to develop
apps on the Apple iOS and
Android platforms.
NativeScript apps are built
using JavaScript, or by using
any language that transpiles
to JavaScript, such as
TypeScript.”
15

16. STEPS
» Install NativeScript
⋄ npm install -g nativescript
» Create new project
⋄ tns create demo --template tns-template-blank-ng
» Preview command
⋄ tns preview
16

17. STEPS
» Run nativeScript application
⋄ tns run <Platform>
» NativeScript layouts
» NativeScript ui-widgets
17

18. 3.
IONIC
Let’s start with ionic
18

19. “Ionic Framework is an open
source UI toolkit for building
performant, high-quality
mobile and desktop apps
using web technologies
(HTML, CSS, and
JavaScript).Ionic Framework
is focused on the frontend
user experience.”
19

20. STEPS
» Install Ionic
⋄ npm install -g ionic
» Install Cordova
⋄ npm install -g cordova
» Create new project
⋄ ionic start demo blank/tabs/sidemenu
20

21. STEPS
» Run the application in browser
⋄ ionic serve
» Run the application in Android/IOS
⋄ ionic cordova prepare android/ios
⋄ ionic cordova run android/ios -l
» Ionic UI Components
21

22. DEMOLet’s see the application running in different
platform.
22

23. ANDROID
DEVICES
23

24. iPHONE
DEVICES
24

25. DESKTOP
VIEW
25

26. THANKS!
Any questions?
26