Let’s #BuildAnAppIn1Week

Day 2 to 6 — Let’s code the app (and not the server!)

This post is the third part of a global story that relates how we #BuildAnAppIn1Week. If you haven’t done it yet, please read the first posts HERE.

Don’t worry, you do not need to be a dev. to understand this post!

As we’ve seen in the second post, it is really important to have a good idea of what our app will do and what it will (or at least should) look like in order to start coding/building it.
Which doesn’t mean that you need to spend months imagining your app. The faster you build a first version of your app the faster you’ll get first feedbacks!

Reminder : our app will allow to create group of friends, and then to post a photo in this group and to exchange around this photo. One photo at a time in each group : you add a new photo the old one disappear!

Here are come figures which give you an idea of the work behind an app. But no worries you can do it too! And we’re going to give you some tips in order to make it easier!

Standard architecture of an application

When you build an application you not only build the app you will see and use on your smartphone, there is also these other components that are not visible for the user but which will do lots of jobs in order to provide the app with the necessary informations : server, database, file storage, external APIs (link to API definition), push notification.
Here is a chart that will give you an idea of how the overall system is organized.

So as you can see you normally have to take care of lots of different components but we will give you good tips to make it easier ;)

The server part

A server would normally be developed with a language like Python, Ruby or Java. A language different from the Objective-C you’re going to use for your iPhone application. It’s a big part in a project and can take lots of time in order to have something reliable (that never stops because if it does your app can no more communicate with other applications or save documents), and scalable in order to be able to accept more and more users from the first 10 beta testers to the millions of fans your app is going to have!
And that’s not it! You’ll have to design and build a database with the right model, to maintain this database, to build your push notification system, to find a way to store files like pictures.
It is a lot of work which need you to have lots of different skills.

However I have good news : new services now exist that allow you to take care only of your mobile app! Services that are going to take care of all that other components for you!
But let’s be clear here : this solution is really interesting when most of your work is done on the client (application) side. If you need to do big computation that needs lots of resources you will probably need to build your own server.

In our case the server is used to store information (photos, groups, etc), provide these information when the application needs it, and notice application, through push notification, when new data (e.g. new photo) is available. In this situation the kind of services that take care of the server side can be really helpful and save us lots of time. Time that we will be able to dedicate to our final application.

That’s why for Pikichat we decided to use Parse. Parse is a service that allow you to take care only of your app. It will take care of all the rest for you :

  • Data storage
  • Push notification
  • File storage
  • User authentification
  • And even give you analytics tools!

It’s really a great solution in our case.

Parse is a great solution to only take car of your final app. It provide data storage, push notifications and even analytics tools.

It gives the possibility to many people to build an app very quickly without taking care with all the other stuff. And even better : because it’s its job, Parse do it probably better than you would in terms of reliability and scalability.

Now your new architecture is much more simple. And the only part you still have to take care is the your final product : your app!

If you are interested in, you should go to their website to see how it works and what you can do with it. You have very simple demo projects that will very quickly allow you to give a new dimension to your application! And you know what?! It’s free! I mean while you don’t have millions of people of course.

Client Side

Tools your need to develop an iPhone app

Developping for iOS is not as easy as developing for the web, I mean in terms of tools requirements. There are several tools that you need before you start coding and building your app. Here are the compulsory ones:

  • A Mac
  • Create (and pay for) a Developer account (you can start coding without paying for a developer account, but as soon as you want to start testing you app on your device you will need it)
  • Download Xcode. Xcode is the only IDE that can be used to develop for iOS. You can download it for free in the Mac App Store.
  • And finally, but not least you’ll have to learn Objective-C language. But fortunately there are good sites that provide great tutorials to learn. One that we could recommend is Ray Wenderlich website where you’ll find lots of great tutorials for beginner, indermediate and advanced iOS developers!

Make some choice

When you build an app you’ll have to take decisions regarding your product that will then impact the public you’re going to reach. These decisions really depend on your targeted audience and on the kind of product you want to build.

  • Which iOS version do you target ? Only the last one ? For Pikichat we chose to target only the last version of iOS : iOS7. However you could choose to target iOS7 and iOS6. But you have to take into account that some features that you can use on iOS7 would not be available on iOS6. The main advantage of developing for the iOS platform is that even if you choose to target the last iOS version you still reach the vast majority of iOS users. Which is not the cas when you develop for Android. It’s the famous fragmentation problem.
  • Which devices ? iPhone and iPad ? Only iPhone ? For Pikichat we chose to target only iPhones. And we chose to support both iPhone 4S (and before) screen size and iPhone 5 (and after) screen size. It’s important to have these differents sizes in mind when you build your views. Fortunately Apple provide a tool named “Auto Layout” that helps you build a view that will adapt depending on the screen size.

How an iPhone app is built?

Like lots of visual interface now, iPhone applications rely on the MVC architecture. MVC for Model-View-Controller.

Chart from www.ryanwenderlich.comrepresenting the MVC architecture

In the MVC architecture you have three main components:

  • Model : The objects that represent you application data and provide the tools to manipulate it. For instance, for Pikichat our model would be composed of a Photo class, a Group class and a User class.
  • View : It is the visual side of you application. It is the interface that you’ll expose to your user and on which he is going to interact.
  • Controller : The controller makes the link between your model and your view. It will update the view depeding on your model. In our case if a group has a new member it will say to the view to update and add this member. And it will also listen to the user actions the view will receive in order to update the model. For example if the user post a new photo, the controller will update the group class in order to change its photo.

Since we chose to use Parse, the model is simplified and mainly managed using Parse. Go to Parse in order to see how to use it and how it can help you to manage your model.

One of the big part of building an app is to build the interface. Xcode provides very visual tools in order to create the interface you really want.

And behind all the views you have the controllers. It’s were the big part of your code and the functionnalities of your app will take place.

Test your app

The goal here is to provide the best app possible to your users. One of your goal in order to deliver a great app is to avoid bugs. In order to avoid bugs you have to test your app as much as you can!

You can test your app first during its developement using Unit Tests. A Unit Test is a function that you’ll write in order to test some parts of your code. Every time you want to verify you code works as expected you’ll launch the Unit Test, which will pass… or fail! Unit Tests are really important because they allow you to maintain you app and to be sure that when you modify a part of your code other parts are not impacted. During Pikichat development we haven’t used Unit Tests, however you should definitely use them. You will find more about Unit Tests on the Apple website.

Then when you have developed a part of your app that can be use by someone on a device you can start distributing your app to beta testers. It is important to test your app with many different beta testers in order to see if you have bugs but also to see if users understand how you app works or if you have to make some modifications to the UX in order to provide a better experience to your users.

But beta testing is not so easy on iOS. You have to go trhough many steps before being able to send a beta version to a non developer user. However some tools exist in order to make your life easier. Before you had TestFlight, but it has been bought by Apple and you can’t sign up anymore. However Apple just announced that starting this fall the beta testing will much more easier thanks to the TestFlight integration. But you’ll have to wait this fall in order to see if it can help. For Pikichat we decided to use Crashlytics.

The main service that Crashlytics provides is a powerful bug tracker, but we will talk about that in a next article. Crashlytics now also provide a great way to distribute your app to beta testers. We have been using it because it is easy to use and very powerful. You’ll still have to deal with some heavy Apple stuff before (like getting the UDID, which is the unique identifier of each iPhone, of your beta tester phones in order for them to install your app) but for the distribution part Crashlytics makes it super easy!

Before providing a beta version to your beta testers, explain them that if they want to access to this version, they will have to provide as many feedbacks as possible in order for you to improve the app and to fix bugs or bad UX. It is really important to get the most of your testers.

What’s Next ?

Now that you have developed your app, test it with beta testers, you must be ready to release it to the world! But before that you still have some steps to achieve in order to be able to get some analytics, track bugs, or even prepare the release of your app on the App Store. We’re going to talk about all these important steps in our next article.

To be aware when the next article is out stay connected with us on Twitteror Facebook and you can also access all the articles on our “full story” webpage.


Show your support

Clapping shows how much you appreciated Pikichat App’s story.