Download to read offline
Uploaded byRashmika Nawaratne
Mobile Enablement And Intelligence
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.
More Related Content
Similar to Mobile Enablement And Intelligence
Mobile Enablement And Intelligence
- 1. More mobile devicesthan world population – 7th October ’14
- 2. More Google Searcheson Mobile than Desktop/ Laptop – 5th May ’15
- 3. Mobile web usageovertakes desktop for first time – Oct ’16
- 4. Mobile Enablement simple butnot easy & some Intelligence
- 5.
- 6.
- 7. Startup Mindset ✘Problem/ Solution ✘TargetAudience ✘Development cost ( Talent, support and maintenance) ✘Time to market
- 8.
- 9. Reaching user thefastest way ✘ Platform independent ✘ Accessible from anywhere ✘ Easy to test ✘ HTML5, JavaScript and CSS ✘ Fast learning curve
- 10. Anytime Anywhere ✘ Downloadfrom AppStore, GooglePlay and Windows Store ✘ Accessible anytime ✘ Offline support ✘ Full device access
- 11.
- 12. Best from boththe worlds
- 13.
- 14. Best of bothworlds ✘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!
- 15. Myths! ✘They are justwebsites in app-store
- 16. Myths! ✘They are justwebsites in app-store
- 17. Myths! ✘They are justwebsites in app-stores ✘You can’t access mobile features ✘Native apps are more beautiful ✘Slow!
- 18. “Oh No! TheZuck has spoken!”
- 19. Are You Buildingthe 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 Buildingthe 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
- 21.
- 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 ApacheCordova ✘ Widest community support ✘ Complete Eco-system ✘ 1000+ Plugins to support device
- 24. Concept behind hybriddevelopment - Cordova Cordova Build
- 25. Technical Architecture -Cordova
- 26.
- 27. Ion Global Going mobilein the easy way
- 28. Mr. Kent -Head of Technology
- 29. Mobile Enablement ofIon 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)
- 30.
- 31. What did just happenthere?
- 32. Investigation Unbiased Feedbacks ✘ 20people 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.
- 33.
- 34.
- 35. “Regardless of beingcrafted 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 goingmobile : 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
- 37. Next Board Meetingof Ion Global Sales
- 38. “ Mobile enablement issuper simple, but not so easy! - Rashmika Nawaratne
- 39. Getting Started... Install Cordova Download Mobile Framework Get the Bootstrap code Testfrom Browser Emulator Build the app Push to Cloud ✘ jQuery Mobile ✘ Ionic ✘ Onsen UI ✘ Intel XDK ✘ Kendo UI ✘ Sencha Touch
- 40. Welcome Ionic ✘ WebTechnologies 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 itall come together?” WebView (Cordova) Native SDK AngularJS Ionic Your App
- 42.
- 43.
- 44.
- 45. 4. Access DeviceFeatures using Plugins
- 47.
- 48.
- 49. What you needfirst?
- 50. Where to start? ✘Ionic 1 - https://ccoenraets.github.io/ionic-tutorial/ ✘ Ionic 2 - http://ionicframework.com/docs/v2/getting- started/tutorial/
- 51. Resources ✘Mobile Enablement -http://blog.nawaratne.com/ ✘This Presentation: http://goo.gl/QsKxQm ✘Mobile Usage Stats - http://gs.statcounter.com/ ✘Ionic Framework - http://ionicframework.com/ ✘Begin with Cordova - https://cordova.apache.org/ ✘Device Access via plugins - http://plugins.cordova.io/ ✘Growth Hacker Marketing by Ryan Holiday ✘Running Lean by Ash Maurya
- 52.
- 54. Read people withoutlistening Intelligence
- 55.
- 56. Google Analytics –Event Tracking
- 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
- 58. Happy Coding! You canfind me on @razmik89 RashmikaN@99x.lk blog.nawaratne.com
- 60. Credits Special thanks toall the people who made and released these awesome resources for free: ✘Presentation template by SlidesCarnival ✘Photographs by Unsplash
Editor's Notes
- #2 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
- #3 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
- #4 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/
- #5 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!
- #6 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.
- #7 WHY
- #8 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?
- #9 Reach the maximum of your target audience and speedup your time to market.
- #10 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.
- #11 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]
- #12 And now the HOW. The million dollar question - HOW would you drive technical focus to support the business focus?
- #13 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.
- #14 Hybrid Mobile Development technology introduced around 2012, and been ever evolving with many supportive platforms.
- #15 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
- #16 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.
- #17 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
- #18 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.
- #19 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.
- #23 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.
- #24 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.
- #25 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.
- #26 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 :-)
- #28 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.
- #29 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.
- #30 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.
- #31 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,.
- #34 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.
- #35 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.
- #38 It was a 37% of growth!
- #39 So keep in mind - Mobile enablement is super simple, but not so easy!
- #40 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.
- #41 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
- #43 http://ionicframework.com/docs/
- #44 https://creator.ionic.io
- #45 http://lab.ionic.io/
- #46 http://ngcordova.com/docs/plugins/ https://cordova.apache.org/plugins/
- #47 https://market.ionic.io/
- #48 https://docs.ionic.io/services/
- #50 http://www.tutorialspoint.com/ionic/ionic_environment_setup.htm We will start with https://ccoenraets.github.io/ionic-tutorial/index.html
- #52 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.
- #53 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.
- #54 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.
- #56 https://www.hotjar.com/
- #60 So we have web and mobile arena. Concerns, fastest development and best user experience. Web and Mobile.