Hybrid Mobile AppJust 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.

Device Plugin / Mobile OS API 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.

Device Plugin / Mobile OS API 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

Development Approach

API Usage of API in Mobile Apps Coding Samples

Development Approach

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 apkYou 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

THANK YOU