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>
 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 = ""
 136 [18:35] <rickspencer3>         url += q
 137 [18:35] <rickspencer3>         url += "&sa=Search"
 138 [18:35] <rickspencer3>
 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>
 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
 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 file.
 203 [18:52] <rickspencer3> Open
 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>
 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

MeetingLogs/openweekKarmic/ScratchItch (last edited 2009-11-03 01:25:19 by 99-21-107-94)