SlideShare ist ein Scribd-Unternehmen logo
1 von 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

Weitere ähnliche Inhalte

Was ist angesagt?

Introduction to Mobile Application Development
Introduction to Mobile Application DevelopmentIntroduction to Mobile Application Development
Introduction to Mobile Application Development
shikishiji
 

Was ist angesagt? (20)

Introduction to mobile application development
Introduction to mobile application developmentIntroduction to mobile application development
Introduction to mobile application 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
 
Mobile Application Development
Mobile Application DevelopmentMobile Application Development
Mobile Application Development
 
Introduction to Progressive Web App
Introduction to Progressive Web AppIntroduction to Progressive Web App
Introduction to Progressive Web App
 
Mobile App Testing
Mobile App TestingMobile App Testing
Mobile App Testing
 
An introduction to mobile app development and investing
An introduction to mobile app development and investingAn introduction to mobile app development and investing
An introduction to mobile app development and investing
 
Introduction to Android Development
Introduction to Android DevelopmentIntroduction to Android Development
Introduction to Android Development
 
Introduction to Mobile Application Development
Introduction to Mobile Application DevelopmentIntroduction to Mobile Application Development
Introduction to Mobile Application Development
 
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...
 
Mobile Development Overview
Mobile Development OverviewMobile Development Overview
Mobile Development Overview
 
Intro To Android App Development
Intro To Android App DevelopmentIntro To Android App Development
Intro To Android App Development
 
Mobile Application Development With Android
Mobile Application Development With AndroidMobile Application Development With Android
Mobile Application Development With Android
 
Mobile application development
Mobile application developmentMobile application development
Mobile application development
 
Android application development ppt
Android application development pptAndroid application development ppt
Android application development ppt
 
Introduction to Android Development
Introduction to Android DevelopmentIntroduction to Android Development
Introduction to Android Development
 
Introduction to Android
Introduction to Android Introduction to Android
Introduction to Android
 
Introduction to Firebase from Google
Introduction to Firebase from GoogleIntroduction to Firebase from Google
Introduction to Firebase from Google
 
Progressive Web Apps(PWA)
Progressive Web Apps(PWA)Progressive Web Apps(PWA)
Progressive Web Apps(PWA)
 
Introduction to Android and Android Studio
Introduction to Android and Android StudioIntroduction to Android and Android Studio
Introduction to Android and Android Studio
 
Hybrid vs Native Mobile App. Decide in 5 minutes!
Hybrid vs Native Mobile App. Decide in 5 minutes!Hybrid vs Native Mobile App. Decide in 5 minutes!
Hybrid vs Native Mobile App. Decide in 5 minutes!
 

Andere mochten auch

Andere mochten auch (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)
 

Ähnlich wie 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
 

Ähnlich wie 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)
 

Kürzlich hochgeladen

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
 
+971565801893>>SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHAB...
+971565801893>>SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHAB...+971565801893>>SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHAB...
+971565801893>>SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHAB...
Health
 
introduction-to-automotive Andoid os-csimmonds-ndctechtown-2021.pdf
introduction-to-automotive Andoid os-csimmonds-ndctechtown-2021.pdfintroduction-to-automotive Andoid os-csimmonds-ndctechtown-2021.pdf
introduction-to-automotive Andoid os-csimmonds-ndctechtown-2021.pdf
VishalKumarJha10
 

Kürzlich hochgeladen (20)

Azure_Native_Qumulo_High_Performance_Compute_Benchmarks.pdf
Azure_Native_Qumulo_High_Performance_Compute_Benchmarks.pdfAzure_Native_Qumulo_High_Performance_Compute_Benchmarks.pdf
Azure_Native_Qumulo_High_Performance_Compute_Benchmarks.pdf
 
AI & Machine Learning Presentation Template
AI & Machine Learning Presentation TemplateAI & Machine Learning Presentation Template
AI & Machine Learning Presentation Template
 
Unveiling the Tech Salsa of LAMs with Janus in Real-Time Applications
Unveiling the Tech Salsa of LAMs with Janus in Real-Time ApplicationsUnveiling the Tech Salsa of LAMs with Janus in Real-Time Applications
Unveiling the Tech Salsa of LAMs with Janus in Real-Time Applications
 
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
 
+971565801893>>SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHAB...
+971565801893>>SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHAB...+971565801893>>SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHAB...
+971565801893>>SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHAB...
 
Shapes for Sharing between Graph Data Spaces - and Epistemic Querying of RDF-...
Shapes for Sharing between Graph Data Spaces - and Epistemic Querying of RDF-...Shapes for Sharing between Graph Data Spaces - and Epistemic Querying of RDF-...
Shapes for Sharing between Graph Data Spaces - and Epistemic Querying of RDF-...
 
How To Use Server-Side Rendering with Nuxt.js
How To Use Server-Side Rendering with Nuxt.jsHow To Use Server-Side Rendering with Nuxt.js
How To Use Server-Side Rendering with Nuxt.js
 
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
 
Right Money Management App For Your Financial Goals
Right Money Management App For Your Financial GoalsRight Money Management App For Your Financial Goals
Right Money Management App For Your Financial Goals
 
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
 
Software Quality Assurance Interview Questions
Software Quality Assurance Interview QuestionsSoftware Quality Assurance Interview Questions
Software Quality Assurance Interview Questions
 
How To Troubleshoot Collaboration Apps for the Modern Connected Worker
How To Troubleshoot Collaboration Apps for the Modern Connected WorkerHow To Troubleshoot Collaboration Apps for the Modern Connected Worker
How To Troubleshoot Collaboration Apps for the Modern Connected Worker
 
Introducing Microsoft’s new Enterprise Work Management (EWM) Solution
Introducing Microsoft’s new Enterprise Work Management (EWM) SolutionIntroducing Microsoft’s new Enterprise Work Management (EWM) Solution
Introducing Microsoft’s new Enterprise Work Management (EWM) Solution
 
introduction-to-automotive Andoid os-csimmonds-ndctechtown-2021.pdf
introduction-to-automotive Andoid os-csimmonds-ndctechtown-2021.pdfintroduction-to-automotive Andoid os-csimmonds-ndctechtown-2021.pdf
introduction-to-automotive Andoid os-csimmonds-ndctechtown-2021.pdf
 
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 🔝✔️✔️
 
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
 
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
 
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
 
Tech Tuesday-Harness the Power of Effective Resource Planning with OnePlan’s ...
Tech Tuesday-Harness the Power of Effective Resource Planning with OnePlan’s ...Tech Tuesday-Harness the Power of Effective Resource Planning with OnePlan’s ...
Tech Tuesday-Harness the Power of Effective Resource Planning with OnePlan’s ...
 
How to Choose the Right Laravel Development Partner in New York City_compress...
How to Choose the Right Laravel Development Partner in New York City_compress...How to Choose the Right Laravel Development Partner in New York City_compress...
How to Choose the Right Laravel Development Partner in New York City_compress...
 

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