Mobile App - Hello World to PhoneGap Cordova + Ionic

Scope

We are going to build some apps in Android and iOS, as I have never done that before, I am going to build a really simple Hello World app that would introduce me to the world of apps. 

Prerequsite

Installations

There are quite a few things to prepare before we can even say hello to the world.

• Install NodeJs
• Install PhoneGap
• Install Cordava CLI Command Line Interface
• Install SDK for each platform
• Android
• Install Java SE JDK
• Install Android SDK
• iOS

IDE

There are many options for choice of IDEs. Popular ones are as follow.

• Android Studio
• Eclipse with the Android Development Tools Plugin
• Sublime Text

Mobile Frameworks

• JQuery Mobile
• Sencha Touch
• Ionic
• ngCordova

Cordova

Create

Firstly we will create the app by using a command line. This will be compatible for Android and iOS by adding the platforms to the app.

$ cordova create HelloWorld com.helloworld HelloWorld
$ cd HelloWorld
$ cordova platform add android

Setup

Setup Environment variable for ANDROID_HOME. This can be found by opening the Android SDK Manager.

Therefore, we will setup as follow.

Build

We will use our Command Line Interface to build our app as follow.

$ cd HelloWorld
$ cordova build android

If you are a little unlucky, you might run into error like this. Error: Please install Android target: "android-22".

This indicates we are targeting an incorrect version of android. We need to change our target in both places.

HelloWorld/platforms/android/project.properties 
HelloWorld/platforms/android/CordovaLib/project.properties

It will look like this if built successfully.

Test

As part of the Android SDK installation, it comes with the Android Virtual Device (AVD) Manager.

Choose Device Definition and Click Create AVD.

We will launch the AVD that we just created, and deploy our app to the emulator by running this command.

$ cordova run android

If everything ran smoothly, by default it should load up the Cordova Device Ready page from our /HelloWorld/www/index.html

Hello World

Before we begin, we will need to pick a mobile framework to work with. I have chosen the Ionic Framework.

Firstly, we will install the packages.

$ npm install -g cordova ionic

Then, we will scaffold our site.

$ ionic start HelloIonic blank

Similar to our Cordova commands, we can build and run our apps in Ionic commands.

$ cd HelloIonic
$ ionic platform add android
$ ionic build android
$ ionic run android

This time, we have a default page from the Ionic framework.

We are going to create some simple notifications. There are infinite ways of doing it. The most simplist form will be this.

alert('Hello World!');

However, we have not much control with the default alerts. The next step for me is to utilize some available plugins to do a bit more customizations. eg. https://github.com/apache/cordova-plugin-dialogs

function alertCallBack() {
 alert('Hello World');
}

navigator.notification.alert(
 'The World is Amazing!',  
 alertCallBack,  
 'My App',       
 'Done'          
);

The first message pops up is 'The World is Amazing!', then a callback function is invoked when the message is dismissed, so the alert message 'Hello World' will pop up.

 

USB Device

We can run the app not just on emulator, but a USB connected device as well.

Firstly, we will need to setup our device for development.

For my Samsung device, I needed the extra Windows drivers which I was hardly able to find from within the Samsung support page, but with a bit of googling, I found the hidden gem in their developer site.

After installing the drivers, we can connect our device to the computer via USB, we can test if our device is available for debugging purpose by running an adb (Android Debug Bridge) command.

$ <android-sdk>/adb.exe devices

The device is now visible to us and we are just one step away. On our device, we need to authorize our computer for USB debugging. After connecting our device to the computer, a similar screen should popup on your device.

We will run our adb command again. This should now say device after it is authorized.

With our Ionic commands, we can now explicitly specify to run our app in our device.

$ Ionic run --device

It will install and run the app in our USB attached device.

 

Conclusion

How about iOS? It happens that iOS can only be done in OS X and I don't have any. I tried to add the iOS platform in Cordova with my Microsoft machine, and I got the error as follow. There are some hackintosh way that I could get around the Apple issue, but I will leave that for another project next time.

Took me awhile to get there, but it is all worth it. As a web developer, I am now able to use my existing web knowledge to start building multi-platform mobile apps.

nopCommerce - Hello World to Multi Tenancy

Finally, it is about time to do some multi tenant works. Let's recap my goal and how I am travelling so far.

Scope

• Build a multi tenant e-commerce platform for 15 or more international brands.
• They are completely different brands and target consumers are completely different.
• They will share some similarities in terms of functionalities but there will be customizations for individual brands
• Administrator of a brand can only see stuff about their own brand.
• Easy to develop
• Easy to deploy
• Easy to maintain
• There is NOT necessary a super admin role to overlook ALL the brands.
• Customers are NOT shared across brands.

Preparation

So far, I have built my first brand with the above scope in mind, the following strategies were implemented.

• Customization for Model
• Create new domain object
• Create new services
• Inherit Services
• Controller by Inheritance

And here is the outcome.

• Our first site went live

Specification

Since our first site went live, we are now ready for our next brand and the following needs to bear in mind with the followings:

• Separate the brand specific codes in separated dll.
• Database to be considered at later stage.
• No brand specific code at controller level.
• Views for different brands are handled by Nop Theme.
• We will deploy for all the brands from the same Visual Studio Solutions.

Decision Making

• This Microsoft article is a great start for multi tenancy. http://msdn.microsoft.com/en-us/library/aa479086.aspx 
• One code base vs multiple code base? (One Visual Studio solution or multiple solutions)
• One database vs multiple database?

Get Dirty with Code

Project Setup

Notice I am skipping some of the steps and only covering the key points. (eg. Add references, routes, register dependency etc...) They are covered previously.

I created a Misc Service and an interface for our platform.

Then I create brand specific services in the relevant projects.

Build Configuration

With the default Debug configuration, we will clone a set of new build configs per projects. In each build, we only include one brand dll at a time. (Only service dll in this example)

Only for the relevant build configurations of the brand projects, we will set the dll output path to the same as the Nop.Web project.

Controller

We setup a controller that will consume ITAMiscService and return the brand name. Notice how the controller does not have knowledge to the concrete class but only the ITAMiscService interface.

Hello World to Multi Tenancy

Who am I?

By changing the build configuration, I am able to change my workspace to the corresponding brand.

This is achieved by a MS Build trick.

• The brand projects are not referenced anywhere (very important)
• Therefore, when we build Debug, there will not be any brand specific dlls.
• We used build configurations to trick MS Build to dump the brand dll to the web project for relevant brands.
• Autofac reflection will pick up the brand dll if they exists, because of the way how Nop Dependency Register works.

Caution

• Use clean solution in between the building of different brand environments (to delete any brand dlls).
• Pay attention to the dlls in the Nop.Web bin folder. Occasionally the clean solution do not delete everything in the bin folder. Then we will need to manually clear this folder.
• Always check Who am I to make sure you are working in the right brand.

Further Improvement

• It is not so easy to deploy, as I need to build the project once per brand (so it will generate different dlls)
• Unfortunately in practice, clean solution doesn't always work. For anyone who familiar with MS Build, we could create pre-build event to properly clean up the solutions (instead of relying on Visual Studio)
• Combine MS Build with PowerShell, we can implement a way to "quick switch" dlls for different brands.

How to write a nopCommerce plugin - Hello World

Scope

This is an article to discuss and may resolve the "does not implement IController" error. It gives a walk thru on how to write a NopCommerce plugin with the NopCommerce 3.1 framework.

Introduction

If you are new to NopCommerce and about to write a NopCommerce plugin, the likelihood is that you might have read this article already.

If you are then lucky enough to get the infamous "does not implement IController" error, with a bit of google, you would have landed and read this article.



If you are then still having the same error, unable to resolve the problem even followed all the suggested solutions by others like "pad a space to global.asax" etc, then the rest of the article is for you.

Project Setup

In this example, it is a quick walk thru on how to build  a not so simple Hello World widget plugin.

If you read the above how-to article, they suggested you to start a new class library project, but I found copying an existing project will save you from the mysterious "does not implement IController" error.

To begin, I made a copy of the Nop.Plugin.Widgets.NivoSlider plugin that is part of the framework and gave it a new name.

Things that I then need to modify are as follow:-

Project Properties

Change the output path and file name.

Properties\AssemblyInfo.cs

Fairly straight forward. And for the sake of completeness, I generated a new guid and replaced the one I copied (although I am not going to expose the dll to COM)

References folder

The good thing about copying an existing project is I can leave this untouched.

Description.txt

Fairly straight forward.

HelloWorldPlugin.cs

We will return "hello_world" in the GetWidgetZones(). This name will match the widget in the view that use this plugin later on, so the widget will be rendered in the desired place. The rest is pretty self explained from the comments.

HelloWorldSettings.cs

We will have 2 fields, to store greeting and name.

Controller

Following the same naming convention, we will call it WidgetsHelloWorldController.

In the constructor, we only need ISettingService, IStoreContext, IStoreService, IWorkContext.




The 3 main actions in this controller are Configure(), Configure(configurationModel) and PublicInfo(widgetZone).

Configure is for the configuration page in the admin; PublicInfo is the actual rendering of the plugin in the front end.

Fairly similar to the NivoSlider code so I won't go into details.

Models

Similarly,






Make sure the namespace is correct or it will throw runtime error.

Views

The Configure.cshtml view is quite a straight forward exercise of find and replace / code chopping.

The PublicInfo.cshtml view will display the message.

Hello World

We are now nearly there to greet the world.

Admin

Go thru the process and install the plugin, then enable it.



Click on the configure button and depends on your multi-store setup, you might get this.




Values can be stored site-wide or store specific, I will leave the fun parts for you to explore.

Front End

For demonstration purpose, we need to inject this widget / plugin into an view so it can be rendered in the front end. In this example, I picked the cart.cshtml view, you can find this in the Views\ShoppingCart as part of the NopCommerce platform.

We will add a line to indicate where we want the widget to go in the view.




And it should look like this.

Conclusion

The way how plugins are created were not so developer-friendly. It takes a lot of copy and paste works and some of the error messages are not so friendly neither. Nevertheless, it is a nice platform that allow you plug and play different plugins, install / uninstall / enable / disable. The multi-store ability with the plugin greatly helped reduce development times where in some platforms you maybe hacking your way until you can't hack further. I am looking forward to see what NopCommerce will evolve into in the future.