Getting Started with App Developement
DIVING IN...
Every creative programmer / designer wants to have an iPhone app of their own. However, it is not that easy. First of all, you need a Mac (which is the biggest problem). And then, you need to have a good working knowledge of C# as well as the iPhone SDK.
Fortunately, Apple is a big supporter of HTML 5 (ever wondered the absence of Flash on iOS devices?). Hence, there is an easy way to get your app on an iPhone / iPod Touch (and even iPad, but I don't have much experience with it, though it should be quite similar) in a matter of minutes. However, this will be a web app, and will not appear on the App Store. It will have to be downloaded directly from the website where it is hosted and directly on to the device (you will know how-to by the end of this hub).
So, what is a web app? In principle, it is just a website. It can be viewed on any device. All you need is a web browser. However, since we are focusing on iPhone apps, we will customize our app for that (everything will remain same for every device but the dimensions!). One of the biggest advantage of web apps is their cross platform nature. You can reuse the same code, and all you will have to do is maybe change the app dimensions and a few design elements for different devices.
GETTING THE CODE READY
First of all, what differentiates a web app from normal websites? It of course has some code which interacts with the iPhone to make it capable to be called a web application.
For this, we need to add some lines of code to the head section of out HTML document.
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0"/> <meta name="apple-mobile-web-app-capable" content="yes"/>
The above two lines of code declare your HTML file as an iPhone web app. Since it is just a website, the iPhone opens it in the Safari web browser. These lines tell Safari to treat it like a web app and not let the user scale it (as Safari supports pinch to zoom, but we don't want that).
<meta name="apple-mobile-web-app-status-bar-style" content="black"/>
The above line tells Safari to hide the address bar and the bottom bar so that all of the screen space is available to the app and of course, so that it looks like a standalone app rather than something opened in a web browser.
<link rel="apple-touch-icon" href=""/>
The above line defines the app icon which you want to see on the iPhone home screen. The value of the href attribute, though left blank here, should be the location (URL address) of the image in PNG or JPEG format. It needs to be a square of dimensions 57px X 57px. You needn't worry about the rounding of the corners. iPhone will take care of that, and even add gloss to your icon.
For my Tic Tac Toe app, I have used this icon (click here to view).
<link rel="apple-touch-startup-image" href=""/>
The above line defines the splash image or the start up image. Whenever an app is opened, the user is greeted by an image and then the app loads. This is that image. Just include the location (URL address) of the image in the href attribute. The image dimensions should be 320px X 460px (for the iPhone 5 and iPod Touch 5th Generation, the dimensions will be different for the height. Check what they are and apply them here).
For my Tic Tac Toe app, I have used this image (click here to view).
And we're done! This is all the code you will require for your app to be a web app. Make sure you design the app keeping in mind the dimensions of the iPhone, and define the dimensions of the body tag according to that.
ADDING OFFLINE SUPPORT
You may have noticed that in the Tic Tac Toe app screenshot above, my device is in airplane mode. This means though the app is a website, it does work offline but how?
You may have heard about HTML 5 offline support with application cache. Our web app will use just that.
For this, we will need to create a manifest file (can be done using a simple word editor, like notepad) with the extension .manifest or .appcache (there are others too). For a detailed explanation on this, you can search the web and learn application cache. My Tic Tac Toe manifest file looked like this:
CACHE MANIFEST CACHE: #content mainstyle.css index.html script.js #images TicTacToeWNIcon.jpg WNTicTacToeGameScreen.jpg WNTicTacToeStartScreen.jpg
[You can simply type the above code in a notepad or other text editor and save it as cache.manifest or names like game.manifest, myfile.manifest, etc]
You can link this to your HTML document by providing an attribute in the HTML tag itself.
For example, if the name of your manifest file is cache.manifest, your HTML tag will look like this:
<html manifest="cache.manifest">
Remember that on the web server, you will need to change the MIME type of the manifest file so that it is treated like a text file. This can be done by adding some lines to the .htaccess file on your web server.
GETTING THE APP ON DEVICE
Your web app has been made.
Now the next step is to get it on to your device. For this, open Safari and go to the web address where you have uploaded your app.
Tap the small share arrow icon in the bottom bar.
Select "Add to Home Screen" (this screen may vary depending on the version of your iOS).
Write the name you want and then select Add. Voila! You will find your app on your home screen, just like any normal app, with your icon. Tap on it, and you will see the splash image. Then your HTML page will load.
Although this is not a normal App Store app and will be a little bit slower than normal applications, it is a great way to get started with app development.
HTML 5 is seen as the future of the web, and its cross platform nature makes it an excellent tool to use with. The possibilities here are endless, limited only by your knowledge of web technologies and scripts.
Have fun developing your own app!
This is not a complete beginner's guide (it will be after some time and updates) but it is something.
HELPFUL LINKS
- Tic Tac Toe App
This is the link for the app that you have seen in this hub. For better experience, open this link on your iOS device. - To Do List App
Another example of a web app. For better experience, open the link on your iOS device. - Source Code
The source code for "To Do List" app.
COMPLETE TIC-TAC-TOE APP CODE
HTML Code (below) written in MS notepad and saved as " tictactoe.html "
<!DOCTYPE html>
<html manifest="cachemanifest.php">
<head>
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0"/>
<meta name="apple-mobile-web-app-capable" content="yes"/>
<meta name="apple-mobile-web-app-status-bar-style" content="black"/>
<link rel="apple-touch-icon" href="TicTacToeWNIcon.jpg"/>
<link rel="apple-touch-startup-image" href="WNTicTacToeStartScreen.jpg"/>
<link rel="stylesheet" href="mainstyle.css" type="text/css" media="screen, mobile" title="main" charset="utf-8"/>
<title>
WN - Tic Tac Toe
</title>
<script src="script.js">
</script>
</head>
<body>
<div id="container">
<div id="topbar">
<p id="topbartext">
WinterNurf - Tic Tac Toe
</p>
</div>
<div id="names">
<p class="nametext">
Player 1:  
</p>
<input type="text" class="nameinput" id="name1"/>
<br/>
<p class="nametext">
Player 2:  
</p>
<input type="text" class="nameinput" id="name2"/>
</div>
<div id="mainbody">
<p id="caption">
Press START GAME to play
</p>
<div id="boxcontainer">
<div class="box" id="box1" onclick="Play('b1')">
<p class="boxtext" id="b1">
</p>
</div>
<div class="box" id="box2" onclick="Play('b2')">
<p class="boxtext" id="b2">
</p>
</div>
<div class="box" id="box3" onclick="Play('b3')">
<p class="boxtext" id="b3">
</p>
</div>
<br/>
<div class="box" id="box4" onclick="Play('b4')">
<p class="boxtext" id="b4">
</p>
</div>
<div class="box" id="box5" onclick="Play('b5')">
<p class="boxtext" id="b5">
</p>
</div>
<div class="box" id="box6" onclick="Play('b6')">
<p class="boxtext" id="b6">
</p>
</div>
<br/>
<div class="box" id="box7" onclick="Play('b7')">
<p class="boxtext" id="b7">
</p>
</div>
<div class="box" id="box8" onclick="Play('b8')">
<p class="boxtext" id="b8">
</p>
</div>
<div class="box" id="box9" onclick="Play('b9')">
<p class="boxtext" id="b9">
</p>
</div>
</div>
</div>
<div id="starttab" onclick="Start()">
<p id="starttext">
START GAME
</p>
</div>
</div>
</body>
</html>
CSS Code (below) written in MS notepad and saved as " mainstyle.css "
body
{
margin:0px;
padding:0px;
overflow:hidden;
background-color:#fff;
}
#container
{
width:320px;
height:460px;
background-color:#ddd;
}
#topbar
{
margin:0px;
padding:5px;
width:310px;
height:20px;
background-color:#220022;
}
#topbartext
{
margin:0px;
margin-left:10px;
margin-top:3px;
color:#ccc;
font-family:arial;
letter-spacing:1px;
font-size:15px;
text-shadow:0 1px 1px #000;
}
#names
{
margin:0px;
padding:5px;
width:310px;
height:75px;
background-color:#212121;
box-shadow:inset 0 2px 1px #000;
}
p.nametext
{
margin:0px;
margin-left:20px;
margin-top:10px;
font-family:arial;
font-size:15px;
color:#888;
text-shadow:0 1px 1px #000;
float:left;
}
input.nameinput
{
margin-top:11px;
border-radius:10px;
width:195px;
height:14px;
border:1px solid #000;
background-color:#444;
color:#ccc;
}
#mainbody
{
width:310 px;
height:295px;
padding:5px;
background-image:url('WNTicTacToeGameScreen.jpg');
}
#starttab
{
width:310px;
height:30px;
padding:5px;
background-color:#212121;
box-shadow: inset 0 2px 1px #000;
}
#starttext
{
color:#888;
margin:0px;
margin-top:7px;
text-align:center;
font-family:arial;
font-size:15px;
letter-spacing:1px;
text-shadow:1px 1px 1px #000;
}
#boxcontainer
{
width:231px;
height:231px;
margin-left:auto;
margin-right:auto;
margin-top:12px;
}
div.box
{
width:57px;
height:57px;
background-image:-webkit-linear-gradient(top, #000, #555);
float:left;
margin:10px;
opacity:0.7;
border-radius:5px;
}
p.boxtext
{
text-align:center;
color:#fff;
font-family:arial;
font-size:20px;
margin-top:16px;
text-shadow:0 2px 1px #000;
}
#caption
{
margin:0px;
margin-top:13px;
text-align:center;
font-family:arial;
font-size:15px;
font-weight:bold;
color:#bbb;
text-shadow:0 2px 1px #000;
}JavaScript Code (below) written in MS notepad and saved as " script.js "
var count = 0;
var name1;
var name2;
function Start()
{
count = 1;
document.getElementById("b1").innerHTML="";
document.getElementById("b2").innerHTML="";
document.getElementById("b3").innerHTML="";
document.getElementById("b4").innerHTML="";
document.getElementById("b5").innerHTML="";
document.getElementById("b6").innerHTML="";
document.getElementById("b7").innerHTML="";
document.getElementById("b8").innerHTML="";
document.getElementById("b9").innerHTML="";
name1 = document.getElementById("name1").value;
name2 = document.getElementById("name2").value;
document.getElementById("starttext").innerHTML="Restart";
DisplayPlayer();
}
function Check()
{
var b1 = document.getElementById("b1").innerHTML;
var b2 = document.getElementById("b2").innerHTML;
var b3 = document.getElementById("b3").innerHTML;
var b4 = document.getElementById("b4").innerHTML;
var b5 = document.getElementById("b5").innerHTML;
var b6 = document.getElementById("b6").innerHTML;
var b7 = document.getElementById("b7").innerHTML;
var b8 = document.getElementById("b8").innerHTML;
var b9 = document.getElementById("b9").innerHTML;
if ((b1 == b2) && (b2 == b3) && (b1 == 'X')
||(b4 == b5) && (b5 == b6) && (b4 == 'X')
||(b7 == b8) && (b8 == b9) && (b7 == 'X')
||(b1 == b4) && (b4 == b7) && (b1 == 'X')
||(b2 == b5) && (b5 == b8) && (b2 == 'X')
||(b3 == b6) && (b6 == b9) && (b3 == 'X')
||(b1 == b5) && (b5 == b9) && (b1 == 'X')
||(b3 == b5) && (b5 == b7) && (b3 == 'X'))
{
count = 0;
document.getElementById("caption").innerHTML=name1+" wins";
}
else if ((b1 == b2) && (b2 == b3) && (b1 == 'O')
||(b4 == b5) && (b5 == b6) && (b4 == 'O')
||(b7 == b8) && (b8 == b9) && (b7 == 'O')
||(b1 == b4) && (b4 == b7) && (b1 == 'O')
||(b2 == b5) && (b5 == b8) && (b2 == 'O')
||(b3 == b6) && (b6 == b9) && (b3 == 'O')
||(b1 == b5) && (b5 == b9) && (b1 == 'O')
||(b3 == b5) && (b5 == b7) && (b3 == 'O'))
{
count = 0;
document.getElementById("caption").innerHTML=name2+" wins";
}
else if (count == 10)
{
count = 0;
document.getElementById("caption").innerHTML="Draw!";
}
}
function DisplayPlayer()
{
if (count != 0)
{
if ((count == 1) || (count == 3) || (count == 5) || (count == 7) || (count == 9))
document.getElementById("caption").innerHTML=name1+"'s turn";
else
document.getElementById("caption").innerHTML=name2+"'s turn";
}
}
function Play(id)
{
var x = document.getElementById(id).innerHTML;
if ((count != 0) && (x != 'X') && (x != 'O'))
{
if ((count == 1) || (count == 3) || (count == 5) || (count == 7) || (count == 9))
document.getElementById(id).innerHTML='X';
else
document.getElementById(id).innerHTML='O';
count++;
DisplayPlayer();
Check();
}
}~ Written by Akashdeep Singh & Lakshya Gupta @WnCoder
