Since I have Xamarin up and running, I think it’s a great time to dive into what it takes to create an app.
As you’ll see from the graphics files, I am by no means a graphic designer. Perhaps some of you aren’t either, but let’s do this together! Another disclaimer; I’ve so far only developed applications in .NET, Java, C++ or Python. This means I am going to make assumptions and make an a** of myself, while coding.
In the beginning there is an idea, we need to get to the bottom of what it is that we want to build, and then lay out some plans to build it. As an example I’ll be using something I like to do on the weekends, see if I can design and build an app for it using Xamarin. I’m using this example because sometimes you just need to start with something, even if it may seems like a silly idea, don’t get discouraged from building it.
On the weekends I take my trusty bike out on the trails in my town, we’ll be out for a couple of hours rushing down hills, jumping over dirt jumps, having a good time. Even though there are lots of apps already out for trails, it’s good practice to develop something rather than nothing. It’s like an exercise in coding.
To start off with, I’ll share what I use to build this little baby first, before I dive into what it is that I’m building:
- For development: Visual Studio Community
- For graphics: pain.net
- For cross platform app development: Xamarin for Visual Studio
- For inspiration for application design: Dribbble
- Wireframing Template from Dribble
- Some icon resources: Google Android Design Downloads
We’re fortunate these days to have a set of choices for version control, especially hosted version control. As with my previous list there are lots of free versions of version control out there. If you’re new to developing software/apps, get familiar with version control as soon as possible to save yourself a lot of headaches down the line.
- GitHub is very popular and uses Git
- Visual Studio Team Services, by Microsoft
- More options if you want to look into this
Visual Studio can handle both Git and Team Services. At the office we use Team Services because of the added benefit of the Agile Tools. I’m sticking to the free versions in this post to make it as accessible as possible for you.
My head is always on fire with ideas, like right now I have already expanded this app to have all sorts of functions like leader boards, achievements, sign up with social networks, etc. For now let’s start with something small, then later on we can grow it as we see fit. All I want right now is an application that I can use to see trails for mountain biking. There should be a list of trails, then these can go into detail about a selected trail. Let’s have an informal interview with me about what I want this app to do:
Barberousse: Hiya, do you have a minute to talk about this app you want me to build?
Xander: Sure, but I thought we were building it together?
Barberousse: Well yeah of course, but in the end we all know who is going to finish it.
Xander: I take offence to that statement.
Barberousse: We’re off to a great start. Back to the app. Can you tell me a little about what it is that you had in mind for this?
Xander: Even though I am Dutch, and I have cycled quite a bit in my life, this is the first time I have picked up mountain biking. I’m pretty excited about it. It’s been very odd to find all these trails so close by, and if it wasn’t for my riding buddy I wouldn’t have known about them. I get out quite a bit with my family when we go on hikes, but there is this awesome mountain biking trail right in the town that I live in. So having picked up this new hobby, it got me thinking that I would like to have a list of trails quickly at hand in case I want to put my bike on the car and venture out to new trails. It’s a bit like going on a holiday every time I get on the bike and race around the trails.
Barberousse: What I hear, correct me if I am wrong, is that you want an app that lists trails. I also hear that you might go out of your way to get to a new trail, do you want to use navigation to get to that trail?
Xander: Actually, that’s a pretty good idea. If I have selected a trail from the list, and I go look into the details of the trail, I would like it if there was a button that shows me I can navigate to that trail.
Barberousse: If we can touch on this list you are talking about. If I have my phone in my hand, what am I exactly looking at?
Xander: Like I said it’s a bit like going on a holiday, so I would like to take some inspiration from a travel site or app, where the list shows me the destinations. Each item in the list has a small title heading, a picture, and probably some sort of tags underneath it.
Barberousse: These tags you mention, can I click on it to see items with the same tag?
Xander: Yes, that would be great. If it’s possible I’d like to somehow highlight the difficulty of the trail. Aaaaaaand if that is possible can we also show what the type of terrain we’re dealing with?
Barberousse: Obviously you can have it all, but will it make sense in the layout? What is going to be of the highest priority? What if instead of showing the difficulty, we ask what kind of rider we’re dealing with?
Xander: It makes sense, we wouldn’t want to show pro level trails when it’s a new rider.
Barberousse: Another question. Are you mainly focussing on your country, or is this an app you consider for a global market? What I am trying to figure out is, do we show mostly local results, and how local is local?
Xander: I think for now that is taking it a step too far. I’d like to keep it in mind, but for the current purpose of the exercise I think it’s going a little too far.
Barberousse: Perhaps you’re right. Let’s talk about the details screen. What does this look like?
Xander: Now there is a good question. There are quite a few things I want to put into the details screen. There should be a route description, some icons for the difficulty/terrain type, at least one picture of the scenery, if data is available a map of the route, some form of rating, and a commenting system on the route.
Barberousse: Wow! You’re not kidding about this are you?
Turning a talk into tasks
We could have continued the discussion for a very long time, but let us start with something small. Let’s have a look at the discussion and see if we can pull some functionality out of it. From the functionality we can start to break them down into tasks for us to work on. We have quite a bit of information from the discussion, and some things are also missing. Now don’t worry about the missing information right now, we should have someone that we contact during the development and the building of the task list. This person should know the product, so when we have questions about missing information, we can approach them and have a chat to clarify what it is that we’re missing.
Let’s break down some of the things we picked up from the conversation:
- Users can scroll through a list of trails
- Items in the list have a title, an image, an icon to specify the type of terrain and tags
- Users should be asked to specify what kind of rider they are
- A user can click on an item in the list of trails this takes them to a detail view
- The detail view should show a description of the trail, a visual representation of the difficulty of the trail and the type of terrain, a picture of the scenery, an actual map of the route, a rating from other users, and a commentary section.
So far I have more question regarding the tags, and item 3 is a little fuzzy. With the 5th point we can further extract questions like; What kind of terrains are there? What kind of differences in difficulty is there, and how is that generally represented? You’ll also see the 5th point is very big, it would be better for us to break it apart into even smaller sections.
The detail view:
- Should show the title, a picture and a description of the route
- Should show a detailed overview of the difficulty, type of terrain, rating and comments
From breaking things down like this it becomes obvious this view has the potential to have too much information for just one screen. Breaking it down has helped us to narrow down possible solutions for picking design elements for such detailed information.
For now I am going to run with the list that we have, and add them to my board on VisualStudio.com, which looks a little empty right now:
Now that I have added the items, I feel that I need to resolve the 3rd item from the interview list we created. As it turns out what we will need is for a user to create a profile.
Since I changed that I was able to start creating some of the tasks:
I have so many options here to make changes to, I haven’t even changed the iterations yet, or assigned any of the stories/tasks. I could attach wire frames to the tasks if I want, which I probably will too.
There are lots of alternatives to tracking your tasks, some others I have used in the past and liked are:
I have even heard some people using Trello. The point is, find something that works for you, it’s going to make your life easier if you can keep track of what it is that you’re doing, besides clients wanting regular updates of where you are with things.
Now this is only the first part of a series I will be doing on the topic of creating an app. Some topics I am not going to cover, there is already so much information out there on them. Off the top of my head User Experience Design is a term to get familiar with, it could be a little more challenging when you’re just one person making applications. Screen resolutions on Android is something to get yourself familiar with. If you want more in-depth tutorials on using Xamarin, and don’t mind paying for it, have a look at Xamarin University. There is also a Microsoft Virtual Academy resource section for Xamarin. So there are LOADS of resources out there, but I do want you to come back of course and have a look at what we’re going to build. If you have questions, I’m on Twitter, Facebook, and otherwise go to our site to get a hold of me.
Next Time On Start To Finish: Episode #2
On the next post we’ll pay attention to different kind of projects we could start the app off with, and why we will go with the one we’re using. We will go more in-depth into some of the points we’ve discussed in our interview, to get more accurate information about what it is that we’re building. We’ll start off with some wire frames, to make sure our customer is happy and that we understand exactly what it is that he has in mind, before we build something only to find out at the end that it is nothing like he wanted.
See you next time!