SlideShare a Scribd company logo
1 of 27
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.
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 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
THANK YOU

More Related Content

What's hot

What's hot (20)

Android ppt
 Android ppt Android ppt
Android ppt
 
Native, Web or Hybrid Mobile App Development?
Native, Web or Hybrid Mobile App Development?Native, Web or Hybrid Mobile App Development?
Native, Web or Hybrid Mobile App Development?
 
Progressive web app
Progressive web appProgressive web app
Progressive web app
 
Mobile Application Development: Hybrid, Native and Mobile Web Apps
Mobile Application Development: Hybrid, Native and Mobile Web AppsMobile Application Development: Hybrid, Native and Mobile Web Apps
Mobile Application Development: Hybrid, Native and Mobile Web Apps
 
Introduction to Progressive Web App
Introduction to Progressive Web AppIntroduction to Progressive Web App
Introduction to Progressive Web App
 
Android app development
Android app developmentAndroid app development
Android app development
 
Introduction to Mobile Development
Introduction to Mobile DevelopmentIntroduction to Mobile Development
Introduction to Mobile Development
 
Mobile application development React Native - Tidepool Labs
Mobile application development React Native - Tidepool LabsMobile application development React Native - Tidepool Labs
Mobile application development React Native - Tidepool Labs
 
Role of java in android app development
Role of java in android app developmentRole of java in android app development
Role of java in android app development
 
Progressive web apps
Progressive web appsProgressive web apps
Progressive web apps
 
Pwa.pptx
Pwa.pptxPwa.pptx
Pwa.pptx
 
Native, Hybrid, or Cross-platform Development? What Type of Mobile App is Bes...
Native, Hybrid, or Cross-platform Development? What Type of Mobile App is Bes...Native, Hybrid, or Cross-platform Development? What Type of Mobile App is Bes...
Native, Hybrid, or Cross-platform Development? What Type of Mobile App is Bes...
 
Flutter Tutorial For Beginners | Edureka
Flutter Tutorial For Beginners | EdurekaFlutter Tutorial For Beginners | Edureka
Flutter Tutorial For Beginners | Edureka
 
Introduction to Mobile Application Development
Introduction to Mobile Application DevelopmentIntroduction to Mobile Application Development
Introduction to Mobile Application Development
 
Introduction to Ionic framework
Introduction to Ionic frameworkIntroduction to Ionic framework
Introduction to Ionic framework
 
Android ppt
Android pptAndroid ppt
Android ppt
 
Android Platform Architecture
Android Platform ArchitectureAndroid Platform Architecture
Android Platform Architecture
 
Introduction to Android Development
Introduction to Android DevelopmentIntroduction to Android Development
Introduction to Android Development
 
Introduction to Android and Android Studio
Introduction to Android and Android StudioIntroduction to Android and Android Studio
Introduction to Android and Android Studio
 
Android Application Development
Android Application DevelopmentAndroid Application Development
Android Application Development
 

Viewers also liked

Viewers also liked (18)

Building Hybrid Apps with AngularJS and Ionic
Building Hybrid Apps with AngularJS and IonicBuilding Hybrid Apps with AngularJS and Ionic
Building Hybrid Apps with AngularJS and Ionic
 
Building Mobile Apps with Cordova , AngularJS and Ionic
Building Mobile Apps with Cordova , AngularJS and IonicBuilding Mobile Apps with Cordova , AngularJS and Ionic
Building Mobile Apps with Cordova , AngularJS and Ionic
 
Hybrid Apps with Angular & Ionic Framework
Hybrid Apps with Angular & Ionic FrameworkHybrid Apps with Angular & Ionic Framework
Hybrid Apps with Angular & Ionic Framework
 
Hybrid mobile and Ionic
Hybrid mobile and IonicHybrid mobile and Ionic
Hybrid mobile and Ionic
 
Native vs Web vs Hybrid Mobile Application Development
Native vs Web vs Hybrid Mobile Application DevelopmentNative vs Web vs Hybrid Mobile Application Development
Native vs Web vs Hybrid Mobile Application Development
 
Hybrid Mobile Development with Apache Cordova,AngularJs and ionic
Hybrid Mobile Development with Apache Cordova,AngularJs and ionicHybrid Mobile Development with Apache Cordova,AngularJs and ionic
Hybrid Mobile Development with Apache Cordova,AngularJs and ionic
 
PPT from Webinar Create Hybrid Mobile Application in 1 hour
PPT from Webinar Create Hybrid Mobile Application in 1 hourPPT from Webinar Create Hybrid Mobile Application in 1 hour
PPT from Webinar Create Hybrid Mobile Application in 1 hour
 
building HTML hybrid app
 with ionic
building HTML hybrid app
 with ionicbuilding HTML hybrid app
 with ionic
building HTML hybrid app
 with ionic
 
Unit testing in Force.com platform
Unit testing in Force.com platformUnit testing in Force.com platform
Unit testing in Force.com platform
 
Ionic Framework
Ionic FrameworkIonic Framework
Ionic Framework
 
Building an Ionic hybrid mobile app with TypeScript
Building an Ionic hybrid mobile app with TypeScript Building an Ionic hybrid mobile app with TypeScript
Building an Ionic hybrid mobile app with TypeScript
 
Ionic framework one day training
Ionic framework one day trainingIonic framework one day training
Ionic framework one day training
 
Workshop on Hybrid App Development with Ionic Framework
Workshop on Hybrid App Development with Ionic FrameworkWorkshop on Hybrid App Development with Ionic Framework
Workshop on Hybrid App Development with Ionic Framework
 
Creating an hybrid app in minutes with Ionic Framework
Creating an hybrid app in minutes with Ionic FrameworkCreating an hybrid app in minutes with Ionic Framework
Creating an hybrid app in minutes with Ionic Framework
 
Building a Progressive Web App
Building a  Progressive Web AppBuilding a  Progressive Web App
Building a Progressive Web App
 
Hybrid Mobile Apps | Ionic & AngularJS
Hybrid Mobile Apps | Ionic & AngularJSHybrid Mobile Apps | Ionic & AngularJS
Hybrid Mobile Apps | Ionic & AngularJS
 
Basic Photography Lesson
Basic Photography LessonBasic Photography Lesson
Basic Photography Lesson
 
Design Patterns (Examples in .NET)
Design Patterns (Examples in .NET)Design Patterns (Examples in .NET)
Design Patterns (Examples in .NET)
 

Similar to Hybrid mobile app

White paper native, web or hybrid mobile app development
White paper  native, web or hybrid mobile app developmentWhite paper  native, web or hybrid mobile app development
White paper native, web or hybrid mobile app development
IBM Software India
 
MOBILE APPLICATIONS DEVELOPMENT -ANDROID BY SIVASANKARI
MOBILE APPLICATIONS DEVELOPMENT -ANDROID BY SIVASANKARIMOBILE APPLICATIONS DEVELOPMENT -ANDROID BY SIVASANKARI
MOBILE APPLICATIONS DEVELOPMENT -ANDROID BY SIVASANKARI
SivaSankari36
 

Similar to Hybrid mobile app (20)

Hybridapp
HybridappHybridapp
Hybridapp
 
White paper native, web or hybrid mobile app development
White paper  native, web or hybrid mobile app developmentWhite paper  native, web or hybrid mobile app development
White paper native, web or hybrid mobile app development
 
Mobile Application vs Web Application
Mobile Application vs Web ApplicationMobile Application vs Web Application
Mobile Application vs Web Application
 
Mobile app development using PhoneGap - A comprehensive walkthrough - Touch T...
Mobile app development using PhoneGap - A comprehensive walkthrough - Touch T...Mobile app development using PhoneGap - A comprehensive walkthrough - Touch T...
Mobile app development using PhoneGap - A comprehensive walkthrough - Touch T...
 
A Guide to Mobile App Development - Web vs Native vs Hybrid.pdf
A Guide to Mobile App Development - Web vs Native vs Hybrid.pdfA Guide to Mobile App Development - Web vs Native vs Hybrid.pdf
A Guide to Mobile App Development - Web vs Native vs Hybrid.pdf
 
Do You Want to Achieve Mobile App Mastery? A Step-by-Step Guidebook
Do You Want to Achieve Mobile App Mastery? A Step-by-Step GuidebookDo You Want to Achieve Mobile App Mastery? A Step-by-Step Guidebook
Do You Want to Achieve Mobile App Mastery? A Step-by-Step Guidebook
 
Do You Want to Achieve Mobile App Mastery: A Step-by-Step Guidebook
Do You Want to Achieve Mobile App Mastery: A Step-by-Step GuidebookDo You Want to Achieve Mobile App Mastery: A Step-by-Step Guidebook
Do You Want to Achieve Mobile App Mastery: A Step-by-Step Guidebook
 
Getting Acquainted with PhoneGap
Getting Acquainted with PhoneGapGetting Acquainted with PhoneGap
Getting Acquainted with PhoneGap
 
The Ultimate Guide to Cross Platform App Development Frameworks in 2023
The Ultimate Guide to Cross Platform App Development Frameworks in 2023The Ultimate Guide to Cross Platform App Development Frameworks in 2023
The Ultimate Guide to Cross Platform App Development Frameworks in 2023
 
MOBILE APPLICATIONS DEVELOPMENT -ANDROID BY SIVASANKARI
MOBILE APPLICATIONS DEVELOPMENT -ANDROID BY SIVASANKARIMOBILE APPLICATIONS DEVELOPMENT -ANDROID BY SIVASANKARI
MOBILE APPLICATIONS DEVELOPMENT -ANDROID BY SIVASANKARI
 
Presentation
PresentationPresentation
Presentation
 
Introduction to the cordova framework for developing mobile apps1
Introduction to the cordova framework for developing mobile apps1Introduction to the cordova framework for developing mobile apps1
Introduction to the cordova framework for developing mobile apps1
 
Native script vs react native for native app development in 2022
Native script vs react native for native app development in 2022Native script vs react native for native app development in 2022
Native script vs react native for native app development in 2022
 
Mobile application development platform
Mobile application development platformMobile application development platform
Mobile application development platform
 
phonegap_101
phonegap_101phonegap_101
phonegap_101
 
Smartface ile Crossplatform Uygulama Geliştirme
Smartface ile Crossplatform Uygulama GeliştirmeSmartface ile Crossplatform Uygulama Geliştirme
Smartface ile Crossplatform Uygulama Geliştirme
 
Do You Need a Web App or a Native App?
Do You Need a Web App or a Native App?Do You Need a Web App or a Native App?
Do You Need a Web App or a Native App?
 
Which Mobile App Development Process Is Right for You: Native, Hybrid, or Cro...
Which Mobile App Development Process Is Right for You: Native, Hybrid, or Cro...Which Mobile App Development Process Is Right for You: Native, Hybrid, or Cro...
Which Mobile App Development Process Is Right for You: Native, Hybrid, or Cro...
 
Hybrid vs Native vs Web Apps
Hybrid vs Native vs Web AppsHybrid vs Native vs Web Apps
Hybrid vs Native vs Web Apps
 
Hybrid Application Development documentation report (MCA Project)
Hybrid Application Development documentation report (MCA Project)Hybrid Application Development documentation report (MCA Project)
Hybrid Application Development documentation report (MCA Project)
 

Recently uploaded

TECUNIQUE: Success Stories: IT Service provider
TECUNIQUE: Success Stories: IT Service providerTECUNIQUE: Success Stories: IT Service provider
TECUNIQUE: Success Stories: IT Service provider
mohitmore19
 
CHEAP Call Girls in Pushp Vihar (-DELHI )🔝 9953056974🔝(=)/CALL GIRLS SERVICE
CHEAP Call Girls in Pushp Vihar (-DELHI )🔝 9953056974🔝(=)/CALL GIRLS SERVICECHEAP Call Girls in Pushp Vihar (-DELHI )🔝 9953056974🔝(=)/CALL GIRLS SERVICE
CHEAP Call Girls in Pushp Vihar (-DELHI )🔝 9953056974🔝(=)/CALL GIRLS SERVICE
9953056974 Low Rate Call Girls In Saket, Delhi NCR
 

Recently uploaded (20)

The Top App Development Trends Shaping the Industry in 2024-25 .pdf
The Top App Development Trends Shaping the Industry in 2024-25 .pdfThe Top App Development Trends Shaping the Industry in 2024-25 .pdf
The Top App Development Trends Shaping the Industry in 2024-25 .pdf
 
W01_panagenda_Navigating-the-Future-with-The-Hitchhikers-Guide-to-Notes-and-D...
W01_panagenda_Navigating-the-Future-with-The-Hitchhikers-Guide-to-Notes-and-D...W01_panagenda_Navigating-the-Future-with-The-Hitchhikers-Guide-to-Notes-and-D...
W01_panagenda_Navigating-the-Future-with-The-Hitchhikers-Guide-to-Notes-and-D...
 
TECUNIQUE: Success Stories: IT Service provider
TECUNIQUE: Success Stories: IT Service providerTECUNIQUE: Success Stories: IT Service provider
TECUNIQUE: Success Stories: IT Service provider
 
Payment Gateway Testing Simplified_ A Step-by-Step Guide for Beginners.pdf
Payment Gateway Testing Simplified_ A Step-by-Step Guide for Beginners.pdfPayment Gateway Testing Simplified_ A Step-by-Step Guide for Beginners.pdf
Payment Gateway Testing Simplified_ A Step-by-Step Guide for Beginners.pdf
 
The Real-World Challenges of Medical Device Cybersecurity- Mitigating Vulnera...
The Real-World Challenges of Medical Device Cybersecurity- Mitigating Vulnera...The Real-World Challenges of Medical Device Cybersecurity- Mitigating Vulnera...
The Real-World Challenges of Medical Device Cybersecurity- Mitigating Vulnera...
 
Exploring the Best Video Editing App.pdf
Exploring the Best Video Editing App.pdfExploring the Best Video Editing App.pdf
Exploring the Best Video Editing App.pdf
 
%in Stilfontein+277-882-255-28 abortion pills for sale in Stilfontein
%in Stilfontein+277-882-255-28 abortion pills for sale in Stilfontein%in Stilfontein+277-882-255-28 abortion pills for sale in Stilfontein
%in Stilfontein+277-882-255-28 abortion pills for sale in Stilfontein
 
call girls in Vaishali (Ghaziabad) 🔝 >༒8448380779 🔝 genuine Escort Service 🔝✔️✔️
call girls in Vaishali (Ghaziabad) 🔝 >༒8448380779 🔝 genuine Escort Service 🔝✔️✔️call girls in Vaishali (Ghaziabad) 🔝 >༒8448380779 🔝 genuine Escort Service 🔝✔️✔️
call girls in Vaishali (Ghaziabad) 🔝 >༒8448380779 🔝 genuine Escort Service 🔝✔️✔️
 
%in kaalfontein+277-882-255-28 abortion pills for sale in kaalfontein
%in kaalfontein+277-882-255-28 abortion pills for sale in kaalfontein%in kaalfontein+277-882-255-28 abortion pills for sale in kaalfontein
%in kaalfontein+277-882-255-28 abortion pills for sale in kaalfontein
 
10 Trends Likely to Shape Enterprise Technology in 2024
10 Trends Likely to Shape Enterprise Technology in 202410 Trends Likely to Shape Enterprise Technology in 2024
10 Trends Likely to Shape Enterprise Technology in 2024
 
%in Midrand+277-882-255-28 abortion pills for sale in midrand
%in Midrand+277-882-255-28 abortion pills for sale in midrand%in Midrand+277-882-255-28 abortion pills for sale in midrand
%in Midrand+277-882-255-28 abortion pills for sale in midrand
 
%in Bahrain+277-882-255-28 abortion pills for sale in Bahrain
%in Bahrain+277-882-255-28 abortion pills for sale in Bahrain%in Bahrain+277-882-255-28 abortion pills for sale in Bahrain
%in Bahrain+277-882-255-28 abortion pills for sale in Bahrain
 
AI & Machine Learning Presentation Template
AI & Machine Learning Presentation TemplateAI & Machine Learning Presentation Template
AI & Machine Learning Presentation Template
 
A Secure and Reliable Document Management System is Essential.docx
A Secure and Reliable Document Management System is Essential.docxA Secure and Reliable Document Management System is Essential.docx
A Secure and Reliable Document Management System is Essential.docx
 
8257 interfacing 2 in microprocessor for btech students
8257 interfacing 2 in microprocessor for btech students8257 interfacing 2 in microprocessor for btech students
8257 interfacing 2 in microprocessor for btech students
 
Direct Style Effect Systems - The Print[A] Example - A Comprehension Aid
Direct Style Effect Systems -The Print[A] Example- A Comprehension AidDirect Style Effect Systems -The Print[A] Example- A Comprehension Aid
Direct Style Effect Systems - The Print[A] Example - A Comprehension Aid
 
OpenChain - The Ramifications of ISO/IEC 5230 and ISO/IEC 18974 for Legal Pro...
OpenChain - The Ramifications of ISO/IEC 5230 and ISO/IEC 18974 for Legal Pro...OpenChain - The Ramifications of ISO/IEC 5230 and ISO/IEC 18974 for Legal Pro...
OpenChain - The Ramifications of ISO/IEC 5230 and ISO/IEC 18974 for Legal Pro...
 
Define the academic and professional writing..pdf
Define the academic and professional writing..pdfDefine the academic and professional writing..pdf
Define the academic and professional writing..pdf
 
CHEAP Call Girls in Pushp Vihar (-DELHI )🔝 9953056974🔝(=)/CALL GIRLS SERVICE
CHEAP Call Girls in Pushp Vihar (-DELHI )🔝 9953056974🔝(=)/CALL GIRLS SERVICECHEAP Call Girls in Pushp Vihar (-DELHI )🔝 9953056974🔝(=)/CALL GIRLS SERVICE
CHEAP Call Girls in Pushp Vihar (-DELHI )🔝 9953056974🔝(=)/CALL GIRLS SERVICE
 
Sector 18, Noida Call girls :8448380779 Model Escorts | 100% verified
Sector 18, Noida Call girls :8448380779 Model Escorts | 100% verifiedSector 18, Noida Call girls :8448380779 Model Escorts | 100% verified
Sector 18, Noida Call girls :8448380779 Model Escorts | 100% verified
 

Hybrid mobile app

  • 1. Hybrid Mobile App Just a discussion about Mobile technology
  • 2. 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
  • 3. 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
  • 4. 6. Deployment Procedures a. Android b. IOS 7. High level Run through of Telerik App builder.
  • 5. 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
  • 6. Overview of popular / widely used OS’s
  • 7. 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
  • 8. 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..
  • 9. Types Of Mobile apps  Web App  Native App  Hybrid App
  • 10. 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.
  • 11. 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.
  • 12.  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
  • 13.  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
  • 14.  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
  • 15. 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.
  • 16. Development Guidance of Hybrid Mobile App How Hybrid app works on devices
  • 17. Available Development Tools / IDE  IONIC  Mobile Angular UI  Intel XDK  Appcelerator Titanium  Sencha Touch  Telerik Kendo UI  PhoneGap  Etc..
  • 18. 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.
  • 19. 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.
  • 20. 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.
  • 21. 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.
  • 22.  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
  • 23.  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
  • 24.  API  Usage of API in Mobile Apps  Coding Samples Development Approach
  • 25. 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
  • 26. 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