Developing for Elementary OS – Setup and Compiling

Weekends are a great time to enjoy doing what you like to do, ins’t it? I like to code and read and learn new technologies, experience new computer languages, so past weekend I did something that I was planning to do a long time, try to code something to Elementary OS.

Why the Elementary OS? Well, first of all, I like to try new tech stuff, in second, the Elementary OS makes me feel good to use, a strange feeling, different from using another linux distro. I don’t know, I think I’m in love for it…. ok, let’s stop with this bullshit and back to develop.

elementarylogo

Basically, the Elementary OS is over GTK 3 and uses Vala as main language (or not a language) to develop it’s applications. The Elementary “Getting Starter” section for developers already conduces you through very detailed steps to build your first app and to get involved with this magic enviroment.

In the end you get a very nice hello world simple app and a few resources. It’s a very nice experience to see your work running natively.

hello-world-vala-elementary-os

But I found that the steps are too much detailed, not that it’s bad but sometimes I would like to do it more quickly as I already know many of these basic stuff. Also, in sometimes I felt a little lost, so in the end, I decided to make a simple to-do list of the summary of how to setup a new enviroment to a new project, check it out:

  1. sudo apt install elementary-sdk
    It will install all dependencies to compile your app.
    Just need to do this step at the first time, don’t need it on your second project.
  2. create your project folder and sub-folders:
    ./project
    ./project/src
    ./project/build
    ./project/data
    ./project/po
  3. create the main project file:
    ./project/project-main-file.vala
  4. Add sample content on your .vala file:
    int main (string[] args) {
       Gtk.init (ref args);
       var window = new Gtk.Window ();
       window.title = "Hello World!";
       window.set_border_width (12);
       window.set_position (Gtk.WindowPosition.CENTER);
       window.set_default_size (350, 70);
       window.destroy.connect (Gtk.main_quit);
       var button_hello = new Gtk.Button.with_label ("Click me!");
    
       button_hello.clicked.connect (() => {
       button_hello.label = "Hello World!";
       button_hello.set_sensitive (false);
     });
     
     window.add (button_hello);
     window.show_all ();
     Gtk.main ();
     return 0;
    }
  5. create the CMakeLists file:
    ./project/CMakeLists.txt
  6. Add the basic content on the./project/CMakeLists.txt, copy it from:
    https://elementary.io/pt_BR/docs/code/getting-started#the-build-system
  7. Change the following content on the ./project/CMakeLists.txt to fit your project:
    should be on line: 39 ===> # files we want to compile
  8. Change the following content on the ./project/CMakeLists.txt to define your executable file name:
    should be on line: 17 ===> set (EXEC_NAME “com.github.yourusername.yourrepositoryname”))
  9. Add translation information to the ./project/CMakeLists.txt, copy from:
    https://elementary.io/pt_BR/docs/code/getting-started#Adding-Translations
    (step 2)
  10. Create the translation CMake file file:
    ./project/po/CMakeLists.txt
  11. Add content to the translation file ./project/po/CMakeLists.txt, from:
    https://elementary.io/pt_BR/docs/code/getting-started#Adding-Translations
    (step 3)
  12. Create the base for your shortcut app file:
    ./project/data/com.github.yourusername.yourrepositoryname.desktop
  13. Add content on .desktop file, copy from:
    https://elementary.io/pt_BR/docs/code/getting-started#the-desktop-file
  14. Create the App Center File information, on:
    ./project/date/com.github.yourusername.yourrepositoryname.appdata.xml
  15. Add content on .appdata.xml file, copy from:
    https://elementary.io/pt_BR/docs/code/getting-started#appdata
  16. Create your author’s file info, on:
    ./project/AUTHORS
  17. Add content on ./project/AUTHORS file, copy from:
    https://elementary.io/pt_BR/docs/code/getting-started#legal-stuff
  18. creating cmake information, run on ./project/build:
    cmake -DCMAKE_INSTALL_PREFIX=/usr ../
  19. creating the translations, run on ./project/build:
    make pot
  20. compiling your project, run on ./project/build:
    make
  21. finally run your compiled project:
    ./project/build/executable-filename-defined-on-cmakelists

 

Also, I want to share some useful links that I found it may help you to save some time:

The ValaDoc Reference: The references for all commands and functions that you will need to make a Vala app.

The Vala Tutorials: A lot of tutorial codes, file manipulations, fields, components and more.

Elementary OS sample libs: A preview of the Elementary OS lib components

Elementary OS widgets: The native OS components to use on the apps

GTK3 Icons reference: May be you need this

The DoodleSpark reference to Elementary OS Icons

 

Advertisements

Generic or Custom API, which one to use?

api-538x294

On the past month I was working in a project, that seemed to be easy on the beginning, to create a kind of service that should be the core to delivery coordinates and weather information of trucks, airplanes and ships from an specific company, and, the project has extended a little (as always), because the client also wanted to add some extra resources like user control, sell credits to use the service among other details. In fact, it wasn’t so easy as I expected but in the end, we did it.

Our team made some research before develop anything and concluded that an API should be the right service to complete this project.

An API is not just a JSON or XML content, it’s more than that, it can have many aspects and involve different types of access, depending of the needs, the most common types are the RESTFul service which is more like an architecture over HTTP using different methods to make the operations and the RPC (Remote Procedure Call) service which is usually done via POST method sending payload information to define the operations. It was important to us to know exactly what are the client needs and what we should start to use.

Knowing about these and some other dificulties of building a web service API, we did what any sane developer would do… search on internet for some basic and simple API to build over it our own solution. Well, we didn’t find something easy and simple, but we have found the Zend apigility which is a fantastic API-based architecture and is based on Zend Framework, so we just gave a chance for it.

ag-hero

The apigility tool offered a great tutorial, many sample codes and can be setup almost by the admin enviroment, also, a complete set of answer types, allowed methods, filters, validations and is also documentation ready, it’s really amazing.

intro-first-rest-service-status-settings

But, “with great power comes great responsibilities”. The apigility is based on Zend framework, so it’s implicit necessary to have a good knowledge on the framework to make  a good job, also, we don’t felt like this is the right solution for this project, it was more like “A cannon to hunt a little bird”, and more crucial, the Zend framework would push us to do extra documentation and can be a possible problem in future updates, for the client, as we don’t have too much professionals available with this knowledge. So, we give up of apigility for now.

After some long discussions, following the team instincts, feelings, making some sketches, we kept the idea of making by ourselfs a PHP web service API, which should exactly fit our needs without lack or overage of resources.

There is a lot of discussions around the API standards and if it should be adopted or not, among them are the swagger specification and the Open API Initiative which are supported by many stakeholders like Google, Microsoft, IBM, Paypal and other giants.

We didn’t followed all the standard specifications that we found, but we focused in almost all of them to finish our API.

Was it worth? Well, we were a team of 3 person, we planned, documented, developed, tested and done the service in about 5 days and the client is happy and the project is working, so, the team and the client thinks it was worth it, that’s what matters. 🙂

api-sample-use
Sample use of the tracking API

Pebble Watch App Using JavaScript

I like to code… Every time that I have some some free time in front of the computer or reading about some new language or device, comes that feeling “what nice thing I can code using this?”.

So, this time I picked my Pebble Smartwatch as a playground and decided to make something new and exciting, ansmartwatch app.

Captura de tela de 2017-07-06 11.41.48

The Pebble Smartwatch was on of the pioneers on IoT and still is ahead of many devices of it’s category by providing the best recharge battery cycle, e-paper color display and common resources for everyday needs. Despite it’s discontinuity, after been bouth by Fitbit, the Pebble still is a very useful device with many interesting resources.

As the Pebble OS is not open source and can be disabled anytime by the Fitbit company, there is a very cool project called Rebble that is trying to reconstruct a similar OS for the Pebble device, based on FreeRTOS that is the same Pebble OS Base.

IoT devices usually have they’re code and apps based on C Language or some specific script language and its not different on Pebble Enviroment, it has an SDK and all that standard stuff… but there is also available a great service called CloudPebble which is a framework/compiler/interpreter to build Pebble Apps that accepts to code in javascript language, everything online, isn’t nice?

The CloudPebble is free to use, compile, emulate, generate app packages and it can also integrate with github. The better: You can code in Javascript! 😀

Captura de tela de 2017-07-06 11.45.54

Well, continuing to my new and exciting thing, it’s not really easy to do something new these days, there is almost an app for everything that you can think, so I decided to make something that will be useful for me: a currency app that keeps me updated with the currencies that I want (with a nice skin). Not that there isn’t an app for that, but I didn’t like any of those, I like to have a more “cute” app with some flag icons and nice options.

And the result of this job is here:

 

The CloudPebble makes use of the PebbleKit JS which is a javascript SDK to access native properties of the native Pebble SDK. It was fine to find the documentation for almost all functions that I need, and, testing the app was also not so hard.

I also have to use the YQL Plataform (Yahoo Query Language) to get the information about the currencies. Fortunatelly the YQL is free, have a good documentation and also many good sample codes.

The Currency Exchange App code can be found at my github account and can be downloaded to start a new project on CloudPebble.

Web Development Trends – Jul-2017

There is no doubt that developers/coders are one of the most requested professionals in the market these days. According to a research made by the Michael Page Recruitment Services, software engineers and developers are the most requested professionals on 82% of the countries that the research covered (Brazil, USA, Japan, UK, France, Chile, Mexico, Canada, Australia, Germany, Netherlands, Spain, Portugal, Italy, Sweden, Denmark, Switzerland, Ireland).

You may be thinthing “Yes, I’m in!”, but wait, you must be updated with the new technologies to be a part of this research.

Recently, looking at many job offers on linkedin that pops up on our profiles I surprisingly saw, besides long experience, a lot of new technologies and languages mentioned on the “you must have” session, some of them are obviously needed like HTML5 and CSS3 but some others are a few emerging ones like the javascript frameworks between others.

So, I listed here some of these must have topics that I found (Not in order of importance):

  • HTML5 + CSS3
  • Python, Ruby, Java, PHP (Some are already requesting the PHP 7)
  • PHPUnit Testing
  • ECMAScript 6 (Javascript)
  • Javascript Frameworks (NodeJS, AngularJS, ReactJS)
  • MongoDB, MySQL, SQL Server
  • AWS (Amazon Web Services)
  • Git
  • CollaborativeWeb Enviroments (Docker, Vagrant Box)
  • DevOPs
  • Frameworks (Zend, Laravel, Magento, Symfony)

These are not the only requests that I’ve been seen, but, almost of them was present in the jobs propositions. Anyway, this list shows that the professional of technology, specially the developers, are quickcly discarded if is not up to date with these new trends.

We must keep an eye on everyday news and never think that we already know everything. Opportunity calls people that are ready.

Wireframing Before Code

Starting a new software project is not an easy task for anyone, specially if you have a great imagination and some coding habilities. Sometimes the process of creating a simple app or utility can become a big and infinite nightmare with endless resources and pending ideas if it is not very well planned.

Among the traditional steps of documentation of a software project I usually like to start with the wireframing step (or sketch as some people like to say), where turns it possible to see how the final product will looks like and also bring some insights about the resources that need to be planned on the tasks. This kind of effort can save a lot of time, believe.

boogle-sketch

When wireframing the screens of the project is possible to see some options and some limitations that you only would remember when you see the final product. Also, this effort makes the process of filtering bad ideas that seemed to be good on your mind but did’t going well when applied.

bad-sketch-sample

There is not a standard way for wireframing, it is just a way to put your ideas and thoughts in a way that you and your coworkers can see what you are thinking to do. Follow some design patterns (mobile-patterns, pttrns) are a good choice if you dont know where to begin.

As wireframing is not a trivial task for me, and I just do it when start a new project, I don’t have a favorite app to do this, instead of that I always make a search on internet an find what is trending. On my past project I found the mockflow web app which is a very complete tool with a lot of resources and also have components that are similar to those used on developing, like: bootstrap, htm5, android, iphone, etc.

Mockflow is a paid app and also have a free version, which is limited by the number of pages that you can add on the wireframe project. For a free version is good enough.

 

Elementary OS and the new About page

Reading about the new Elementary OS updates (the distro that I use) I saw the new “About” page which now have better looking than before.

elementary-about-page

But, that default mac computer icon does not fit my computer and as a thinkpad user I am would be proud if the Elementary OS detects my machine’s vendor name… but it’s not what happened. 😦

Following my wishes to have some custom information on that page, I made some research on the elementary code, on github and discovered that the “about” page can load information from an specific file on the computer, so I have try it and that what it looks like now:

Captura de tela de 2017-07-04 11.42.28

Here is how to do it:

  • Open as an Administrator the path /etc
  • Create a file called oem.conf
  • Add the following content on the created file and set your own information and icon:
    [OEM]
    Manufacturer=System76 Inc.
    Product=Meerkat
    Version=meer1
    Logo=/etc/oem/logo.png
    URL=https://support.system76.com

 

The Logo should be a transparent png file, so I used a very nice online tool on editphotosforfree.com to easily remove the background of an image that I found on google.

The descriptions of manufactures, product, version and the link of the URL can be anything that you want to show on the “About” page.