HackADay needs an app... and I want to build it.
Well, I was hoping to have a lot more to add today, but the learning curve with Quartz Composer has definitely been steeper than I expected. I've ran into an issue with the scroll patch, in that it won't let me position content where I want it... and after lots of research and troubleshooting, I've just decided to build a scroll patch on my own. When (or if) I get it done, that will be my next post.
New update: I've got most of the custom scroll done. There are two feedback loops that I need to fix to get this thing off the ground. The only issue is that my wife and I am heading to Burma without my laptop on June 5 and won't be back in Thailand until June 15. So this project is going to be on hold for a bit.
Sorry for the delay, after getting back from Burma, I came down with a pretty bad cold, then went to Koh Tao for some diving lessons for a week, then the cold came back again.
The first big step is going to work on the networking portion of the app. It is absolutely critical that the app be capable of handling all of the potential pitfalls when it is downloading data from HackADay. So my next post on this project should be discussing this project.
So the last thing that I talked about was making a video. I needed to find a program that I could use to both create animations for my app mock up and record the those animations.
After making the decision and downloading the necessary software and getting it setup, I then proceeded to make my first mockup app video. I wound up having to use QuickTime's ability to do screen recordings to make the video, because Quartz Composer (which hasn't had an Apple update since 2007, I think I read) only puts out videos in .mov format, which nothing except QuickTime v7 can read and play back. I couldn't get Handbrake to read it, VLC player didn't recognize it, and I couldn't find any other solutions, outside of paying a ton of money to get QuickTime v7 Pro.
In the video, I show the Newest Hacks on the opening view scrolling left and right, demonstrating my thoughts on how the user can scroll through the articles in that view.
Now I am currently working on getting a complete video, showing all of the app's future functionality.
Please note that nothing is in cement at this point. The graphic design portion of this app is something I am going to readdress in the future, probably between having a video showing all of the app's functionality and starting the code. I feel that will be a better place to spend time worrying about the app's look and feel, after I have the app's content and user interaction sorted out.
Hopefully, I'll have a lot more to show in a week or two.
Thanks for reading!
So, in entry #3, I talked about the content I wanted in the app, and I talked about how I lost my first round of graphic design work for the project. I took a couple of days off after that, because I just couldn't look at Sketch without getting grumpy. I should have known better, and should have had multiple saves.
But I got back around to finally doing some more work, and here is what I came up with:
Picture 1: Splash Screen. This is the screen that the user sees while the app is initially loading.
Picture 2: Opening View. This is the first view the user will see when the app opens. It consists of the various sections of HackADay that the user might want to read articles from, such as the HackADay Blogs, HackADay Projects, etc.
Pictures 3: Article Detailed List View. If you notice the arrows pointing to the right in the two buttons on the right hand side of the screen in the picture 2, those will take you to the view shown in picture 3 or 4, depending on your personal settings. The app's default mode will take you to picture 3, the detailed list view. This view will show you a list of articles for the category you selected from the view shown in picture 2. [If my explanations get a bit long, don't worry, I'm planning on posting a video of the mockup in action].
Picture 4: Article List View. This view is designed to allow users to see more articles on the screen than they otherwise would with the view shown in picture 3. The tradeoff is that the pictures are going to be smaller than in the the view shown in picture 3.
Picture 5: Article View. This is the view the user will see while reading an article.
Picture 6: Search View. This is the view the user will see if they tap the search button located at the bottom of the screen.
Picture 7: Search View With Keyboard. This is the view the user will see as they are typing in the search bar.
Picture 8: More View. This view gives the user access to similar articles to the one they are currently reading, based on tags, categories, or HackADay's related article list.
Picture 9: Profile & Personalization View. This view gives the user access to his/her profile settings, app settings, and saved content.
Picture 10: Comments Editing View. Note: the other profile edit views look similar to this one, so I will only post this one. You should get the idea of what the Forums and Projects profile views look based off of this.
Picture 11: Share View. This view will allow the user to access various networking sites (Facebook , Twitter, etc), and communication apps (Messages, Mail, etc) to send out the article he/she is looking at.
At this point, I am comfortable with what I've got so far. It definitely isn't complete though, at least not in the sense that I have every view that could come up in the app covered. And yet, I feel like just having still images of the app isn't going to cut it. I'd like to have some video to go along with this.
I came to this conclusion due to a decision I made about a week ago. ...Read more »
As I've already mentioned, my first attempt at building this app had an underwhelming user experience element. This step should fix the problem.
At this point, I did a day or two of research into UI development tools. What I found was that Sketch 3 had been designed with app mockups in mind, unlike Photoshop. The other good news is that I could afford to pay $50 for Sketch 3 and could not afford Photoshop. Also, Sketch 3 had an app that allowed you to view your work on your screen, as you were working on it! And Sketch 3 has a simpler interface for those of us who are not graphic designers. So I settled on purchasing Sketch 3 in the the App store.
After downloading Sketch 3, I jumped in feet first and designed a whole bunch of UI views in the program. And after 3 weeks of a steep learning curve, I promptly lost all my work on the graphic design views. I was able to keep the content views, which are the backbone of the project at this point.
Picture 1: Opening View Content
Picture 2: Article List View
Picture 3: Article Detailed View
Picture 4: Article View
Picture 5: More View
Picture 6: Video and Image Views
Picture 7: Profile and Settings View
There were some more views, but I think you get the point. Some of the views have changed a little as well. The main goal was to figure out what the app content was, and what views the content would be placed in.
Views with Graphic Design
Picture 1: The opening screen. From here, the user could scroll left and right to see the contents of the section they are looking at. Also, the user could scroll up and down between sections. The sections were:
-Newest Hacks (the opening page on HackADay) (Sorted by date, earliest to shortest)
-Projects (from HackADay Projects) (Sorted by most "Skulled")
-Featured section (Sorted by date, earliest to shortest)
-HackADay columns (Sorted by date, earliest to shortest)
-HackADay videos (Sorted by date, earliest to shortest)
Picture 2: Shows a list view of one of the sections mentioned above. If the user is only interested in viewing one section, say the Newest Hacks section, then they could select that section by tapping the arrow pointing right on that section header on the front screen. There were two ways to view this list. The first way (shown in Picture 2) is a title focused view, with the image minimized. But not all readers will respond positively to this. So I also made the view shown and discussed in Picture 3.
Picture 3: When I showed my wife the list view like the one above, and the ones you can see in entry #2, she said that she didn't like them too much. She said that she responded much better to visuals than she did to text. Around the same time, I happened to be browsing Steam's mobile site on my phone, and I saw a solution to my wife's thoughts. (I've posted a screen shot of this in picture 4). I made the pictures the focus of the cell and added the title/author/date/article intro below the picture. So now you have an interesting picture, a title, and a short intro to grab the reader's attention!
Picture 4: A screen shot of the Steam mobile web page. This was definitely the inspiration behind the solution to my wife's concern's about people responding better to photos than they would to text.
Picture 5: Article View
Picture 6: Search View:
Picture 7: More View. This view is designed to let users find other articles similar to the one they are reading. They can find similar articles based on the current article's tags, categories, or the related articles listed by HackADay.
Picture 8: Profile & Settings. This view is designed to allow the user to save their various HackADay profile settings in one place. The user may have up to 3 different profiles associated with HackADay. There is the Comments profile, the Projects profile, the Forum profile, and there is a potential...Read more »
This entry should be significantly shorter than the first one. What I want to talk about in this post is the app development process and the tools I am going to use along the way.
It is critical for any project to have a design process. Without a design process, a project is virtually guaranteed to fail. There is too much that can go wrong throughout the course of building the project. That being said, let's look at the app development guide that Apple has posted to help app developers build a successful app.
1) Define the concept.
Some questions to help with this:
Who is your audience? - My audience is people like me! People who are interested in the creative process, engineering, hacking, DIY, etc. People who want to know how things work, and how they can use that knowledge to build other fun and exciting tools and toys.
What is the purpose of your app? - The purpose of my app is to make a richer mobile experience for HackADay readers. I plan to bring the standard HackADay experience to mobile readers, and to it by adding features that aren't available on the the website.
What problem is your app trying to solve? - As exciting and thought provoking as the HackADay website is, the reading HackADay on a mobile could be better.
What content will your app incorporate? - This is easy. The app will incorporate any data that could be found on a web page - But the main three types of content are text, image, and video.
2) Design & define the UI (user interface).
3) Implement the behavior.
4) Incorporating the data.
The next step is to talk about designing and defining the UI. That is going to get it's own post.
Being that this is the first post for this project, I guess I should get into the idea first.
Does Anyone Want An App?
I am guessing that many HackADay readers would download and use a HackADay app if it was available. But even if no one wants one, I've been waiting since the first day I found HackADay for an iPhone app. And since I want one, that is enough for me.
Why Should I Build It?
Well, the app never came and I got tired of waiting. I realized months ago that I had the time, resources, and inclination to build one myself, so I decided to get at it.
The only problem was that I've never built an app, and wasn't familiar at all with Objective-C or the whole app design process. But I did manage to get an engineering degree in 4 years, surely that means I can figure this out.
This is where everything started to go wrong. I didn’t start off where I should have, and that meant a lot of time moving in the wrong direction. And yet, because I did what I did, I was able to prove to myself that my goal was reachable.
What I Did.
I started off by going to directly to Xcode and focused on learning how to program in Objective-C.
The problem with this is that I had no direction for all the key elements. What were all my different views? What was my app going to look like? What did I want my app to do besides display lists of articles and articles?
Either way, I spent about three weeks learning Objective-C. I definitely didn’t master Objective-C, but I learned enough to be familiar with it, and to be prepared to start coding on my own. If anyone is interested, I used the Big Nerd Ranch as a great learning source.
The next step I took was getting into Xcode, and figuring out how to build an app, connect to a website online, parse the data for what I was looking for, and getting that data to the user.
All of this went pretty well, except that when I took a step back, I realized that my app looked like an amateur had put it together.
Here are some screen shots from my phone:
Picture 1: Icon
Picture 2: Opening screen (With data hand typed)
Picture 3: Opening screen (With data pulled from HackADay by the app)
Picture 4: Article Screen (the screen when you select on of the cells from the list shown in Picture 2)
As you can see, the screen shots aren’t all that exciting. What is exciting (to me at least) is that I was able to write up a very simple app that was capable of connecting to HackADay to obtain and display the desired images!
But after the first two views, I didn’t know what the next step was.I obviously wanted more out of the app. So after some thinking, I realized that I wanted a way to see all of the content that I wanted to display, without having to write up a ton of code.So I started doing some research.
What I found was that I had started the process all wrong.I had no design process in mind (which is a little embarrassing, to be honest). This means that when I got lost in the details or didn’t know what the next step was, I didn’t have a way to step back to look at the entire scope of the project and decide what was next.
So I used Google, and looked for “developing your first app”. And what do you know? The second link gave me exactly what I was looking for! Apple gave a great step-by-step app design process list!
So the next step? Start over, this time with the confidence that
#1: I know that I can get the data I need from HackADay, because I've already done it.
#2: I now have a great step by step list to get from an idea to an app ready for the app store!
I'll focus on that in my next post, I think.