November 7, 2014

Programming for Google Cardboard on iOS using F#

By

One of the highlights of Xamarin Evolve is the Darwin Lounge, a hall filled with programmable devices ranging from robots to iBeacons and quadcopters to wearables. One thing that was particularly intriguing this year was a stack of kits from DodoCase, “inspired by Google Cardboard.” Google Cardboard is an inexpensive stereoscope that exploits the ridiculously small pixels of modern phones. Instead of synchronizing two displays, it directs your eyes separately to the two halves of a phone screen in portrait mode.

cardboard

Unfortunately, all of the resources for programming Google Cardboard have been Android only. This is not the Xamarin way and could not stand! Luckily, Joel Martinez had written a 3D demo for our talk, Make Your Apps Awesome With F#, and it was just a matter of a quick hacking session to see our Xamarin.iOS code in glorious stereoscopic 3D.

before_and_after

Functional Refactoring

As Mike Bluestein has written previously, the easiest way to program 3D on iOS is to use Scene Kit, which is what Joel and I had done for our demo. Stereoscopic programming in Scene Kit, as it turns out, is easy!

One great aspect of F# and the functional programming style is that refactoring is often easier than object-oriented refactoring. Instead of creating new objects and data structures, you’re generally focusing on “minimizing the moving parts” and extracting common functionality into reliable functions.

For instance, the first thing we needed to do was switch from a single UIView to two side-by-side views. We refactored this code:

//Configure view
let r = new RectangleF(new PointF(0.0f, 0.0f), new SizeF(UIScreen.MainScreen.Bounds.Size))
let s = new SCNView(r)
configView s scene |> ignore
this.View <- s

into this code:

//Configure views
let outer = new UIView(UIScreen.MainScreen.Bounds)
let ss =
    [
        new RectangleF(new PointF(0.0f, 0.0f), new SizeF(float32 UIScreen.MainScreen.Bounds.Width / 2.0f - 1.0f, UIScreen.MainScreen.Bounds.Height));
        new RectangleF(new PointF(float32 UIScreen.MainScreen.Bounds.Width / 2.0f + 1.0f, 0.0f), new SizeF(UIScreen.MainScreen.Bounds.Width / 2.0f -1.0f, UIScreen.MainScreen.Bounds.Height));
    ]
    |> List.map (fun r -> new SCNView(r))
    |> List.map (fun s -> outer.AddSubview(configView s scene); s)
this.View <- outer

Although you may be more familiar with C# than F#, you should be able to follow what’s going on in the original snippet. We had a RectangleF as big as the entire screen’s Bounds. We created a single SCNView called s. We configured s to show our scene and then, because we don’t need to do any more manipulation on the result of that calculation, we called the ignore function with the result (the |> is F#’s pipe operator, which works just like the familiar pipe operator on the UNIX command-line or PowerShell). Finally, we assigned this single SCNView to be the main View of our controller object.

To refactor, we introduce an outer view that will contain our two eye-specific views. We then use the |> operator again to:

  • Create a 2-element list of RectangleFs, each a half-screen wide
  • Create an SCNView for each one of those
  • Configure each SCNView with the scene
  • Add them to the outer container UIView

Now we have two side-by-side SCNViews, but each is rendering the exact same scene, so there is no 3D effect. Scene Kit is a scene-graph toolkit, and to get a stereoscopic 3D effect, we’re going to need two camera nodes slightly separated in space. That’s easy. We replace:

//Camera!
let camNode = new SCNNode()
camNode.Position <- new SCNVector3(0.0F, 0.0F, 9.0F)
scene.RootNode.AddChildNode camNode

With:

//Cameras!
let camNode = new SCNNode()
let leftCamera = buildCamera camNode (new SCNVector3 (0.0F, 0.0F, 9.0F))
let rightCamera = buildCamera camNode (new SCNVector3 (0.2F, 0.0F, 9.0F))

Note the slight difference in the first argument to the SCNVector3 constructor – this eye-position vector is the “moving part” that we want to isolate. So now our camNode has two subnodes, each containing a node that defines one of our eye positions.

The buildCamera function is:

let buildCamera (parent : SCNNode) loc =
    let c = new SCNNode()
    c.Camera <- new SCNCamera()
    parent.AddChildNode (c)
    c.Position <- loc
    c

It’s worth emphasizing that this function is strongly-typed. Even though it doesn’t explicitly state that loc is an SCNVector or that it returns an SCNNode, F#’s type inference is powerful enough to figure that out and enforce the types at compile-time. (As for programming style: “Is it better to explicitly declare types in the function signature or let them be implicit?” is the type of discussion that happens both in the Darwin Lounge and at Xamarin Evolve parties…)

Now we have two scenes and two camera nodes. To join them together, we use:

//Set PoVs to shifted cameras
ss.Head.PointOfView <- leftCameraNode
ss.Tail.Head.PointOfView <- rightCameraNode

And there you have it! In the following image, you can see the converging perspective of the building climbing into the sky.

living_in_stereo

This might not be ready for the Avatar sequel, but it’s really cool when viewed through Cardboard!

Here’s something James Cameron can’t do, though: exploit the gyroscope and accelerometer on iOS devices. This block of code shifts the orientation of the camNode camera node so that it tracks the direction in which the user is looking:

    let rr = CMAttitudeReferenceFrame.XArbitraryCorrectedZVertical
    this.motion.DeviceMotionUpdateInterval <- float (1.0f / 30.0f)
    this.motion.StartDeviceMotionUpdates (rr,NSOperationQueue.CurrentQueue, (fun d e ->
        let a = this.motion.DeviceMotion.Attitude
        let q = a.Quaternion
        let dq = new SCNQuaternion(float32 q.x, float32 q.y, float32 q.z, float32 q.w)
        let dqm = SCNQuaternion.Multiply (dq, SCNQuaternion.FromAxisAngle(SCNVector3.UnitZ, piover2))
        camNode.Orientation <- dqm
       ()
    ))

Which looks like this in action:

To experiment with stereoscopic 3D in Xamarin and F#, download this Starter-compatible project in Xamarin Studio on Mac or Windows.

TwitterFacebookGoogle+LinkedInEmail
November 6, 2014

Xamarin Test Cloud Video Series: Using C# and UITest to Create Your First Mobile Test

By

Xamarin.UITest is a C#-based testing framework enabling automated UI acceptance tests for iOS and Android applications that can be uploaded to Xamarin Test Cloud to test on over 1,000 real devices. Xamarin.UITest is available as a NuGet package and relies on the popular NUnit testing framework that most C# developers are familiar with.

In this video, Dan Waters shows us the steps to utilize UITest, and also how to use the interactive shell (REPL) included with Xamarin.UITest to explore the views on a screen and to automate interactions with the application. The best thing about Xamarin.UITest is that it tests any mobile app regardless of the platform it’s written in – Objective-C, Java, Xamarin, or 3rd party frameworks.

Each test is a method inside an NUnit Test Fixture class and follows the Arrange-Act-Assert pattern:

  1. Arrange – The test sets up conditions and initializes so that the test can be actioned.
  2. Act – The test interacts with the application, entering text, pushing buttons, tapping, etc.
  3. Assert – The test examines the results of the actions performed in the Act step to determine correctness. For example, the application may verify that a particular error message is displayed.

Watch it in full-screen to see the code and Xamarin.UITest in action.

Learn More & Get Started

To learn more about Xamarin Test Cloud, visit the product page, or check out our developer documentation.

TwitterFacebookGoogle+LinkedInEmail
November 5, 2014

Xamarin for Students

By

Today, we are pleased to announce a new program that makes it easier than ever for students to build the apps of their dreams with Xamarin.csharp-mortarboard

Xamarin Platform – Free for Students

Xamarin wants students to bring their app ideas to life using the best mobile development platform. Students currently enrolled in a degree or diploma-granting course of study can now develop amazing native apps for iOS and Android with Xamarin Studio for free. Visit our student page to learn more and apply.

ApplyNowButton

Xamarin Student Ambassadors

Additionally, in order to bring cross-platform mobile development to campuses around the globe, we’ve created the Xamarin Student Ambassador program. As a student ambassador, you’ll help fellow students build amazing mobile apps in C# — and you’ll get recognition and rewards from Xamarin for your efforts.

Consider becoming a Xamarin Student Ambassador if:

  • You love building mobile apps.
  • You enjoy teaching others.
  • You keep up with the latest technologies.
  • You enjoy giving technical talks and presentations.

Benefits of being a Xamarin Student Ambassador include:

  • Work hand-in-hand with Xamarin engineers and evangelists.
  • Complimentary Xamarin Business subscriptions for iOS, Android, and Mac.
  • Cool Xamarin swag for you and your peers.
  • Unique opportunities to participate in Xamarin Evolve and other in-person events.
  • Attend Xamarin University for free.

To apply, complete the Xamarin Student Ambassador application. If you have any questions, comments, or suggestions, please don’t hesitate to let us know.

Xamarin Empowers Educators

If you’re an educator at an accredited academic institution teaching, or considering teaching, a mobile development course, we want to empower you with free and discounted Xamarin software, educational material, and other resources.

Get in touch with us at education@xamarin.com today.

TwitterFacebookGoogle+LinkedInEmail
October 31, 2014

iBeacons Everywhere

By

iBeacons were everywhere at Xamarin Evolve this year. From the Evolve Quest app, to the Darwin Lounge, to the presentation I gave with James, attendees got to experience using iBeacons as end users, learn about them in a lecture setting, and do hands on coding with them on both iOS and Android.

iBeacons at Evolve

Among the fun activities for people to do at Xamarin Evolve were the mini-hacks in the Darwin Lounge. Included in these was an Estimote iBeacon mini-hack that allowed attendees to create a simple app to experience iBeacons for themselves. The iBeacon mini-hack is available in the mini-hack repo on GitHub so you can try it yourself.

mini-hacks

The iBeacon mini-hack consists of a simple example that uses either Core Location on iOS to detect the proximity of an Estimote beacon, or the Estimote SDK Xamarin component on Android.

The code is different on each platform since these are different APIs, however conceptually it is very similar. For example, both platforms implement the concept of ranging, where the app will discover the proximity to a beacon.

On iOS, the CLLocationManager implements this in the DidRangeBeacons event:

// iOS uses CLLocationManager.DidRangeBeacons
locationManager.DidRangeBeacons += (object sender,
  CLRegionBeaconsRangedEventArgs e) => { ... }

whereas on Android it goes through the BeaconManager‘s Ranging event:

// Android uses BeaconManager.Ranging
beaconManager.Ranging += (object sender,
  BeaconManager.RangingEventArgs e) => { ... }

The mini-hack has some other goodness, too. In the iOS case, the walkthrough also shows you how to handle the new authorization and setup requirements for Core Location that were added in iOS 8.

I uploaded my completed solution for the mini-hack here.

Check out the mini-hack and see if you can come up with some novel use-cases for deploying iBeacons.

Happy ranging!

TwitterFacebookGoogle+LinkedInEmail
October 30, 2014

Create Your Own Scavenger Hunt with Evolve Quest

By

Xamarin Evolve 2014 attendees had an action packed five days, with activities ranging from mini-hacks in the Darwin Lounge and a plethora of amazing sessions, to seeing Whale Sharks at the Georgia Aquarium. At the center of Xamarin Evolve lived a brand new interactive scavenger hunt, the Xamarin Evolve Quest. Once the Xamarin Evolve Quest app was installed on their smart phones, questers were on their way to winning an exclusive Xamarin Evolve 2014 monkey. monkey2014

Hidden around Xamarin Evolve 2014 were iBeacons from Estimote that questers needed to find using clues from the Xamarin Evolve Quest app. Finishing the quests involved answering several Xamarin trivia questions and completing tasks, such as trying out Google Cardboard.

Evolve Quest

More that 400 attendees finished the Xamarin Evolve Quest and walked away with a limited-edition Xamarin Evolve 2014 monkey. With the success of the Xamarin Evolve Quest, we wanted to enable any Xamarin developer to get their hands on the source code to create their very own scavenger hunt, so get it from GitHub today!

TwitterFacebookGoogle+LinkedInEmail
October 29, 2014

Automate UI Testing Using Xamarin.UITest

By

Before publishing an app, either to an app store or via enterprise deployment, it’s important to test it for functionality. However, due to today’s device fragmentation, testing an app on every device configuration is nearly impossible. Thanks to automated UI testing, though, developers can write automated UI tests for mobile applications and run those tests to check for expected behavior.

Xamarin.UITest is an automated UI testing framework based on Calabash that allows developers to write and execute tests in C#. Moreover, it uses the popular NUnit testing framework to validate these tests.

Writing tests and executing them from Xamarin Studio is easy and can be done from Visual Studio, as well. To get started, just create a new ‘NUnit Library Project’ in Xamarin Studio.

Xamarin-UITest-Image1

To add test functionality, simply add a ‘Xamarin.UITest’ NuGet Package to this project.

Xamarin-UITest-Image2

Now, using TestFixtures and Test attributes, it becomes easier to write automated UI tests. For example: when a user enters a credit card number less than or greater than the desired number, the test should fail. Otherwise, it should pass given a valid credit card number.

[Test]
public void CreditCardNumber_ToShort_DisplayErrorMessage()
{
  _app.EnterText(EditTextView, new string('9', 15));
  _app.Tap(ValidateButton);
  // Assert
  AppResult[] result = _app.Query(ShortErrorMessage);
  Assert.IsTrue(result.Any(), "The error message is not being displayed.");
}
[Test]
public void CreditCardNumber_TooLong_DisplayErrorMessage()
{
  _app.EnterText(EditTextView, new string('9', 17));
  _app.Tap(ValidateButton);
  // Assert
  AppResult[] result = _app.Query(LongErrorMessage);
  Assert.IsTrue(result.Any(), "The error message is not being displayed.");
}
[Test]
public void CreditCardNumber_CorrectSize_DisplaySuccessScreen()
{
  _app.EnterText(EditTextView, new string('9', 16));
  _app.Tap(ValidateButton);
  _app.WaitForElement(SuccessScreenNavBar, "Valid Credit Card Screen did not appear",
    TimeSpan.FromSeconds(5));
  // Assert - Make sure that the message is on the screen
  AppResult[] results = _app.Query(SuccessMessageLabel);
  Assert.IsTrue(results.Any(), "The success message was not displayed on the screen");
}

Once, these steps are completed, the tests can be executed from ‘Run Unit Tests’ or can be submitted to Xamarin Test Cloud to execute on thousands of different devices.

A step-by-step guide and mini-hack from Evolve 2014 is available here.

For more information about Xamarin.UITest visit: http://developer.xamarin.com/guides/testcloud/uitest/intro-to-uitest/

Enjoy your UI testing!

Discuss this blog post in the Xamarin Forums

TwitterFacebookGoogle+LinkedInEmail
October 28, 2014

Join Us for a Xamarin Fall European Roadshow

By

Earlier this year, we embarked on a Xamarin European Road Show where we talked to thousands of developers about creating beautiful, native mobile apps in C# with Visual Studio and Xamarin.

Xamarin Evangelist James Montemagno with attendees at the Xamarin Summer 2014 European Roadshow

Due to popular demand, we are doing it again! During the month of November, we will be in Europe with stops in The Netherlands, France, Denmark, UK, Germany, Italy, and Sweden. Join us to explore the latest Xamarin Platform Previews, Xamarin Test Cloud, and Xamarin Insights.

Don’t miss the opportunity to meet the Xamarin team, connect with other developers, show off your apps, and talk all things mobile. Register now for an event near you today:

We look forward to seeing you in Europe!

TwitterFacebookGoogle+LinkedInEmail
October 27, 2014

Join Xamarin at TechEd Europe 2014

By

The Xamarin team is excited to once again be attending TechEd Europe, this year in Barcelona, Spain.

TechEd Europe 2014 Logo

You can find us at the Xamarin booth (#31) throughout the conference from October 28th – October 31st. We welcome you to stop by with your technical questions and to learn more about the awesome announcements made at Xamarin Evolve 2014, including Xamarin Platform Previews, Xamarin Insights, and updates to Xamarin Test Cloud.

In addition to chatting with us at the booth, we also invite you to check out James Montemagno’s talks on Wednesday, Thursday, and Friday:

  • Wednesday, October 29th, 12-1:15 pm – DEV-B217 Go Mobile with C#, Visual Studio, and Xamarin: Learn how to leverage your existing Microsoft .NET and C# skills to create iOS and Android mobile apps in Visual Studio with Xamarin. You’ll get the tools to see how much existing C# code can go mobile to iOS and Android, plus determine the architecture necessary to support maximum code sharing and reuse, as well as guidance and best practices for handling fragmentation across and within each device platform.
  • Thursday, October 30th, 6:30-8:00 pmAsk the Experts Session, Table 43 Mobile App Development: James and Principal Program Manager Lead Ryan Salva from Microsoft will be available to answer your questions during this Ask the Experts Session on Thursday.
  • Friday, October 31st, 10:15-11:30 am – DEV-B306 Building Multi-Device Applications with Xamarin and Cordova with Office 365 APIs: Ryan Short, Technical Evangelist at Microsoft, will join James during this session on how to use the Microsoft Office 365 APIs in your mobile apps. During the session, you’ll see sample apps running, understand the scenarios where you would use Office 365 APIs in mobile device applications, and learn how to get started with the Office 365 APIs.

We look forward to seeing you in Barcelona!

Can’t make it to TechEd Europe 2014? We’ve got you covered with a Xamarin Fall European Roadshow starting in November. Look for details on the blog tomorrow to register and join us!

TwitterFacebookGoogle+LinkedInEmail
October 24, 2014

Xamarin Evolve 2014 Xammy Award Winners

By

This year we hosted the inaugural Xammy Awards, recognizing top apps on the global stage of Xamarin Evolve. The competition was fierce, with 11 amazing apps in 4 categories. After much deliberation, our panel of judges selected a winner from each category and our worldwide community voted on a “Developers’ Choice” winner, who were announced on stage at Xamarin Evolve 2014.

Xamarin SVP of Sales and Customer Success, Stephanie Schatz, on stage at Xamarin Evolve 2014 to present the Xammy Awards.

This year’s winners were:

We’d like to congratulate our winners, as well as the other outstanding nominees, once again for the impressive apps that they have built. We invite you to view the videos of this year’s winners and nominees for a closer look at some of the incredible apps being built with Xamarin.

TwitterFacebookGoogle+LinkedInEmail
October 21, 2014

Xamarin Evolve 2014 Session Recordings Now Available

By

At Xamarin Evolve 2014, we were excited to be joined by industry experts and Xamarin engineers delivering sessions on diverse mobile developer topics ranging from the latest in native mobile technologies, to enterprise development, to gaming and more. We are now pleased to make these great Xamarin Evolve 2014 conference sessions available on evolve.xamarin.com for your viewing pleasure.

Xamarin CTO Miguel de Icaza gives a session at Xamarin Evolve 2014

Head over to the Xamarin Evolve 2014 site now to kick back and enjoy the topics you find most interesting. With so many sessions, there’s plenty to choose from and something for everybody.

Enjoy!

TwitterFacebookGoogle+LinkedInEmail