Codemash 2018 presentation

1. FIRE UP YOUR MOBILE APP!
Suganthi Giridharan

2. How did I get started on this
Some integration with
syncing favorites
between devices would
be really cool.
…get them in iOS
app.

3. • Support Android and iOS
• Store user data in the cloud
Rebuild the app …

4. • Familiarity with C# and Xaml
• Cross platform
• Less code
Xamarin Forms

5. Choices for Mobile Backend

6. • Quick and reliable
servers
• Easy management
• Auto-scaling
• Market leader
• Backed by amazon
• Reliable
• Free tier
• High learning curve
• poor CPU
performance
• Realtime backend made
easy
• Fast and responsive
• Easy setup
• Real-time
• JSON
• Backed by google
• Free – spark plan
• Angular adaptor
• Reliable
• Great customer support
• Scalability is not infinite
• Scales well and quite
easy
• Can use .Net or open
source tools
• Startup friendly
• Startup plans via
BizSpark
• High performance
• Wide choice of
services
• Low cost
• Lots of integrations
• More Administrative
work

7. • Ease of use
Cross platform
Get started for Android
API Reference
Codelabs
Get started for iOS
API Reference
Codelabs
Get started for C++
API Reference
Get started for Unity
API Reference
Get started for Web
API Reference
Codelabs
Get started for Admin
API Reference

8. • Pick and Choose products
Realtime Database
Authentication
Cloud Storage
Test Lab
Firestore
Hosting
Cloud Functions
Crashlytics
Performance
Analytics
Dynamic Links
Invites
AdMob
Cloud Messaging
Remote Config
App Indexing
AdWords
Predictions

9. • Low cost entry

10. For conference app, used …
Realtime Database
Authentication

11. • All products
• Documentation
• Create the first project in Firebase
Demo – Firebase console

12. Firebase - Realtime Database
• NoSQL cloud database
• Store and Sync data across all clients
• Supports Offline capability

13. • Load Data
• Structure of Data
• Read Data – Open to all clients – Access data through HTTP
Demo

14. Database - Rules
Rule Types
.read Describes if and when data is allowed to be read by users.
.write Describes if and when data is allowed to be written.
.validate
Defines what a correctly formatted value will look like, whether it has
child attributes, and the data type.
.indexOn Specifies a child to index to support ordering and querying.
Firebase Database Rules have a JavaScript-like syntax and come in four types:

15. Database - Authorization Rules
Allow anonymous read, No write ( Rules cascade )
{
"rules": {
“sessions": {
".read": true,
".write": false
}
}
}
Allow only authenticated users to write
{
"rules": {
"users": {
"$uid": {
".write": "$uid === auth.uid"
}
}
}
}

16. Database – Validation & Index Rules
.validate rule uses same expression as .read and .write
Access to all of the built-in functions and variables but rules do not cascade
{
"rules": {
"speakers": {
".validate": "newData.isString() && newData.val().length < 5000"
}
}
}
Index Rules
{
"rules": {
"sessions": {
".indexOn": ["sessionid"]
}
}
}

17. DATA SYNCHRONIZATION
• Data is synchronized between connected clients
• Real time streaming
• Offline mode

18. Firebase Authentication – Federated Identity
Providers
Based on OAuth and OpenID Connect standard

19. OAuth - The Main Actors
Client Authorization Server
Resource Owner Resource Server
… is registered with
… issues access token
… uses … trusts
… “owns” a resource
… accesses

20. ① Create the client app
② Register app in Twitter site
③ Register app in Firebase
Demo for Firebase Authentication – Twitter
Provider

21. • Create an empty PCL Xamarin Forms project
• Android project settings
Note the package name
Get the SHA1 of your signing keystore. For debug keystore use the
command below to get SHA1 hash
• iOS project settings
Note the Bundle identifier
Create client app
Debug Keystore – Located at <home>/.android/debug.keystore
Run the following command to find SHA1 hash
keytool.exe -list -v -keystore "%LocalAppData%XamarinMono for Androiddebug.keystore" -
alias androiddebugkey -storepass android -keypass android

22. • Navigate to https://dev.twitter.com/apps/new and login with
your Twitter account credentials when prompted.
• Enter your Application Name, Description, your website address and callback
URL.
• Accept the Developer agreement and click "Create your Twitter Application".
• Copy the consumer key (API key) and consumer secret from the screen and
use into your application.
Configure app in Twitter site

24. Add Twitter configuration to the Firebase project

26. • Configuration file that has Firebase metadata for client app.
• Copy the google-services.json file into the app directory of android project.
• Add google-services plugin to android app – configure android app to use
Firebase
google-services.json

28. • Configuration file that has Firebase metadata for iOS app.
• Copy the plist file into the app directory of iOS project.
• Demo
GoogleService-Info.plist

29. Sign In Flow
Initialize
Firebase App
NO
Get Shared
Instance of App
Is User
Signed In
READ
UPDATE
Twitter Login
Screen
Get Twitter OAuth
Token and Secret
Exchange for
Firebase Credential
Get Current
User
YES

30. • Add Xamarin.Auth component
Provides Cross-platform API for authenticating users and storing their accounts.
Authenticate via OAuth1.0 and OAuth2.0 and store user credentials.
• Add Xamarin.Firebase.Auth component
Provides API for Firebase services
• Add Google Play services
Provides API for Google Play services
Integration of Xamarin Forms app to Firebase

31. • Creating/Launching Login UI is platform specific
Android
global::Android.Content.Intent ui_object = Auth1.GetUI(this);
StartActivity(auth.GetUI(this));
iOS
UIKit.UIViewController ui_object = Authi1.GetUI();
PresentViewController(ui_object, true, null );
• Detecting/Fetching/Intercepting URL change
OAuth handshake
• Store account –Keychain on iOS and KeyStore on Android
Platform specific code

32. Xamarin Forms Custom Page Renderer
• Custom PageRenderers are for screens that require platform-specific APIs
• We will have platform-specific ProviderLoginPage implementation of Xamarin.Auth.
• In PCL project create a subclass of ContentPage:
• Android:
• iOS:
• Add the [assembly] attribute above the class. The first parameter references the Xamarin.Forms page in your
PCL or Shared Project, while the second parameter references the platform-specific page you wish to replace it
with:
public partial class ProviderLoginPage : ContentPage
{
}
[assembly:ExportRenderer(typeof(ProviderLoginPage), typeof(LoginRenderer))]
public class LoginRenderer : PageRenderer, IOnCompleteListener, IOnSuccessListener
{
}
[assembly:ExportRenderer(typeof(ProviderLoginPage), typeof(LoginViewController))]
public class LoginViewController : ViewController

33. Demo – User Sign In End to End – Twitter example

34. • Navigate to https://console.developers.google.com
• Login with your Google account credentials when prompted.
• Select Credentials tab and click on Create Project.
• Add your App name and click on Create.
Google Sign In Configuration on the Server

35. Google Sign In For iOS - Client side
• Google deprecated use of Web Views to authenticate with their services
• Require the use of their own library – Google Sign In for iOS
• Use Google Sign-in for iOS Xamarin component and custom page renderer to
accomplish this task in Xamarin Forms.
• Download the GoogleService-Info.plist file and set up AppDelegate
• OnElementChanged – Add code to handle signing
• DidSignIn method – complete the task

36. Google Sign In For Android - Client side
• Google deprecated use of Web Views to authenticate with their services
• Require the use of their own library – Google Sign In
• Use Google Sign-in Xamarin component and custom page renderer to
accomplish this task in Xamarin Forms.
• OnElementChanged – Add code to handle signing
• DidSignIn method – complete the task

37. • Firebase was Easy to Use
• Configuration and Documentation
• Xamarin Forms – Less Code to Write
• Had Lots of Plugins
• Integration – Version compatibility between different components
• Troubleshooting
• Emulator – Deployment and slowness issues
What I Liked?
What were the challenges?

38. You may have an idea for an app

39. • Xamarin
• Firebase
Resources
https://github.com/xamarin/Xamarin.Auth
https://components.xamarin.com/gettingstarted/firebase-auth
https://components.xamarin.com/gettingstarted/googleiossignin
https://blog.xamarin.com/customize-your-xamarin-forms-app-with-pages-for-each-platform
https://firebase.google.com/
https://github.com/step-up-labs/firebase-database-dotnet

40. Slide deck location
Demo code location
https://github.com/sgiri/Codemash2018
Suganthi.Giridharan@gmail.com
@greenpal
Contact Info