Setting Up PhoneGap/Cordova for Visual Studio

It’s always a struggle to find time to invest in side projects when you work and play an active role in your kids lives.  I appreciate when installing tools is just simple and you don’t have to google “why doesn’t …. do …” or “where is…” because the instructions aren’t straight forward or are missing steps/pieces.  I found this the case with the latest phonegap instructions as of 2014-3-9.

1. Install Windows SDK.  I’m using Windows 7.1 because I have a Win7 machine, I found SDK here.  This installed Visual Studio 2010 Express for Windows Phone (VS2010).
2. Download PhoneGap SDK and unzip in C:\Tools.  PhoneGap SDK is on github here.
3. In the C:\Tools\phonegap-master (you might have to drill down a bit) there will be a lib folder, and in it there are folders for the different target frameworks one of which is “windows-phone”.  As of recent the Visual Studio template .zip is not there.  I had to run a batch filed called “createTemplates.bat” which created templates for WP8 and WP7.
4. Once you have the Visual Studio .zip file template(s), copy those to your \Documents\Visual Studio 2010\Templates\ProjectTemplates\Visual C#.
5. Open VS2010 and create a new project.  You will now see a project template as shown below.  The template name may change at some point.

 

The project structure will look like the following.

• cordova – build tools
• cordovalib – code for browser engine interaction
• www – folder for html/js/css of your app
• plugins – plugins for interfaces on your phone (i.e. camera, contacts)

Installing Node.js and Other Packages

Keeping up with technology can be a job in itself.  Learning is fun, but is quickly forgotten so writing things down can always save you time later.  This thread goes over various was of installing Node.js and other packages.

Installing Node.js

There are 2 ways in which you can install Node.js.  Node.js comes with node package manager now so it will not need to be installed independently.

Installer (recommended): Go to node.js.org and use the installer for your OS.  Run the installer.

Homebrew (Mac only): Run the command “brew install node”.  You will have to have homebrew installed.

 

Other Node packages t

Installation will use node package manager.  You can list the node modules for your node application by listing the directory of “node_modules”.

Express – web application framework for node

npm install -g express --save

NOTE: once you create a application with express (i.e. express AppName) you will have to navigate to AppName folder and run the command “npm install” to install the components defined in node’s package.json.

Yeoman – front end tool focused on scaffolding (yo), building/testing (grunt), and dependency management (bower)

npm install -g yo --save

npm install -g generator-webapp --save

coffee-script – scripting language that builds down to javascript.

npm install coffe-script --save

node-dev – a tool for node that will monitory files and auto restart the node app when a file has changed.

npm install node-dev –save

NOTE: When using this you will want to separate development dependencies from production ones.  In the package.json, you can create a “devDependencies” like so:

{
    "name": "application-name",
    ...,
    "dependencies": {
        "express": "2.5.8",...
    },
    "devDependencies": {
        "node-dev": "~0.2.2"
    }
}

mocha – javascript test framework for node

npm install mocha –save

NOTE: put this in your dev dependencies

REQUIRES: request

request – modeule that simplifies the process of making http calls

npm install requets --save

Redis – open source advanced key-value store

npm install redis hiredis connect-redis --save

REQUIRES: Installation of Redis backend.  On a Mac use homebew “brew install redis”, Windows see redis.io.

connect-assets – transparent file compilation and dependency management for Node’s connect framework

npm install connect-assets --save

socket-io – simplifies the use of IO on all browsers.  See WebSockets for information on this topic.

npm install socket-io --save

AngularJS – front end web application framework dealing with models, views, collections, and events

npm install angular --save

Backbone – front end structured for web applications dealing with models, views, collections, and events

npm install backbone --save

RELATED: Marionettejs (npm install backbone.marionette --save)

ASP.NET Debugging in Visual Studio 2013 IIS Express Not Continuing

Looking at VS2013, I’m impressed with it’s speed over VS2012 not to mention that Microsoft appears to be releasing more often and taking into consideration a lot of community feedback.   Other than the quickly visible improvements, I noticed that the virtual web server would stop working when debugging was stopped in Visual Studio. To fix this open you ASP.NET project properties and uncheck “Enable Edit and Continue”.  Once this is unchecked IIS Express will run after debugging has stopped.

Mocking ASP.NET MVC HttpConext and Sessions

Unit testing ASP.NET MVC controllers can be difficult when you start to use the HttpContext and Session state.  The following snippet of code will allow you to mock, using the Moq framework, the HttpContext properties.  Add this to your test project.

using System.Collections.Generic;
using System.Web;
using Moq;
using System.Collections.Specialized;
using System.Web.Routing;
using System.Web.Mvc;

namespace WebBackOffice.Tests
{
    public class ContextMocks
    {
        public Mock<HttpContextBase> HttpContext { get; private set; }
        public Mock<HttpRequestBase> Request { get; private set; }
        public Mock<HttpResponseBase> Response { get; private set; }
        public RouteData RouteData { get; private set; }

        /// <summary>
        /// Initializes a new instance of the <see cref="ContextMocks"/> class.
        /// </summary>
        /// <param name="controller">The controller to add mock context to.</param>
        public ContextMocks(Controller controller)
        {
            // define all the common context objects, plus relationsips between them
            HttpContext = new Mock<HttpContextBase>();
            Request = new Mock<HttpRequestBase>();
            Response = new Mock<HttpResponseBase>();
            RouteData = new RouteData();

            HttpContext.Setup(m => m.Request).Returns(Request.Object);
            HttpContext.Setup(m => m.Response).Returns(Response.Object);
            HttpContext.Setup(m => m.Session).Returns(new FakeSessionState());

            Request.Setup(m => m.Cookies).Returns(new HttpCookieCollection());
            Request.Setup(m => m.QueryString).Returns(new NameValueCollection());
            Request.Setup(m => m.Form).Returns(new NameValueCollection());

            Response.Setup(m => m.Cookies).Returns(new HttpCookieCollection());

            // apply the mock context to the supplied controller instance
            RequestContext rc = new RequestContext(HttpContext.Object, new RouteData());
            controller.ControllerContext = new ControllerContext(rc, controller);
        }

        /// <summary>
        /// Sets the ajax request header so that mocked HttpRequest shows as a ajax call.
        /// </summary>
        public void SetAjaxRequestHeader()
        {
            Request.Setup(f => f["X-Requested-With"])
                .Returns("XMLHttpRequest");
        }

        private class FakeSessionState : HttpSessionStateBase
        {
            Dictionary<string, object> _items = new Dictionary<string, object>();

            public override object this[string name]
            {
                get
                {
                    return _items.ContainsKey(name) ? _items[name] : null;
                }
                set
                {
                    _items[name] = value;
                }
            }
        }
    }
}

Below is an example of using this in a unit test, based on nunit test framework.  During the setup, create the ContextMock and associated with the controller under test.

namespace MySite.Tests
{
    public class AccountControllerTests
    {
        private MyAccountController myAccountController;
        private ContextMocks contextMock;
        private Mock<IAccountService> accountServiceMock;

        [SetUp]
        public void Setup()
        {
            // create new controller under test
            myAccountController = new MyAccountController();

            // create mock HttpContext
            contextMock = new ContextMocks(myAccountController);

            accountServiceMock = new Mock<IAccountService>();
            myAccountController.AccountService = accountServiceMock.Object;
        }

        [TearDown]
        public void Cleanup()
        {
            myAccountController = null;
            contextMock = null;
            accountServiceMock = null;
        }

        [Test]
        public void SignUp_AjaxRequest_Returns_JsonResult()
        {
            // arrange
            string email = "test@test.com";
            string password = "Some#rei!23";

            // configure ajax mock request
            contextMock.SetAjaxRequestHeader();

            accountServiceMock.Setup(f => f.CreateAccount(It.IsAny<string>(), It.IsAny<string>()))
                .Returns(new SignUpResponse(SignUpResponse.ReturnCodeType.Success));

            // act
            ActionResult actual = myAccountController.SignUp(email, password);

            // assert
            Assert.IsInstanceOf<JsonResult>(actual);
        }
    }
}