Mobile revolution has been started, now right time to build mobile applications for your web projects. This tutorial will help you how to develop native iOS mobile applications using HTML, CSS and Jquery. Apache Cordova is a platform for building native applications and it is providing device APIs that helps you to access native device functions such as GEO location or mobile camera. If you are a Apple Mavericks use just implement the following steps.
Install Node.JS
Install Node.js for NPM packaging support, go to this websitehttp://nodejs.org/download/ download and setup node.js.
Installing the Apache Cordova
Open terminal and execute following command.
$ sudo npm install -g cordova
Create the Application Project
Run a command such as the following to create an app.
$ cordova create MyFirstProject com.example.MyFirstProject HelloWorld
Creating a new cordova project with name "HelloWorld" and id "com.example.MyFirstProject" at location "/Users/SrinivasTamada/MyFirstProject"
$ cd MyFirstProject
Cordova will generate following application files.
Create an iOS Platform
Execute this command.
$ cordova platform add ios
HTML, CSS and JavaScript Project
Now create a simple HTML JavaScript project.
index.html
Contains simple HTML5 code, here you can configure user registration system with RESTful APIs.
Now create a simple HTML JavaScript project.
cs
-- style.css
js
-- jquery.min.js
-- main.js
images
-- logo.png
index.html
...
...
-- style.css
js
-- jquery.min.js
-- main.js
images
-- logo.png
index.html
...
...
index.html
Contains simple HTML5 code, here you can configure user registration system with RESTful APIs.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<meta name="msapplication-tap-highlight" content="no" />
<title>9lessons Demo</title>
<link rel="stylesheet" href="css/style.css" />
<script src="js/jquery.min.js"></script>
<script src="js/main.js"></script>
</head>
<body>
<div id="container">
<img src="images/logo.png" />
<form method="post" action="">
<label>Username</label>
<input type="text" name="user" class="input" placeholder='Username' id="username"/>
<label>Password</label>
<input type="password" name="password" class="input" placeholder='Password' id="password"/>
<label>Email</label>
<input type="email" name="email" placeholder='name@domain.com' class="input" id="email"/>
<input type="submit" value=" Registration " />
</form>
</div>
</body>
</html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<meta name="msapplication-tap-highlight" content="no" />
<title>9lessons Demo</title>
<link rel="stylesheet" href="css/style.css" />
<script src="js/jquery.min.js"></script>
<script src="js/main.js"></script>
</head>
<body>
<div id="container">
<img src="images/logo.png" />
<form method="post" action="">
<label>Username</label>
<input type="text" name="user" class="input" placeholder='Username' id="username"/>
<label>Password</label>
<input type="password" name="password" class="input" placeholder='Password' id="password"/>
<label>Email</label>
<input type="email" name="email" placeholder='name@domain.com' class="input" id="email"/>
<input type="submit" value=" Registration " />
</form>
</div>
</body>
</html>
Copy HTML JavaScript project into www directory .
Install Xcode
Go to Apple application center and download Xcode IDE for iOS development.
Execute platforms -> ios -> HelloWorld.xcodeproj
Now just select iPhone emulator and click play button on left top side.
Input type TEXT usual input type text that display a alphabetical keyboard.
Input type EMAIL iOS display an @ sign on the keypad for more information about mobile input HTML5 Input Types for Mobile.
Use Apple developer account and export final ipa application file.
HTML5 Mobile Frameworks
I strongly suggest use HTML5 frameworks that helps you to create better UX. There are many free frameworks available on web.
Framework7 - HTML Framework For Building iOS Apps
Ionic HTML5 Framework
Jquery Mobile
Sencha Touch
Add Platforms
The same way you can build applications for different mobile operating systems.
Install Xcode
Go to Apple application center and download Xcode IDE for iOS development.
Execute platforms -> ios -> HelloWorld.xcodeproj
Now just select iPhone emulator and click play button on left top side.
Input type TEXT usual input type text that display a alphabetical keyboard.
Input type EMAIL iOS display an @ sign on the keypad for more information about mobile input HTML5 Input Types for Mobile.
Use Apple developer account and export final ipa application file.
HTML5 Mobile Frameworks
I strongly suggest use HTML5 frameworks that helps you to create better UX. There are many free frameworks available on web.
Framework7 - HTML Framework For Building iOS Apps
Ionic HTML5 Framework
Jquery Mobile
Sencha Touch
Add Platforms
The same way you can build applications for different mobile operating systems.
$ cordova platform add android
$ cordova platform add amazon-fireos
$ cordova platform add blackberry10
$ cordova platform add firefoxos
$ cordova platform add windows8
$ cordova platform add wp8
$ cordova platform add amazon-fireos
$ cordova platform add blackberry10
$ cordova platform add firefoxos
$ cordova platform add windows8
$ cordova platform add wp8
No comments:
Post a Comment