The Startup – WASP

So I started working on this personal project. Will reveal the details later but as of the moment, i’ve been cooking this project which I think would really help individuals to know the Philippines in detail (could mean plenty of things). That’s right, the entire Philippines. Here is a splash screen of the mobile app. Yeah just the splash screen for now.

39984954_10217849213010830_6267894900335837184_n

Coming soon…

Advertisements

RMD (Rapid Mobile Development) with Telerik AppBuilder

As a developer coming from a web development background with a partner who’s asking for an immediate mobile application, my best choice was Telerik’s AppBuilder. There are 2 types of mobile app that you can build with AppBuilder. First is a Hybrid Mobile App and second is Native with Nativescript.

My Experience

Building a Hybrid mobile app with AppBuilder is pretty straightforward, specially if you have Visual Studio 2015 installed on your machine. You just need to install a extension for  Visual Studio and your ready. There is a separate IDE but it comes with a price. And since I am on Visual Studio IDE for a very long time, I opted in installing the extension.

After installing the extension, I can now run my code via a built-in simulator.

AppBuilder.png

It just took me a month to complete a full LOB Hybrid Mobile app with AppBuilder. Now we nudged the bar  up and move to native development this time with NativeScript.

The second app that we developed was for a university in california and we want a native look and feel. Our choice? Nativescript with AppBuilder. The language we use? Javascript. For the UI? XML. And how long did we create the app? 1 Month.

Why go native with Nativescript? Its much faster than the Hybrid of course and here are the good parts:

  1. It supports Javascript and Typescript
  2. You can apply the same styling as you would on Hybrid and Web apps.
  3. Wide array of plugins such as camera, calendar, barcode scanner, etc.
  4.  Active community.
  5. End to End development with AppBuilder. I was able to develop the native app without a mac. Just iTunes for deploying the package on my phone.

I will write a blog later on on how you can build hybrid and native apps with the AppBuilder.

For now, I just want to entice you with the good things that AppBuilder can bring on to your mobile development project.

Right now we are on our third project and we still use Telerik AppBuilder.

 

Interprocess Communication via Self Hosted WCF

Lately I was asked if there is a way to allow 2 apps to communicate even if they are belonging to 2 different exe’s . Fortunately for me I have the source code of both 2 apps. The main reason why instead of merging the projects, we went to IPC or interprocess communication is because, I belong to a team that maintains the other windows forms app and the other project or exe belongs to another team that has their own deliverables. And another thing is, we want to deploy the IPC functionality the soonest. It means it is badly needed.

The way to do it is have a listener in the second app and let the first app talk to the second app with the same url.

Oh, first lets create something (object) that can be shared between the 2 apps. When you communicate, you transfer knowledge, words, etc. In our case lets transfer some data to the other app.

The Data

[DataContract]
[Serializable()]
public class UserInformation
{
[DataMember]
public string Name { get; set; }

[DataMember]
public DateTime BirthDate { get; set; }

[DataMember]
public string Address { get; set; }
}

The Service Contract

This will be self hosting service which will be hosted in the listener app.

[ServiceContract(Namespace = “https://www.francorobles.com”)]
public interface IUserServiceContract
{
[OperationContract]
int UpdateUserInformation(UserInformation userInformation);

}

The Service Implementation

[ServiceBehavior(InstanceContextMode = InstanceContextMode.Single)]
public class UserService : IUserServiceContract
{
public int UpdateUserInformation(UserInformation userInformation)
{
return 1;
}
}

Starting the listener

This code block will be in the listener app. What it does is we instantiated a wcf service inside our windows app via named pipe.

Dim address As String = String.Concat(“net.pipe://localhost/user/userservice”, Environment.UserName)
Dim _userService As UserService = New UserService()
Dim serviceHost As New ServiceHost(_userService e)
Dim binding As New NetNamedPipeBinding(NetNamedPipeSecurityMode.None)
serviceHost.AddServiceEndpoint(GetType(IUserServiceContract), binding, address)
serviceHost.Open()

Calling the listener

Here we called the listener via the same url that was instantiated in the listener app. Then we created a UserInformation object and passed it like we do in a normal wcf service.

Dim address As String = String.Concat(“net.pipe://localhost/user/userservice”, Environment.UserName)
Dim binding As New NetNamedPipeBinding(NetNamedPipeSecurityMode.None)
Dim ep As New EndpointAddress(address)
Dim channel As IUserServiceContract = ChannelFactory(Of IUserServiceContract).CreateChannel(binding, ep)

Dim _userInformation as new UserInformation()
_userInformation.Name = “Franco Robles”
_userInformation.BirthDate = DateTime.Parse(“1985-10-08”)
_userInformation.Address = “Makati, Philippines”
channel.UpdateInformation(_userInformation)

 

And thats pretty much about it. There are many types of IPC (Inter Process Communication), WCF via named pipe just suits my needs. Maybe you encounter the same scenario sooner or later and hopefully this post will be a starting point for you.

Happy Coding!!!

 

 

 

 

 

Restoring NuGet Package

There are plenty of ways to restore missing nuget packages. In many cases you might just want to copy packages from one project to another. The easiest way to copy packages from 1 project to another is by using the below command:

Update-Package -Reinstall -ProjectName <ProjectName>

where <ProjectName> is the name of your project.

Second, if you want to restore packages in the entire solution is, you have to omit -ProjectName in the above command like so:

Update-Package -Reinstall

And that’s it, as simple as that. I have encountered this many times already and I have to take note of the command by making a post about it. Through this I can just simply look into my blog and wallaaaahhh, there it is.

 

Real Time Web with SignalR and ASP.NET MVC

This afternoon I was thinking about an app where users will be notified in real time. Some suggestions were raised but at the moment I think only Node.JS and SignalR are the most viable candidate for this scenario. For this post, since I am going to use ASP.NET MVC, I will use SignalR which is native to .NET.

Okay, for those who are not familiar yet with SignalR. According to its site, it is a new library for ASP.NET developers that makes it incredibly simple to add real-time web functionality to your applications. For me, basically, it is the most convenient way in notifying the client that something happened from the server in real time. No need for work around or any sort.

Now, time for the development.

1. First we need to get a reference of SignalR from Nuget. You can also get it from Github. Or download it as zip and add it as reference. But if you are new, I would suggest using nuget.

– Install-Package Microsoft.AspNet.SignalR

SignalR_Nuget

2. Once you have it installed. Let’s create  a Hub. A SignalR Hub enables you to make remote procedure calls (RPCs) from a server to connected clients and from clients to the server.

– First we need to add a folder to our web project called Hubs.

– Then create a class called CustomerHub. Below is how it should look like. I intentionally made it empty since it just acts like a fake hub. All the crud operation happens in the actionresult and you will find out how i called the client method from the actionresult once you finished reading this post.

using Microsoft.AspNet.SignalR;

namespace CustomerSite.Hubs
{
    public class CustomerHub : Hub
    {
        
    }
}

– Then another important part is to add the startup class which does all the mapping.

using Owin;
using Microsoft.Owin;
[assembly: OwinStartup(typeof(CustomerSite.Hubs.Startup))]
namespace CustomerSite.Hubs
{
    public class Startup
    {
        public void Configuration(IAppBuilder app)
        {
            // Any connection or hub wire up and configuration should go here
            app.MapSignalR();
        }
    }
}

3. Now lets get back to our view.

– Add a reference to SignalRJS.

<script src=”~/Scripts/jquery.signalR-2.1.2.js”></script>

– Set a reference to the available hubs that we created, in this case the CustomerHub that we created as shown below.

<script src=”/signalr/hubs”></script>

– This is how my Layout looks like.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Realtime Web with SignalR</title>
    <link href="~/Content/Site.css" rel="stylesheet" type="text/css" />
    <link href="~/Content/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <script src="~/Scripts/modernizr-2.6.2.js"></script>
    @RenderSection("styles", false)
</head>
<body>
    <div class="container body-content">
        @RenderBody()
    </div>

    <script src="~/Scripts/jquery-1.10.2.min.js"></script>
    <script src="~/Scripts/bootstrap.min.js"></script>
    <script src="~/Scripts/knockout.js"></script>
    <script src="~/Scripts/jquery.signalR-2.1.2.js"></script>
    <script src="/signalr/hubs"></script>
    @RenderSection("scripts", false)
</body>
</html>

4. The client side SignalR registration with knockout.
-> self.hub = $.connection.customerHub; //tells the hub object to point to customerhub on the server.
-> self.hub.client.getCustomers = function () { //is a method that will be called from the server.
self.loadCustomers();
}
-> $.connection.hub.start(); // the client side listener

function AppViewModel() {
    var self = this;

    self.hub = $.connection.customerHub;

    self.hub.client.getCustomers = function () {
        self.loadCustomers();
    }

    $.connection.hub.start();
    
    ... //Code removed here just for this post.

    //A function for loading the customer view via ajax.
    self.loadCustomers = function () {
        $.ajax({
            url: '/Home/CustomerList',
            success: function (data) {
                $("#customerlist").html(data);
            }
        });
    };

    //The function for updating and adding a customer.
    self.submitForm = function () {
        var url = '/Home/SaveCustomer';
        if (self.isEdit()) {
            url = '/Home/UpdateCustomer';
        } 
        $.ajax({
            url: url,
            data: {
                firstName: self.firstName(),
                lastName: self.lastName(),
                address: self.address(),
                phone: self.phone(),
                creditLimit: self.creditLimit(),
                customerSince: self.customerSince(),
                id: self.customerId()
            },
            success: function (data) {
                if (String(data.saved) == 'true') {
                    self.formVisible(false);
                    //self.loadCustomers();
                }
            }
        });
    };
}
ko.applyBindings(new AppViewModel());

5. For the server side to client interaction via ActionResult.

public ActionResult SaveCustomer([Bind(Exclude = "Id")]CustomerViewModel customer)
        {
            provider = new CustomerProvider();
            bool saved = provider.AddCustomer(customer);
            IHubContext hubContext = GlobalHost.ConnectionManager.GetHubContext();
            hubContext.Clients.All.getCustomers();
            return Json(new { saved = saved }, JsonRequestBehavior.AllowGet);
        }

The most important part here are these 2 lines. Basically, what this does is it gets the CustomerHub context and call the getCustomers method that we declared on the client.

IHubContext hubContext = GlobalHost.ConnectionManager.GetHubContext<CustomerHub>();
hubContext.Clients.All.getCustomers();

This is the screen capture of the app running side by side updating each other. We’re done.

AppRunning

By the way, I will post a followup blog on DependencyInjection with SignalR.

Dependency Injection with StructureMap and ASP.NET MVC

According to this article, DI or Dependency Injection is a software design pattern, a particular case of the Inversion of Control pattern, in which one or more dependencies are injected into dependent objects. The pattern is used to create program designs that are loosely coupled and testable.

For me, what matters is the last 2 terms “loosely coupled” and “testable”. But with the number of DI tools out there which would you choose? Well, this article has the best comparison so far. And I have decided to use structuremap because its actively maintained, plenty of new features which I am going to explore later on on the next blog.  But overall? Structuremap is highly configurable.

So, let’s start.

1. Get structuremap via nuget.

nuget

 

 

2. For this article lets resolved the dependencies in our Global.asax file.

– In the below snippet on Application_Start method, Structuremap basically has an ObjectFactory class that let’s you configure your dependency resolutions. On the below snippet, I am telling structuremap to grab the concrete class CustomerProvider for my ICustomerProvider interface.

ObjectFactory.Initialize(x =>
{
     x.For<ICustomerProvider>().Use<CustomerProvider>();
});

 

3. Now time for the real use of DI.
– In the below snippet is what is called Constructor Injection. There is another way too called Property Injection. Basically, what it does is to simply remove the concrete class from being assigned to ICustomerProvider. So that later on, I can modify the concrete class’s implementation without modifying my controller.

public class HomeController : Controller
{
        ICustomerProvider provider;

        public HomeController(ICustomerProvider provider) {
            this.provider = provider;
        }

        public ActionResult CustomerList()
        {
            return PartialView(provider.GetCustomers());
        }
}

 

4. If we run the program and we encounter a parameterless constructor issue. The solution to that is override the defaultcontrollerfactory and let Structuremap instantiate the controllers.

public class StructureMapControllerFactory : DefaultControllerFactory
    {
        protected override IController GetControllerInstance(RequestContext requestContext, Type controllerType)
        {
            if (controllerType == null)
                return base.GetControllerInstance(requestContext, controllerType);

            return ObjectFactory.GetInstance(controllerType) as Controller;
        }
    }

– Then we modify our initialization to this.

ObjectFactory.Initialize(x =>
{
     x.For<ICustomerProvider>().Use<CustomerProvider>();
});
ControllerBuilder.Current.SetControllerFactory(new StructureMapControllerFactory());

On the next blog, I will cover a deeper topic on this.

Python Development with Eclipse and PyDev

This afternoon I was approached by a junior developer and asked me how I started my python apprenticeship. I told him take a look at my blog tonight I’ll show you the steps.

The Steps

1. Grab Eclipse from eclipse.org. By the time of this writing, I am using Luna.

2. Grab python from python.org. I am using 2.7.8 during this post.

3. Install additional software on eclipse.

– Go to Help > Install New Software. And on the work with field, add http://pydev.org/nightly. Why nightly? Because it is the nightly build and the nightly build contains the recent updates.

Installing_PyDev_on_Eclipse

– When asked if do you trust the certificate? Just check the box because you have no other choice anyway. =)

– Now we are all set. Let’s create a simple loop which prints out the content of a list.

theList = [1,1,2,3,5,8,13,21]

def firstLoop(theList):
    for item in theList:
        print item
    
firstLoop(theList)

 

4. Let’s run our first program and it should print out the content of the list as expected.

SampleProgram

 

So, your first program is running. Are you going to stop from here? I won’t.

If you disagree with what I posted, feel free to hit me up in a form of an email. Please visit my site www.francorobles.com if you need to know more about me. I will be blogging every night to share what I know.