Click here to Skip to main content
Click here to Skip to main content
Add your own
alternative version

Android and iOS Mobile Device Development with Azure Mobile Services using HTML5 and JavaScript

, 10 May 2013 CPOL
Tutorial showing how to build an iOS or Android app using Azure Mobile Services with HTML5 and JavaScript in Visual Studio.
<!DOCTYPE html>
<html>
    <head>
        <title>Todo list: bjrtodolist</title>
        <link rel='stylesheet' href='style/styles.css' />
        <!--[if lt IE 9]><script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.6.1/html5shiv.js"></script><![endif]-->
        <meta name="viewport" content="width=device-width, initial-scale=1" />
    </head>
    <body>
        <div id='wrapper'>
            <article>
                <header>
                    <h2>Windows Azure</h2>
                    <h1>Mobile Services</h1>

                    <form id='add-item'>
                        <button type='submit'>Add</button>
                        <div><input type='text' id='new-item-text' placeholder='Enter new task' /></div>
                    </form>
                </header>

                <ul id='todo-items'></ul>
                <p id='summary'>Loading...</p>
            </article>

            <footer>
                <a href='http://www.windowsazure.com/en-us/develop/mobile/'>
                    Learn more about Windows Azure Mobile Services
                </a>
            </footer>
        </div>

        <script src='scripts/jquery-1.9.1.min.js'></script>
        <script src='scripts/MobileServices.Web-1.0.0.min.js'></script>
        <script src='scripts/app.js'></script>
    </body>
</html>


<!--<!DOCTYPE html>
<html>
<head>
    <title>Page Title</title>
    <script src="scripts/jquery-1.6.4.js" type="text/javascript"></script>
    <script src="scripts/jquery.mobile-1.2.0.min.js" type="text/javascript"></script>
    <script src="scripts/cordova.js" type="text/javascript"></script>
    <link rel="Stylesheet" href="style/jquery.mobile-1.2.0.min.css" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<body>
        <div data-role="page" id="page1">
            <div data-theme="e" data-role="header">
                <h3>
                    Welcome!
                </h3>
            </div>
            <div data-role="content">
                <div>
                    <b>
                        This is your Nomad project...
                    </b>
                </div>
                <ul data-role="listview" data-divider-theme="e" data-inset="true">
                    <li data-role="list-divider" role="heading">
                        Getting Started
                    </li>
                    <li data-theme="c">
                        <a href="http://www.vsnomad.com/documentation" target="_newtab">
                            Read the guide
                        </a>
                    </li>
                    <li data-theme="c">
                        <a href="http://vsnomad.zendesk.com/" target="_newtab">
                            Report a problem
                        </a>
                    </li>
                    <li data-theme="c">
                        Hit the build button and try it on a device!
                    </li>
                </ul>

                <hr />

                <ul data-role="listview" data-divider-theme="e">
                    <li data-role="list-divider" role="heading">
                        Device Information
                    </li>
                    <li>
                        <h3>Compass heading: <span id="heading">n/a</span></h3>
                        <p>Uses compass.watchHeading</p>
                    </li>
                    <li>
                        <h3>Connection type: <span id="connection">n/a</span></h3>
                        <p>Uses connection.type</p>
                    </li>
                    <li data-theme="c">
                        <h3>Contacts: <span id="contacts">n/a</span></h3>
                        <p>Uses navigator.contacts.find</p>
                    </li>
                    <li data-theme="c">
                        <h3>Device properties:</h3>
                        <p>Uses device.*</p>
                        <div id="deviceprops" style="font-size: 11px;">n/a</div>
                    </li>
                    <li data-theme="c">
                        <h3>Geolocation: <span id="geolocation">n/a</span></h3>
                        <p>Uses navigator.geolocation.watchPosition</p>
                    </li>
                    <li data-theme="c">
                        <img alt="" src="images/choosephoto.png" id="picture" /><button data-role="button" data-inline="true" onclick="showPictures();">
                            Choose a picture
                        </button>
                        <p><span id="geolocationerror"></span></p>
                    </li>
                </ul>
            </div>
            <div data-theme="a" data-role="footer">
            </div>

            <script type="text/javascript">
                function showPictures() {
                    navigator.camera.getPicture(function (imageURI) {
                        $('img#picture').attr('src', imageURI);
                    }, function (error) {
                        $('img#picture').replaceWith('<p>' + error + '</p>');
                    }, { sourceType: navigator.camera.PictureSourceType.PHOTOLIBRARY, destinationType: navigator.camera.DestinationType.FILE_URI });
                }

                $(function () {
                    var compassWatchID, geoWatchID;

                    document.addEventListener("deviceready", function () {
                        // Compass
                        compassWatchID = navigator.compass.watchHeading(function (heading) {
                            $('span#heading').html(heading.magneticHeading.toFixed(2) + '&#176;');
                        }, function (error) {
                            $('span#heading').text(error.code);
                        }, { frequency: 3000 });

                        // Connection
                        var networkState = navigator.network.connection.type,
                            states = {};

                        states[Connection.UNKNOWN] = 'Unknown';
                        states[Connection.ETHERNET] = 'Ethernet';
                        states[Connection.WIFI] = 'WiFi';
                        states[Connection.CELL_2G] = 'Cell 2G';
                        states[Connection.CELL_3G] = 'Cell 3G';
                        states[Connection.CELL_4G] = 'Cell 4G';
                        states[Connection.NONE] = 'No network';

                        $('span#connection').text(states[networkState]);

                        // Contacts
                        navigator.contacts.find(['id'], function (contacts) {
                            $('span#contacts').text(contacts.length + ' found');
                        }, function (error) {
                            $('span#contacts').text(error.code);
                        }, { multiple: true });

                        // Device properties
                        $('div#deviceprops').html(
                            '<strong>Name:</strong> ' + device.name + '<br/>' +
                            '<strong>Cordova version:</strong> ' + device.cordova + '<br/>' +
                            '<strong>Platform:</strong> ' + device.platform + '<br/>' +
                            '<strong>UUID:</strong> ' + device.uuid + '<br/>' +
                            '<strong>Version:</strong> ' + device.version + '<br/>'
                        );

                        // Geolocation
                        geoWatchID = navigator.geolocation.watchPosition(function (position) {
                            $('span#geolocation').text(position.coords.latitude.toFixed(2) + 'N, ' + position.coords.longitude.toFixed(2) + 'E');
                        }, function (error) {
                            $('span#geolocationerror').text(error.code + ': ' + error.message);
                        }, { frequency: 3000 });
                    });
                } ());
            </script>
        </div>
</body>
</html>
-->

By viewing downloads associated with this article you agree to the Terms of Service and the article's licence.

If a file you wish to view isn't highlighted, and is a text file (not binary), please let us know and we'll add colourisation support for it.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Bart Read
Team Leader Red Gate Software
United Kingdom United Kingdom
No Biography provided
Follow on   Twitter

| Advertise | Privacy | Terms of Use | Mobile
Web01 | 2.8.141223.1 | Last Updated 10 May 2013
Article Copyright 2013 by Bart Read
Everything else Copyright © CodeProject, 1999-2014
Layout: fixed | fluid