Monday, July 12, 2010

Google App Inventor tutorial/overview for beginner

OVERVIEW :
Googles app inventor is a drag and drop web(html + java webstart) based IDE(not eclipse based)- which aims to simplify  building of apps.
For techies this is(almost) like equivalent of Visual basic, while Eclipse based android  development is like equivalent of visual c++/c#.

BASIC STEPS:
The basic step is to design(buttons) screen using web(html) based IDE. Next step is to add events(click) for the components(buttons) using Blocks editor which uses  JNLP(java webstart) launcher. You may then add events to your GUI or click the connect to phone button - on block editor to test your app .

 App Inventor (unfortunately) does not generate/emit java source code - and hence it may only be good for educational purpose(or small customizations).
You can get started using : http://appinventor.googlelabs.com/about/ (though beta version is not offered to everyone). If you dont have an actual phone then you
may try build app using simulator(very very slow) using this link: http://appinventor.googlelabs.com/learn/reference/other/emulator.html.

Getting Started with Hello world example :

a)Setup your phone and computer:
You will need to have java and "app launcher extras"(google sdk+ ) installed on your machine. (for droid incredible etc you have to add USB related settings in the sdk driver inf file as mentioned in below step )

http://appinventor.googlelabs.com/learn/gettingstarted.html


b) Go to appinventor.googlelabs.com . Click on MyProjects link on RHS. I am assuming that your google user Id has
permissions to use app inventor , you will also need to accept the T&C(first time). You will see window like below.
Drag a textbox, button and label as shown below. You can click on Properties on RHS to change button/label text.
If you need to delete something then you may use the delete button below components column. You may note that
if you change labels then it may not immediately get refreshed. After making changes click on "Save" button on top.
Now click on Open blocks editor button on top and download/accept any JNLP permissions to start it.
Since this IDE is HTML(not thick client) - it will not be user friendly(or fast) as compared with the "Blocks editor"
(which uses Java web start .. However java web start is harder to install )

(Click on above picture to see full image)



b) Let us add code/events so  that if button is clicked - then we will set labels text - to whatever values was typed in textbox.

Click on Button1 and drag "when button1.click" event. Similarly as shown below click on "Label1" and "Textbox1"
events.You may click on connect to phone to test the app. After testing - you can close block editors - and click on "package
for phone" button on top rhs to permanently deploy this sample on your phone.


(Click on above picture to see full image)


ISSUES: You may have trouble(eg could not create java runtime) running the launcher - and hence you may download (save) the JNLP file , edit it (eg remove j2se tag)- and then run it(or you may need to configure java control panel for proxy server settings).
For droid Incredible you should connect the USB/phone in "charge only"(not disk mode), else you will have error like "error uploading/connecting to media"(in short avoid app or settings which will automatically mount the drive) . For other phones
you may need the mass storage options.
You can then go back to Web based ide - and click on package for your phone - to install the app.
For other issues refer to : http://appinventor.googlelabs.com/learn/troubleshooting.html

Next Steps: Try some tutorials from google :
http://appinventor.googlelabs.com/learn/tutorials/index.html

Reference manual : http://appinventor.googlelabs.com/learn/reference/

Invoking external API (or Webservice) :
Try the experimental TinyWebDB to invoke your webservice(TinyWebDB
is almost like a  hashtable over web - and supports only storeAValue and getValue
operation - and hence you may have to do some hacks or mapping -
to call external service):
http://appinventor.googlelabs.com/learn/reference/other/tinywebdb.html
http://www.appinventor.org/talking-to-an-api

In future google app inventor components can be developed using java per
http://appinventor.googlelabs.com/learn/userfaq.html
(In that case it will be similar to developing components in VC++ to make VB
lot more productive/easier to use)
Similarly - mulitple screen can be deveopled via a hack.
Online Book  :
There is a text book link(outdated) on LHS at
http://www.appinventor.org/

Developing app using java using Android SDK:
You can click here to go back - to the beginning of this blog to develop android
app using java(and eclipse).(instead of using app inventor)

Others:
If  you are confused about various android phone - then my opinion is at:
http://bestandroidphone.blogspot.com/ (though cnet.com will be better from specs perspective
But they wont tell you bugs in phone.)
My index of technical blog is at :
http://www.jroller.com/zahid eg selenium tutorial, seam etc

23 comments:

  1. How do you even begin to draw a parallel between App Inventor and VB (or even gwbasic)? Can you even write code with App Inventor? Were there gui-based logic blocks available in VB? Despite 10+ years coding in it, I guess I've missed them. OR perhaps this author knows nothing about VB (or development in general) and likes to discredit themselves by pulling articles out of ........

    ReplyDelete
  2. I never equated VB with App Inventor. However just like VB (compared with VC++)- App Inventor is limited(oops) - but at the same time its quicker to do certain tasks.
    Google seems to be following the same model that was used by VC++/VB ie develop components/blocks(in future) using "java" (like VC++ for OLE components)- and let app inventor (like VB) automate (or simplify) key stuffs.

    To me blocks vs language is a matter of implementation details(its painful to use blocks - but its easier to use for non programmers)

    PS: I am a former VC++ developer and wrote OLE components to be used by VB etc.. But maybe after so many years - I see many stuff being recycled(which many new people get excited as being new )

    ReplyDelete
  3. Respected ,
    i am android devloper . i am working on the android application . can you tell me how can i write code in the appinventor and create my application easily

    ReplyDelete
  4. Its hard to develop certain apps using app inventor - for java developer. You have to use their drag and drop blocks (or do some tricks using TinyWebDB )

    So if you are java developer - I would wait
    till they give facility to develop your own block(just like jsp taglibs). Alternatively
    I was hoping for facility to export it to java.

    ReplyDelete
  5. Hire Android app developer services offered by many outsourcing companies because outsourcing companies adequate resources to offer such hiring. Outsourcing companies are located in developing countries like India where skilled manpower available at cheaper rate.

    Android Game Development

    ReplyDelete
  6. hi guyz do u no how to install teknologik on ipod touch?

    ReplyDelete
  7. As you say that Googles app inventor is a drag and drop web based program. Is this compatible for every language of developing??
    .net Obfuscators

    ReplyDelete
  8. Nice contents, Get more android sample example, solution, tutorial and basic examples of the android programs, like gridview, progressdialog, readwrite sdcard, download data, simple buttonclick, etc on

    http://android-solution-sample.blogspot.com

    Thanks

    ReplyDelete
  9. Hi great very well done very nice information for android development.

    The Internet is under attack by the Obama Administration through executive powers. This does not bode well for the Internet entrepreneurs or for political speech. The following is an analysis of how the Internet and specifically Google has created a free world-wide social environment.

    ReplyDelete
  10. I made a blog with tips, making shooter etc. ...

    http://dicasappinventor.blogspot.com/

    ReplyDelete
  11. Android is one of the good and fast moving mobile operating system.This is one of the good application,you can get very advance features from this.Nice post.Android app developers

    ReplyDelete
  12. I liked the way your post as come out as an asset for the people..
    Buy domain names

    ReplyDelete
  13. Thanks for mentioning this great post,really its very informative to all.
    Forum hosting

    ReplyDelete
  14. This is one of the straight forward website which providing the information about Android mobile application.This is one of the suitable post.
    Android app developers

    ReplyDelete
  15. Officials have said the lack of smoke detectors may have contributed to the incident.
    alarm systems

    ReplyDelete
  16. hey check this new website www.countcode.com. It's a social network made for programmers, where you can download,share or upload source codes, where you can count your own code lines for free. You have access to the web forum and the web chatroom. we are happy to have you joined to our community!

    ReplyDelete
  17. This is really very informative post for android developers. Is app inventor compatible with other languages also other than java?

    ReplyDelete
  18. hey check this new website www.countcode.com. It's a social network made for programmers, where you can download,share or upload source codes, where you can count your own code lines for free. You have access to the web forum and the web chatroom. we are happy to have you joined to our community!

    ReplyDelete
  19. Amazing Post!
    I love it. Will come back again - taking your feeds also.
    Thanks.
    iCaption That

    ReplyDelete
  20. This tutorial is awesome and nice information, I am newly learning the Android Apps Development, Thanks for sharing.

    ReplyDelete
  21. I would never want to miss out any opportunity to read out your contents.
    one click root

    ReplyDelete
  22. This is my first time i visit here. I found so many interesting stuff in your blog especially its discussion. From the tons of comments on your articles, I guess I am not the only one having all the enjoyment here! keep up the good work.
    App Development Company

    ReplyDelete
  23. i liked the concept, i will try it.

    http://www.awrtechnologies.com

    ReplyDelete