Hybrid Mobile App

Hybrid Mobile App
Just a discussion about Mobile technology

Topics
1. What is Mobile Application?
a. Overview of popular / widely used OS’s
b. Types of Mobile Application
2. Overview of Hybrid Mobile Application
a. What is Hybrid App
b. Advantages & Disadvantages
c. Why we prefer hybrid Apps
3. Development Guidance of Hybrid Mobile App
a. How Hybrid app works on devices.
b. Available Development Tools / IDE
c. About Phone gap / Cordova
d. Device Plugins
e. Development Approach

4. Coding Guidelines
a. Designs
i. HTML 5
ii. Bootstrap
iii. Device Specific
iv. CSS 3
v. Images
b. Coding
i. Phone gap Plugin
ii. JavaScript
iii. JQuery
iv. Angular JS
v. Other JS Library
vi. Coding Samples
c. API
i. Usage of API in Mobile Apps
ii. Coding Samples

6. Deployment Procedures
a. Android
b. IOS
7. High level Run through of Telerik App builder.

What is Mobile Application?
 Mobile applications or mobile apps are applications developed for
small handheld devices, such as mobile phones, smartphones, PDAs
and so on.
Why Mobile App ?
 Fast
 Mobile Data
 Personalised
 Availability
 Offline
 Portability
 Interactive

Overview of popular / widely used OS’s

Android
 The Android OS is an open source operating system primarily used in mobile
devices. Written primarily in Java and based on the Linux operating system, it
was initially developed by Android Inc. and was eventually purchased by
Google in 2005.
iOS
 iOS (originally iPhone OS) is a mobile operating system created and developed
by Apple Inc. and distributed exclusively for Apple hardware. It is the operating
system that presently powers many of the company's mobile devices, including
the iPhone, iPad, and iPod touch. In September 2015, it was the most commonly
used mobile operating system in Canada, the United States, the United Kingdom,
Norway, Sweden, Denmark, Japan, and Australia, and the most commonly used
tablet operating system in the world.
 Swift is a multi-paradigm, compiled programming language created by Apple
Inc. for iOS, OS X, watchOS and tvOS development. Swift is designed to work with
Apple's Cocoa and Cocoa Touch frameworks and the large body of
existing Objective-C code written for Apple products

Windows
 Windows Phone is a proprietary mobile operating system developed by
Microsoft. Windows Phone introduced a new design language, previously
called Metro UI, but later renamed to simply Modern.
 in backend mainly c++ and c but it used vb, c# in frontend and other
available language for various operations and tools
Others
 Symbian
 Palm
 Firefox OS
 Blackberry
 BADA
 MeeGo
 Etc..

Types Of Mobile apps
 Web App
 Native App
 Hybrid App

Native App
 Native App has been developed for use on a particular platform or device. A
native mobile app is a Smartphone application that is coded in a specific
programming language, such as Objective C for iOS and Java for Android
operating systems. Native mobile apps provide fast performance and a high
degree of reliability. They also have access to a phone’s various devices, such
as its camera and address book. In addition, users can use some apps without
an Internet connection. However, this type of app is expensive to develop
because it is tied to one type of operating system, forcing the company that
creates the app to make duplicate versions that work on other platforms.
Most video games are native mobile apps.

Web App
 Web App stored on a remote server and delivered over the internet through
browser. Web apps are not real apps; they are really websites that, in many
ways, look and feel like native applications. They are run by a browser and
typically written in HTML5. Users first access them as they would access any
web page: they navigate to a special URL and then have the option of
“installing” them on their home screen by creating a bookmark to that page.

 Hybrid Apps are like native apps, run on the device, and are written with web
technologies (HTML5, CSS and JavaScript). Hybrid apps run inside a native
container, and leverage the device’s browser engine (but not the browser) to
render the HTML and process the JavaScript locally. A web-to-native
abstraction layer enables access to device capabilities that are not accessible
in Mobile Web applications, such as the accelerometer, camera and local
storage.
 Often, companies build hybrid apps as wrappers for an existing web page; in
that way, they hope to get a presence in the app store, without spending
significant effort for developing a different app. Hybrid apps are also popular
because they allow cross-platform development: that is, the same HTML code
components can be reused on different mobile operating systems, reducing
significantly the development costs. Tools such as Cordova/PhoneGap and
Sencha Touch allow people to design and code across platforms, using the
power of HTML
Overview of Hybrid Mobile App

 Developer can use existing web skills
 One code base for multiple platforms
 Reduced development time and cost
 Easily design for various form factors (including tablets) using responsive web
design
 Access to some device and operating system features
 Advanced offline capabilities
 Increased visibility because the app can be distributed natively (via app
stores) and to mobile browsers (via search engines)
Advantages

 Performance issues for certain types of apps (once relying on complex native
functionality or heavy transitions, such as 3D games)
 Increased time and effort required to mimic a native UI and feel
 Not all device and operating system features supported
 Risk of being rejected by Apple if app does not feel native enough (for
example, a simple website)
Disadvantages

Why we prefer Hybrid Apps
 Go native when there is lot of background processes and CPU power involved
like games. Go hybrid if the app is not hooking into the native api’s much and
it a productivity app like a to-do list.
 Or go native if you have loads of money and time.

Development Guidance of Hybrid Mobile App
How Hybrid app works on devices

Available Development Tools / IDE
 IONIC
 Mobile Angular UI
 Intel XDK
 Appcelerator Titanium
 Sencha Touch
 Telerik Kendo UI
 PhoneGap
 Etc..

About Cordova
 Apache Cordova is an open-source mobile development framework. It allows
you to use standard web technologies such as HTML5, CSS3, and JavaScript for
cross-platform development, avoiding each mobile platforms' native
development language. Applications execute within wrappers targeted to
each platform, and rely on standards-compliant API bindings to access each
device's sensors, data, and network status.
 Apache Cordova graduated in October 2012 as a top level project within the
Apache Software Foundation (ASF). Through the ASF, future Cordova
development will ensure open stewardship of the project. It will always
remain free and open source under the Apache License, Version 2.0.
Visit cordova.apache.org for more information.

Device Plugin / Mobile OS API
 Battery Status
 Monitor the status of the device's battery.
 Camera
 Capture a photo using the device's camera.
 Console
 Add additional capability to console.log()
 Contacts
 Work with the devices contact database.
 Device
 Gather device specific information.
 Device Motion (Accelerometer)
 Tap into the device's motion sensor.
 Device Orientation (Compass)
 Obtain the direction that the device is pointing.

 Dialogs
 Visual device notifications.
 FileSystem
 Hook into native file system through JavaScript.
 File Transfer
 Hook into native file system through JavaScript.
 Geolocation
 Make your application location aware.
 Globalization
 Enable representation of objects specific to a locale.
 InAppBrowser
 Launch URLs in another in-app browser instance
 Media
 Record and play back audio files.

 Media Capture
 Capture media files using device's media capture applications.
 Network Information (Connection)
 Quickly check the network state, and cellular network information.
 Splashscreen
 Show and hide the applications splash screen.
 Vibration
 An API to vibrate the device.
 StatusBar
 An API for showing, hiding and configuring status bar background.

 Choose the hybrid framework that works best for you - There are several
framework choices available, the most popular is Cordova. It’s an open source
project with a strong community and plenty of resources available to help get you
going. Porting an existing mobile web app to a hybrid app with Cordova is pretty
straightforward. Other frameworks like Titanium may require significant
rewriting, but will provide a more native feel.
 Write your app - Whichever framework you choose to use, writing a hybrid app
isn’t much different than writing a mobile web app. You should use all of the best
practices for building mobile web apps, including CSS3 transitions, transforms and
animations for any animations you plan on doing. One strategy is to provide both
a native app experience and a web experience for those who cannot install the
app.
 Optimize and test your app for each platform you plan to ship on - Making your
app look and feel like a true native app is difficult, but optimizing your app for
each platform you plan to ship on will help to improve the user experience. Just
like you would never deploy your web app without testing it on the major
platforms, you should do the same for your hybrid app. Beyond testing different
devices, be sure you test all of the different operating system versions as well.
 Upload the app to the app store, Play Store etc.. - Once you’ve tested your app
and you’re ready to distribute it, upload it to the app store. Each store has a
different process to upload, review and make your app available to users.
Development Approach

 Coding Guidelines
 Designs
 HTML 5
 Bootstrap
 Device Specific
 CSS 3
 Images
 Coding
 Phone gap Plugin
 JavaScript
 JQuery
 Angular JS
 Other JS Library
 Coding Samples

 API
 Usage of API in Mobile Apps
 Coding Samples

Android -- (min 1-2 working days)
 1. Create a developer account on Play Store, for which you must pay
$25 https://play.google.com/apps/publish/signup/
 2. Upload 2-3 screen shots of your app. Also fill the other things like
description and pricing.
Note : Once you publish your app as free, you cannot make it as a
paid app later. It will always be free.
 3. Follow some versioning scheme for your app. The new version of the
app must always be greater than it's previous version.
 4. Sign your apk
You must sign your apk with your own keystore.
Note : You will always have to use the same keystore every time you
upload a new apk for the same app. If you lose the keystore then you
cannot update your app. Save your keystore somewhere safe.
 5.Here is the detailed check list for uploading your app.
http://developer.android.com/distribute/tools/launch-checklist.html
Deployment Procedures

iOS – (min 7 working days)
 1. App Store Rules and Guidelines
 2. App Id
 3. Distribution Certificate
 4. Provisioning Profile
 5. Build settings
 6. Deployment Target
 7. Icons and Screen shots
 8. Meta Data (About App)
 9. Submission Preparation
 10.Price and Availability
 11. Here is the detailed check list for uploading your app.
http://code.tutsplus.com/tutorials/how-to-submit-an-ios-app-
to-the-app-store--mobile-16812
Deployment Procedures

Hybrid Mobile App

Related slideshows

Recommended for you

Recommended for you

Recommended for you

Recommended for you

Recommended for you

Recommended for you

More Related Content

What's hot

What's hot (20)

Similar to Hybrid Mobile App

Similar to Hybrid Mobile App (20)

Hybrid Mobile App