Google Android Development – Part 2

This is the second post in a multi-part series on Android development.  Throughout the series, we’ll explore how to build applications for the Android platform.  This second post is an introduction to the Android project structure.

Google Android Development - Part 1Introduction

The goal of this post is to get you familiar with the android project structure. So you will be able to understand when you create an android application where you put a certain files and find files and configurations inside the application. I will continue working in HelloWorld project  that I have created in my first post  here.

  1. Src  folder
  2. Gen folder
  3. Android {version Number}
  4. Res folder
  5. Android Manifest file
  • Src  folder

src FolderThe first thing I am going to look in is the Src folder.  This folder will contain the Java source files that you will be creating. In the screenshot you can see the ‘activity’ files “HelloWorldActivity.java” that were created for the HelloWorld project. The files inside this  folder will be organized according to the package structure.  Basically packages are used to prevent conflict in naming of classes. The common way of naming packages is

“the top of the domain name.organization name or organization domain name.any sub domains if exists.package name” of course you can name the package name with any name you want but that is the preferred way to name it. This folder will contains all java code and activities which the android project depend on.

  • Gen folder

Gen Folder This is also a source folder, but will be contain Java source files that will be automatically generated by the android platform. Note among the generated Java files is the R class, which you see in the screenshot. The framework will generate R class file which we will talk about it in details later.

  • Android {version Number}

 Android version numberThis is the folder, which will contain the libraries (jars) that are need for the project. In the screenshot, you can see that it contains the framework jar file.

  • Res Folder

Res FolderThis directory contains all the external resources (images, data files etc) that are used by the android application. These external resources (content) will be referenced in the android application.

This contains the following sub-folders

  • /res/drawable
  • /res/layout
  • /res/Values
  • /res/drawable

This folder contains all images, pictures etc. If you want to include an image or an icon in your android application, then you will be placing it in this folder. Note there is 3 folders drawable-hdpi , drawable-mdpi and drawable-ldpi. By default, Android scales your bitmap drawables (.png, .jpg, and .gif files) and Nine-Patch drawables (.9.png files) so that they render at the appropriate physical size on each device. For example, if your application provides bitmap drawables only for the baseline, medium screen density (mdpi), then the system scales them up when on a high-density screen, and scales them down when on a low-density screen. This scaling can cause artifacts in the bitmaps. To ensure your bitmaps look their best, you should include alternative versions at different resolutions for different screen densities.The configuration qualifiers you can use for density-specific resources are ldpi (low), mdpi (medium), hdpi (high), and xhdpi (extra high). For example, bitmaps for high-density screens should go in drawable-hdpi/. Read more here 

  • /res/layout

This folder contains the UI layouts that will be used in the project. These UI layouts are stored as XML files. We will talk about layout files in details later.

  • /res/Values

This folder again contains XML files, which contain key values pairs that will be referenced in the application. These XML files declare Arrays, colors, dimensions, strings etc. The main idea of having these values in a separate XML file is that the values can be used based on the locale without actually changing the source code. For example the messages in the application can be in different languages based on the use locale.

You can read more about Res Folders here

  • Android Manifest file

This is an XML file which contains meta information about the android application and is important file for every android application project. It contains information about various activities, views, services etc. It also contains the list of user permissions that are needed to run the android application. And we will talk about it in details later.

That all for that tutorial we can now understand any Android project structure.In the next tutorial we will talk in more details about Activities

MongoDB Series – windows installation

Brief about NoSQL

NoSQL stands for Not Only SQL , the next generation databases mostly addressing some of the points: being non-relational, distributed, open-source and horizontally scalable. Often more characteristics apply such as: schema-free, easy replication support, simple API, eventually consistent / BASE (not ACID), a huge amount, of data and more.

You can read more about NoSQL at

http://nosql-database.org/ and http://en.wikipedia.org/wiki/NoSQL

Introduction to MongoDB

MongoDB is a high-performance, open source NoSQL database, Written in C++.

http://www.mongodb.org/

MongoDB features

 – Document oriented storage.

  • JSON-style documents with dynamic schemas offer simplicity and power.

 – Full index support

  • Index on any attribute, just like you’re used to.

 – Replication and high availability.

  • Mirror across LANs and WANs for scale and peace of mind.

 – Auto-Sharding

  • Scale horizontally without compromising functionality.

 – Querying

  • Rich, document-based queries.

 – Fast In-Place Updates

  • Atomic modifiers for contention-free performance.

 – Map/Reduce

  • Flexible aggregation and data processing.

 – GridFS

  • Store files of any size without complicating your stack.

– Commercial Support

  • Enterprise class support, training, and consulting available.

How to setup MongoDB on Windows

First go to downloads link http://www.mongodb.org/downloads under the production releases and choose your compatible operating system, in our example I will use Windows 32-bit.

After download finish, unzip the file anywhere, I will unzip it on C: drive, for convenience you may rename this folder to mongo instead of mongo-xxxxxxxxxxx.

By default MongoDB will store data in \data\db, but it won’t automatically create that folder, so we do so here.

Note : If you prefer to place data files elsewhere, use the --dbpath command line parameter when starting mongod.exe.

We have two important binaries for the first run :

- mongod.exe which is the database server.

- mongo.exe The administrative shell.

To run the database, click mongod.exe in Explorer, or run it from a CMD window.

It will open a command window shows that the server is running and you will see the logs of the server.

Now we are ready to run the administrative shell by d-clicking on mongo.exe or from a New CMD window, which means the first window must be opened along running the administrative shell, otherwise you can run the server as a windows service (we will talk about it later).

By default it connects to mongodb server running on localhost and uses database test. To get some help run  mongo --help

Mongo shell is a JavaScript shell, try some JavaScript commands.

Or type help to get some useful commands.

Notice the created files on \data\db as we mention before that Mongo will store your databases files on this path.

Now we can do some actions with NoSQL database.

You can try it online at http://try.mongodb.org/

References

http://www.mongodb.org/

http://nosql-database.org/

Google Android Development – Part 1

This is the first post in a multi-part series on Android development.  Throughout the series, we’ll explore how to build applications for the Android platform.  This first post is an introduction to the Android SDK and the Eclipse IDE along with a high-level overview of Android applications.
Google Android Development - Part 1
PreRequisites

  • Java Development Kit (JDK)  – self-explanatory; the Java runtime and development libraries. You can download it from here (http://www.oracle.com/technetwork/java/javase/downloads/index.html)
  • Eclipse – an IDE (integrated development environment) for Java and other languages.   If you don’t have it installed, You can get the Eclipse Classic 3.7.2 version, which will suit the needs of this tutorial.  The Windows download doesn’t contain an installer, so extract the ZIP in an accessible location, such as C:\eclipse. You can download it from here (http://www.eclipse.org/downloads/)
  • Android Software Development Kit (SDK) – The heart of Android development.  This provides all of the necessary tools and libraries required to build applications for the Android platform.  Extract it to an accessible location on your hard drive and run the setup executable, which will download and install a set of components. You can download it from here (http://developer.android.com/sdk/index.html)
  • Android Development Tools (ADT) Eclipse Plugin – This plugin adds Android-specific development tools and project templates to Eclipse.  Instead of a separate download, it installs within Eclipse as we will describe next

Use the Update Manager feature of your Eclipse installation to install the latest revision of ADT on your development computer. Assuming that you have a compatible version of the Eclipse IDE installed, as described in the previous step above, follow these steps to download the ADT plugin and install it in your Eclipse environment.

Installing Android Development Tools (ADT) Eclipse Plugin

  1. Start Eclipse, then select Help > Install New Software….
  2. Click Add, in the top-right corner.
  3. In the Add Repository dialog that appears, enter “ADT Plugin” for the Name and the following URL for the Location:

https://dl-ssl.google.com/android/eclipse/

Note: If you have trouble acquiring the plugin, try using “http” in the Location URL, instead of “https” (https is preferred for security reasons).

  1. Click OK wait for pending
  2. In the Available Software dialog, select the checkbox next to Developer Tools and click Next.
  3. In the next window, you’ll see a list of the tools to be downloaded. Click Next.
  4. Read and accept the license agreements, then click Finish.
  5. When the installation completes, restart Eclipse.
  6. After eclipse restarted you will see a window to choose SDK Choose exist Andriod SDK or choose to install it from the beginning
  7. In my case because we already install the sdk in step 3 i will choose the SDK Installation folder then Next
  8. Choose weather to Contribute usage statistics or not
  9. We haven’t finish yet we still have to install SDK’s to be ready for developing our first android application, to install sdk’s first open SDK Manager
  10. Choose Android SDK platform-tools under Tools Note: Android SDK Tools and Android SDK Platform-tools is important to be installed so make sure that u install it also choose the appropriate API you will work on it from Android API’si will choose Android 3.2 (SDK Platform, Google Api’s  by Google inc.) about XOOM 2 by motorolla its optional to install if you going to develop a plugin for that devices  
  11. Choose Google USB Driver package
  12. Click Install packages, then accept terms and conditions (You can choose Accept all to force accept for all selected components you will install ) that will take a few minutes to complete
  13. Now we are ready to create our hello world application.

Create HelloWorld application

  1. Go to File Menu then New then choose other in order to create an Android application
  2. After that a wizard appears to select application you want to work on search for android or collapse Android in the list of project types appears in the list
  3. Now its time to add your project name and choose Create new project in workspace to add your code in a newly folder in the workspace
  4. Select your build target i will choose Android 3.2 which we select to install in the SDK Manager
  5. After click on next we have to fill in the application info the application name which we already defined in a previous step also the package name as you can see in the next picture i named it “com.helloworld.hello” that is the main package that will be in the application also set our main activity name which is named by default HelloWorldActivity (activity name by default is a combination between application name and and Activity) later in the next tutorials we will discuss deeply what is activity mean but for now you have to know that is the main entry for the application. also you can see Minimum SDK by default it will be loaded to 13 because we choose SDK version 3.2 which is API 13. Minimum SDK is option to define what is the lowest android system your application can run in off course if you choose API 13 then your application can’t run on lowest android systems.
  6. After click on finish eclipse will create a new application named HelloWorld for us and some building process and here is our hello world application ready
  7. We are not ready yet to lunch our application we have to add AVD(Android Virtual Device or emulator) AVD helps us to run our android project in a similer environment as like it is in the device exactly. so to do so we have to click on AVD Manager icon on top beside SDK Manager to open AVD Manager
  8. Click on New in the upper right of the window to create a new AVD you have to fill in android name and the desired Target of build for the emulator as example if we choose Android 3.2 – API Level 13 as explained in the following picture the emulator will be running that operating system then you have to specify SD Card lets say its 200 MG the other options is preferred to be the default then click Create AVD   
  9. Now we are ready to running our HelloWorld Application so go to run
  10. Then choose android Application from Run As window.
  11. Wait for the emulator to lunch that will take a few minutes in the first time then your application is ready now with that screen

That all for that tutorial we can now run an android application and ready to begin development, In the next tutorial we will get deep in the application hierarchy and discuss the folders and the code.

Aviary Integration step by step

Introduction:

Aviary is a better photo editing solution for web & mobile apps.  Aviary simplifies your app’s workflow by letting your users edit their photos right where they belong: in your app. The Aviary editor is embeddable, and can be added to any website or mobile app with just a few lines of code.

How to use aviary editing tool?
1. Create an account on Aviary.
2. After registering go to the “Web” tab and click “Get Key”  http://www.aviary.com/web-key , it will give you Access key and secret number.
3. Click on “Code Generator” tab  http://www.aviary.com/code-generator  set your preferred settings (you better preview your widget), get the generated code.
4. Embed your code in HTML page.

Let’s talk a little on this code, if we start from top to bottom we will find an image tag

This is the holder of the image that will be edited.  After that you will find a script tag contains a source link to online aviary JavaScript library to load the feather code (feather is the JavaScript library name) and this must be at the beginning before calling the widget.

The next script tag contains the instance of feather, notice that there is some parameters which is the default, you can add some or remove, some of them are mandatory like ‘apiKey’ , and other are optional like ‘openType’ you can find all parameters in the documentation http://www.aviary.com/web-documentation#intro , the ‘onSave’ event will be called by clicking save button after finish editing your photo, it takes two parameters ‘imageID’ and ‘newURL’, imageID is the id of the image tag and newURL is URL of the new photo will be replaced by the old one.

‘launchEditor’ is the function that launch the aviary editor tool by calling ‘featherEditor.launch’ by passing two parameters (id , src), id parameter is id of the image tag and src parameter is the image source.

Notice: The src parameter is required if the image to be edited is on a different host than the enclosing HTML page, and it has to be on the form ‘http://example.com/abc.jpg’.

At last there is an input tag to launch the editor by calling ‘launchEditor’ function

5. Launch your page and try your widget

6. Click on Edit photo and enjoy.

7. After finish editing save your work, the new image will be replaced by the old one

Documentation:

         http://www.aviary.com/web-documentation

         Code sample : AviarySample