Our First App

elementary.io Blog Human Interface Guidelines Contributor Guide
Search…
Our First App
In the previous chapter, we created a "Hello World!" app to show off our vala and Gtk skills. But what if we wanted to share our new app with a friend? They'd have to know which packages to include with the valac command we used to build our app, and after they'd built it they'd have to run it from the build directory like we did. Clearly, we need to do some more stuff to make our app fit for people to use, to make it a real app.
Hello (again) World!
To create our first real app, we're going to need all the old stuff that we used in the last example. But don't just copy and paste! Let's take this time to practice our skills and see if we can recreate the last example from memory. Additionally, now that you have the basics, we're going to get a little more complex and a little more organized:
1.Create a new folder inside "~/Projects" called "hello-again".Then, go into "hello-again" and create our directory structure including the "src" folder.
2.Create "Application.vala" in the "src" folder. This time we're going to prefix our file with a small legal header. Make sure this header matches the license of your code and assigns copyright to you. More info about this later.
1
/*
2
 * SPDX-License-Identifier: GPL-3.0-or-later
3
 * SPDX-FileCopyrightText: 2021 Your Name <[email protected]>
4
 */
Copied!
3.Now, let's create a Gtk.Application, a Gtk.ApplicationWindow, and set the window's default properties. Refer back to the last chapter if you need a refresher.
4.For the sake of time let's just put a Gtk.Label instead of a Gtk.Button. We don't need to try to make the label do anything when you click it.
1
var label = new Gtk.Label ("Hello Again World!");
Copied!
Don't forget to add it to your window and show the window's contents:
1
main_window.add (label);
2
main_window.show_all ();
Copied!
5.Build "Application.vala" just to make sure it all works. If something goes wrong here, feel free to refer back to the last chapter and remember to check your terminal output for any hints.
6.Initialize the branch, add your files to the project, and write a commit message using what you learned in the last chapter. Lastly, make sure you've created a new repository for your project on GitHub push your first revision with git:
1
git remote add origin [email protected]:yourusername/yourrepositoryname.git
2
git push -u origin master
Copied!
Everything working as expected? Good. Now, let's get our app ready for other people to use.
Metadata
Every app comes with two metadata files that we can generate using an online tool. Open AppStream Metainfo Creator and fill out the form with your app's info. When you get the section titled "Launchables", make sure to select "Generate a .desktop file for me". Don't worry about generating Meson snippets, as we'll cover that in the next section. After you select "Generate", you should have two resulting files that you can copy.
The MetaInfo File
First is a MetaInfo file. This file contains all the information needed to list your app in AppCenter. It should look something like this:
1
<?xml version="1.0" encoding="UTF-8"?>
2
<component type="desktop-application">
3
  <id>com.github.myteam.myapp</id>
4
​
5
  <name>My App</name>
6
  <summary>Proves that we can use Vala and Gtk</summary>
7
​
8
  <metadata_license>CC-BY-4.0</metadata_license>
9
  <project_license>GPL-3.0-or-later</project_license>
10
​
11
  <description>
12
    <p>
13
      A quick summary of your app's main selling points and features. Just a couple sentences per paragraph is best
14
    </p>
15
  </description>
16
​
17
  <launchable type="desktop-id">com.github.myteam.myapp.desktop</launchable>
18
</component>
Copied!
In your project's root, create a new folder called "data", and save your MetaInfo to a new file called "hello-again.metainfo.xml".
For the purposes of this tutorial, screenshots are optional, but they are required for publishing in AppCenter. OARS data is also required and can be generated with the OARS generator. There are even more optional fields that you can read about.
There are also some special custom fields for AppCenter to further brand your listing. Specifically, you can set a background color and a text color for your app's header and banner. You can do so by adding the following keys inside the component tag:
1
<custom>
2
  <value key="x-appcenter-color-primary">#603461</value>
3
  <value key="x-appcenter-color-primary-text">rgb(255, 255, 255)</value>
4
  <value key="x-appcenter-suggested-price">5</value>
5
  <value key="x-appcenter-stripe">pk_live_xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</value>
6
</custom>
Copied!
You can specify colors here in either Hexadecimal or RGB. The background color will automatically be given a slight gradient in your app's banner.
You can also specify a suggested price in whole USD.
Remember that AppCenter is a pay-what-you-want store. A suggested price is not a price floor. Users will still be able to choose any price they like, including 0.
To monetize your app, you also must include your app's AppCenter Stripe key. This is a unique public key for each app and is not the same as your Stripe account's regular public key. You can connect your app to Stripe and receive a new key on the AppCenter Dashboard.
The Desktop Entry File
This file contains all the information needed to display your app in the Applications Menu and in the Dock. The one generated from AppStream Metainfo Creator looks something like this:
1
[Desktop Entry]
2
Version=1.0
3
Type=Application
4
​
5
Name=My App
6
Comment=Proves that we can use Vala and Gtk
7
Categories=Development;Education;
8
​
9
Icon=com.github.myteam.myapp
10
Exec=com.github.myteam.myapp
11
Terminal=false
Copied!
Copy the contents of your Desktop Entry and save it to the data folder you created earlier. Name this new file "hello-again.desktop".
For more info about crafting .desktop files, check out this HIG entry.
1.Finally, let's add both of these files to git and commit a revision:
1
git add data/
2
git commit -am "Add Metadata files"
3
git push
Copied!
Legal Stuff
Since we're going to be putting our app out into the wild, we should include some information about who wrote it and the legal usage of its source code. For this we need a new file in our project's root folder: the LICENSE file. This file contains a copy of the license that your code is released under. For elementary OS apps this is typically the GNU General Public License (GPL). Remember the header we added to our source code? That header reminds people that your app is licensed and it belongs to you. GitHub has a built-in way to add several popular licenses to your repository. Read their documentation for adding software licenses and add a LICENSE file to your repository.
If you'd like to better understand software licensing, the Linux Foundation offers a free online course on open source licensing​
Mark Your Progress
Did you remember to add these files to git and commit a revision? Each time we add a new file or make a significant change it's a good idea to commit a new revision and push to GitHub. Keep in mind that this acts as a backup system as well; when we push our work to GitHub, we know it's safe and we can always revert to a known good revision if we mess up later.
Now that we've got all these swanky files laying around, we need a way to tell the computer what to do with them. Ready for the next chapter? Let's do this!
Writing Apps - Previous
Hello World
The Build System
Last modified 5mo ago
Export as PDF
Copy link
Edit on GitHub
Contents
Hello (again) World!
Metadata
The MetaInfo File
The Desktop Entry File
Legal Stuff
Mark Your Progress