CommonsNet

AngularJS structure and directives

Today I am going to tell you how to build a well worked Angular JS structure, as well as to be able to maintain your app's elements correctly. It's a basic and most important thing to learn and remember before you start building your own website or app because in the early phases of a project the structure doesn't matter too much, and many people tend to ignore it, but in the long term it will affect code maintainability. It also helps you to develop it quicker and solve bugs without any additional troubles. I must admit that I was one of them who  had made this mistake and ignore AngularJS correct structure. The thing is that I had not known how to build Angular JS app correctly before I started coding CommonsNet, and I wanted to start and provide a real outcome as quickly as possible. But unfortunately my mistake has stoped me later. I have realised it this week while implementing a quite simple feature - adding HTML elements dynamically. It turned out that I had a trouble while adding them. I had't known that it's better not to manipulate DOM elements in Controllers, but instead do it in directives. Let me to explain it step by step from lessons I've learned while refactoring CommonsNet code structure. Please note that I'm just sharing my experience in building rather a small project and I'm covering only a small part of that subject, so some of these tips may be first - useless if you want to build an extended one, and then - not enough if you want to learn more. I recommend you to find further resources. AngularJS Structure First of all please see at AngularJS structure provided below. It's a very basic structure, but it' is important to have in mind that you should follow that pattern while developing your own app. If you want to have an order in your files you should seperate them by directories and create different ones like: controllers, directives, services, js and views. This structure makes it very easy for the reader to visualize and conceptualize the concepts you are covering. My CommonsNet structure differs a bit because I have one main js directory, and all subdirectories like directives, controllers and services  inside it. I think it's also an acceptable solution. Imagine that I hadn't had any directives or services directives' files before last Wednesday... Then,  it's also recommended to put index.html at the root of front-end structure. The index.html file will primarily handle loading in all the libraries and Angular elements. Next, controllers are main part of AngularJS apps. It always happens that developers when starting out tend to put too much logic in the controllers. It's a bug. Controllers should never do DOM manipulation or hold DOM selectors, that's where we use directives and ng-model. Likewise business logic should live in services, not controllers. Data should also be stored in services, except where it is being bound to the $scope. Services are singletons that persist throughout the lifetime…

Continue ReadingAngularJS structure and directives

CommonsNet’s main features are ready

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…

Continue ReadingCommonsNet’s main features are ready

CommonNet – how to set up tests

Setting up tests' environment wasn't easy Have you ever tried to set up your tests' environment using Protractor on Vagrant? I must admit that it was a very difficult task for me. I have recently spent almost three days trying to prepare my tests' environment for CommonsNet project, and read many different resources. Fortunately, I have finally done it, so now I want to share with you my experience and give you some tips how to do it. Protractor Firstly, I will explain you why I have decided to use Protractor. It is mainly because Proractor is especially designed for end-to-end testing  AngularJS application. Protractor runs tests against your application running in a real browser, interacting with it as a user would. Writing tests using Protractor is quite easy because you can find working examples in AngularJS docs. Each sample of AngularJS code is enriched by Protractor's test. It's amazing. Selenium Selenium is a browser automation library. It is most often used for testing web-applications, and may be used for any task that requires automating interaction with the browser. You can download it from here. You have to choose Selenium for a language you use. I have used Selenium for NodeJS. Vagrant You don't have to necessary use Vagrant to run your tests, but I have implemented it, because I run my local environment on Vagrant and it's more comfortable for me to use it. Setting up testing environment Now I will share with you how to run tests. So first all of, I have created a file called install.sh and put all necessary commends there. I have put there several commands. Please take a look at this file.  It helps you to install all of these necessary dependencies using only one command instead of several ones.  Next, I have prepared provision folder, where I put files to install selenium standalone and chromium driver. You can copy these file from here Then I have created a simple test case. It's quite easy at the beginning. You just need two files first - conf. js and next- todo_spec.js  Below, I will provide you with my conf.js As you can see it's not complicated and really short. It's a basic configuration file and of course you can adjust it to your needs. You can find many examples of conf.js file in Internet. And finally a simple test, which I have placed in todo_spec.js file. It's a ProtracotrJS example available on their website Now, let me to write a step by step todo list now. Install Vagrant in your folder vagrant up Connect to Vagrant vagrant ssh Open your Vagrant folder cd /vagrant Then run selenium file sh selenium_install.sh Next open provision folder cd provision Install java-jar DISPLAY=:1 xvfb-run java -jar selenium-server-standalone-2.41.0.jar Your selenium server should be up and running Then open a new terminal - remember not to close the first one! Open your CommonsNet repository again cd CommonsNet Connect to Vagrant again vagrant ssh Open Vagrant folder again cd /vagrant Then open tests folder…

Continue ReadingCommonNet – how to set up tests

Collecting information. What to choose?

Internet legal restrictions Our idea in CommonsNet project is to make a  wireless connection transparent. Apart from typical details like ssid, password, security, speed, time limit etc. we think to make also clear  legal restrictions which vary across the world. Because we all know permanent value of the famous maxim ‘Ignorantia iuris nocet’,  we want to provide a great, widespread tool, and make complex law easy-to-understand for an average Internet user. In today’s world more and more people travel a lot, and visit different countries. As Internet is a main part of our life we want to use it everywhere. And we do it, but it may sometimes happen that we use the Internet , thoughtlessly without realizing that somewhere in the world something normal for us may be banned. In this case, we are even exposure to unpleasant consequences . Therefore we believe that access to understandable information is a fundamental human right and can influence on our life much. Collecting is not an easy task, and it is a place where we need your help. If we want to create a huge database of law restrictions in different countries all over the world we need your support, because you are who understands your country and your language best. And you are able to ask people who are engaged in a law. We simply need information what is the law related to Internet and/or wireless connection, and mainly – what is forbidden. Poland example Let me explain it based on Poland example. We are going to focus on downloading music, movies, books from the Internet. In Poland you are allowed to do that for your personal use. It means that you can do it to use them in privacy, but on condition that movie, song or a book has been already made available to the public. If not – it’s illegal. A private use means also that you can share that resources with your family or friends and that you can do single copies of what you download. Very popular peer to peer networks which enable to share our resources with other users at the time we download a file, are unfortunately not defined as private use and are illegal either. When it comes to uploading files, if we are authors of a song, or a movie, or a book and so on, we can share what and how we only want. But if we want to share our downloaded resources, we have to be very careful. We can do it only in our private area – for our friends and family but we cannot share it in public. Law is unfortunately silent in regards of downloading files illegaly available in Internet (when someone shares a song, or a book before it has been make available to the public), but many lawyers claim that in the light of law it is permitted only for a personal use. One of the most protected under polish law group of resources are computer games and various programs. They cannot be downloaded,…

Continue ReadingCollecting information. What to choose?

What is CommonsNet?

It is already a few posts of Commons Net but I suppose you may wonder what CommonsNet is and what can it do for you. I think that it' s the highest time to talk about CommonsNet. Let me explain it step by step. CommonsNet is an open source project of FOSSASIA . FOSSASIA has participated for several years as a mentor organization in Google Summer of Code, and  CommonsNet is being developed as this year project. This is how FOSSASIA sees CommonsNet: CommonsNet Develop Website for Standardized Open Networks Agreement similar to Creative Commons Creative Commons is a wonderful example how standardized processes can enable millions of people to share freely. What about sharing your Internet connection? Across the world there are different legal settings and requirements for sharing of Internet connections and specifically Open Wifi connections. The Picopeering Agreement already offered a basis for completely free and open sharing: http://www.picopeer.net/ However, in many settings people cannot enable unrestricted level of sharing, e.g. if you share Internet in your office, you might need to reserve a certain bandwidth for you and restrict the bandwidth of users. We need a website, that reflects these details and makes it transparent to the user. Just like at Creative Commons the site should generate a) a human readable file and b) a machine readable file of the level of sharing that is offered by someone. Examples are, that networks are completely free (all ports are open, all services are enabled, bandwidth is unrestricted) compared to networks with restrictions e.g. no torrent sharing, limited bandwidth and an accepted user agreement that is required. This is how it actually looks, and is being developed on CommonsNet website We decided to create a simple and user-friendly wizard form to let our users provide their wifi details in a convient way. We divided these different kind of wifi information into four different section like wireless settings - the most basic wifi information like ssid, password, authentication, speed and standard. Then we've decided that payment and time limit are also really important part of sharing wireless connection, so we enable our users to mention these details as well. Then, you can provide your wireless connection usage's conditions. And finally we've put a section legal restrictions which is one of the most important part of using wireless connection and Internet resources and what vary over the world due to different legal systems. For now our users are obliged to type legal restrictions on their own, but we are working hard on making it simpler for everyone by creating legal restrictions' data base, which will let you simply choose your own country and the legal details will be provided and put into wizard form automatically thanks to collected resources. And as you successfully finish filling form, you will be able to generate your pdf file or code to your website in order to share a transparent wireless connection with your users. It is so simple, but makes our world more transparent and trustworthy.…

Continue ReadingWhat is CommonsNet?

CommonsNet – WiFi Standards

Introduction There is no doubt that WiFi is a crucial technology that most of us use every day. But have you ever  noticed on wifi router that there are a few different number and letter tagged on the end?  These designations present different properties of the WiFi like speed, allowed devices, range and frequency and they create WiFi standards. If you know what standard you have, you can tell much about your wireless connection, and use it in the way you want. CommonsNet team focuses on providing users with transparent wifi information so let’s talk today about them. WIFI Standards 802 – this strange number means naming system which is used by networking standards. WiFi uses 802.11. All WiFi varieties has this number, followed by a letter or two which, is very useful for consumers, because as mentioned above it helps to identify wifi properties life maximum speed, range and required devices. Specific router may support not only single, but multiple standards at the same time. It happens in order to ensure compatibility with different pieces of hardware and network.   802.11 This standard was created In 1997 by the Institute of Electrical and Electronics Engineers (IEEE).  It was used for medicine and industrial purposes. Unfortunately, 802.11 supported a maximum network bandwidth up to 1 or 2 Mbps – not fast enough for applications. Therefore this standard was rapidly supplanted and is no longer used. 802.11b This standard became the most commonly adopted in consumer devices, especially because of its low-cost. It supports bandwidth up to 11 Mbps. 802.11b uses radio signaling frequency  – 2.4 GHz, and due to this, its signal has good range – about 100m – and is not easily obstructed, but due to the fact that it works on 2, GHz it may interfere with home appliances. 802.11a This standard bandwidth is up to 54 Mbps and has signals in a regulated frequency  around 5 GHz. There is no doubt that this higher frequency shortens the range, and needs more power to work correctly. This also means that signal has more difficulties while penetrating obstructions like walls, doors, windows. This standard due to working on different frequency is incompatible with 802.11b standard. 802.11g In 2002 products supporting a new standard emerged on the market.I t’s actually the most popular WiFi standard. It focuses on combining the best of both 802.11a and 802.11b. It supports bandwidth up to 54Mbps, and it uses the 2.4 Ghz frequency for greater range. It is compatible with other standards. But it’s impossible to use it in older devices. If you try to do it, the speed will be 4 times slower. 802.11n This standard was designed  to improve  802.11g  by utilizing multiple wireless signals and antennas (called MIMO technology) instead of one. It provides up to 600 Mbps  of network bandwidth, but in reality it usually reaches up to 150 Mbps. 802.11n also offers  better range over earlier Wi-Fi standards due to its increased signal intensity, and it is backward-compatible with 802.11b/g gear. 802.11ac The newest generation of Wi-Fi signaling in popular…

Continue ReadingCommonsNet – WiFi Standards

AngularJS makes coding CommonsNet easy

Wizard form Have you seen a wizard form? I am sure you have.  I think the usage of it is very common these days. I like it very much, too. I think its structure is extremely user-friendly, because it can help us to avoid discouraging users from filling the form with all data. As a user I don’t want to be pushed to fill long forms. It’s annoying. But while you use the wizard no matter how long the form is, firstly you can quickly see the progress of you work and then,  don’t see it at once, just fill one field at a time. That’s the result why have I decided to use it in CommonsNet project, too. Angular JS To implement this on CommonsNet website I have decided to use AngularJS which makes it easy. I have used Model View Controller which  is a software design pattern for developing web applications. A Model View Controller pattern is made up of the following three parts Model − It is the lowest level of the pattern responsible for maintaining data View − It is responsible for displaying all or a portion of the data to the user Controller − It is a software Code that controls the interactions between the Model and View. This model helps us to isolate the application logic from the user interface layer and supports separation of concerns. The ng-controller directive defines the application controller. A controller is a JavaScript Object Steps to create AngularJS app 1. Load AngularJS on your webiste. src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"> 2. Define AngularJS app using ng-app. <body ng-app = "app"> ... </body> 3. Then I have created views – five different html files for each wizard step. Please take a look at partials folder where you can find them. 4. Next, I have created a .Controller –  WizardController in AngularJS. var WizardController = app.controller("WizardController", function ($scope) { // controller logic goes here } );   It is a JavaScript function. I have defined which  view has to be displayed by .controller on each step. As you can see it’s quite easy and clear. You can quickly define and see which step is it , how is its name and which template should be used. It definitely enables you to maintain your app easier, because changes can be made quickly and does not influence on other part of code so you can take control over your code. 5. Then I have used  this line of code to call to my WizardController to display and maintain my views and that’s it.  See the progress on CommonsNet <div id="wizard-container" ng-controller="WizardController as vm">

Continue ReadingAngularJS makes coding CommonsNet easy

One step at a time – The beginnings of CommonsNet

The beginnings If you have been accepted to a serious project like Google Summer of Code is, you can feel lost and scared. I think it's nothing special and probably everyone experiences it. You can feel that pressure because you want to fulfill all expectations, follow your obligations and to do your best, but working in such project is something different from working on your own, private and small one.  Your organisation and mentors require something from you, and they can even provide you with a detailed guideline how to behave but doubts may occur anyway. My advice is not to give up and go through that tought period in order to experience the joy of results and sense of satisfaction, and to learn something to be better in the future. I am going to tell about my beginnings and to provide you with some tips  from my own experience CommonsNet CommonsNet (feel free to see it) is a new project of FOSSASIA. It focuses on providing users with transparent information about WiFi they may use in public places like hotels, restaurants, stations. The thing is that for now, if you go to a new place, and want to connect to Internet, you look for a free WIFI sign and as soon as you find it you try to connect. But think about it, how much do you know about this connection? Is is safe for your private data? How fast is it? Does the Internet connection have any legal restrictions?  I suppose that you answer 'no' to all these questions. But what if you know? Or if you can compare details of different WIFI available in a specific public place and connect to more suitable for your needs. I am sure you will appreciate it. I hope to run this project successfully and I am going to tell you more about it in next posts. How to start? Due to the fact that CommonsNet is a new project as I have mentioned before, and for now apart from mentor @agonarch and FOSSASIA leaders @mariobehling @hpdang, I am an only contributor, I am in a good position to tell you what are my steps. Remember not to think about all at once. It will make you crazy. So first of all - prepare your work. Try to get to know about your project as much as possible. Follow group chat, GitHub repositories, do research in Internet about the subject of area of your project or don't be afraid to ask your team member. That's what I have done at first. I have prepared a Google Doc about all WiFi details. I  have tried to get to know as much as possible and to gather this information in a clear, easy-to-understand way. I need it because I will be preparing a wizard form for users to let them provide all important details about their WiFi. I need to think seriously which data are important and have to be used to do it. It is not finished yet and will be changing…

Continue ReadingOne step at a time – The beginnings of CommonsNet