"Mobile first" has become a common theme these days and building code and applications that you can write once and deploy to multiple target platforms is a key to achieving reach and use for your backend platform. With the O365 APIs being release a few weeks ago, you can now do REST development against O365 exchange services (Mail, Contacts and Calendar, however, no Tasks yet). A lot of focus has been on putting out samples for the various mobile platforms (Windows Phone and Android as the top two). That being said, let's take a look at these Android examples and then the new Apache Cordova project templates.
Android:
The Android SDKs that you can download here need some serious help in order to get them loaded into a Java IDE (such as Eclipse Kepler). For example, not only do you need the Active Directory library, you also need several Google SDKs (yeah, I said Google). In order to get all the examples working, you need to download the following:
Once you have all these, you can extract the O365 SDK and you will notice several projects that you can import into Eclipse (you will notice that all of them have errors, this is because you need to add the referenced JAR files to the project build path):
Each project will need the "com.microsoft.adal", "office365-base-sdk", json-2.2.4" and "guava-16.0.1" JARs. Once you have these added, you will notice that all the projects now show no errors. You are now free to select a project and run it. The first app is called the "Asset Management" app:
Opening the application allows you to start configuring it:
The authentication options can be of three types:
Azure Active Directory (AAD) is the OAuth method. Selecting it will allow you to utilize redirection to O365 login page and then back to your application. Once you have authenticated, you can click the "Show Cars" button:
It simply makes a call to a SharePoint picture library called "Cars" (that you have to create and add items too) to show you the picture of the car and its description:
In addition, there is a "File Discovery" application. This can be configured by modifying the "Constants.java" file (which is a common thing across the apps) by adding your client id and secret. Once you have updated the files, running the app will show the following icon:
Once open, you will see that it queries the discovery service and shows all your services (via the Discovery API):
Clicking on the Files service will show you your OneDrive for Business Files:
You may find that you keep getting an exception around the dialog.dismiss method. This is a bug in the code, all you have to do is wrap it in a try catch block and the code will run ok.
There is also a mail app (but it doesn't have a .project file so it won't import as a project). Unfortunately I was never able to get it to work because it kept throwing memory errors, but supposedly you can also get it to show you your mail. You will also need a couple of extra JAR files to get it to compile:
Apache Cordova:
Not into building platform specific Apps like the Android ones above? That's where the Apache Cordova platform comes into play! If you do a quick Google search, you will find this site:
http://cordova.apache.org/
This site simply describes itself as "A platform for building native mobile applications using HTML, CSS and JavaScript". Basically what that means is that it is a translation middleware of common web standard elements as common inputs and then transform your code to a target such as Android or Windows Phone. The neat part is that Apache Cordova is now integrated into Visual Studio 2013 Update 2. You can download the Apache Cordova project extension here:
http://www.microsoft.com/en-us/download/details.aspx?id=42675
This will give you the ability to create Hybrid Apps:
Once you have created a Hybrid App, you will see the following in your Solution Explorer:
In Visual Studio, you will have a set of target devices and also the ability to specific your debug target:
Notice here, the "Ripple" debugging target. Before you start debugging, you can modify the supported features of the target device via the App Manifest's "Plugins" tab:
Now this is where things get interesting. You can right-click the project and select "Add->Connected Service". From here you can add either "Windows Azure Mobile" or "Office 365" services.
The view is similar to if you were doing an MVC or Web Application Project, but the output is VERY different. What you will notice is several folders and JS files are added:
The above "settings.js" does some initialization of the O365 SDK. The remainder of the files have some pretty powerful code in it that all but builds your application logic!
Once you have all of these files in your project, you have to add them to your "index.html" page:
<body>
<p>Hello, your application is
ready!</p>
<!-- Cordova reference, this is
added to your app when it's built. -->
<script src="cordova.js"></script>
<!-- cjg699 references -->
<script src="./services/mobile services/cjg699/service.js"></script>
<script src="scripts/jquery-2.1.1.js"></script>
<script src="services/office365/settings.js"></script>
<script src="scripts/aadgraph.js"></script>
<script src="scripts/exchange.js"></script>
<script src="scripts/o365adal.js"></script>
<script src="scripts/utility.js"></script>
<script src="scripts/index.js"></script>
<script src="scripts/o365.js"></script>
<input type="button"
id="btnGetEvents" name="btnGetEvents"
onclick="GetEvents();" value="Get Events" />
<br />
<br />
<div id="Events">
</div>
</body>
Once that is done, you can add your own O365.js file with your logic. In this case, I am simply making a call to get the events:
function
GetEvents() {
var authContext = new
O365Auth.Context();
authContext.getIdToken('https://outlook.office365.com/')
.then((function (token) {
// authentication succeeded
var client = new Exchange.Client('https://outlook.office365.com/ews/odata',
token.getAccessTokenFn('https://outlook.office365.com'));
client.me.events.getEvents().fetch()
.then(function (events) {
// get currentPage of
calendar events
var myevents =
events.currentPage;
$("#Events").empty();
for (i = 0; i <
myevents.length; i++)
{
$("#Events").append("Subject: " +
myevents[i]._Subject)
}
}, function (reason) {
console.log(reason);
});
}).bind(this), function (reason) {
console.log(reason);
});
}
Pressing "F5", Google Chrome will start with the Ripple emulator:
You can now click on the "Get Events" button which will attempt to execute the code, but first direct you to provide consent:
Clicking on "Get Events", you will see your mail:
One important note, the JavaScript code will cache your access token. If you didn't get your permissions setup properly, then you'll have a bad token cached. You will need to call the "SignOut" method to clear the CacheManager and the bad token as they don't expose the CacheManager directly.
If you wanted to test on Android, you would simply change the drop down target and press "F5" again. It would then attempt to start the current Android SDK Emulator and upload the APK file, you would see exactly the same UI and button and the same results!
Unfortunately, at the moment, the JavaScript API for O365 is only provided in the Hybrid Apps project and is not really compatible with the other project types (such as MVC). Apache Cordova, the Ripple emulator and project templates such as Hybrid and Cloud Business Apps are the future of application development!
