Tuesday, 20 February 2018

Android Database Connectivity with Firebase

Firebase is a mobile platform that helps you quickly develop high-quality apps. Firebase is made up of complementary features that you can mix-and-match to fit your needs including database, with Google Analytics for Firebase at the core. 

In this post, I will demonstrate that how to connect you android app to Firebase Database. I also assume that you have enough working knowledge of Android and Android Studio.

Prerequisites-

  • Latest Android Studio
  • Android Services plugins should be installed in IDE
  • Gmail account
Start a project in Android Studio. (I have used 3.0.1) .

Now Go to Firebase Console and log in using your gmail id and password and click on Add Project.


Then give a name of your package and your country here and then Continue.

After clicking on Continue, You will be on Firebase Console. Then select here "Add Firesbase to your Android app" in the centre of page.


A window (Add Firebase to your project) will appear. Here is 3 step process.

1. Register App -

Input package name (e.g com.example.arvindsbi.sbischooldevices;) whatever you have created in Android Studio and then click on Register App.



2. Download config file -

Here you will have to download google-services.jason file on your system and click Continue. After downloading, paste this file into your app root directory. (Hero you will find instructions to use it)


3. Add Firebase SDK -

After downloading and configuring jason file, you will have make some changes in your gradle file. You will have to add some dependencies in your app level and project level build.gradle file (as instructed by Firebase).



 

Now in app level build.gradle file, add the following line in dependencies -
compile com.google.firebase:firebase-core:11.8.0'
Sometimes this line also required
compile 'com.firebase:firebase-client-android:2.5.0' 


Now in project level build.gradle file, add the foolowing dependencies -
classpath 'com.google.gms:google-services:3.2.0'
After updating your both gradle file click on sync now.
After doing all these things your app is now prepared for connectivity with Firebase database.
Now you require Java code and xml code to make connectivity.
Important- It should be assured that Android Support should be installed in Android Studio.
To check or install Android Support Go to 

Tools ===>> Android ===>> SDK Manager   then select Plugins in left pane and then tick Android 
Support in center pane if not cheked


Here is the full code of both files -
Xml code -
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" tools:context="com.example.arvindsbi.sbischooldevices.FirebaseDemo"> <EditText android:id="@+id/myname" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentEnd="true" android:layout_alignParentRight="true" android:layout_alignParentTop="true" android:layout_marginEnd="72dp" android:layout_marginRight="72dp" android:layout_marginTop="64dp" android:ems="10" android:inputType="textPersonName" android:hint="Name" tools:layout_editor_absoluteX="84dp" tools:layout_editor_absoluteY="44dp" /> <EditText android:id="@+id/myage" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignLeft="@+id/myname" android:layout_alignStart="@+id/myname" android:layout_below="@+id/myname" android:layout_marginTop="43dp" android:ems="10" android:hint="Age" android:inputType="textPersonName" /> <Button android:id="@+id/button13" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignLeft="@+id/myage" android:layout_alignStart="@+id/myage" android:layout_below="@+id/myage" android:layout_marginLeft="36dp" android:layout_marginStart="36dp" android:layout_marginTop="58dp" android:text="Add to Firebase" /> </RelativeLayout>
In Java file you required -
1. import com.firebase.client.Firebase;
2. Then declare Firbase class
public Firebase fb;
3. In onCreate method initialise the Firebase and connect using URL
Firebase.setAndroidContext(this);
fb=new Firebase("https://sbxxxxx-fxxxx.firebaseio.com/");
4. In onClick method
Firebase nameChild=fb.child("Name");
nameChild.setValue(myname.getText()+"");
Firebase ageChild=fb.child("Age");
ageChild.setValue(myage.getText()+"");
Here is full Java code -
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.widget.Button;
import android.widget.EditText;
import android.widget.Toast;

import com.firebase.client.Firebase;

public class FirebaseDemo extends AppCompatActivity {
public EditText myname,myage;
private Button mybutton;
public Firebase fb;

    @Override    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_firebase_demo);

        Firebase.setAndroidContext(this);

        fb=new Firebase("https://sbixxxxxl-fxxxx.firebaseio.com/");

        mybutton=(Button)findViewById(R.id.button13);
        myname=(EditText) findViewById(R.id.myname);
        myage=(EditText) findViewById(R.id.myage);
        mybutton.setOnClickListener(new View.OnClickListener() {
            @Override            public void onClick(View view) {
                Firebase nameChild=fb.child("Name");
                nameChild.setValue(myname.getText()+"");
                Firebase ageChild=fb.child("Age");
                ageChild.setValue(myage.getText()+"");
                Toast.makeText(getBaseContext(),"Details Added",
                Toast.LENGTH_SHORT).show();
            }
        });
    }
}
After doing all these things don't forget to give internet permission to AndroidManifest.xml file
<uses-permission android:name="android.permission.INTERNET"/>



Now run your app enter data -



Go to  Firebase database and see your entered data -

(Note:- Sometime you can not see your data in Google Chrome, means it will show blank, if so then change your browser to Mozilla Firefox or Internet Explorer and loging to see your data. I don't why it is so? But I have faced this and resolved like this. )


Quick Look up -

  1. Firebase account login
  2. Add project
  3. Add your project package
  4. Download config file
  5. Paste this file in your app root directory
  6. Change in both app level and project level build.gradle file
  7. Check android support plugins
  8. Write code in your project
  9. Give internet permission to your project
  10. Run project
  11. See the data in Firebase


Sunday, 11 February 2018

Make bootable USB of Windows Server 2012, 2016 or Technical Preview edition.

Making bootable USB of Microsoft Windows Server 2016, 2012 or technical preview edition is not so easy as making as other versions of OSs, what I have faced till now. It give error like "Windows cannot open the required file D:\Sources\install.wim. Make sure all file required for installation are available and restart the installation. Error code: 0x80070026" during the installation.



Let see how can get rid of this problem.

Requirements :- 

  • ISO file of OS.
  • USB pen drive (at least 8 GB).
  • WinRar or 7zip extraction tool.
Caution: The following commands will completely erase your disk without any warning, so be sure that you select proper disk. Disconnect other external drives and keep back up of all your data 

  1. Now keep ready your Windows ISO file.
  2. Insert your USB disk in computer system (Should not be less than 8 GB).
  3. Now open command prompt in elevated mode means "Run as administrator" (Right click on command prompt and select "Run as administrator").

4. Now type diskpart on command prompt. It will open diskpart utility.




5. Now type list disk. It will show all drives attached with your system.


6. Now type select disk ? (at ? put disk id like 0 or 1, you can identify your USB drive here by size). In  my case the complete command is select disk 1.
7. Again run list disk command to check  whether you have selected proper disk or not. Selected disk will be pointed by * mark.

8. Now run clean command (it will erase every thing on USB disk).
9. Now create partition primary

10. Then select partition 1


11. Make it active by typing active


12. Then format this disk using command
       format fs=ntfs quick label="2016server"
      label could be anything.


13. Now exit from DISKPART utility by typing exit.

After exit from DISKPART you will be again on command prompt. 
Now extract your Windows ISO image on USB drive by the help of WinRAR or any other tool.
(Right click on ISO then select Open with and select WinRAR. After that click on Extract to then select your pen drive path.)

After extracting ISO on USB Drive.

1. Go to USB drive by typing drive letter (in my case drive letter is F).
     F:
2. Now type cd boot
3. Then type bootsect /nt60 e:


output of this command should be look like "Bootcode was successfully updated on all targeted volumes".

4. Now run command xcopy F:\*.* D:\/E/H/G (F:\*.* - F is my USB drive letter, you put yours here).



Copy of install.wim file will take a long time. Please wait here, it is too large file.



After finishing copy, you will be able to install Windows server 2016.

Compiled from:- http://itproguru.com/expert/2016/05/create-bootable-windows-server-2016-usb-thumb-drive-for-installing-os/




Monday, 5 February 2018

Expand and Collepse Div on Mouse Click

Expanding and Collapsing Div is a very cool effect in HTML using CSS and JavaScript. If we want to don't show any information on first look, but on click then we can use it, or you can use it on your relevancy and suitability. Let see, how it can be implemented.

CSS for design the div :-

<style>
.exp_div_wrapper    
{
        
}

#exp_div_wrap 
{
    margin-top: 0px;  
    margin-bottom: 30px; 
    background: green;
    width: 90%; height: 50px;
kit-border-bottom-right-radius: 15px;
    -webkit-border-bottom-left-radius: 15px;
    -moz-border-radius-bottomright: 15px;
    -moz-border-radius-bottomleft: 15px;
    border-bottom-right-radius: 15px;
    border-bottom-left-radius: 15px;
}

#exp_div_wrap_toggle 
{
    display: block;
    width: 100%;
    height: 35px;
    line-height: 35px;
    background:#9999FF;
    text-align: center;
    color: white;
    font-weight: bold;
    font-variant: small-caps;
    box-shadow: 2px 2px 3px #888888;
    text-decoration:none;
}

#exp_div_wrap_toggle:hover 
{
    text-decoration:none;
    border-top: 1px groove white;
    border-left: 1px groove white;
    border-bottom: 1px solid #7B7B78;
    border-right: 1px solid #7B7B78;
    color: #663200;
    background:#FF66FF;
    box-shadow: 1px 1px 2px #888888;
}
</style>

You can change the div design by making change in above CSS.

Now the HTML used for creating div is :-

<div class="exp_div_toggle_wrapper">
  <a href="#0" id="exp_div_wrap_toggle">Expand Div</a>
</div> 
<center><div  id="exp_div_wrap" style="display: none;">
</div></center>

and below this HTML, use JQuery/JavaScript

<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function($)
{
  
  $("#exp_div_wrap_toggle").click(function()
  {
    
    $("#exp_div_wrap").slideToggle( "slow");
    
  if ($("#exp_div_wrap_toggle").text() == "Expand Div")
      {
        $("#exp_div_wrap_toggle").html("Hide Div")
      }
  else 
      {
        $("#exp_div_wrap_toggle").text("Expand Div")
      }
    
  });  
  
});
</script>

Screenshot is given below:-


Change image source dynamically on hyperlink

 Changing image source dynamically using JQuery. Here in this example I have created there hyperlink and stored all images in the same folde...