 Hi. Thanks for coming and staying. Does everyone in this room know about Genome? For the ones who doesn't know, Genome is a free Linux desktop, and Genome is all about the community. We have people all around the world, and we are building the applications together, and I wanted to give a talk about one of the applications we are working on. First thing, I'm going to be talking about where did the idea come from for the recipe app. Second thing, I'm going to be talking about the design process, and then Matthias is here and he's one of the main developers of the application, and he will give a live demo of the application to you. Actually, this is not a new idea. People in the Genome has always been interested in cooking, and we have a wiki page for the Genome cookbook that dates back to 2007, and people even contribute to recipes there, but for one reason or another, we just couldn't make that thing happen. This year is quite important for Genome because we will be celebrating our 20th year, and we just wanted to make this application happen, so we can give it to Genome as a birthday present. When you do the design work, it's quite important you should be following some kind of structure design process, and for us, the most important thing is to define your goals. Defining your goals is quite important because you just enables you to focus on your design, and for the recipe app, those goals were finding recipes all over the world, and Genome is a big community, and there might be some people that has food allergies, and we want to support those people by allowing them, describing the food restrictions, and we just wanted to share the recipes, sharing recipes, and printing recipes, so you can put them on your fridge, and thinking about your goals, help you defining your focus, and that mostly involves what you are not going to build, as much as what you are going to build. So it's very useful to have the mangos while you are focusing on your design, and constraints are also important. It is like the technology you are using for the resources you have, because based on your resources, you want to drop some of the features you are planning to develop, and the second stage in the design process is exploration. It is a research-based thing, and this involves user research, and looking at the relevant art, and for the Genome Recipe app, we look for the Gourmet application, it's a Genome 2A application, endless cooking application, cave recipes, and BBC Food website, and while you are looking at the existing applications, you should be evaluating them, like what you like about them, and what you don't like about them, and the third thing is, in the design process is to develop your design, and here you can use your notebook, pen, and ruler, or you might use inkscape or sketch tools like that, and here you just have lots of things in your hand, lots of design ideas, concept ideas, and by going through the process, you just narrow them down, and at this stage you can start to do your mock-ups, and but the thing you should be careful that you shouldn't be like detailing everything, every little thing you have, you don't want to detail every little thing your app is gonna do, it should be a high-level thing. It is just a three-step process definition, you are just defining what you are gonna build, exploration, you just explore your problem space, and in the development stage, you just design something, but this is not a linear process, you are just going through back and forward in this process, and while you are doing this, you just rerun your goals here, and once you want to design an application for a platform, you need a design language for that, and for GNM it's Hic, this is our application icon, and our visual designer, Jakub, wanted to do this for us, and those are the first sketches he has done in the beginning, but at the end we have this logo, and we have the stickers here, you might want to get them at the end of the presentation, and I will just walk you through the screens we have, I just wanted to put my mock-ups and the actual design we have right now, so you can see that how this evolved by time, and this thing is quite similar to what we have for the GNM software application, we just want to keep the things similar as in the GNM, and this is for the cook it later feature, you just went on the recipe detail page, once you press the button for the cook it later, you just, the ingredients on the recipes are added to your shopping list, and you may print them and you may go with them to the market, and cuisine page, it was one of the goals while we are working on it, because GNM is a comic sitting, and we have people all around the world, and we want to categorize those countries, but countries we just want to categorize those things, and for the chefs page, so people can explain them here, can explain themselves here, this is just for adding a new recipe page, and we have the restrictions, food restrictions, the data restrictions, and the spiciness level as well, and on the recipe detail page, we have start cooking button, once you start cooking button, a full view appears on your screen, and by the full view, you can just follow your process step by step, because you might have like messy hands, and you might, you can just your one hand like going through the screens here, and this is the UI reveal that is done in Bruno last week with Matias, Thomas, and Jakub, and they came the idea that it is quite difficult to add a new recipe on our screen and editing as well, so we are planning to simplify this process, and it will be done by time, so if you want to see the details for the recipe app, you can go for the project page, and those are the people that contributed to the recipe app, and I wanted to thank them all, so I'll slide them all. Can you hear me? Okay, now let's see, we can also see something. It might work, so this is a live demo, and that's always the fun part, and something we feel, but I hope you all enjoy that, I always enjoyed, so let's switch this to mirroring. It might still work, that's the hard part, right? After that it gets easier. So I'm Matias, hi everybody, I've done most of the coding on this application, and I was going to do a bit of a live demo here, and see if this actually works, if I can find my application. So as I've been said, she showed the paper mock-ups that I started working from initially, and that was back in October, and it was the first step I tried to implement just what was in those mock-ups, pretty much as accurately as I could, and this is how the application looked, I guess mid-November, so after like three or four weeks of working on it, and I just clicked through a few things here to show some things. There's quite a lot of functionality there already, like we have this recipes landing page in place, we have the cuisines page, we actually even have an ingredients page that is no longer there, I'll talk about that in a minute, but first I can dive into this here, this is the original details page for an individual recipe, and just arrange things on the screen somehow here, and functionality is actually in place here quite a bit, there's like an image switcher here, so you can have multiple images for each recipe, and this is actually something I'm a little proud of, you can say I want to serve six people instead of four, and then the ingredients list actually gets scaled up, so that's neat, and then there's the start cooking button that Evan talked about, but this was the initial idea, just a quick sketch for what we could do for supporting people when they actually went to cook this recipe, so we came up with this idea of having a checklist where you can say, okay, I've gathered my ingredients, now I've preheated the oven, and I've followed all the instructions, and now I can set the timer, and then I'll be done, so that was like a very quick idea for supporting cooking, and yeah, I mean, I got that implemented relatively quickly, oh, time's up, okay, let's see what else, and now I'll switch to the application as it looks today, and actually go to the landing page again, and I think it looks clearly more refined, so after implementing the original mock-ups, we went over basically every part of the application with Jacob and Evan and revisited the initial design and came up with some nicer visuals for the tiles and arranged everything neatly in three columns and all these things that make it look good, and you can, as Evan said, this is the landing page looks kind of similar, it looks and feels similar to the landing page of other GNOME applications, like this is the GNOME 3 application style, I would say, you can just start the type and search will happen like this, so this is the search results, and I wanted to find this recipe because this is one I can actually play around a little bit with, so this is again the recipe detail view, but you can see it looks clearly more organized now than it was back then, and the neat scaling feature is still there, so if I do that, it works again, awesome, and we have the images here, we actually have like a full screen, lightbox for the images now, so you can actually see in detail and you can go through them, kind of expect the functionality, I guess. What else here? There's the ingredients list, you can see that we can actually split the ingredients list in separate sections, like there's a segment for the dough and then you can have a different ingredients list for the toppings, and the shopping list feature or cook later feature that we mentioned is now called buy ingredients just because it's more obvious that that's what it does, but I'm not gonna click that now, I'm gonna click on edit, so this is the edit view for this recipe now, and I just wanted to very quickly show that I can actually change this here, maybe I want to say, oops, this is gold off screen, yeah, this is gold off screen, that's gonna be bad, see if I can bring this down, actually you may recall this pitted, and so that works, editing works, and if I scroll down here, this big text field at the bottom here is where you enter the main part of the recipe, the instructions for what you're actually gonna do, and originally we just had a plain text field for that, and people were writing their text there, and everybody's kind of itching to do some formatting there, so you want to make it a sequence of steps, and maybe actually put some images there and help to use it that way, and we try to support this now a little bit by actually defining a kind of wiki like mini syntax here, and that's explained here, and we decided to not hide this from the user, but actually just put it in the text here so you can actually see the markup so people can learn how to enter that menu if they want, but we do have buttons to support that, and it's a little bit, maybe an inspiration from good type, you have this edit view here, but you can also switch to preview, and then you see how it's gonna look in the actual cooking mode, and you can step through this here, so this is the sequence of steps that we entered, and there's a timer here, so you can actually add timers to this, and if I click the start button, it'll actually start ticking down slowly, so that's all functional, and oops, now I forgot a picture here in this step, so I can go back to the edit view and actually add that picture, so we add this one, and if I now go back to the preview, it should be there, hopefully, yes, so that works too, and I think that is almost all I want to demo here, so one more thing, I'll go back to the old view, the old application from back in November, and what I mentioned is that we have up here, we have this ingredients view, which was in the original paper mock-ups that I received, so I had quite a bit of fun actually implementing this, there's like this little alphabetical sidebar here, you can click and it'll like nicely animate and things like that, so I spent like a weekend on that, but we couldn't really figure out how to make this useful for the overall goal of the application, so we also are operating on the deadlines here because we want to have this basically ready for GNOME's 20th birthday, so it needs to be in GNOME 3.24, which is gonna be released in mid-March, only a few weeks left, so we decided to cut this from the application, it's no longer in the, it's no longer in the, I can see it here, I need to go back to the menu, so no longer there, sometimes you have to cut a feature to like make the deadline, right, and again that's basically what I wanted to show here, so I hope you enjoyed it. And I guess then we can ask for questions. Do you want to, we have to pass this back and forth, I guess. For any questions, yes. What do you use to do it? Right, so yes, I'm one of the main GTK maintainers, so obviously I'm using GTK and I'm very familiar with it, so I don't necessarily need an IDE to like get something like this put together, but part of my motivation for working on this was to, sorry, I repeat the question, I forgot this, oh, I'll go back, I'll start over. So the question was, what tools did I use to develop this? Did I use an IDE for this, or did I just like use VI? To be honest, most of the time I just use VI because that's what I've gone up with and what I'm familiar with, but part of my motivation for working on this was testing a lot of new things that we develop in GNOME, like sandboxing with Flatpak and GNOME Builder and GTK3, new widget tree and things like that, so I did actually make a conscious effort to try and use GNOME Builder for doing some of these things, but it's really hard to teach an old-horse new tricks and I very often just fall back to use VI in the terminal, just, I can't help myself. Did you use JavaScript or which language? No, this is written in C and I mean, it's using a lot of like UI files like XML templates, so the UI is not neatly separated from the functionality, but it's written in C because I'm an old horse. Yes, in the back. We wanted to keep it kind of minimal. You're talking about the image and time, I think, that I showed there. Yeah, we didn't really discuss that much. We could probably, at some point, we probably want things like headlines, headings and more markup for sections. Yeah, I see where you're coming from and we will consider that. I live in Istanbul and he lives in Boston, so we are just communicating online for this project. Like every few days, every few days, we just talk online, yeah, or telegram we are using here. What I did do at some points was like screencasts, just to show functionality as a developer because I'm developing this on Linux. And I have Mac. There's a Mac here and I did actually make it build and work on OSX over Christmas, but initially that was not the case, so yeah. So there's lots of communicating about design and building and things like that. Yeah, lots of screenshots I'll get you here then. Things like that. Any more questions, comments? Peter, yes. Can we expect an importer from other recipe formats at some point? Because I've got about 20-inch recipe that I could easily give you if you want to come. Okay, so I repeat the question, I remember that this time. Will there be an import from other recipe formats? There could certainly be. I mean, I've been working on this as a weekend site project, so I don't necessarily have infinite resources to sink into this, but if somebody were to give me a pet for that, I would be really happy. Currently, we're just importing and exporting a very stupid homegrown format just because I needed to have import functionality early on because we are asking the community to contribute their recipes, so we kind of need to have a way for them to like get them to us, so they need to put them in the application and they export them and they send them whichever way to us. So that was an early priority to have that in place, but having an importer for like more established recipe formats would be awesome if somebody wrote it. Yes, for now? No, they'll start locally, like I have some kind of stupid key file format. Yeah, I will make sure that the application will be able to load the old recipes, I think. If not, you can blame me for that. Yes. We have kind of this idea at Genome as a Genome cookbook and it takes back to 2007 and we have an upcoming birthday for the Genome and we wanted to Genome this as a birthday present. That's the thing, yeah. It's a really long-standing idea to have this kind of application in the moment. It just never happened. We're trying to make it happen now. How was working between not in the same city and having to sort of do lots of applications? How was that? Was it easy? Was it difficult? We also have one designer in Czech Republic and it was like, for example, three of us were not available at the same time so sometimes Matias was talking to me, I was talking to him and then he was talking to Jakub and it was kind of a difficult communication but we just made it happen at the end, yeah. Because I really have like working like crazy so I just couldn't have that much time to have it to set up a call at the same time but it happened at the end, yeah. Yeah, I think we had like one or two hangouts all three together to just sync up and see where things stand and the starting point for this application was actually at Guadaga, I believe. You sat down with Jakub to like talk to your mock-ups so there was some initial face-to-face meeting at least and some sync up at various points via hangout, yeah. All right. No further questions, I guess? Everybody's welcome to come up here and grab a sticker as long as they last. I would ask everybody who takes a sticker to maybe try the application and if you submit a recipe, that would be really awesome.