Tuesday, October 17, 2017

Mobile App On-boarding with Xamarin Forms and Syncfusion

In my previous post, I talked about how awesome xamarin is for creating cross-platform mobile apps. I’ve been thinking a lot about customer on-boarding recently, so I thought I’d do another proof of concept app to illustrate it using xamarin.
As before, I prefer using real companies to illustrate the point. I’m a big fan of Highrise, and how they build product, so I thought they’d make a good candidate this time around, especially since they’re pretty transparent about their processes and value proposition, so it was pretty easy to generate content.
Here’s a quick walk-through the result:

So I’m not going to go into too much technical details here — if you want to check out the source code, check out the github repo. Instead I’m going to break down the app page by page:

The Splash Page

There’s nothing great about the android splash screen, except to note that it’s a 9-patch image, which scales and stretches no matter what orientation or screen size the device is.

The Welcome Page

This page is really the main point of doing the proof of concept. It’s the first thing potentially new customers will see, so it really needs to sell your value proposition. Highrise recently went through a jobs-to-be-done exercise with their customers, and came out with three main points, which you’ll now find on their homepage. So it makes sense to have this on the landing page, along with sign up / sign in options. (Here’s another example of this pattern from Charlin Agramonte). As in Charlin’s example, and this one, it’s a good idea to have some sort of movable media to draw the user’s attention. In this case I’m using the wonderfully cross-platform Lottie Animation Xamarin Bindings from Martijn van Dijk.

Points of interest on this page:
  • Xamarin Forms animation is used to sequentially animate the buttons and ‘more about highrise’ controls
  • the layout and logo image sizing is adaptive to the orientation of the device.
  • The Syncfusion Rotator control is used to automatically cycle through the value proposition animations
  • A ‘learn more’ link in case the user needs some more information before submitting credentials — such as pricing etc.

The Sign In / Sign Up Page

These pages are pretty basic. Keep it simple. Animations purposefully left out of this page as they would detract from the important info, which is the data entry.
Points of interest:
  • Making use of the floating label design pattern for data entry. This increases the available real estate when working with entry controls
  • The button animates in to draw attention to the text. Don’t worry — it doesn’t flash, that’s just the gif animation recycling :P
  • The logo becomes invisible when the device is in landscape mode to ensure enough real estate for the entry fields

The Landing Page

Okay, so the user made it through the signup process, but still has no idea (or at least very little) what the app can do. The idea conveyed here is to guide the user with visual queues, and get them to do the simplest action that is the main value proposition of the app. In this case it’s creating a contact.

One other thing I wanted to play around with was gamification. So once you’ve created that first contact, the app gives an immediate reward of unlocking your first achievement, along with links to other help topics and features the user may find useful.

The other thing to be aware of, is giving your users opportunities to share their app experience via social messaging. The Landing Page has a generic ‘I think Highrise is awesome’ share button in the toolbar, and each user achievement has a ‘I just achieved X with Highrise’ share link.

Some more links for related reading

Syncfusion Controls
I used the Rotator and ListView (with left and right swipe actions) controls for this project. I also added an animating radial menu control to the contact page, but it’s not working atm.
Have any thoughts on mobile app on-boarding? Feedback and share them in the comments.

Wednesday, October 11, 2017

Health Care Provider Booking Platform: Proof of Concept Cross Platform App using Xamarin and Syncfusion

So about a month ago, fueled by a conversation with a startup CEO, I decided to write a small app as a proof of concept for building an app that is cross platform, in a short period of time.

You can find the original Medium post here

Good stuff first: Demo Video Time :) 

You can find the source code on GitHub 

In there you'll find code for:

  • Using the geolocator plugin to find the current gps location. code
  • Launch the native device map with a location for directions. code
  • Store data in a sqlite repository. code
  • Schedule Picker control from syncfusion. code
  • Image Circle plugin. code
  • Some fade in animations on the login page. code
  • Syncfusion ListView control with swipe action templates. code
  • Share plugin to share content via registered apps like email and twitter. code
... and a bit more generic stuff like MVVM & Command pattern implementations ; navigation service ; dependency injection using Autofac etc.

Xamarin Forms really is a super productive, fully native and completely extensible option for cross platform mobile development :)

Daily Links 11 Oct 2017

Xamarin Test Box, the first local test server.

Creating an extension method for attaching key-value pairs to scope state using ASP.NET Core

Running xUnit Tests with VSTS

Little ASP.NET Core Book

Beautiful Xamarin – Facebook Clone in Xamarin.Forms

How to configure log4net on Azure App Service

Develop (and test) a dockerized, PostgreSQL backed, ASP.NET Core microservice in less than an hour

3 Reasons to Try Xamarin Previews in Visual Studio 2017

5 Common Pitfalls In Enterprise Mobile Development

Handling System Failures during Payment Communication

Bringing WebVR to everyone with the Windows 10 Fall Creators Update

Xamarin.Forms Updates


Friday, August 18, 2017

Xamarin Forms: Floating Label Entry View Control

Following on from some of my other posts on tweaking some controls for xamarin forms (like the ToolbarItem and GridView), I thought it would be handy to implement something along the lines of the floating label pattern as outlined here by Brad Frost.
Here’s a look at the output on Android, iOS and Windows:
Don’t get confused: there are labels on the UI to output the binding that the entry controls have – download the code and run the samples.
The idea was to have a single control that contained both the label and entry (the placeholder animates out into the label when text replaces the placeholder value)
Here’s what using the xaml looks like:
As per usual, you can check out all the source code here
In the future I hope to add some things like validation support. Other options are also perhaps some of the nifty image support that was recently posted by Charlin here
Happy Coding!

Daily Links 18 Aug 2017

Transient Fault Handling in Xamarin.Forms

Multiple Android builds on Xamarin Forms

Mobile Database Bi-Directional Synchronization with a REST API

Ethereum smart contracts in a nutshell for hackers

Managing Data in Microservices

Image Entry in Xamarin Forms

Xamarin Forms Async Task On Startup

Introduction to the ApiExplorer in ASP.NET Core


Insomnia: Free REST Client

The Visitor Pattern Explained

Web Applications with ASP.NET Core Architecture and Patterns guidance

Quick and Easy ASP.NET Identity Multitenancy


GraphiQL in ASP.NET Core

The GitHub GraphQL API

Airbnb Javascript Style Guide

Exploring refit, an automatic type-safe REST library for .NET Standard

LiveXAML and Xamarin.Forms