How to create simple Android App?

What is Android?

Android is an open source and Linux-based Operating System for mobile devices such as smartphones and tablet computers. Android was developed by the Open Handset Alliance, led by Google, and other companies.

Android offers a unified approach to application development for mobile devices which means developers need only develop for Android, and their applications should be able to run on different devices powered by Android.

The source code for Android is available under free and open source software licenses. Google publishes most of the code under the Apache License version 2.0 and the rest, Linux kernel changes, under the GNU General Public License version 2.

Why Android ?

• Open source
• Larger developer and community reach
• Increased marketing
• Inter app integration
• Reduce cost of development
• Higher success ratio
• Rich development envirnment

How to built android app?

Tools required for building app:

• Java JDK5 or later version
• Android SDK
• Java Runtime Environment (JRE) 6
• Android Studio

Create Android Application

The first step is to create a simple Android Application using Android Studio. Follow the option File -> New project ->Configure your new project -> selct factor your application is run on -> add activity ->Customise your activity -> and finally select finish wizard from the wizard list. Now name your application as HelloWorld using the wizard window as follows:

SELECT START A NEW APPLICATION PROJECT

ENTER AN APPLICATION NAME

SELECT MIN-SDK VERSION

If all things goes right following screen will appear

Before moving further there few directory to keep in mind

build: This contains the auto generated file which are as Aidl,Build configuration, and R(R.JAVA)

Libs: This is a directory to add the libraries to develop the android applications

src: This contains the .java source files for your project. By default, it includes an MainActivity.java source file having an activity class that runs when your app is launched using the app icon.

res: This is a directory,which is having drawable,layout,values,and android manifest file

res/layout: This is a directory for files that define your app's user interface.

AndroidManifest.xml: This is the manifest file which describes the fundamental characteristics of the app and defines each of its components

Main Activity file

This is default code generated by application.

package com.example.helloworld; import android.os.Bundle; import android.app.Activity; import android.view.Menu; import android.view.MenuItem; import android.support.v4.app.NavUtils; public class MainActivity extends Activity {    @Override    public void onCreate(Bundle savedInstanceState) {       super.onCreate(savedInstanceState);       setContentView(R.layout.activity_main);    }       @Override    public boolean onCreateOptionsMenu(Menu menu) {       getMenuInflater().inflate(R.menu.activity_main, menu);       return true;    } }

Manifest File

<manifest xmlns:android="http://schemas.android.com/apk/res/android"    package="com.example.helloworld"    android:versionCode="1"    android:versionName="1.0" >       <uses-sdk       android:minSdkVersion="8"       android:targetSdkVersion="22" />       <application       android:icon="@drawable/ic_launcher"       android:label="@string/app_name"       android:theme="@style/AppTheme" >       <activity          android:name=".MainActivity"          android:label="@string/title_activity_main" >                <intent-filter>             <action android:name="android.intent.action.MAIN" />             <category android:name="android.intent.category.LAUNCHER"/>          </intent-filter>             </activity>          </application> </manifest>

String file

As default this file will look like this

<resources>    <string name="app_name">HelloWorld</string>    <string name="hello_world">Hello world!</string>    <string name="menu_settings">Settings</string>    <string name="title_activity_main">MainActivity</string> </resources>

Layout file

By default this file will look like this

This is an example of simple RelativeLayout which we will study in a separate chapter. The TextView is an Android control used to build the GUI and it have various attributes like android:layout_width, android:layout_height etc which are being used to set its width and height etc. The @string refers to the strings.xml file located in the res/values folder. Hence, @string/hello_world refers to the hello string defined in the strings.xml fi le, which is "Hello World!”.

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:tools="http://schemas.android.com/tools"    android:layout_width="match_parent"    android:layout_height="match_parent" >    <TextView       android:layout_width="wrap_content"       android:layout_height="wrap_content"       android:layout_centerHorizontal="true"       android:layout_centerVertical="true"       android:padding="@dimen/padding_medium"       android:text="@string/hello_world"       tools:context=".MainActivity" /> </RelativeLayout>

Other interesting things?

Features of Android

Feature	Description
Beautiful UI	Android OS basic screen provides a beautiful and intuitive user interface.
Storage	SQLite, a lightweight relational database, is used for data storage purposes
Media support	H.263, H.264, MPEG-4 SP, AMR, AMR-WB, AAC, HE-AAC, AAC 5.1, MP3, MIDI, Ogg Vorbis, WAV, JPEG, PNG, GIF, and BMP
Web browser	Based on the open-source WebKit layout engine, coupled with Chrome's V8 JavaScript engine supporting HTML5 and CSS3.
Multi-tasking	User can jump from one task to another and same time various application can run simultaneously.
GCM	Google Cloud Messaging (GCM) is a service that lets developers send short message data to their users on Android devices, without needing a proprietary sync solution.
Multi-Language	Supports single direction and bi-directional text.

jQuery and upload file using jQuery

What is jQuery?

jQuery is a lightweight, "write less, do more", JavaScript library.

It is a light JavaScript library. Work of jQuery is to make use Javascript in easy way to develop. jQuery wraps lots of function and method to call them with a single line and to reduce to lines of JavaScript. It also simplifies complicated things from JavaScript like AJAX calls and DOM manipulation.

• The jQuery library contains the following features: 
• HTML/DOM manipulation 
• CSS manipulation 
• HTML event methods 
• Effects and animations 
• AJAX 
• Utilities 

Why jQuery?

There are lots of other JavaScript frameworks out there, but jQuery seems to be the most popular, and also the most extendable.

• Many of the biggest companies on the Web use jQuery, such as: 
• Google 
• Microsoft 
• IBM 
• Netflix 

How to upload file using J Query?

There are two ways to use jQuery.

Local Installation − You can download jQuery library on your local machine and include it in your HTML code.

<script type = "text/javascript" src = "Directory Name/libs/jquery/2.1.3/jquery.min.js"></script>

CDN Based Version − You can include jQuery library into your HTML code directly from Content Delivery Network (CDN).

<script type = "text/javascript" src = "http://ajax.googleapis.com/ ajax/libs/jquery/2.1.3/jquery.min.js"></script>

J-Query-File-Upload plugin allow user to select multiple files, display information about them, and provide previews for images. 

Example:

<!DOCTYPE html> <html>             <head>                     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">                     <link rel="stylesheet" type="text/css" href="style/default.css" media="screen" />                     <title>JavaScript File API and Ajax uploading Demo</title>             </head>                         <body>                         <div id="wrap">                                     <h1>JavaScript File API and Ajax uploading Demo</h1>                                     <h2>Choose a file to upload:</h2>                                     <input id="file_upload" type="file" name="files[]" />                                     <div id="files">                                                 <h2>File Preview</h2>                                                 <ul id="filePreview"></ul>                                                 <a id="remove" href="#" title="Remove file">Remove file</a>                                     </div>                     </div>             </body> </html>

Script References

JQuery-File-Upload front-end code is spread across four external JS files, two of which are not included in the download package and are hosted on the googleapis.com site. Here is what is contained in each:

• J-Query.min.js: The hosted minified j Query library.
• J-Query-ui.min.js: A hosted extention of the basic fileupload widget. It also adds a complete user interface based on j Query templates.
• J-Query.fileupload.js: The basic j Query-File-Upload plugin, used to enhance the file upload process.
• J-Query.iframe-transport.js: Adds iframe transport support to j Query.ajax() for browsers that don't support the File API.

In addition to these four files, we'll need to add two more of our own:

<html>     <head>         <script src="//ajax.googleapis.com/ajax/libs/j Query/1.6.4/j Query.min.js"></script>         <script src="//ajax.googleapis.com/ajax/libs/j Queryui/1.8.16/j Query-ui.min.js"></script>         <script src="js/j Query.fileupload.js"></script>         <script src="js/j Query.iframe-transport.js"></script>         <script src="js/json_parse.js"></script>         <script src="js/upload.js"></script>     </head> </html>

Minimal code
The plugin is instantiated when you call fileupload() from a JQuery file upload widget. By building our own UI, as we have done here, we can use the basic plugin version with only a few options. At a minimum, you need to and pass it a options object that contains the server component url, some files, and perhaps a function to run once the upload has completed. To convert any HTML element into a j Query widget, call it with any j Query DOM function that returns a JQuery widget. The $('#elementid') function is usually the simplest. Here's a very simple call to fileupload() which adds the uploaded file's name to the document once it's done:

$('#file_upload').fileupload ({                url: 'php/index.php',                done: function (e, data)                {                                $.each(data.result, function (index, file))                                {                                               $('<p/>').text(file.name).appendTo('body');                                };                } });

And yes, we didn't even code an onchange event handler for the file input element!

Other interesting things?

jQuery is a JavaScript toolkit designed to simplify various tasks by writing less code. Here is the list of important core features supported by jQuery −

• DOM manipulation − The jQuery made it easy to select DOM elements, traverse them and modifying their content by using cross-browser open source selector engine called Sizzle.
• Event handling − The jQuery offers an elegant way to capture a wide variety of events, such as a user clicking on a link, without the need to clutter the HTML code itself with event handlers.
• AJAX Support − The jQuery helps you a lot to develop a responsive and feature-rich site using AJAX technology.
• Animations − The jQuery comes with plenty of built-in animation effects which you can use in your websites.
• Lightweight − The jQuery is very lightweight library - about 19KB in size ( Minified and gzipped ).
• Cross Browser Support − The jQuery has cross-browser support, and works well in IE 6.0+, FF 2.0+, Safari 3.0+, Chrome and Opera 9.0+

Node.js

What is Node JS?

Node.js is powerful JS Framework built in chrome’s v8 engine. It is used to develop I/O intensive web applications like video streaming sites, single-page applications, and other web applications. Node.js is open source, completely free, and used by thousands of developers around the world. This article will give you enough learning of node.js. Before moving further one should have basic knowledge of JavaScript.

Node.js was developed by Ryan Dahl in 2009 and its latest version is v0.10.36.

Node.js is a server side platform built on Google Chrome's JavaScript Engine (V8 Engine). Node.js is a platform built on Chrome's JavaScript runtime for easily building fast and scalable network applications. Node.js uses an event-driven, non-blocking I/O model that makes it lightweight and efficient, perfect for data-intensive real-time applications that is able to load in every devices.

Why to use it?

Following are the areas where Node.js is proving itself as a perfect technology partner.

• I/O bound Applications
• Data Streaming Applications
• Data Intensive Real time Applications (DIRT)
• JSON APIs based Applications
• Single Page Applications

How to use Node JS?

Download latest version of Node.js installable archive file from Node.js Downloads. At the time of writing this tutorial, following are the versions available on different OS.

OS	Archive Name
Windows	node-v0.12.0-x64.msi
Linux	node-v0.12.0-linux-x86.tar.gz
Mac	node-v0.12.0-darwin-x86.tar.gz
SunOS	node-v0.12.0-sunos-x86.tar.gz

Verifying installation.

Create a js file named 1st.js on your machine (Windows or Linux) having the following code.

/* Hello, World! program in node.js */ console.log("Hello, World!")

Now execute main.js file using Node.js interpreter to see the result:

$ node 1st.js

It should produce the following result:"Hello, World!"

Import required module.Example

We use require directive to load http module and store returned HTTP instance into http variable as follows –

var http = require("http");

Create server.

At next step we use created http instance and call http.createServer()method to create server instance and then we bind it at port 8081 using listenmethod associated with server instance. Pass it a function with parameters request and response. Write the sample implementation to always return "Hello World".

http.createServer(function (request, response) {    // Send the HTTP header    // HTTP Status: 200 : OK    // Content Type: text/plain    response.writeHead(200, {'Content-Type': 'text/plain'});       // Send the response body as "Hello World"    response.end('Hello World\n'); }).listen(8081); // Console will print the message console.log('Server running at http://127.0.0.1:8081/');

Request and Response Test

Let's put importing and creating server together in a file called 1st.js and start our HTTP server as shown below –

var http = require("http"); http.createServer(function (request, response) {    // Send the HTTP header    // HTTP Status: 200 : OK    // Content Type: text/plain    response.writeHead(200, {'Content-Type': 'text/plain'});       // Send the response body as "Hello World"    response.end('Hello World\n'); }).listen(8081); // Console will print the message console.log('Server running at http://127.0.0.1:8081/');

Now execute the main.js to start the server as follows -

$ node 1st.js

Verify the Output. Server has started

Server running at http://127.0.0.1:8081/

Open http://127.0.0.1:8081/ in your browser to see the result.

REPL terminal

REPL stands for Read Eval Print Loop and it represents a computer environment like a window console or Unix/Linux. It performs the following desired tasks.

Read - Reads user's input, parse the input into JavaScript data-structure and stores in memory.

• Eval - Takes and evaluates the data structure
• Print - Prints the result
• Loop - Loops the above command until user press ctrl-c twice.

REPL feature of Node is very useful in experimenting with Node.js codes and to debug JavaScript codes.

Other interesting things to know?

Features

Following are some of the important features that make Node.js the first choice of software architects.

• Asynchronous and Event Driven - All APIs of Node.js library are asynchronous that is, non-blocking. It essentially means a Node.js based server never waits for an API to return data. The server moves to the next API after calling it and a notification mechanism of Events of Node.js helps the server to get a response from the previous API call.
• Very Fast - Being built on Google Chrome's V8 JavaScript Engine, Node.js library is very fast in code execution.
• Single Threaded but Highly Scalable - Node.js uses a single threaded model with event looping. Event mechanism helps the server to respond in a non-blocking way and makes the server highly scalable as opposed to traditional servers which create limited threads to handle requests. Node.js uses a single threaded program and the same program can provide service to a much larger number of requests than traditional servers like Apache HTTP Server.
• No Buffering - Node.js applications never buffer any data. These applications simply output the data in chunks.

How to create simple PHP page?

What is PHP?

"PHP: Hypertext Preprocessor". PHP is a freeware scripting language. PHP is server side scripting language. It is powerful for making interactive, faster, and dynamic web pages. To create PHP one should know basic about HTML, CSS and JavaScript. A simple PHP example is given below. It is widely used and it compete with Microsoft’s ASP in market.

Why PHP?

Fast Load Time – PHP is much faster than ASP because it runs with its own memory space while ASP uses overhead server.

Less Expensive Software – Working with is almost because software like wordpress are open source and free to use while ASP is costly compare to PHP.

Database Flexibility – There are many DB that can be used with PHP most commonly used is My SQL. MySQL is also open source and free. Other DB like dBase, IBM DB2, Inter Base, Front Base, ODBC, Postgre SQL, SQLite, etc. are also supported.

How to use PHP?

Set Up PHP on Your Own PC

However, if your server does not support PHP, you must:

• install a web server
• install PHP
• install a database, such as MySQL

The official PHP website (PHP.net) has installation instructions for PHP: http://php.net/manual/en/install.php

Example

<html> <body> <?php echo "<h1>starting with PHP..!!!</h1>"; ?> </body> </html>

• A PHP script starts with   <?php   and ends with   ?>.
• The default file extension for PHP files is ".php".
• "echo" is a built in php function that help to output in our case text ” starting with PHP..!!! ” is printes

Output

Other interesting things to know?

CAPABLE

It can be used to design any type of website and can handle websites with a lot of traffic. Facebook, Twitter, Wikipedia and many other very widely visited websites are made from PHP.

EASY

It has a readable and easily understandable syntax. Its code is embedded in the HTML source code and it is based on C/C++. Therefore, it is very familiar and programmers are very comfortable coding with it.

PLATFORM INDEPENDENT

It can be run on all major operating systems like Linux, UNIX, Mac OS and Windows.

FASTER DEVELOPMENTS

It uses its own memory space and thus decreases the loading time and workload from the server. The processing speed is fast and web applications like Ecommerce, CRM, CMS and Forums are also developed faster by it.

SECURE

It has multiple layers of security to prevent threats and malicious attacks.

LARGE COMMUNITIES

It has a large community of developers who regular and timely updates tutorials, documentation, online help and FAQs.

PROVEN AND TRUSTED

It is being used since close to two decades now since its inception in 1995. It is trusted by thousands of websites and developers and the list is increasing day by day. It has also proven its capability and versatility by developing and maintaining some of the most highly visited and popular websites.