This document discusses mobile app development using hybrid technologies like Apache Cordova. It provides an example of a company called Ion Global that successfully enabled their web app for mobile using Cordova. They initially ported the web app to mobile with minimal changes, which led to poor user experience and low sales. After conducting user research, they rebuilt the mobile app using the Ionic framework, focusing only on the most used features. This led to significantly improved sales. The document promotes hybrid mobile development using tools like Cordova and frameworks like Ionic, highlighting how they allow developing once and deploying to multiple platforms using web technologies. It provides various resources for getting started with hybrid mobile development.
9. Reaching user the fastest way
â Platform independent
â Accessible from anywhere
â Easy to test
â HTML5, JavaScript and CSS
â Fast learning curve
10. Anytime Anywhere
â Download from AppStore,
GooglePlay and Windows Store
â Accessible anytime
â Offline support
â Full device access
14. Best of both worlds
âNative app with embedded HTML
âOne app for many platforms
âFull device access
âAccess anytime anywhere (Offline support)
âAppStore / Windows Store / Google Play
âUse your preferred language
âLearn fast and build faster
âUpdate without updating App!
19. Are You Building the Facebook app?
âHave a multi-million dollar budget?
âHave a large team of experienced native developers?
âDoes billion-dollar revenue depend on this app?
âIf so...do native
â...but today it's not so black and white
20. Are You Building the Facebook app?
âHave a multi-million dollar budget?
âHave a large team of experienced native developers?
âDoes billion-dollar revenue depend on this app?
âIf so...do native
â...but today it's not so black and white
22. Hybrid Technologies
Xamarin Studio
â Freemium by Xamarin
â Mac, Windows, Microsoft Visual
Studio
â Write in C#
Appcelerator Titanium
â Open Source by Appcelerator
Inc
â Mac, Windows, Linux, Web /
Cloud
â Write in Web technologies
Apache Cordova
â Open Source by Apache
â Mac, Windows, Linux, Web /
Cloud
â Write in Web technologies
React Native
âą By Facebook
âą iOS, Android, Windows
âą Write in Web technologies
Qt Creator
âą Open Source by Qt Project
âą Mac, Windows, Linux, BSD
âą Use cross-platform C++,
JavaScript and QML
Native Script
âą Freemium by Codename
One
âą iOS, Android, WIndows,
âą Write in Web Technologies
23. I choose Apache Cordova
â Widest community support
â Complete Eco-system
â 1000+ Plugins to support
device
29. Mobile Enablement of Ion Global
What we already have
â Fully fledged web app
â Fully fledged REST API
What we already know
â 43% use Android Devices
â 38% use iOS Devices
â 6% use Windows Devices
How to mobile enable
â Make it responsive
â Build for iOS and Android
using Apache Cordova
What we did
â Modified web app using
Bootstrap to be
responsive
â Port to Android, Windows
and iOS using Apache
Cordova
â Published on GooglePlay
(4hr), Windows Store (4d)
and iTunes (7d)
32. Investigation
Unbiased Feedbacks
â 20 people who worked at Ion Global
â 10 customer companies who hire people
through Ion Global
â 40 random people on the street
Feedback: This is superb.
Has all the features I want.
35. âRegardless of being crafted for the
betterment of technology, any tool can be
used in a way it doesn't serve the purpose.
Ultimately, it comes down to the
understanding of the person who uses the
tool.
- Navaka Navaratne
36. Ion Global going mobile : Phase 2
Completely revamped
the mobile app
â Only focused on
applicants
â Only 2 most frequently
used features - seach
and apply.
â Used Mobile UI
Framework - Ionic
â Took 4 months to build
and publish in stores
40. Welcome Ionic
â Web Technologies You Already Know and Love
HTML5 / JS / CSS
â Standing on the Shoulders of AngularJS
â Native Focused â build to work with Cordova
âPerformance Obsessed
âEco System of Services (Auth, Push, Analytics, Deploy, View)
41. âHow does it all come together?â
WebView (Cordova)
Native SDK
AngularJS
Ionic
Your App
57. Case Study - Hypothesis Validation
Identifying the most usable entry point to the comment view
Enter to the comment
view from
Detail View Icon
Enter to the comment
view from
Action Menu Button
From the data of 53 unique users and 368
entries to the comment view, inferred 93.8%
prefer the detail view icon.
Action: Remove the action menu button
keeping only the icon
60. Credits
Special thanks to all the people who made and released
these awesome resources for free:
âPresentation template by SlidesCarnival
âPhotographs by Unsplash
Hinweis der Redaktion
2 years ago â For the first time, the number of mobile devices overtook the human population.
http://www.independent.co.uk/life-style/gadgets-and-tech/news/there-are-officially-more-mobile-devices-than-people-in-the-world-9780518.html
One year back, google confirmed that there are more Google Searches on mobile devices than laptops or computers.
Hence we know that more people search via phone than desktop.
https://adwords.googleblog.com/2015/05/building-for-next-moment.html
Last month, Statcounter, a research company that tracks internet announced that last month, mobile web usage overtook the desktop for the first time in history.
http://www.telegraph.co.uk/technology/2016/11/01/mobile-web-usage-overtakes-desktop-for-first-time/
You all are entreprenuers.
You are developing a solution to be used by people by risking your time and money expecting it to be used by as much as large audience.
To make more users user your solution - one quick way is to go mobile.
Few insight on Mobile Enablement.
Cool word - In simple words, enable users to use anytime anywhere.
So mobile enabling your business idea, is allowing its users to access it anytime needed.
If time permits, would like to share some interesting tools on reading users without listening to them.
Well, what I will tell you is very simple. But doing it correctly is not very easy!
Let me tell you 4 things about going mobile in your venture.
Why? Why would you need mobile app when you can simple craft your startup idea in 100s of ways.
How? How you can move forward with mobile enablement. What to consider and what to forget. What to learn and what to unlearn.
What? What tools and techniques helps you to simply develop your app in mobile domain.
Finally, how you can learn to read users to identify you are on the correct track?
Basically Iâm going to tell you one way to transform your business focus into technical focus in the mobile arena.
WHY
First you need to know what you are doing. Solving a problem, dressing up an exisiting solution
Imagine you a super cool idea for an app - Person identification app.
"Which users am I going to focus?" - School kids, nerds, geeks or a specific category of people, maybe Police or FBI.
And then how would you reach them? - Through a website, desktop application, maybe build into something like Microsoft HoloLens or Google Glass or mobile phone.
If itâs you are the only developer, you should consider about the familiar technologies.
Learning curve.
Your knowledge to support multiple platforms, and whether you can maintain 2 code bases.
Time is money.
The time for development is a concern since itâs one of the main gaps between your idea and actual product.
With all above concerns, is it possible your app to go to the market, before anyone else does?
Reach the maximum of your target audience and speedup your time to market.
Winning product ->Speed to market and widest user reach.
If you ask anyone, how to create an app super fast most would say - website or web app. And since everyone has a computer or mobile phone has access to web browser, then to your app.
Platform independent - so can use in any device.
Develop super fast app using HTML5, JavaScript and CSS
Easy to test using your web browser
Accessible from anywhere (If you are connected to web)
Very less learning curve for development technologies
So if we use a webapp, we can reach the maximum from our target audience, and can reach super fast. Its just a matter of hosting the app in a server, and allowing users to browser the URL.
But what if user wants more interaction with the app? More personalize and want to use it when they are not connected to web.
I'd say Mobile.
What cool stuff comes from mobile arena;
Full device access - you can access all the phone features like camera, contact list, SMS, browser, etc.
Can download from AppStore, GooglePlay and Windows Store
Accessible anytime from your handheld device
Offline support - you can use any app even without connecting to the web
Mobile App as by today, there are more active mobile devices than human in the world. [International Business Times]
And now the HOW.
The million dollar question - HOW would you drive technical focus to support the business focus?
Another context:
You want to go out in sunlight and have fun eating junk food while being a Edward-like vampire.
On the other hand,
Control when you need to transform into a wolf and control yourself when you are a wolf while being a Jacob-like werewolf. Without needing new jeans and shirts every time after you burst yourself to a wolf.
Hybrid Mobile Development technology introduced around 2012, and been ever evolving with many supportive platforms.
Since each native application only runs on one platform, businesses building native apps must make a choice--build for one platform or build for multiple platforms?
If you are going for all 3 main platforms you will have to develop 3 mobile apps.
Source: http://www.mrc-productivity.com/research/whitepapers/NativeAppsWrongChoice.pdf
Throughout it's development, there are few myths as well...
1. They are just websites in app-stores :
No they are not just websites. They are mobile apps which gives the same user experience as any iOS, Android or Windows app gives. Don't just listen to me. Try for yourselves.
Evernote
Khan Academy â Free online course which provide video lectures and tutorials on areas such as maths, science, history, economics, computer programming
Amazon
â Announced at AnDevCon conference in San Francisco 2012 by Ethan Evans, VP, Director at Amazon
- Ability to update the app without requiring an upgrade on the device user's side
http://www.theserverside.com/news/2240174316/How-Amazon-discovered-hybrid-HTML5-Java-Android-app-development
Throughout it's development, there are few myths as well...
1. They are just websites in app-stores :
No they are not just websites. They are mobile apps which gives the same user experience as any iOS, Android or Windows app gives. Don't just listen to me. Try for yourselves
http://blog.venturepact.com/8-high-performance-apps-you-never-knew-were-hybrid/
2. You can't access Mobile Device Features:
Ha ha. Try Evernote image capturing for a change. And to boast there are 649 plugins to use device features by 12.50 PM on 15th October 2015. By the time you read, this number is definitely increased. See the plugins repository.
3. Native apps are more beautiful:
Again I'd ask you to refer above apps. And these ones which are presented in this slideshare presentation.
On the other hand I'd say this is totally depend on your competency in CSS. Limit is beyond horizon if you can do the UI nicely. And with the 1001 opensource UI frameworks available, you definetely can do a better UI with HTML5/CSS than native android or iOS for sure!
4. Hybrid Mobile apps are slow:
I agree 10%. If native apps are 100% fast, I would say hybrid apps are 90% fast. This is purely from my experience. For expert opinion read this readwrite article.
http://venturebeat.com/2013/04/17/linkedin-mobile-web-breakup/
LinkedIn
- app is running out of memory.
- get some of the animations â the spinners and the way they work â getting that smoothness, we felt like we needed native to really do that well.
I hope this is what you all geeks been waiting for.
What are the available tools we can use to convert your app to android? Or iOS.
Apache Cordova has the widest community support
Eco-system to make developers' life comfortable
I found it super cool to work with :-)
Today, most hybrid mobile applications leverage Apache Cordova, a platform that provides a consistent set of JavaScript APIs to access device capabilities through plugins, which are built with native code.
As a side note, Apache Cordova originally started as a project named PhoneGap. These days, PhoneGap exists as a distribution of Apache Cordova that includes additional tools.
Step 1:
Initially you have a website. You have your (Html, CSS, JS) Lets say you have,
index.html
app.js
style.css
Step 2:
Then you process it through ApacheCordova (PhoneGap). Basically compile, build and release.
How: cordova build android ios | upload your web files to PhoneGap Cloud.
Step 3:
The output will be the native mobile app. Mobile app for iOS, Android, Windows, Blackberry or your preferred mobile platform.
Remember my tag line? Simple but not easy.
Simple as that.
At the bottom you have the Mobile OS. (Android, iOS, Windows, etc.) On top of that, you have your PhoneGap Application.
Inside the PhoneGap Application, you have HTML Rendering Engine at the bottom. Basically a web view.
On top of the web view is your web app (Your index.html, app.js, style.css) Separately there will be PhoneGap Plugins, and your app can connect to them through the html rendering engine. The plugin will directly contact the Mobile OS via OS APIs.
So you can imagine it as, Cordova will create a native app with a web browser, and run your web-app (html/css/js) inside the web browser.
Seems quite a lot to digest? No. Nothing to worry. You only have to think of the Web App Layer :-)
This is a story, of how 'Ion Global ' moved into mobile arena with their service. Ion Global (IG) is a recruitment agency focusing on head hunting.
IG mostly interact with its stakeholders through their web application through web browsers.
Competitors are being success on their business through mobile.
Mr. Kent - Technology Head.
The team happily accepted the challenge as they too have felt they are missing a large portion of reachable users because IG is only restricted to desktop web browsers.
Moving forward team brainstormed what they already have.
Thinking of the audience most users use Android devices and iOS devices where as very few use Windows devices based on a previous survey done by their client firm. Therefore, developing 3 applications in native android, iOS and windows will need huge effort and would take longer time since they have only 4 developers.
While brainstorming, one developer suggested we could use hybrid mobile development technology to easily convert web app to mobile app.
Development team was extremely satisfied of their capability. The CEO separately sent a commendation letter to Mr. Kent and team appreciating them.
After 3 month, the board meeting.
presented the business growth statistics
strangely no considerable change in the business.
The board was surprised.
They have moved IG into to Apple devices, Android devices and Windows devices, it was only 1% uplift in their business.
In a split second Mr. Kent checked the download statistics of AppStore, GooglePlay and Windows Store.
Found that many ppl downloaded but never used the app. Board was puzzled,.
Using IG, used FB.
Use of FB was way different thatn IG.
FB, using 1 hand did everything.
In IG, you move in tabs and taking actions, filling forms. Same as a desktop browser.
Team was enlightened on the problem.
The issue was entirely User Experience.
For easiness, the Ion Global developers directly ported their web app into mobile platforms. Now IG has mobile apps, that has desktop user experience.
Mr. Kent, development head, then agreed it was a concern which fall out of his mind when brainstorming. He took the responsibility for what happened and took the challenge to correct the mistake.
It was a 37% of growth!
So keep in mind - Mobile enablement is super simple, but not so easy!
First you install Apache Cordova. Then the development of your app.
The first approach would be write your app code from scratch. Doable, however its quite a considerable amount of work if you are a beginner. Even you are a pro, I'd say you can use existing mobile UI framework and customize based on your requirements, which is straightforward and hell a lot of time saver.
Okay cool. What are the available mobile UI frameworks?
If you are familier with AngularJS - Go for Ionic. Else start with jQuery Mobile.
Native Focused
Modeled off of native SDKs
Built to work with Cordova
Performance Obsessed
Hardware accelerated animations
Minimal DOM Manipulation
Remove 300ms tap delay
Plain ol' CSS
Cohesive visual system
Clean and simple
Easy to customize
Stand-alone CSS (independent of Ionic's JavaScript)
Ionicons
Over 700 MIT licensed font-icons included
http://www.tutorialspoint.com/ionic/ionic_environment_setup.htm
We will start with https://ccoenraets.github.io/ionic-tutorial/index.html
And there are plenty of factors we need to be concerned in going mobile or more specifically taking your product to user. I suggest Growth Hacker Marketing by Ryan Holiday and Running Lean by Ash Maurya to build up your knowledge on product market arena.
Why? - To craft your startup as a winning product, you need 2 things. Speed to market and widest customer reach in your niche market.
How? - Create a super fast app - A web site would be the best suited. To maximize the reach - A mobile app would be the best suited. And to create the winning product, you are to build the hybrid! Hybrid mobile app development.
What? - Apache Cordova or any other hybrid mobile development platform integrated with a UI Framework.
Question: Please have a walk through on this mobile app. And tell me if this suits you?
Assume, I show you one of my mobile apps to you. And ask for your feedback. Wouldnât you imagine the best features it could have and how you can have all of them?
Ex: Messaging to oracle, call to their phone.
Itâs the common human behavior. The problem with getting userâs direct feedback, most of the time itâs a façade! Humans have opinions, views, and perceptions. When a human is asked for feedback, he or she will imagine a world with all the cool things could have and provide as feedback. However, in reality, only 20% of that is used.
https://www.hotjar.com/
So we have web and mobile arena.
Concerns, fastest development and best user experience.
Web and Mobile.