2014-08-20 09:00:00
Xamarin.Forms with Zumero
I am a Xamarin fanboy, so my excitement about Xamarin.Forms is perhaps unsurprising. But I see an awful lot of potential for this technology. I want to show you some of the stuff we've been doing with Xamarin.Forms here at Zumero.
Andrew Jackson in Two Minutes
First I am going to race through this demo very quickly. Then I'll circle back around and explain things.
STEP ONE: Download ZAG and run it
Visit http://zumero.com/dev-center/zss/#zag and download the ZAG application. For this demo, I'm using ZAG on Mac OS X (but you could choose Windows or Linux) and I am targetting iOS (but you could choose Android or Windows Phone).
When you run the app, you should see something like this:
STEP TWO: New Database
Under the "File" menu, choose "New Database...". You should see this dialog:
Fill in the Server URL and DBFile exactly as shown in the screen shot (Server URL: "http://demo.zumero.com:8080". DBFile: "demo"). Click the OK button. You should see a dialog asking you where to save the local copy of the database:
Click OK. You should see "Syncing with the ZSS Server":
And when the sync is complete, at the bottom of the ZAG window, you should see "Sync result: 0 (success)".
STEP THREE: Generate
Under the "Generate" menu, find and choose the item labeled "Xamarin.Forms C#":
You will be asked three questions, and you should be able to just click OK on all three.
STEP FOUR: Open the sln file
You can quit the ZAG application now. It should have generated a folder somewhere like /Users/eric/Documents/demo.zssdemo/. Under that folder you should find a Xamarin solution tree that looks something like this:
Double-click the demo.sln file to open it in Xamarin Studio. You should see four C# projects: a Portable Class Library called "demo.Shared", plus one app target each for iOS, Android, and Windows Phone 8:
STEP FIVE: Build and run the app
If you build and run the demo.iOS app in the iPhone simulator, you should see something like this:
STEP SIX: Sync
Click the "Sync" button in the upper right. You should see:
The defaults should be fine. Just tap the "Sync Now" button. When the sync is completed, you should see a list of tables:
STEP SEVEN: Andrew Jackson
Tap the "presidents" table. In an iPad instance of the simulator, you would see this:
And tap the seventh item. You should see Andrew Jackson, the only U.S. president ever to kill someone in a duel:
What is ZAG?
ZAG is short for "ZSS App Generator". It's a desktop app which generates ready-to-build source code and build scripts for mobile apps that sync using ZSS.
We think of ZAG as a way for getting people started faster. Many people come to our product without much experience in mobile app development. ZAG can be used to give them a starting point, sort of like sample code that is customized for their data.
What is Zumero for SQL Server?
Zumero for SQL Server (ZSS) is a solution for data sync between SQL Server and mobile devices.
More info from Dan Bricklin about offline in mobile apps: http://bricklin.com/offline.htm
More info about Zumero on our website: zumero.com
More info about Zumero from my previous blog entry: here
What is demo.zumero.com:8080?
This is a publicly accessible ZSS server provided so that folks can play with Zumero clients more easily. It contains some basic sample data such as U.S. presidents and the periodic table of the elements.
In real-world scenarios, a customer would use ZAG to generate their starter app after they have completed setup of their ZSS server.
What is Xamarin?
Xamarin is (IMHO) a great solution for building mobile apps.
One of the main benefits of the Xamarin platform is the ability to write the non-UI parts of your iOS/Android/WP8 apps in cross-platform code while implementing a native user interface for each mobile environment.
But I would use Xamarin even for a single-platform app, simply to get the benefits of working in .NET/C#.
More info on the Xamarin website: http://xamarin.com/
What is Xamarin.Forms?
Xamarin.Forms is Xamarin's solution for making [most of] your UI code cross-platform as well, while retaining fully native performance and feel.
In a nutshell, the coolness of Xamarin.Forms lies in the fact that in the solution generated by ZAG above, the demo.Shared project is a Portable Class Library even though it contains the entire user interface for the app.
More info on the Xamarin website: http://xamarin.com/forms
What is a Portable Class Library (PCL)?
A PCL is a .NET class library that is annotated with information about which platforms it should support. This metadata allows the tooling to enforce portability rules in both the development and the consumption of the library.
More info on Scott Hanselman's blog: http://www.hanselman.com/blog/CrossPlatformPortableClassLibrariesWithNETAreHappening.aspx
More info on the Xamarin website: http://developer.xamarin.com/guides/cross-platform/application_fundamentals/pcl/introduction_to_portable_class_libraries/
Why does ZAG generate separate projects for iOS, Android, and WinPhone?
Xamarin.Forms can make most of your UI code portable, but not all of it. The actual building of the mobile app is specific to each platform. But if you look in the code for each of those platform-specific projects, you'll see that there isn't much there.
What dependencies does the ZAG-generated app have?
The following NuGet packages will need to be retrieved:
Xamarin.Forms
SQLite-net PCL
SQLitePCL.raw_basic
Zumero
What is the "SQLite-net PCL" NuGet package?
This is the Portable Class Library (PCL) version of SQLite-net, the popular lightweight SQLite ORM by Frank Krueger (@praeclarum).
More info on GitHub: https://github.com/praeclarum/sqlite-net
More info on the NuGet website: https://www.nuget.org/packages/sqlite-net-pcl/
What is the "SQLitePCL.raw_basic" NuGet package?
SQLitePCL.raw is my Portable Class Library for accessing SQLite from C#.
More info on Github: https://github.com/ericsink/SQLitePCL.raw
More info on the NuGet website: https://www.nuget.org/packages/SQLitePCL.raw_basic/
What is SQLite?
SQLite is the most popular SQLite database for mobile devices.
More info on the SQLite website: sqlite.org
What is the "Zumero" NuGet package?
This is the Zumero Client SDK in the form of a Portable Class Library in a NuGet package.
More info on the Zumero website: http://zumero.com/dev-center/zss/
More info on the NuGet website: https://www.nuget.org/packages/Zumero/
What do Zumero's client-side SQLite files look like?
As much as possible, they look exactly like they looked in SQL Server.
Table and column names are the same.
All data values are the same (whenever possible).
Foreign keys in SQL Server are reconstructed as foreign keys in SQLite.
Since SQLite does not perform type checking, Zumero adds constraints to do so.
And so on...
What's happening in step two?
ZAG is acting as a Zumero client and synchronizing the data on the server into a local SQLite file. This file is used to obtain information about the tables and columns necessary to generate the mobile app.
The same sync is happening in step six, except then it is the mobile app performing the sync instead of ZAG.
What were those three questions in step three?
The first one is the project name:
Then ZAG wants to know the settings for your sync server. These should already be filled in with the ones you entered earlier:
Finally, ZAG is asking you where to save the source code and project files for the app to be generated:
Does a ZAG-generated app allow modifications to the data?
For the Xamarin.Forms C# target, yes. On the item detail page, you should be able to enter new values in text fields and 'Save' the changes.
But you should get a permission denied error if you try to sync those changes to our public demo server. :-)
Is ZAG generating UI stuff as XAML or as C# code?
Currently, it's XAML. You'll find the files in the 'xaml' folder in the demo.Shared project.
Does ZAG generate polished ready-to-use apps?
Oh definitely not. :-)
The output of ZAG should build and run with no errors (if it doesn't, it's a bug, and please let us know), but it's just a starting point for further development.