Main CommonsNet features are generating a file and generating a code script. Today I would like to provide you with a simple and short guideline how I have managed to implement them.
Generate a file
Generating a file is the most important feature of our website, and it is not only a condition of its existance but also a basis to find stakeholders – in general people who want to use CommonsNet webiste. It is the most complicated CommonsNet feature as well even if it is not so difficult as you may think.
To implement this feature a pure JavaScript is used and for now we have chosen the simplest solution to build it, mainly because we need to have a working webiste now to start a real promotion and find many customers.
Important steps here are:
- Manually prepare a .fodt file
- Get .fodt file and modify it
- Generate a pdf file from a ready .fodt file
- Write function to download a pdf file.
Preparing .fodt file
My mentor Andre Rebentisch has recommended me to use .fodt file because it’s very user-friendly and let you to prepare a file’s structure very easy. Actually that’s it! I have prepared manually in Libre Office a default doc file, and then save it in .fodt extension. .Fodt is a great option because it behaves as .xml file and let you modify this file using any programming language.
So, as I have already mentioned above I have created a simple doc file and prepare the structure. It is very clear and looks like a default Libre Office file. Only thing is that it has .fodt extension which means that you can open it in a code editior like for e.g. Sublime and start modifying easily.
If you open your .fodt file in a Sublime, it looks like this. Isn’t it simply? And above all it helps you to easily manipulate your data using for e.g a JavaScript.
Get .fodt file to manipulate it
In my AngularJS Wizard Controller I write a function to get data from my .fodt file
$http({
method: 'GET',
url: 'http://commonsnet.herokuapp.com/generatefile.fodt',
}).success(function(data){}) .error(function(){
alert("error");
});
It’s very easy code sample and you can find it in many Internet resources. I hope it is understandable to you as well. I have written a function which get a .fodt file and return data. Inside .success I have written my whole code to manipulate a .fodt file. To use it I have decided to use a simple JavaScript replace method and if-else conditions, and in dependence on user’s inputs in a wizard form create different file’s structures. Let me show you a small section :
result = result.replace("NETWORK_NAME", "The owner provides" + " " + vm.ssid + "network connection")
if ((vm.password !== "") && (typeof vm.password !== "undefined")) {
result = result.replace("INPUT_PASSWORD", "The owner informs that password is" + " " + vm.password);
}
Generate a pdf file from a ready .fodt file
It is still in progress! I will update it as soon as I manage to successfully implement it!
Write function to save it
To save my ready file I have used save function() and put in my AngularJS Wizard Controller.
$scope.save = function() {}
Generate a code script
We have decided to implement a generating code feature, because we want our users to be able to simply fill a wizard form with all Wifi details, then copy a generated code and be able to simply paste it to their website.
We believe it is a very convenient solution to them because all they need to do it is to go through a form and it is ready. Besides, we have already decided to get rid of a database and use only a JSON file to not complicate our website’s working. So, that’s also the reason why we want to make it as simple as possible.
That’s why I have decided to create a link snd store there all wizard form’s values Undoubtedly it causes to build a very long link, but in the same time I believe that it is a good solution if we don’t use a database. I have also already found some ways to shorten and encrypt the generated link.
In my WizardController AngularJS I have write a function with a condtion
$scope.gotoStep = function(newStep) {
currentStep = newStep;
if ( currentStep === 3) {
var link = "commonsnet.herokuapp.com/#/file?ssid=" + vm.ssid + "&password=" + vm.password + "&security=" + vm.securitytypes + "&standard=" + vm.wifistandards + "&payment=" + vm.paymentfieldyes + "&fee=" + vm.paymentfield + "&timelimit=" + vm.timelimityes + "&limit=" + vm.timelimitfield + "&service=" + vm.serviceyes + "&specialdevices=" + vm.specialdevices + "&devices=" + vm.specialdevicesfield + "&specialsettings=" + vm.specialsettings + "&settings=" + vm.specialsettingsfield + "&acceptterms=" + vm.acceptterms + "&liking=" + vm.socialprofile + "&downloading=" + vm.downloading + "&restrictions=" + vm.country + "&country=" + vm.countries + "&law=" + vm.legalrestrictions
vm.code = '<a href="' + link + '">CommonsNet</a>'
}
}
If my currentStep === 3 (actually it’s a confirmation.html templateUrl) I create a link (a code) which is available to users to copy and paste to their website.
Then I have also created a new FileController (FileCtrl) which is called when users enter a commonsnet.herokuapp.com/#/file (if they paste in an url a copied generated link)
app.controller('FileCtrl',['$scope', '$routeParams', function ($scope, $routeParams) { $scope.ssid = $routeParams.ssid; $scope.password = $routeParams.password; }])
Finally I have created a .html structure to post data from a wizard from which are all stored in our link. It’s a normal html structure but in order to adjust the html’s content to user’s wizard inputs I have used an Angular ng-if . A little example looks like this:
ng-if="ssid && ssid != 'undefined'
And that’s it. It still needs some improvements and fixing bugs but main features work according to my plan!!!
It’ time to intensively extend the idea of CommonsNet and find stakeholders! Are you interested too? I am sure you are, because CommonsNet is a great tool which helps us to build a transparent Wifi networks!
Feel free to write your comments and suggestion!