Building Native iPhone Applications using HTML, CSS and JavaScript
Wall Script
Follow Me:
Tuesday, August 12, 2014

Building Native iPhone Applications using HTML, CSS and JavaScript

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.

Building Native Mobile Applications using HTML, CSS and JavaScript


Install Node.JS
Install Node.js for NPM packaging support, go to this website http://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.
Building Native Mobile Applications using HTML, CSS and JavaScript

Create an iOS Platform
Execute this command.
$ cordova platform add ios

Go to platforms directory.
Building Native Mobile Applications using HTML, CSS and JavaScript

Now you will find ios application files.
Building Native Mobile Applications using HTML, CSS and JavaScript

HTML, CSS and JavaScript Project

Now create a simple HTML JavaScript project.
cs
-- 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>

RESTful API Tutorials
Create a RESTful Services API in PHP.
RESTful Web Services API using Java and MySQL.


Copy HTML JavaScript project into www directory .
Building Native Mobile Applications using HTML, CSS and JavaScript

Install Xcode
Go to Apple application center and download Xcode IDE for iOS development.
Building Native Mobile Applications using HTML, CSS and JavaScript

Execute platforms -> ios -> HelloWorld.xcodeproj
Building Native Mobile Applications using HTML, CSS and JavaScript

Now just select iPhone emulator and click play button on left top side.
Building Native Mobile Applications using HTML, CSS and JavaScript

Input type TEXT usual input type text that display a alphabetical keyboard.
Building Native Mobile Applications using HTML, CSS and JavaScript

Input type EMAIL iOS display an @ sign on the keypad for more information about mobile input HTML5 Input Types for Mobile.
Building Native Mobile Applications using HTML, CSS and JavaScript

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
Was this article helpful?
Thanks! Your feedback helps us to improve 9lessons.info


24 comments:

  1. Great Post & Simple Explanation

    ReplyDelete
  2. Nice but you can also create application using phonegap tool :) you can see the phonegap base app development using html css

    ReplyDelete
  3. Wow, I always loved your posts, but this one is just the best. Thank you.

    ReplyDelete
  4. Thank you, and could I do these on window 8?

    ReplyDelete
  5. Great, i should try this.

    ReplyDelete
  6. That's an awesome tutorial for beginners! Hope you continue giving more advanced tutorials on it.
    Thanks

    ReplyDelete
  7. Oh U've started with iphone applications using web technologies!! Great!!

    ReplyDelete
  8. Is it likely to PhoneGap?

    ReplyDelete
  9. Awesome post! I can easily develop iOS apps after reading this awesome tut Sri ;)

    ReplyDelete
  10. Phonegap or Apache Callback has been renamed to Apache Cordoba!

    ReplyDelete
  11. it's just the hybrid app not the native one!

    ReplyDelete
  12. how to implement container for the update the modified inputs from a user to the website database. in case of network availability and unavailability

    ReplyDelete
  13. Great ! Thank u so much

    ReplyDelete
  14. hi sir
    some error is there..
    C:\>cd myfirstprojects

    C:\Myfirstprojects>cordova platform add android
    Creating android project...

    C:\Documents and Settings\Administrator\.cordova\lib\android\cordova\3.5.1\bin\n
    ode_modules\q\q.js:126
    throw e;
    ^
    Error: An error occurred while listing Android targets
    at C:\Documents and Settings\Administrator\.cordova\lib\android\cordova\3.5.
    1\bin\lib\check_reqs.js:87:29
    at _rejected (C:\Documents and Settings\Administrator\.cordova\lib\android\c
    ordova\3.5.1\bin\node_modules\q\q.js:808:24)
    at C:\Documents and Settings\Administrator\.cordova\lib\android\cordova\3.5.
    1\bin\node_modules\q\q.js:834:30
    at Promise.when (C:\Documents and Settings\Administrator\.cordova\lib\androi
    d\cordova\3.5.1\bin\node_modules\q\q.js:1079:31)
    at Promise.promise.promiseDispatch (C:\Documents and Settings\Administrator\
    .cordova\lib\android\cordova\3.5.1\bin\node_modules\q\q.js:752:41)
    at C:\Documents and Settings\Administrator\.cordova\lib\android\cordova\3.5.
    1\bin\node_modules\q\q.js:574:44
    at flush (C:\Documents and Settings\Administrator\.cordova\lib\android\cordo
    va\3.5.1\bin\node_modules\q\q.js:108:17)
    at process._tickCallback (node.js:419:13)
    Error: cmd: Command failed with exit code 8
    at ChildProcess.whenDone (C:\Documents and Settings\Administrator\Applicatio
    n Data\npm\node_modules\cordova\node_modules\cordova-lib\src\cordova\superspawn.
    js:135:23)
    at ChildProcess.emit (events.js:98:17)
    at maybeClose (child_process.js:756:16)
    at Process.ChildProcess._handle.onexit (child_process.js:823:5)

    C:\Myfirstprojects>$ cordova platform add android
    '$' is not recognized as an internal or external command,
    operable program or batch file.

    C:\Myfirstprojects>cordova platform add android
    Creating android project...

    C:\Documents and Settings\Administrator\.cordova\lib\android\cordova\3.5.1\bin\n
    ode_modules\q\q.js:126
    throw e;
    ^
    Error: An error occurred while listing Android targets
    at C:\Documents and Settings\Administrator\.cordova\lib\android\cordova\3.5.
    1\bin\lib\check_reqs.js:87:29
    at _rejected (C:\Documents and Settings\Administrator\.cordova\lib\android\c
    ordova\3.5.1\bin\node_modules\q\q.js:808:24)
    at C:\Documents and Settings\Administrator\.cordova\lib\android\cordova\3.5.
    1\bin\node_modules\q\q.js:834:30
    at Promise.when (C:\Documents and Settings\Administrator\.cordova\lib\androi
    d\cordova\3.5.1\bin\node_modules\q\q.js:1079:31)
    at Promise.promise.promiseDispatch (C:\Documents and Settings\Administrator\
    .cordova\lib\android\cordova\3.5.1\bin\node_modules\q\q.js:752:41)
    at C:\Documents and Settings\Administrator\.cordova\lib\android\cordova\3.5.
    1\bin\node_modules\q\q.js:574:44
    at flush (C:\Documents and Settings\Administrator\.cordova\lib\android\cordo
    va\3.5.1\bin\node_modules\q\q.js:108:17)
    at process._tickCallback (node.js:419:13)
    Error: cmd: Command failed with exit code 8
    at ChildProcess.whenDone (C:\Documents and Settings\Administrator\Applicatio
    n Data\npm\node_modules\cordova\node_modules\cordova-lib\src\cordova\superspawn.
    js:135:23)
    at ChildProcess.emit (events.js:98:17)
    at maybeClose (child_process.js:756:16)
    at Process.ChildProcess._handle.onexit (child_process.js:823:5)

    C:\Myfirstprojects>

    ReplyDelete
  15. I think it's a very good tutorial for newbies like me who want to make iPhone apps.

    ReplyDelete
  16. Can u provide tutorial for building Android application using phonegap

    ReplyDelete
  17. When it's on simulator, I only see Apache Cordova Device is Ready. Did I miss something?? Thanks

    ReplyDelete
  18. good tutorial! thanks for share!

    ReplyDelete
  19. I hope this tutorial can help to create iOS applications who doesn't have excellent knowledge of coding language which used in iOS coding. They can easily create iPhone apps if they have some knowledge of HTML, CSS or JAVA Script.

    ReplyDelete
  20. This is a really nice post, You've explained the procedure of creating an iphone application very well, I thank you for that!

    ReplyDelete
  21. Excellent tutorial and very well explained. I would definitely recommend this to anyone starting HTML5 Apps for iPhone

    ReplyDelete
  22. This page describe the best method of developing an app through CSS, HTML and Java script. custom web application development services

    ReplyDelete

Make in India