How To Develop Hybrid Mobile Application (Part – 2)

Developing Mobile App For Sending Emails Using Plugins

Hi friends in my previous tutorial I have explained how to configure the environment for developing Hybrid Mobile Apps. Now proceeding further I am going to show you how to use available  cordova plugins for achieving your various requirements. Here in my demo I will use a cordova plug-in which is developed for sending the emails and to create the required GUI for email composition.

I will demonstrate in step by step and the source codes will be available in my Git Repository for your reference which you can freely download , access and share .

Let’s Start The Cooking

While proceeding  I hope you must have ready with necessary software’s and environment setups.

You can find the source codes in my GitHub Repository Biswa-13 , only “www” folder and it’s content are available .

Step 1 : Create a New Cordova App

1.1 – Create  a Fresh Cordova Project

  • Create a new Directory/Folder for your application (Ex : G:/ Hybrid Mobile App).
  •  Open Command prompt and Navigate to the directory (i: e- G:/ Hybrid Mobile App) that you have created recently for your  Mobile Application.
  •  And enter the following syntax
  •  Syntax :  cordova create EmailMeApp com.brs.emailmeapp EmailMeApp
  •  And a new cordova project named “EmailMeApp” will be created under that location (G:/ Hybrid Mobile App).

1.2 – Test Your Cordova Project

  • Go inside the project (G:/ Hybrid Mobile App/EmailMeApp)find “www” folder and then inside this folder select “index.html” (G:/ Hybrid Mobile App/EmailMeApp/www/index.html) and open it in any browser.
  • If it successfully opens and you can find the cordova’s default page and default message then, Congrats you completed your first step .

Step 2 : Installing Cordova Plugins

There are so many plug-in available for various purposes in Cordova , which you can find at https://cordova.apache.org/plugins/ , also one can develop it’s own plug-in and use it or distribute it .

2.1 – Installing PlugIn Required to Send Email

>> And enter the following syntax :

Syntax : cordova plugin add cordova-plugin-email-composer@0.8.3

  • You can check this plugin under “plugins” folder of your project (I”e EmailMeApp/plugins).
  • Note : According to the  authors The Email service is only available on devices which are capable  to send emails. E.g. which have configured an email account and have installed an email app. “

2.2 – Adding the Plugin reference in config.xml :

  • Open “config.xml” (i:e EmailMeApp/config.xml) and add following line :-

<plugin name=”cordova-plugin-email-composer” spec=”1″ />

Step -3 : Implementing Email Me Application

3.1 – Editing index.html :

  • Open  “index.html” (i:e EmailMeApp/www/index.html), and remove all the html contents from the <body> tag, And place the following codes inside the <body> tag.

Codes :

 

Send Us Your FeedBack

Click Here

       

 

Output : Open your index.html in a browser and the screen will look like below

LazyEasyBRS

3.2 – Editing index.js file :

  • In above UI when the user will click on the “Click Here” button the compose mail screen of installed mail client will be opened.
  • Now lets implement the functionalities, for this open the “index.js “ file present inside “EmailMeApp/www/js/index.js” , and write the following codes

Codes :

bindEvents: function() {

        document.addEventListener(‘deviceready’, this.onDeviceReady, false);

        document.getElementById(“mailBtn”).addEventListener(“click”, this.composeMail)

    },

    // deviceready Event Handler

    //

    // The scope of ‘this’ is the event. In order to call the ‘receivedEvent’

    // function, we must explicitly call ‘app.receivedEvent(…);’

    onDeviceReady: function() {

        app.receivedEvent(‘deviceready’);

        cordova.plugins.email.isAvailable(

            function (isAvailable) {

                alert(‘Before proceeding check your mail settings …’) ;

                // Add app alias

            }

        );

    },

    composeMail : function(){

        cordova.plugins.email.addAlias(‘gmail’, ‘com.google.android.gm’);

        cordova.plugins.email.open({

            app: ‘gmail’,

            to:      ‘bichhubiswa@gmail.com’,

            subject: ‘Greetings’,

            body:    ‘How are you? Dummy mail from Bichhu …’

        });

    },

4 – Building and Running the Application

4.1 – Building Your App

  • Here we will only build the app for Android platform, if you want to build app for other platforms then you can do it similarly by slightly modifying the syntax (Ex : Tutorials Point).

Syntax :  cordova build android

  • Now you can find the apk files at “EmailMeApp/platforms/android/build/outputs/apk” .

                4.2 – Running Your App

  • You can now simply take the apk file from the said location and install it in your android device and run it .
  • For more alternatives to run an apk file please refer to Tutorials Point .
LazyEasy BRS

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s