The Knit Editor software aims to be installable and usable by end-users. In the whole summer of code, we focused on development and code documentation from the perspective of a developer. In this blog post we will discuss how the Knit Editor is presented to the end user. So, you reading this blog: Please comment with your thoughts on the sketches.
First thing that comes into view is the download button. This leads to the download site. Then, wen can see three popular use-cases of the knit editor. At the bottom, new developers can see that they can contribute.
End users are knitters of all ages. As tested with my mom, they expect the language to be at the top-right of the page.
Both, the download and the start developing button are highlighted in a different color to make certain that they are an action the user is expected to perform.
When you access the site you get automatically redirected to your browsers configured language.
The Download Site
When you click the download button on the main page, you reach the download site. Depending on the operating system information the browser sends, your download starts automatically, below, this is sketched for Windows.
Next to the download page, you may want to find other versions of the software or not. This is to be evaluated. Maybe a slightly less visible button is right for that or it can be left out. Usually, no-one uses the old software.
At the bottom, you can see that there is a predecessor of the software which is called “AYAB-Apparat”. Some people may expect to find this software, too.
The Developer Site
If you clicked “Start Developing” on the main page, you will be confronted with the site for development.
There are two ways main flavors of contributing. Either you translate or you write program code. Therefore, we have two buttons that skip to the corresponding sections.
At the bottom, you can see that there are tutorials on how to set up the environment for development. Videos for this can be found under this Youtube playlist.
Summary
At the end of GSoC we should document the code. Since we did documentation-driven development, there was already a focus on the developers from the start. End-user involvement fell short during the development phase. “Documentation is the way of informing people.” – this is something I learned from a talk. Thus, I create the new site for the knit editor as a documentation about the project fit for non-developers.
Ever wondered how do people maintain different versions of the same app on play store with some customisations in each version. For example, Lite version and a pro version which signify free and paid versions with extra features in paid one.
With the arrival of gradle as a build tool, we got gradle flavors which is an excellent way to have some variations in your app versions.
It can also be leveraged to do hermetic testing with prod/mock flavors. Some other examples could be free/paid flavors and stable/experimental flavors etc.
Here prod and mock are two flavors and the customisations we add are that mock has a applicationIdSuffix. We can also add altogether different applicationIds as well as define a different version for different flavors and a lot of other different things
2. Now we sync the project
If you now open Build Variants tool window either using the quick access menu located in the status bar in the bottom left hand corner of the Android Studio main window or using the Build Variant tool window bar. Once loaded, clicking in the Build Variant cell for the app module should now list the four build variants: mockDebug, mockRelease and prodDebug, prodRelease
After this we get different folders corresponding to the different flavors. We go ahead and add the different folders where we want the changes to occur. For example if I want to show two different maps for two different versions, where one version is for fdroid and another one is for googleplay and hence we replace google maps with OpenStreet Maps in the fdroid version. Hence, We add res/values and res/layout folders for different resources and we also add different java folders and add the classes that would be different for both the flavors. Since both of these will require different set of permissions we can also add AndroidManifest.xml for these were we define the permissions etc. we want.
Not that we only add the changes for each file. All the other essential things can be added from the Main flavor of the android project.
Any variable available through your code
Another thing to know is that the you can have add variables like this so that you can use different variables for different flavors. For examle if you have different api’s and different options for each flavor like if you want to report crashes in one of the flavors and not in other. Here HOST variable is not the only one you can expose in your code. You can do it with whatever you want:
So I think this is a really useful thing to know and is used in almost every app. We all need some configuration differences in our apps and gradle flavors is the best way to go about it. Go nuts with your imagination on the usage of flavors 😛
This summer has been really amazing, I learnt a lot and worked crazy hours it has been a crazy yet amazing ride. I am not going to stop working on open source projects and posting the blog post.
In this post, I would like to summarize all the work that I did during this summer. Working with FOSSASIA was an amazing experience for me. I got to learn a lot during this summer. Thanks to such amazing mentors.
My project Engelsystemis an online tool for helper and shift planning on major events. It lets the user organize their helper in teams, they share in layers or let them decide when and where they want to help themselves.
GithHub Commits
The Project was provided an A-Grade certificate from CODACY.
Implement localization in different languages as it will make this system reach many people across the world. There 10+ International languages added to the system. The list of languages can be checked in the issue tracker
Implementing batch deleting of Shifts in the shifts page allowing the admin to delete multiple shifts at once. Created checkbox for selecting the shifts to be deleted and a delete button in the Shifts page to delete the selected shifts.
Feature Request: User: Registration Form and Shifts [Captcha]
Disallowing self-signup of restricted shifts when an Engel is approved for certain groups. Created a page to create new groups and provide specific privileges to them so that they won’t get Admin privileges to automatically signup for the Shifts
There were 26 pages. Create controller files for all of them. For the pages which accesses the SQL queries, needed to be separated them into model files. There were only model files for a few pages.
This kind of make me feel happy that I have around 230 commits on the master branch now and I believe that I will be working a lot more on EngelSystem to bring a lot of cool and useful feature to it. In case you have any suggestion feel free to file issues on EngelSystem Issues.
Lambda Expressions are one of the most important features added to Java 8. Prior to Lambda Expressions, implementing functional interfaces i.e interfaces with only one abstract method has been done using syntax that has a lot of boilerplate code in it. In cases like this, what we are trying to do is pass a functionality as an argument to a method, such as what happens when a button is clicked.
Lambda expressions enables you to do just that, in a way that is much more compact and clear.
Syntax of Lambda Expressions
A lambda expression consist of the following:
A comma separated list of formal parameters enclosed in parentheses. The data types of the parameters in a lambda expression can be omitted. Also the parenthesis can be omitted if there is only one parameter. For example:
TextViewtView=(TextView)findViewById(R.id.tView);tView.setOnLongClickListener(v->System.out.println("Testing Long Click"));
The arrow token ->
A body which contains a single expression or a statement block. If a single expression is specified, the java runtime evaluates the expression and then return its value. To specify a statement block, enclose statements in curly braces "{}"
Lambda Expressions in Android
To use Lambda Expressions and other Java 8 features in Android, you need to use the Jack tool-chain. Open your module level build.gradle file and add the following:
Sync your build.gradle file and if you are having any issue with build tools, you may need to update buildToolsVersion in your build.gradle file to "24rc4" or just download the latest Android SDK Build-tools from the SDK Manager, under the Tools (Preview channel).
As we can see above, using lambda expressions makes implementing a functional interface clearer and compact. Standard functional interfaces can be found in the java.util.function package [included in Java 8]. These interfaces can be used as target types for lambda expressions and method references.
In this post I would like to explain what is software testing and different methods, levels of software testing.
What is software testing?
Software Testing is the process of evaluating a system or its components with the intent to find whether it satisfies the specified requirements or not.
Testing is executing a system in order to identify any gaps, errors, or missing requirements in contrary to the actual requirements.
What are the Levels of software testing?
Software products are tested at four levels:
Unit testing
Integration testing
System testing
Acceptance testing
Unit testing
During unit testing, modules are tested in isolation. If all modules were to be tested together, it may not be easy to determine which module has the error.
Unit testing reduces debugging effort several folds. Programmers carry out unit testing immediately after they complete the coding of a module.
Role of Unit Testing
Assure minimum quality of units before integration into system
Focus attention on relatively small units
Testing forces us to read our own code – spend more time reading than writing
Automated tests support maintainability and extendibility
Integration testing
After different modules of a system have been coded and unit tested:
modules are integrated in steps according to an integration plan
partially integrated system is tested at each integration step.
Role of Integration Testing
Gain confidence in the integrity of overall system design
Ensure proper interaction of components
Integration Testing Strategies
Big-bang
Top-down
Bottom-up
Critical-first
Function-at-a-time
As-delivered
Sandwich
System Testing
Gain confidence in the integrity of the system as a whole
Ensure compliance with functional requirements
Ensure compliance with performance requirements
Acceptance Testing
Testing performed by the customer or end-user himself
to determine whether the system should be accepted or reject
Testing is very important step of software development. We have used unit testing for our project Engelsystem. We are developing new features. Interested Developers can work with us.
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 of the application, while controllers are transient between application states. So, if the controller is a coordinator between the view and the model, then the amount of the logic it has should be minimal.
Directives
Take a look at a very basic AngularJS directive. Let’s name this file appInfo.js as well as create an .html file appInfo.html as in example below.
In this example we create a new directive called appInfo. It returns an object with three options – restrict, scope and templateURL
restrict specifies how the directive will be used in the view. The 'E' means it will be used as a new HTML element.
scope specifies that we will pass information into this directive through an attribute named info. The = tells the directive to look for an attribute named info in the <app-info> element, like this: The data in info becomes available to use in the template given by templateURL.
templateUrl specifies the HTML to use in order to display the data in scope.info. Here we use the HTML in js/directives/appInfo.html.
Then we need to build a structure to directive in our appInfo.html
Of course <h2> and <p> are just examples. You can use here what you only want. The title and developer are controller $scope.elements. Let’s take a look at controller’s content.
In index.html we use only ng-repeat to loop through app element in $scope.apps, and then app-info info=”app”
<div ng-repeat="app in apps">
<app-info info="app"></app-info>
</div>
That’s it. It’s quite a simple example, but it helps me to refactor my code in CommonsNet project and avoid a long, boring, repetitive work while adding new elements to website. It also helps me to implement a feature I have mentioned above. I’am going to tell more about it in next blog post. Stay tuned!
Google Analytics gives a detailed insight about your website including how many people visited, time, demography, how many returning visitors and all such information. It’s a real important tool to have. All you have to do is create a Universal Analytics Tracking code and use it in a javascript code. The only problem is this code needs to be present in all the pages that you wants the analytics data for. So changing any part of the javascript code anytime, needs to be changed in all .html files.
However, there is a better way of doing it in flask. Create a file base.html and write the code:
Then using the property of jinja2 template extend this file in all the html files, i.e. {% extends ‘gentelella/admin/base.html’ %}. Thus now when you make some change in the above mentioned javascrpt code, you need to change it only in one place and it is changed in all other places.
In this post, I will talk about running multiple containers at once using Docker Compose.
The problem ?
Suppose you have a complex app with Database containers, Redis and what not. How are you going to start the app ? One way is to write a shell script that starts the containers one by one.
docker run postgres:latest --name mydb -d
docker run redis:3-alpine --name myredis -d
docker run myapp -d
Now suppose these containers have lots of configurations (links, volumes, ports, environment variables) that they need to function. You will have to write those parameters in the shell script.
Won’t it get un-manageable ? Won’t it be great if we had a cleaner way to running multiple containers. Here comes docker-compose to the rescue.
Docker compose
Docker compose is a python package which does the job of handling multiple containers for an application very elegantly. The main file of docker-compose is docker-compose.yml which is a YAML like syntax file with the settings/components required to run your app. Once you define that file, you can just do docker-compose up to start your app with all the components and settings. Pretty cool, right ?
So let’s see the docker-compose.yml for the fictional app we have considered above.
Once this file is in the project’s root directory, you can use docker-compose up to start the application. It will run the services in the order in which they have been defined in the YAML file.
Docker compose has a lot of commands that generally correspond to the parameters that docker runaccepts. You can see a full list on the official docker-compose reference.
Conclusion
It’s no doubt that docker-compose is a boon when you have to run complex applications. It personally use Compose in every dockerized application that I write. In GSoC 16, I dockerized Open Event. Here is the docker-compose.yml file if you are interested.
PS – If you liked this post, you might find my other posts on Docker interesting. Do take a look and let me know your views.
You may want to introduce new developers into your project. This is either to get help or to allow the community to guide the project. In this blog post, I want to present how I believe an introduction can be designed.
(1) A Landing Page
For the knitting projects, I have designed a landing page, knitting.fossasia.org. It features all related projects with links to documentation and source code as well as a short summary what it is about. You can read more about the landing page in this blog post.
The idea is to to add short snippets of information that allow new developers to explore all available options to enter the projects. This may be contact information, documentation and videos.
(2) Setup Instructions
Especially for the projects I worked on, I created a introduction videos on how to set up your development environment. This could have been in text form, too.
The problem for new developers is often that the start takes a long time. Instead of focusing on the issue they would like to solve, it sometimes takes several hours to set up the environment with lots of possibilities to make mistakes.
In order to speed up the development environment setup, you can provide additional information. The CoderDojo Zen platform has its own landing page for new developers and a description of the steps to take to setup the development environment. In the case of the knitting projects, we have YouTube video tutorials which show the necessary steps.
(3) Introduction Events
You can participate in events to show your projects to other people.
With the knitting projects, we will participate at the Maker Faire Berlin 2016.There may be local user groups where you can present the work and the learnings from them.
Google Code-In is an excellent opportunity to allow new young developers to add code to your projects and document them. You can apply as a mentor and add tasks. A first task for beginners may be to get the project running on their computer. Another task could then be to either use it in a special way and document it or to solve an issue which is easy enough.
In the following Google Summer of Code your project can be used again. You can apply as a mentor for your project and help other students to work on what you left behind.
Summary
I listed some ways I will perform to get the projects I worked on into the community. I hope they may have been an inspiration for other people who read this. If you like to contribute new ways, you can comment 🙂
In this article, I will examine what apache is how to setup apache for ubuntu or debian and how to view error logs for apache and how to understand what the logs contain which will be useful for web development.
What is Apache?
Apache is the most popular web server on the internet. It is used to serve more than half of all active websites.
It is fast, reliable, and secure. It can be highly customized to meet the needs of many different environments by using extensions and modules.
Installing Apache on Ubuntu and Debian
If you do not already have Apache installed, you can do so now by issuing the following commands:
sudo apt-get update
sudo apt-get install apache2
If you visit your VPS’s IP address in a web browser, you will get the default Apache index page. We get the following output.
your_domain_name_or_ip_address
It works!
This is the default web page for this server.
The web server software is running but no content has been added, yet.
Looking into apache error.log files
In order to effectively manage a web server, it is necessary to get feedback about the activity and performance of the server as well as any problems that may be occuring. The Apache HTTP Server provides very comprehensive and flexible logging capabilities.
Error.log file
The server error log, whose name and location is set by the ErrorLog directive, is the most important log file. This is the place where Apache httpd will send diagnostic information and record any errors that it encounters in processing requests.
It is the first place to look when a problem occurs with starting the server or with the operation of the server, since it will often contain details of what went wrong and how to fix it.
Explanation of log message
There is certain information that is contained in most error log entries. For example, here is a typical message.
[Sat Aug 20 08:09:38.958885 2016] [:error] [pid 1489] [client 127.0.0.1:40810] PHP Notice: Constant MIN_PASSWORD_LENGTH already defined in /var/www/html/test/engelsystem/config/config.php on line 30, referer: http://localhost/
[Sat Aug 20 08:09:38.958885 2016] The first item in the log entry is the date and time of the message.
[:error] The second entry lists the severity of the error being reported.
[pid 1489] Indicates process Id
[client 127.0.0.1:40810] The fourth entry gives the IP address of the client that generated the error.
Fifth one is error message explaining the error.
Constant MIN_PASSWORD_LENGTH already defined.
File and line number
/var/www/html/test/engelsystem/config/config.php on line 30
Error logs are easy to understand. Using error logs we can easily figure out the problem in your server or your code and fix it.
Apache log files were useful for me during web development project Engelsystem. We are developing new features. Interested developers can work with us.
You must be logged in to post a comment.