Ubuntu Open Week - Scratch your own itch, learn how to write your own app - Rick Spencer - Mon, Nov 2, 2009
1 [17:59] <akgraner> hey all Next up is Rick Spencer
2 [18:00] <rickspencer3> o/
3 [18:00] <akgraner> his session is all about writing your own application
4 [18:00] <akgraner> using Quickly
5 [18:00] <rickspencer3> akgraner, shall I start?
6 [18:00] <akgraner> take it away!
7 [18:01] <rickspencer3> great
8 [18:01] <rickspencer3> so I want to tell you that *anyone* can write an application that runs on Ubuntu
9 [18:01] <rickspencer3> if you've ever used a paint programming and a word processor, then you can write a program
10 [18:02] <rickspencer3> what I hope you get out of this session is confidence to get started, and a starting place
11 [18:02] <rickspencer3> even Chemists! ;)
12 [18:02] <rickspencer3> I want to tell you that writing applications is *easy* and it's *fun*
13 [18:02] <rickspencer3> :)
14 [18:03] <rickspencer3> let's start from the beginning though
15 [18:03] <rickspencer3> you'll need to install a couple of things to follow along
16 [18:03] <rickspencer3> if you put the following into a terminal, it will install what you need:
17 [18:03] <rickspencer3> sudo apt-get install quickly python-desktopcouch-records
18 [18:04] <rickspencer3> the key thing getting installed here is called "quickly"
19 [18:04] <rickspencer3> While it's installing, I can provide some background
20 [18:04] <rickspencer3> Quickly works with Karmic only, so if you haven't upgraded, I'm afraid you won't be able to follow along
21 [18:05] <rickspencer3> What is Quickly?
22 [18:05] <rickspencer3> well, it's a kind of "template" that created a starting point for an app, so you can just modify the app that is created
23 [18:06] <rickspencer3> the template makes choices for you, so you don't have to go out and research what to use, just use quickly, and you'll have all the deciscions made for you
24 [18:06] <rickspencer3> quickly also has some commands that make certain things easier, that used to be hard, especially making packages to share your application
25 [18:06] <rickspencer3> so, any questions yet?
26 [18:07] <akgraner> <Dig> QUESTION: is Quickly like Glade ? Differences ?
27 [18:07] <rickspencer3> good question
28 [18:07] <rickspencer3> Quickly *uses* Glade
29 [18:07] <rickspencer3> Glade is the tool for modifying the UI for your quickly app, I will demonstrate that shortly
30 [18:07] <rickspencer3> similarly, Python is the language that Quickly uses
31 [18:08] <akgraner> <Chopinhauer> QUESTION: Isn't Glade obsolete? What about GtkBuilder?
32 [18:08] <rickspencer3> akgraner, another good question
33 [18:08] <rickspencer3> Glade is not obslete
34 [18:08] <rickspencer3> GtkBuilder is a new way of writing code in Python for a GUI
35 [18:09] <rickspencer3> essentially, Glade is able to produce the kind of XML that GtkBuilder expects
36 [18:09] <rickspencer3> so Quickly uses GtkBuilder, and Glade uses GtkBuilder, so it all works great
37 [18:10] <rickspencer3> so, we should probably start the demo, but I want to give some credit where credit is due
38 [18:10] <rickspencer3> first, didrocks is the guy who wrote all the hard parts of Quickly, he did the hard work, so now we don't have any
39 [18:10] <rickspencer3> eeejay, kenvandine, and others helped lots too
40 [18:11] <rickspencer3> there's a chat room, #quickly, where you can go ask questions
41 [18:11] <rickspencer3> so, let's get started with the demo
42 [18:11] <rickspencer3> any questions first?
43 [18:11] <rickspencer3> alrighty, let's go then
44 [18:12] <rickspencer3> we are going to use quickly to create a little search utility
45 [18:12] <rickspencer3> Get started by creating an application from the ubuntu-project template
46 [18:12] <rickspencer3> I'm calling it "searchy"
47 [18:12] <rickspencer3> Here's the command to create the application: $quickly create ubuntu-project searchy
48 [18:13] <rickspencer3> This causes a bunch of info to be dumped to the command line, but ends with the application being run.
49 [18:13] <rickspencer3> Note that it's called "Searchy", but otherwise, it's just a stock application.
50 [18:13] <rickspencer3> you can click around, notice that there are menu items, and about box, etc...
51 [18:14] <rickspencer3> so there, we've already create an app, now we just need to edit it to make it do what we want
52 [18:14] <rickspencer3> note that Quickly is a command line tool, so you do use the command line to work with it, but the commands are very easy
53 [18:14] <rickspencer3> If you've closed the application and want to run it again :
54 [18:14] <rickspencer3> $cd searchy
55 [18:15] <rickspencer3> $quickly run
56 [18:15] <rickspencer3> let's edit the UI in Glade, but first, any questions?
57 [18:16] <rickspencer3> ok, I see some questions, let me grab them
58 [18:17] <rickspencer3> QUESTION: Does Quickly just do Python, or does it support compiled languages as well?
59 [18:17] <rickspencer3> QUESTION: Will applications built in Quickly work with both Gnome and KDE? What about other distributions?
60 [18:17] <rickspencer3> QUESTION: What kind of applications should I NOT consider Quickly for? Conversely what applications is Quickly well-suited for development of?
61 [18:17] <rickspencer3> these are all releated, I think
62 [18:18] <rickspencer3> so today, Quickly only supports a Ubuntu Gui application written in python with Gtk
63 [18:18] <rickspencer3> however, we wrote Quickly to support other kinds of templates as well
64 [18:18] <rickspencer3> I am working on some other templates, like one for making games, and one for making Gedit plugins
65 [18:19] <rickspencer3> if someone wanted to do one for Kubuntu, that would be really great as well
66 [18:19] <rickspencer3> so, let's edit the UI now
67 [18:19] <rickspencer3> we should be in the "searchy" directory
68 [18:19] <rickspencer3> so let's launch Glade
69 [18:20] <rickspencer3> $quickly glade
70 [18:20] <rickspencer3> it's important that you run Glade in this manner
71 [18:20] <rickspencer3> if you try to run Glade by choosing it from the menus, and then opening the files it won't work
72 [18:21] <rickspencer3> but if you do it with $quickly glade, it will open all of your UI files in the project, just like magic ;)
73 [18:21] <rickspencer3> so ...
74 [18:21] <rickspencer3> Under the Projects window, switch to SearchyWindow. This is the main window for your application.
75 [18:21] <rickspencer3> Delete the image and the label (image1 and label1) to clear out space in the UI.
76 [18:21] <rickspencer3> In the pallette, under Control and Display, click on the Text Entry control. Then click on the space where the label used to be.
77 [18:22] <rickspencer3> the "pallette" is the list of widgets to the left of Glade
78 [18:22] <rickspencer3> so it's kind of like a paint programming using the fill tool
79 [18:22] <rickspencer3> you pick the widget you want, then you "fill" in the space in your Window
80 [18:22] <rickspencer3> Also, turn off the size request for the window.
81 [18:22] <rickspencer3> Do this by selecting searchy_window in the inspector.
82 [18:23] <rickspencer3> Then click on the Common tab, and unselect Width Request and Height Request checkboxes.
83 [18:23] <rickspencer3> we're almost done editing the UI, but we need to do one thing
84 [18:23] <rickspencer3> we want something to happen when users type into the textbox and click the Enter key on the keyboard
85 [18:23] <rickspencer3> so we want to write some Python code to run when that happens
86 [18:24] <rickspencer3> we do this by sending a "signal" to our code
87 [18:24] <rickspencer3> In Glade, click on the text entry (entry1) to select it.
88 [18:24] <rickspencer3> then in the window down in the bottom right ....
89 [18:25] <rickspencer3> Click in the Hanlder column in the activate row, and type "do_search". Hit Enter.
90 [18:25] <rickspencer3> Make sure that you save, or your changes won't show up when you run the app!
91 [18:25] <rickspencer3> so after you save, you've edited your UI
92 [18:25] <rickspencer3> before we write code to make something happen ...
93 [18:25] <rickspencer3> any questions?
94 [18:26] <rickspencer3> akgraner_ jcastro are there questions?
95 [18:26] <akgraner_> <Dig> Question: Are there going to be 'Delegates' involved in passing data between front-end and back-end ???
96 [18:26] <jcastro> QUESTION:What other templates are there other than Ubuntu-project ?
97 [18:27] <rickspencer3> Dig, the data passing in Glade is not too good atm, so ...
98 [18:27] <rickspencer3> probably just "no" is the simplest answer
99 [18:28] <rickspencer3> but, your signal handler does know what widget fired the signal, so there are ways to pass data
100 [18:28] <rickspencer3> for the other question, atm, there is only the ubuntu-project template, as I mentioned
101 === akgraner_ is now known as akgraner
102 [18:28] <rickspencer3> we would love to see contributions for other templates
103 [18:29] <rickspencer3> let's write a little code ...
104 [18:29] <rickspencer3> Go back to the terminal and type: $quickly edit
105 [18:29] <rickspencer3> This will open your editor (most likey Gedit) with all of the python files for your project
106 [18:29] <rickspencer3> DANGER DANGER, don't dive in and start writing code
107 [18:30] <rickspencer3> you need to set up Gedit a tiny bit first
108 [18:30] <rickspencer3> Before you start, make sure your editor is set up for Python programming.
109 [18:30] <rickspencer3> Python uses spaces and tabs very differently, and it can cause your program not to run, and can be very confusing if you don't set up Gedit properly.
110 [18:30] <rickspencer3> do this in Gedit ..
111 [18:30] <rickspencer3> Go to Edit -> Preferences
112 [18:30] <rickspencer3> Go to Editor tab
113 [18:30] <rickspencer3> Turn on Use spaces instead of tabs
114 [18:30] <rickspencer3> Set Tab width to 4
115 [18:30] <rickspencer3> This will set up Gedit to follow Python standards while coding
116 [18:31] <rickspencer3> alright, now that Gedit is ready for Python code, let's write some
117 [18:31] <rickspencer3> Click on the tab for "searchy".
118 [18:32] <rickspencer3> "searchy" is the main python file for your application. It runs the code for the main window, and is the first file that gets run when you start your app.
119 [18:32] <rickspencer3> notice that lots and lots of code has been generated for you
120 [18:32] <rickspencer3> you just need to add and remove code as you wish to make your app work
121 [18:32] <rickspencer3> remember "do_search"?
122 [18:33] <rickspencer3> we want to create some code to respond to that signal from UI
123 [18:33] <rickspencer3> but first, we need to tell searchy to import a couple of "libraries" that we will need
124 [18:33] <rickspencer3> a library is just some code that comes with Ubuntu that we want to call into and use
125 [18:34] <rickspencer3> Add urllib by adding "import urllib" at line 10
126 [18:34] <rickspencer3> Add webbrowser by adding "import webbrowser" at line 11
127 [18:34] <rickspencer3> to make it easier to follow , I put all the code here:
128 [18:34] <rickspencer3> http://paste.ubuntu.com/262082/
129 [18:35] <rickspencer3> so now
130 [18:35] <rickspencer3> Then at line 82, hit enter a couple of times to add a new function at line 84.
131 [18:35] <rickspencer3> here's what do_search looks like:
132 [18:35] <rickspencer3> def do_search(self, widget, daata=None):
133 [18:35] <rickspencer3> search_words = self.builder.get_object("entry1").get_text()
134 [18:35] <rickspencer3> q = urllib.urlencode({'q':search_words})
135 [18:35] <rickspencer3> url = "http://linuxsearch.org/?cof=FORID%3A9&cx=003883529982892832976%3At4dsysmshjs&"
136 [18:35] <rickspencer3> url += q
137 [18:35] <rickspencer3> url += "&sa=Search"
138 [18:35] <rickspencer3> webbrowser.open(url)
139 [18:36] <rickspencer3> that's Python code I wrote that runs when the "do_search" signal is sent
140 [18:36] <rickspencer3> Notice around line 86, the code uses "self.builder" to get a reference to the text entry that was added in Glade.
141 [18:36] <rickspencer3> Where does self.builder come from?
142 [18:36] <rickspencer3> Well, the ubuntu-project template sets up a relationship between .ui files generated by Glade, and Python *classes* that use those files.
143 [18:37] <rickspencer3> you can see that do_search pulls out the text from text entry on line 86
144 [18:38] <rickspencer3> q = urllib.urlencode({'q':search_words})
145 [18:38] <rickspencer3> that uses the urllib library to build a bit of a URL, in the standard way for web browsers
146 [18:38] <rickspencer3> line 88 - 90 build a url string
147 [18:38] <rickspencer3> line 91 opens the web browser
148 [18:39] <rickspencer3> so we're just telling Ubuntu "use the web browser to open the url that we built using the search terms from the edit field"
149 [18:39] <rickspencer3> then you can add:
150 [18:39] <rickspencer3> self.destroy()
151 [18:39] <rickspencer3> this will make the application close itself
152 [18:40] <rickspencer3> so that's all there is to creating searchy, we probably want to package it now, but first ...
153 [18:40] <rickspencer3> questions?
154 === Dox is now known as Guest92283
155 [18:41] <akgraner> <gQuigs> QUESTION: should daata be data?
156 [18:41] <rickspencer3> ooops
157 [18:41] <rickspencer3> yes, that is a typo
158 [18:42] <akgraner> <Dig> QUESTION: I'm getting this error when i run the app ...
159 [18:42] <akgraner> <Dig> quickly run
160 [18:42] <akgraner> <Dig> File "bin/searchy", line 85
161 [18:42] <akgraner> <Dig> def do_search(self, widget, data=None):
162 [18:42] <akgraner> <Dig> ^
163 [18:42] <akgraner> <Dig> IndentationError: unindent does not match any outer indentation level
164 [18:42] <rickspencer3> hmmm
165 [18:43] <rickspencer3> here is what is causing this
166 [18:43] <rickspencer3> in a nutshell ... Python is finicky about indentation
167 [18:43] <rickspencer3> indention *means something* in Python
168 [18:44] <rickspencer3> the ubuntu-project template uses the Python standard of 4 spaces per indentations level
169 [18:44] <rickspencer3> so if you set up your setting properly, you should be able to fix up the indentation, and make it work
170 [18:44] <akgraner> <Squideshi> QUESTION: Are there any guides or tutorials on building new templates for Quickly?
171 [18:45] <rickspencer3> yup!
172 [18:45] <rickspencer3> didrocks has blogged about this
173 [18:45] * rickspencer3 looks for link ...
174 [18:45] <rickspencer3> here is his blog:
175 [18:45] <rickspencer3> http://blog.didrocks.fr/
176 [18:45] <rickspencer3> you can ask him in #quickly for specific URL
177 [18:45] <rickspencer3> as I say, we would love to see more templates :)
178 [18:46] <akgraner> <A4Tech> QUESTION: Will there be added a template for creating applets in quickly?
179 [18:47] <rickspencer3> sure, if someone makes one, we would certainly include it
180 [18:47] <akgraner> <yltsrc> QUESTION: will other languages supported by quickly?
181 [18:47] <rickspencer3> again ...
182 [18:47] <rickspencer3> Quickly is a fully FOSS project, so we welcome contribution of other templates (and improvements to ubuntu-project template)
183 [18:48] <rickspencer3> I am most passionate about Ubuntu desktop apps, so that's where I will be focusing my energies ;)
184 [18:48] <rickspencer3> let's touch on packaging right quick before we move on
185 [18:48] <rickspencer3> so ...
186 [18:48] <rickspencer3> after you get searchy all working great
187 [18:49] <rickspencer3> you might want to put it on other computers, or share it with other people
188 [18:49] <rickspencer3> traditionally, this has been very very very confusing and hard to do
189 [18:49] <rickspencer3> Quickly solves this problem by creating an application that is designed to be packaged as a ".deb" package
190 [18:50] <rickspencer3> tbh, your app can be packaged as is, but let's do a little work to make it a little better
191 [18:50] <rickspencer3> To make a package with quickly, you'll want to start by licensing your software.
192 [18:51] <rickspencer3> To do this, start by editing the generated file called "Copyright".
193 [18:51] <rickspencer3> this file *won't* be open in your edit by the $quickly edit command, so you'll need to go ahead an open it
194 [18:51] <rickspencer3> Change the top line to have the current year and your name and your email.
195 [18:51] <rickspencer3> So I would make the top line look like this:
196 [18:51] <rickspencer3> # Copyright (C) 2009 Rick Spencer rick.spencer@canonical.com
197 [18:51] <rickspencer3> now we can tell quickly to license all the files like this:
198 [18:52] <rickspencer3> $quickly license
199 [18:52] <rickspencer3> The ubuntu-project template is going to use this to apply the GPL V3 (as no license is given in the command arg) to Searchy python files.
200 [18:52] <rickspencer3> you can use other licenses too, but that's kinda out of scope for the tutorial
201 [18:52] <rickspencer3> Now I need to provide just a little info to quickly so that it knows enough about my project to make a good package.
202 [18:52] <rickspencer3> This info is provided in the setup.py file.
203 [18:52] <rickspencer3> Open setup.py.
204 [18:52] <rickspencer3> Scroll down to the part that says:
205 [18:53] <rickspencer3> ##################################################################################
206 [18:53] <rickspencer3> ###################### YOU SHOULD MODIFY ONLY WHAT IS BELOW ######################
207 [18:53] <rickspencer3> ##################################################################################
208 [18:53] <rickspencer3> you can personalize your package, see:
209 [18:53] <rickspencer3> http://paste.ubuntu.com/262183/
210 [18:53] <rickspencer3> for an example
211 [18:54] <rickspencer3> you can skip that for now if you're following along
212 [18:54] <rickspencer3> when you are ready to make the package, do:
213 [18:54] <rickspencer3> $quickly package
214 [18:54] <rickspencer3> First, it will search through your project for dependencies.
215 [18:54] <rickspencer3> Then quickly package does a bunch of deb magic.
216 [18:54] <rickspencer3> a whole bunch of noisy stuff will be printed out to your terminal
217 [18:55] <rickspencer3> but at the end, you'll have a .deb file in the same directory as your searchy directory
218 [18:55] <rickspencer3> If you double click on the .deb file, you can install it using gebi
219 [18:55] <rickspencer3> then searchy will be in your Applications menu!
220 [18:55] <rickspencer3> if you send someone the .deb file, it will work for them too
221 [18:56] <rickspencer3> that's a good intro, I hope
222 [18:56] <rickspencer3> any questions?
223 [18:56] <rickspencer3> ok, thanks all!
224 [18:57] <rickspencer3> come find me in #quickly or in #ubuntu-desktop
225 [18:57] <jcastro> woo, thanks Rick!
226 [18:57] <akgraner> Thanks Rick