become a mobile developer from scratch

Become a Mobile developer from scratch

Become a Mobile developer from scratchFree OutSystems webinar

Rben GonalvesMobile team leader @ OutSystems@techrug

2


Disclaimer! Dense and deep introduction to Mobile !

Agenda Framing the Mobile challenge4 Mobile Glossary What is a mobile device? Just a small computer? Mobile device characteristics UX considerations Choose the right architecture


Agenda Framing the Mobile challenge How OutSystems Platform helps?5 Preview in devices Prefetching resources Notify mechanism


Agenda Framing the Mobile challenge How OutSystems Platform helps? Leveraging Silk UI Framework 6 Templates Mobile patterns Demo


Agenda Framing the Mobile challenge How OutSystems Platform helps? Leveraging Silk UI Framework Going further with OutSystems Now7 What is it? Features Architecture overview Demo Customizing OutSystems Now Adding new plugins Checklist to app stores


8When building the first mobile app!


Framing the Mobile challenge

Agenda Framing the Mobile challenge

How OutSystems Platform helps? Leveraging Silk UI Framework Going further with OutSystems Now

10 Mobile Glossary What is a mobile device? Just a small computer? Mobile device characteristics UX considerations Choosing the right architecture


Mobile Glossary Android Studio Android IDE for creating native apps (Java) B2C Business to Customer (public distribution via app stores) B2E Business to Employee (internal distribution via non app store) BYOD Bring Your Own Device Hybrid apps web apps running inside a native shell MAM Mobile Application Management MDM Mobile Device Management (eg. AirWatch) RWD Responsive Web Design X Code iOS IDE for creating native apps (Objective-C, Swift)11


What is a mobile device?12

http://dunnnk.com/


What is a smartphone device?13

Pocket

EXTREMELY PERSONAL


Just a small computer? 14

Source: techarea


Just a small computer? Small? Not necessarily

Source: Design for Touch15


Just a small computer? Small? Not necessarilyInputs are different16Source: Mobily input types

And hard for the user


Just a small computer? Small? Not necessarilyInputs are different and more powerful!17Location detectionMulti-touch sensorsDevice positioning & motion: from accelerometerGyroscope: 360 Degrees of motionOrientation: direction from a digital compassVideo & image: capture/input from a cameraDual cameras: front and backAudio: input from a microphoneAmbient Light: light/dark environment awarenessProximity: device closeness to physical objectsNFC: Near Field Communications through RFID readersDevice connections: through Bluetooth between devices


Just a small computer? Small? Not necessarilyInputs are different and more powerful!Outputs are different18

The app itselfNotifications


Just a small computer? Small? Not necessarilyInputs are different and more powerful!Outputs are different19

The app itselfNotifications

Device speakerVibration mechanism


Just a small computer? Small? Not necessarilyInputs are different and more powerful!Outputs are differentContext of usage20Source: Liz Hafalia, The Chronicle


Just a small computer? Small? Not necessarilyInputs are different and more powerful!Outputs are differentContext of usage21Source: unable to find the source of the image


Just a small computer? Small? Not necessarilyInputs are different and more powerful!Outputs are differentContext of usage22

Source: we are social39%of internet traffic


RecapMobile devices are NOT small computersIts a whole new way to engage

Inputs and outputs are differentAnd we should leverage it as much as possible

Mobile is used on the goAnd pretty much for everything23


Framing the Mobile challengeMobile device characteristics24


Mobile device characteristicsTypical Laptop Intel cpu 8 Gb RAM 1,3M pixelsTypical Android ARM cpu 2 Gb RAM 2M pixels25

Source: Screen time-75%-2,7x slower+53% to paint

Less capacity


Mobile device characteristicsNot only less capacity but different browsers26

1,5x3,9x9,8xDELL E6440Chrome 42237msIPhone 6 PlusSafari360msNokia Lumia 925IE 11924msSamsung Tab4chrome2312msTest made on webkit.org


Mobile device characteristicsConnected to network27GPRS (2G)EDGE (2G, 2.5G or 3G)UTMS (3G)WCDMA (3G)HSPA (3G)EVDO (3G)HSPA (3G or 4G)Mobile WiMax(4G)LTE (4G)

We have 4G now! We dont have performance problems on the network anymore

Anonymous developer

Assumptions are themother of allBad things!


Mobile device characteristicsLTE is not everywhere2864%55%30%6%20%25%2G3GLTEWorldwide averageUSA averageSource: data from 201470% of timethe connection is3G or 2G


Mobile device characteristicsHow mobile network works under the hood?29

how many cell phone towers are in the vicinity?

how many users are sharing these towers?

what is the bandwidth available to these cellphone towers to connect to the Internet or the carrier's network?

RNCRadio NetworkControllerSGSNServiceGPRSSupportNodeGGSNGatewayGPRSSupportNodeInternetIP network

Cell towerFirewallTypical 3G (UMTS) network


Mobile device characteristicsHow mobile network works under the hood?how many cell phone towers are in the vicinity?


the bandwidth available to these cellphone towers to connect to the Internet or the carrier's network?

LATENCYfunction of the electrical characteristics of the circuit

30


Mobile device characteristicsHow mobile network works under the hood?how many cell phone towers are in the vicinity?


the bandwidth available to these cellphone towers to connect to the Internet or the carrier's network?

LATENCYfunction of the electrical characteristics of the circuit31

Mobile50 550ms350 msDesktop20 150ms80 msBe careful with the amount of requests done to the server!


Mobile device characteristicsHow mobile network works under the hood?32AntennaWhen not in use, goes idle after a given amount of time to spare battery, then needs to power up

3G 2.5s4G 100msWiFiTurned On but not connected consumes more energy than radio


Requests done to the server?> By far the biggest hurdle33

71 requests~8s to Load17 CSS25 JS21 img4 fonts3G (750 Kbps 100ms RTT)762 KB downloaded

Your typicalWeb app


RecapBig resolution, less capacity

LTE (4G) is hereBut aim for the worst scenario

Latency is a big performance hurdleCareful with # requests to the server34


Framing the Mobile challengeUX considerations35


Why apps fail?Lack of consistencySlow to change and adaptPoor strategyNot considering the complete journeyBrand recognitionBuilding mobile customer engagementKeep it simple

Not solving a real world problem Not understand the target audience Not sure about the Mobile Platform Too many or too less features Making it too complex for the users Incompatible User Experience Neglecting the backend support Not enough Marketing Not using App Optimization Techniques Failure listening to Users Feedback

36Source: Wired and Net solutions


Why apps fail?Lack of consistencySlow to change and adaptPoor strategyNot considering the complete journeyBrand recognitionBuilding mobile customer engagementKeep it simple

Not solving a real world problem Not understand the target audience Not sure about the Mobile Platform Too many or too less features Making it too complex for the users Incompatible User Experience Neglecting the backend support Not enough Marketing Not using App Optimization Techniques Failure listening to Users Feedback

37Source: Wired and Net solutions UX related issues


UX considerations Any place, any time38Mobile phones areportableattention is fragmentedPortable = Interruptiblesessions are shortUsers have attention spanequivalent of a 6 years oldSource: image from Mobile Input and text from Mobile User Experience: Limitations and Strenghts


UX considerations Any place, any time Used with hands39Source: Read and Write in Mobile

1,333 observations of people using mobile devices on the street


UX considerations Any place, any time Used with hands40Source: Read and Write in Mobile


UX considerations Any place, any time Used with hands41Source: How to design for thumbs







http://thumbzone.co/


UX considerations Any place, any time Used with hands big fat fingers45

Source: Design for Touch

Touchenabled








UX considerations Any place, any time Used with hands big fat fingers RWD is not always the right answer

48Source: Mobile Design Essentials, Luke Wroblewski

University of Notre Dame, Indiana, USA4,5m


UX considerations Any place, any time Used with hands big fat fingers RWD is not always the right answer49

responsive web design isnt intended to serve as a replacement for mobile web sitesEthan MarcotteB2CFor apps thatMobile is a nice to have


UX considerations Any place, any time Used with hands big fat fingers RWD is not always the right answer Use known mobile patterns50LoadingCarouselList ItemBalloonPull To RefreshAction Sheet (Context Menu)ModalToggleGlobal SearchCardTabsBlank SlateSwipe Page NavigationTitle bar / Top Header BarAlertsCard Stacked (tinder)Carousel - Horizontal Photo LightBoxChatInfinite ScrollCollapsible AreaProgress BarShareFloating menuFeedback MessageSidebar PanelPostSpinners / Numeric Text BoxCountersForm labelSide NavigationRange SliderGalleryBottom Menu (tab bar)Swipe List ItemsCalendarTooltipAccordionTimelineWalkthrough (Focused Onboarding)VideoUploadInput IconsTag EditorWizardBadge (with placehoder)PanelTile (research types)Check ItemButton GroupUserInitialsDropDownBoxBreadCrumbsCharacter CountButton AreaTables


UX considerations Any place, any time Used with hands big fat fingers RWD is not always the right answer Use known mobile patterns Work and Personal apps51B2C appCustomer oriented appsDistributed in public storesNeeds lot of UX/UI investment

B2E appEnterprise appsOnly to be used by EmployeesDistributed internallyCan have less investment in UX/UI (assumption)


RWD is not always the right answer

UX considerations Any place, any time Used with hands big fat fingers RWD is not always the right answer Use known mobile patterns Work and Personal apps52BYOD PolicyUsers device will have B2E and B2C apps installed. Comparison and high expectations are inevitable.


UX considerations53 Any place, any time Used with hands big fat fingers RWD is not always the right answer Use known mobile patterns Work and Personal apps Design for perceived Performance

Perceived Performancehow quickly a software feature appears to perform its task


UX considerations Any place, any time Used with hands big fat fingers RWD is not always the right answer Use known mobile patterns Work and Personal apps Design for perceived Performance54Become a Mobile developer from scratch

Perceived Performancehow quickly a software feature appears to perform its taskShow info already available

Replace This image in master

UX considerations Any place, any time Used with hands big fat fingers RWD is not always the right answer Use known mobile patterns Work and Personal apps Design for perceived Performance55Become a Mobile developer from scratch

Perceived Performancehow quickly a software feature appears to perform its taskLoad remaining asynchronously


RecapYou cant fit it all

Who is your target user

What are they aiming to do?

What will you remove?

Expectation are high!

We are required a Mind Shift56B2C? You cant use RWD!Expect a lot more effortfor UX and UI!What is the applicationtrying to solve?Without making theuser frustrated.Due to amazing B2C apps out there29 years


Framing the Mobile challengeChoose the right architecture57


Choose the right architectureSource: OutSystems Blog58


Choose the right architecture59 Is your app single screen with lot of animations and sounds? Do you need to access the devices sensors? Do you need access to custom native functionality? Do you need your app on the store? Do you need to support multiple operating systems? Do you need to support devices with poor performance?

See this and more in OutSystems Blog!


How OutSystems Platform helps?

Agenda Framing the Mobile challenge How OutSystems Platform helps?61 Preview in devices Prefetching resources Notify mechanism


Preview in devices62


Prefetching resources Can be activated per application

Runs only once per session

Downloads the application resources and caches CSS, JavaScript, img, Fonts

On 2nd access only downloads resources not cachedBecome a Mobile developer from scratch

63Available from 9.0.1.25


Prefetching resourcesBecome a Mobile developer from scratch



Prefetching resourcesBecome a Mobile developer from scratch


To customize


Notify mechanismAvailable from 9.1

MobileServerButton.ClickOnNotifyOnNotifyAjax.Update

MobileServerButton.ClickAjax.UpdateBaliLATENCYfunction of the electrical characteristics of the circuit

66


RecapPreview in devices good starting pointNot the same as testing in a device

Prefetching will help on first accessCan be customized

Notify server sideAvoids unnecessary round trips to the server67


Leveraging Silk UI Framework

Agenda Framing the Mobile challenge How OutSystems Platform helps? Leveraging Silk UI Framework 69 Templates Mobile patterns Demo



Why Silk UI?71


Why Silk UI? Because CSS is Awesome*!72

*When you know what youre doing


Why Silk UI?

View presentation and recording73


http://www.outsystems.com/forums/discussion/17399/webinar-silkui-from-basic-to-advanced/#Post66906

Information from Silk UI Device: desktop, tablet, phone Dimension: big, hd, small Operating systems: iOS, Android, Windows, Browser: chrome, firefox, IE10, IE11, Safari, etc. Orientation: landscape, portrait Locale: en, pt,

74


Templates75

DublinLiverpoolLisbonTokyoVanilla


Tokyo Template76

If your target are smartphones, this is the template to use. It's optimized for touch and devices, and the recipient for the mobile patterns.


Leveraging Silk UI FrameworkMobile Patterns77


Mobile PatternsSilkUIFramework moduleGlobal SearchListItemListItemToggleListItemGroupBottom Menu

Tokyo Theme moduleMainContentMarginButtonBackButtonMenu

78




79




80


Mobile patternsSilkUIFramework moduleGlobal SearchListItemListItemToggleListItemGroupBottom Menu


81


Demo82


RecapSilk UI Framework helpsWith specific templates and mobile patterns

Tokyo template is the smartphone templateContaining specific patterns and behaviors

Leverage the information made availableTo tweak the experience per platform83


Going further with OutSystems Now

Agenda Framing the Mobile challenge How OutSystems Platform helps? Leveraging Silk UI Framework Going further with OutSystems Now85 What is it? Features Architecture overview Demo Customizing OutSystems Now Adding new plugins Checklist to app stores


What is it? Transforms apps build in OutSystems Platform in Hybrid apps iOS, Android and Windows apps

Enabling access to device capabilities Camera, location, local storage or other device APIs

Apps can then be released to public stores

86


OutSystems Now screens

1. The Icon2. Splash4. Login5. The List6. App

3. EnvironmentOn B2E this should be removedOn B2C these must be removed87


Going further with OutSystems NowFeatures88


Cordova plugins89


Supported features 90


Easy configuration91


Going further with OutSystems NowArchitecture overview92


What is Apache Cordova? Open-source mobile development framework

Allows use of standard web technologies (HTML5, CSS3, and JavaScript) for cross-platform development

Applications execute within wrappers targeted to each platform

Standards-compliant API bindings to access each device's sensors, data, and network status.93


Cordova vs PhoneGapCordova: open source project maintained by ApachePhoneGap: is powered by Cordova but maintained by Adobe

94


Architecture overview95OutSystems Now Native ShellNative FunctionalitiesPlugins/AddonsAuthentication OutSystemsNowServicesOutSystems Platform FunctionalitiesPlugins ModulesAuthentication ProviderREST APIHTTPS CommunicationServer sideDevice


Architecture overview96OutSystems Now Native ShellNative FunctionalitiesPlugins/AddonsAuthentication Web ViewOffline Mode


DemoLets add to calendar a reminder with the deadline


Going further with OutSystems NowCustomizing OutSystems Now98


Customizing OutSystems Now99


Available Cordova Plugins

100


Plugins on Forge101


Plugins on Forge102


Going further with OutSystems NowSubmitting to the app stores103


Available Cordova Plugins104


RecapOutSystems Now is in major app storesFor everyone to start using it and testing their applications

OutSystems Now is Open sourceEnabling everyone to customize it and extend

Built on top of cordovaLeverage this by using plugins created by the cordova community105


Thank you