Create your first Android App , You donot need to be a programmer for that !!!!!!

Google Labs comes up with another invention & this one 
I bet you is gonna be a super hit !!!

Google App Inventor (Beta) is an Android app maker which 
lets you create your own Android apps & that too on a browser , 
and best thing about it is that you donot need to be

a programmer for that !!!!!

So lets get started 

     Computer requirements 

      1 . You need to have java 6 installed on your computer .
           You can download the  latest jdk from www.java.com

       2.Install the App Inventor Setup 

          a) For Windows users you can download it from 

          http://dl.google.com/dl/appinventor/installers/windows/appinventor_setup_installer_v_1_1.exe

          b) After the installation of app inventor it may ask for the location 
          of the software , if it does so  then specify it as 
           C:\Program Files\Appinventor\commands-for-Appinventor  
           because this is where the adb.exe file is located .

       3.  Once you are done with this please login using your 
             google account to appinventor.googlelabs.com.         

            Click on My Projects and now you are ready to create 
            your first app .

            

           Building my first App

           

           Click on New , Give a name to your project . Oki Lets 
           name it MyHome .

          

            MyHome:- Its a simple app in which you have pics of 
            your family member ,when you click on the pic a call is 
            established  to the family member .

             

           Step1:

           

           So first you decide what your screen should look like .

           For that we will be using Labels & Buttons .

           On the left hand side of your browser you have Basic List

           From that select the Components Button and drag & drop it

           on to the screen .

           Next add a Label to the screen .

           

           Step2:

           In my MyHome App I have included four buttons for 4 family

           members & a label for each of them .

           Step3 :

          

           Set the Label text properties to the text of 

           of your choice  .

           Label1: Mother

           Label2:Father

           Label3:Brother

           Label4:Sister 

           

               

          

                 

          

          Step 4: 

          

           Your screen should look like this now .

           Once done with this,the next step is to set the properties of the

           Button .Clear the text properties of the button .

           To set the Image Properties : Click on Image on the Properties box

           and upload the image of your choice .

           Your screen should look like this now 

            

            Step 5 :

            You need to establish a call when you click on the pic for that 
            you need to add the phone component .The Phone component 
            is available in the  Social  Tab of the Pallete .

             Choose the Phone Call Component and drop down it to the Screen .

             We have four members & so we will be using four phone call 

              components .

             Step6 :

             Set the Phone Call Properties .

             Enter the phone nos in each of the phone call component with the

             nos of the corresponding members .

 So this ends up the Design of your App . 

Now the next step is to build the Application Logic .  


On your browser click on the Open Block Editor Button . 
A file will be downloaded(AppInventorForAndroidCodeblocks.jnlp)


Double Click on the file and wait till the Block Editor opens , it may 
take sometime though around 30-50 secs .


Once the block editor is open the next step is to connect it with
a device .
If you are using a emulator click on New Emulator& select a emulator .
Now click on Connect to the Device button & wait till the device is 
connected .


           Step 7 .
           Select Button1 on My Blocks Editor .
           From the list of options select the Onclick block 

              

            Step 8
            Select Phone Call on My Blocks Editor
            Form the list of options select the   MakePhoneCall Block

              

               Repeat this step for each of the buttons .
               
             So finally you are done with the application logic  & you can
             download it to your Android Phone or computer to use .


             If you want to emulate it in an emulator then you will have
             to install it on your computer .
             Download the app you have created :- For that next to the
             Open Block Editor Button you have one more button that
             gives to the option of downloading it to the computer .
             
              For trying your app on a emulator :
             1. Download the app and place the app in the folder         
               C:\Program Files\Appinventor\commands-for-Appinventor    

              2. Open the cmd prompt on your computer .
                Make the root directory of cmd prompt as
                cd  C:\Program Files\Appinventor\commands-for-Appinventor    
               3. Install the apk file my running the command 
                adb install MyHome.apk 
          
            So you have finally installed  the apk file & now you can 
            view your working MyHome app on your emulator !!!!!!
                            
    If you still have any problems creating  your first app , please do 
    write.
    
    If you liked something about this article ,you can show your appreciation
    by a vote of thanks .


Thanks for reading ,
Vaishakh Thayyil 
   

Read more...

Google Latitude Mashup With Google maps

My Second post was on getting the user's location using

google latitude/badge api .This thread is definitely a

continuation of the earlier post , here i will show you how

to display the user location on google maps .

For that we will be using a jquery plugin called JQUERY:GMAP3

Step1

Create a php file that will return the latitude & longitude

Step2 

Make an ajax call to the php file

Step3 

Display the google latitude result on google maps

Step1

######getposition.php #######

<?php

//Replace the YOURUSERID in the url below with your Badge userid . 

$url="http://www.google.com/latitude/apps/badge/api?user=YOURUSERID&type=json" ;

// We get the content

$content = file_get_contents( $url );

print($content); //This will return the data in json format

?>

Step 2 & Step3

For the ajax calls we will be using jquery functionalities directly ,a call

will be made to the php page, which will return me data in json format

which we will parse using jquery parseJSON() function .After this  using

the jquery GMAP3 library(http://plugins.jquery.com/project/gmap3)

we will be displaying the marker on google map .

#### Showmap.html ######

<html>    

  <head> 

    <script type="text/javascript" src="jquery-1.4.4.min.js"></script>        

    <script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>

    <script type="text/javascript" src="gmap3.js"></script> 

    <style>

      .gmap3{

        margin: 20px auto;

        border: 1px dashed #C0C0C0;

        width: 500px;

        height: 250px;

      }

      #container{

        overflow: auto;

        text-align:center;

        width: 100px;

        margin: 20 auto;

      }

      .box{

        float: left;

        width: 20px;

        height: 20px;

        margin-left: 20px;

        background-color:#FFF;

        border:1px solid #000;

      }

    </style>

    <script type="text/javascript">   

      $(function(){

// ajax call to the php page   

$.ajax({

type: "POST",

url: "getposition.php",

success: function(msg){

var obj=$.parseJSON(msg);

// Parse data recived .For more details check  //http://api.jquery.com/jQuery.parseJSON/

var latitude=obj.features[0].geometry.coordinates[1];

var longitude=obj.features[0].geometry.coordinates[0];

var coord=new google.maps.LatLng(latitude,longitude); 

$('#test1').gmap3(

{ action: ':addMarker',

latLng: coord,

map:{

center: true,

zoom: 14,

mapTypeId: google.maps.MapTypeId.ROAD

}

}

);

}

});

      });

    </script>  

  </head>

  <body>

    <div id="test1" class="gmap3"></div>

  </body>

</html>

This was just a basic mashup of google latitude & google maps .

If you want to use all the functionalities of google maps you can

refer the site http://night-coder.com/jquery-plugin-gmap3.html

which has clear explanation of using google maps jquery plugin.

If you have still queries about this thread , please do comment .

Thanks !!


Download Code


Related Articles
Geocode Address For free

Google Speech Recognition Mashup with Google Maps

Read more...

Easier way to use Google Latitude

Click Like If you Agree

Hi Everyone ,

My first post was about getting the Location using Google Latitude Api using OAUTH,

it is extremely useful when you want to create an application that gets your app users

location and you can mashup with google maps api or yahoo maps to create killer apps .

But if you are creating a system in which you create google latitude account for your

customers  or you want to track your kids from your home , there's  a simpler method

 for doing that , a shortcut rather than going the OAUTH way i.e. Google Latitude Badge .

Step 1

Log into your google account through which you are linked to Google Latitude

Step 2

Goto https://www.google.com/latitude/b/0/apps

Read more...