Mobile
Article

Visual Studio Community 2015: Going Mobile

By Brett Romero

This article was sponsored by Microsoft. Thank you for supporting the sponsors who make SitePoint possible.

Welcome back to our series of articles using Microsoft’s modern IDE: Visual Studio Community 2015 to quickly design and build an attractive, functional site for a client. If you missed the previous instalments, check them out below:

In the final article of the series, we’re going to create a mobile app. The app will display a notification if there are new lessons available. Once the user sees the notification and dismisses it, they’ll see a cloud icon next to the new lesson, which helps the lesson stand out from the others.

We’ll use the popular Cordova framework to create our app. This will allow us to use web languages such as HTML and Javascript.

Behind the scenes, we’ll see how to create a multi page app using jQuery Mobile. jQuery Mobile will help us with styling and also making calls to a REST service. We’ll use the REST service to mock getting lessons from a remote source. This will let you see how to retreive remote data and parse it.

Creating a Cordova Project

To create a Cordova app in Visual Studio, select File > New > Project > Blank App (Apache Cordova).

Creating a New Cordova App

Now that you have a new Cordova based project created, let’s talk a little about the foldes and files.

File and Folder Setup

We’ll mainly be working with index.html and index.js, as shown above. Think of index.html as the homepage for a website. It will contain our view. index.js is where we can put business logic.

If you run the app now by selecting Android as the solution platform and one of the Ripple devices, you should see something similar to the following:

Android Platform and Ripple Device

This is a working mobile application. It doesn’t do much at this point but we’re about to fix that.

Adding jQuery Mobile

We’re going to add the jQuery Mobile library to our project. Since it requires jQuery, we’ll also need that library. Go to https://code.jquery.com/mobile/ and download the latest minified version of jQuery Mobile. Simply right click and download the JS file. Save to your project’s wwwroot/script folder.

Also download the theme file from the same location for the latest version. The theme file is the CSS that will help with styling our app. Save it to wwwroot/css.

Now we need the jQuery library. Download the minified 2.x version here: https://code.jquery.com. Save to wwwroot/script.

In the index.html, we can add references to our JS files. Cordova projects are a little different in that JS files go to the bottom of a page. Once you add the references, the bottom of index.html should look like this:

<!-- Start of first page: #one -->
  <div data-role="page" id="one">

    <div data-role="header">
      <h1>Guitar Lessons</h1>
    </div><!-- /header -->

    <div role="main" class="ui-content">
      <p><a href="#two" class="ui-btn ui-shadow ui-corner-all">About</a></p>
   </div><!-- /content -->

    <div data-role="footer" data-theme="a">
      <h4>Page Footer</h4>
    </div><!-- /footer -->
  </div><!-- /page one -->

  <!-- Start of second page: #two -->
  <div data-role="page" id="two" data-theme="a">

    <div data-role="header">
      <h1>About</h1>
    </div><!-- /header -->

    <div role="main" class="ui-content">
      <h2>Who Am I</h2>
      <p>I have an id of "two" on my page container. I'm the second page container in this multi-page template.</p>
      <p>Notice that the theme is different for this page because we've added a few <code>data-theme</code> swatch assigments here to show off how flexible it is. You can add any content or widget to these pages, but we're keeping these simple.</p>
      <h2>How It All Started</h2>
      <p>I have an id of "two" on my page container. I'm the second page container in this multi-page template.</p>
      <p>Notice that the theme is different for this page because we've added a few <code>data-theme</code> swatch assigments here to show off how flexible it is. You can add any content or widget to these pages, but we're keeping these simple.</p>

<p><a href="#one" data-direction="reverse" class="ui-btn ui-shadow ui-corner-all ui-btn-b">Back</a></p>

    </div><!-- /content -->

    <div data-role="footer">
      <h4>Page Footer</h4>
    </div><!-- /footer -->
  </div><!-- /page two -->

If you run the app, it should look like this:

Initial App Screen

At this point, you can click the About button, which will display the About page:

About Page on Mobile App

Adding Lessons

We’re going to mock a REST call for lessons. We’ll use jQuery Mobile to help with the call and a service called jsonplaceholder.typicode.com. This service is great for testing a REST call and getting some JSON back. It will save you a lot of time during the testing phase when all you need is to hit an endpoint and get some structured data back.

Before we do the REST call, we’ll fill our app with known lessons. Meaning, lessons that are sitting on the server. Then, we can setup a timer to periodically poll the server checking for new lessons.

We’ll add a function called initialCheck() to the index.js. This will make the initial call and fill the list with lessons.

Open index.js. You’ll see several methods. onDeviceReady is our main method to kick things off. This is similar to $(document).ready() in the web design world. Under the two addEventListener methods, add the following function call:

initialCheck();

Below onPause() and onResume(), define the initialCheck() method as follows:

function initialCheck() {
  var lessonList = $("#lessonlist");
  var lesson1 = "<li><h2>Lesson 1</h2><p>Guitar In and Outs</p></li>";
  var lesson2 = "<li><h2>Lesson 2</h2><p>Beginner Chords</p></li>";
  lessonList.append(lesson1);
  lessonList.append(lesson2);
}

We would want this method to make a remote call but for simplicity, we’re going to do that in the second method. All that’s being done here appending lessons to a list named lessonlist.

We need to add a lessonlist element to index.html. This will be added in the page one code just below the header:

<div role="main" class="ui-content">
    <ul data-role="listview" id="lessonlist">
    </ul>
    <p>&nbsp;</p>
    <p><a href="#two" class="ui-btn ui-shadow ui-corner-all">About</a></p>
</div>

If you run the app, you’ll see that lessons are starting to appear.

Lessons Populating

Notice the sub headers in each lesson. From the code inside the initialCheck() function, you can probably determine how the sub headers are created. H2 tags for the heading and p tags for the sub-heading.

Populating Lessons From a REST Call

We’re going to define our second method in the index.js. In onDeviceReady() and under initialCheck(), add the following:

window.setInterval(getLessons, 60000);

This code will execute the getLessons() function every minute. for testing, if you want this to happen every 5 seconds, just change the interval value to 5000.

Define the getLessons() function under the initialCheck() function:

function getLessons() {
    $.getJSON("http://jsonplaceholder.typicode.com/posts/2", function (data) {

    if (data.length > 0) {
      var lessonList = $("#lessonlist")
      lessonList.append('<li data-icon="cloud"><a>' + data.title + '</a></li>');
      /*$.each(data, function (index) {
        lessonList.append('<li><a>'+data[index].title+'</a></li>');
      });
      */
      lessonList.listview("refresh");
      navigator.notification.alert(
      'A new lesson has just arrived', // message
      '',                // callback
      'New Lesson Available',      // title
      'Ok'               // buttonName
      );
    }
});

The first thing we do is get the JSON. Results of that call will be assigned to the data variable. Notice the loop is commented out. This is because of the structure of JSON we get back. If you paste the above typicode.com URL into your browser, you’ll see what I mean. We get the following instead of an array:

{
 "userId": 1,
 "id": 2,
 "title": "qui est esse",
 "body": "est rerum tempore vitae\nsequi sint nihil reprehenderit dolor beatae ea dolores neque\nfugiat blanditiis voluptate porro vel nihil molestiae ut reiciendis\nqui aperiam non debitis possimus qui neque nisi nulla"
}

We would likely have complete control over the JSON sent back when it comes form our server. In this case, the JSON would work better in an array, even if it has only one element. In that case, we can always use the loop.

You can see we make a call to refresh the list. This ensures the new lesson will appear in real-time. To help it stand out, we’ve wrapped the new list item in anchor tags, which will give this row a gray color. The cloud icon will also appear to the right side of the row.

You’re probably wondering about the navigator.notification.alert code. This is actually a plugin used to provide the user with a notification once a new lesson arrives.

In the next section, we’ll install the Notification plugin.

Installing the Notification Plugin

Click the config.xml file to open it. This is where most of the meta data for our mobile app is stored. It’s also where we can install plugins. Click the Plugins tab then scroll down until you see Notifications. In the screenshot below, I’ve already it installed:

Notification Plugin

Now if you run the app, you’ll see the notification once the getLessons() method fire.

getLessons() Method Firing

Notice also the new lesson has arrived. Although it is displaying the title from typicode.com, which is fine for our testing. The cloud icon is there also.

Summary

In this article, we created a Cordova based mobile application. We integrated jQuery Mobile to help with styling the look of the app and providing some great functionality, such as calls to REST services. We also saw how easy it is to add plugins that extend functionality.

With this foundation, you can certainly expand the app’s capabilities. The jQuery Mobile website will be a great resource to see what other components are available for enhancing the app. The examples on the site are also functional and show the source behind them. This is great for learning and inspiration.

This brings us to the end of our series on Visual Studio Community 2015. I hope you’ve come to realize how useful the app is in developing and designing websites and apps, and outfitting them with powerful integrations with tools and services.

Have you used Visual Studio Community 2015? What are your tips for making the most of the app?

No Reader comments

Recommended

Learn Coding Online
Learn Web Development

Start learning web development and design for free with SitePoint Premium!

Get the latest in Mobile, once a week, for free.