Wednesday, 20 January 2016

IONIC WiFi Plugin Example App using Phonegap/Cordova [Cordova WIFI Plugin ]


This is a simple app to implement a Simple WiFi Application with functionality using IONIC Framework on the top of Phonegap/Cordova. This application is designed for Iphone, Android and Windows Phone but can also be deployed as Blackberry Application. I name it as WiFiApp targetting the management of WiFi and their connectivity.

Setting Up the Project

Installation Required:
  • Node JS for NPM Packages
  • Cordova
  • IONIC Framework
  • Android SDK (for the deployment to the Device/Emulator)
  • IOS (you need a MAC for the deployment to the Device/Emulator)
  • And the involvement of Third Party Plugin "WiFi Wizard"

Create Project Directory

Here's a link to the Github Repository WifiApp. You can either download a zip or simply clone it with Git Bash.
git clone https://github.com/DynamicRemo/WifiApp.git

Plugin Installation

cd IonicAppCRUD
After the navigation to the Project Directory, we can run our project with ionic serve command and the output will be displayed in the Browser.
cordova plugin add com.pylonproducts.wifiwizard
Once the plugin is added to our application, we are good to test and deploy.

Platform, Build and Deploy

ionic serve
Or we can have the App View just like the Mock Ups for IOS and Android, its a new cool feature by IONIC.
ionic serve --lab
Moreover, we can add IOS and Android Platform to our Project and can directly deploy to our Device.             
ionic platform add android
ionic platform add ios
ionic run android
ionic run ios

Application Overview

Followings are the different views of Application: Searching for WiFi, Detected WiFi(s) and the success message for the Connection.

 




















For feedbacks and discussion, please leave a comment. Thank You!

Posted by at
Labels: , , , , , , , ,

54 comments:

  1. Unknown13 March 2016 at 05:35

    This comment has been removed by the author.

    ReplyDelete
  2. Unknown13 March 2016 at 10:58

    excellent app to understand the wifi functionality but my requirement is to click wifi available and connect to it by providing password.

    ReplyDelete
    Replies
    1. Dynamic Remo13 March 2016 at 16:33

      Yes, this App is performing your desired functionality.
      In this simple App you can connect to any listed WiFi(that is not Password protected).

      Delete
    2. i am a blogger30 March 2016 at 13:29

      it does not perform amit's desired functionality

      Delete
    3. Dynamic Remo19 April 2016 at 14:15

      can you please elaborate the requirement you are expecting? then I can surely have a look and add a functionality.

      Delete
  3. Unknown31 March 2016 at 02:49

    Hey i was looking for plugin for wifi then i found this. But you are using angular gs.But recently i want to develop an app using cross platform. But i am using Visual studio and cordova. So how i can have wifi plugin for visual studio and cordova in order to use the functionality of wifi.

    ReplyDelete
    Replies
    1. Dynamic Remo19 April 2016 at 14:14

      you can use any cordova supported plugin, the only variation is to how you add the plugin, either you can add this "WifiWizard" Plugin or if you have find any other suitable one.

      Delete
    2. Unknown9 June 2016 at 04:01

      This comment has been removed by the author.

      Delete
  4. Dynamic Remo19 April 2016 at 14:13

    This comment has been removed by the author.

    ReplyDelete
  5. Unknown23 April 2016 at 08:58

    This comment has been removed by the author.

    ReplyDelete
  6. Unknown23 April 2016 at 10:16

    Hi Remo !

    First, thanks a lot for your Ionic App.

    I try to add 1 function to the wifiservice.js file which is WifiWizard.setWifiEnabled. What I want is when the app is starting, if the Wifi is disabled on the phone, the app sets WiFi enabled. Unfortunately, when I run the app, and if the WiFi is disabled, I have directly the error message "Wifi is not enabled.".

    What I did:

    wifiservice.js

    function startWifi(param){
    WifiWizard.setWifiEnabled(param,win_wifi,fail_wifi)
    }


    app.js (just after $scope.wifiList = []; ):

    $scope.startWifi = function(enabled){
    WifiService.startWifi(enabled);
    alert("startWifi");
    }

    Thank you.

    ReplyDelete
    Replies
    1. Dynamic Remo25 April 2016 at 04:57

      I got your concern, the thing is Cordova/Phonegap apps need some extra milliseconds to get ready while you are using some third party plugins just like "WifiWizard". That's the reason why as soon as app starts your variable $scope.startWifi tries to get initialized before even the plugin is ready.

      A simple hack is to delay your initialization by some seconds using the cool circular slider and you will be good to go. Cheers :)

      Delete
  7. Muhan9524 April 2016 at 04:18

    This comment has been removed by the author.

    ReplyDelete
  8. Muhan956 May 2016 at 13:19

    Hi, I'm having trouble setting this up - asked you on github and you closed the issue - if you can help me I'd be more than willing to pay you for your time, thanks.

    ReplyDelete
    Replies
    1. Dynamic Remo18 May 2016 at 15:05

      @Muhan95 please have a look at the repository, i just pushed Node Modules, Plugin and Platform Folder for you. Sorry for the late response.

      Hope this will help you out, Cheers ;)

      Delete
  9. henry7 June 2016 at 02:28

    HI, great tutorial. I followed all your steps and even downloaded the demo zip from your git page. The wifi networks are found without issues but when I click on a network ( open network, no password) . I get the following error |: WifiWizard cannot connect to network. What could be the issue ?

    ReplyDelete
    Replies
    1. Dynamic Remo7 June 2016 at 04:32

      Thank you for the feedback.
      Henry, I just tested the application on my device and it works fine. Moreover, Please make sure, that the wifi which you are connecting to, is connecting directly from the Native Wifi Setting with a single click or you have already provide credentials via the Phone Setting.

      As this is a simple application that connects only to those network which are open and dont need any authentication or any proxy setting. Cheers ;)

      Delete
    2. henry8 June 2016 at 05:05

      Hi Dynamic Remo, thanks alot for the feed back.Just one clarification: i noticed that if i have already connected to the open network on the phone's native wifi settings then navigate to your mobile app and select the same network, it returns a success; but if i simply navigate to your application and attempt to connect to the same wifi without connecting it first on the native application, it returns an error. Should this be so ?

      Delete
    3. Dynamic Remo13 June 2016 at 03:49

      that's strange, may be I need to review the application or some appropriate function (from the plugin) for this.

      Delete
  10. henry8 June 2016 at 05:04

    This comment has been removed by the author.

    ReplyDelete
  11. Unknown9 June 2016 at 06:53

    Is there anyway to include a button to enable wifi on and off, please give a suggestion. Im trying to build it as a normal wifi-configuration as in our smart phones. Help me!

    ReplyDelete
    Replies
    1. Dynamic Remo13 June 2016 at 03:47

      No, the plugin which I have used in this tutorial doesn't provide any such function to Turn On/Off Wifi. I believe there must be some other plugin out there for Phonegap/Cordova that will fulfill you need. Cheers!

      Delete
    2. Unknown13 June 2016 at 06:25

      okay, is there anyway to connect to a particular network once we get the wifilist and if so what is the procedure or the function I have to write.

      Delete
    3. Dynamic Remo13 July 2016 at 02:52

      it can be performed with almost the same function which is invoking the click event on List Items. You have to pass the particular SSID for that Wifi.

      Additionally, you have to wait for few seconds and let the plugin come along with the flow of application.

      All the best, cheers!

      Delete
  12. Unknown20 June 2016 at 15:35

    This comment has been removed by the author.

    ReplyDelete
  13. Unknown20 June 2016 at 15:35

    I have two primary questions,

    first: the pluguin is only for android? I would love it compiled in ios ...
    second: the method disconnect could not make it work, could you give me a hand ...

    thank you

    ReplyDelete
    Replies
    1. Dynamic Remo13 July 2016 at 02:47

      first: WifiWizard's latest release also support IOS
      second: please post your code here and we all can have a look at your approach of handling that.

      cheers!

      Delete
    2. Sreedev31 October 2016 at 00:51

      is there a support for getScanResult also in IOS ?

      I see the below in the IOS src

      (void)getScanResults:(CDVInvokedUrlCommand*)command {
      CDVPluginResult *pluginResult = nil;

      pluginResult = [CDVPluginResult resultWithStatus:CDVCommandStatus_ERROR messageAsString:@"Not supported"];

      [self.commandDelegate sendPluginResult:pluginResult
      callbackId:command.callbackId];
      }

      Delete
  14. Unknown7 July 2016 at 14:13

    HI,

    I would like to use same plugin WifiWizard for Ionic2/Angular2,
    Could you please tell me how can I inject it in ts code "type script", so I can use this method: WifiWizard.getConnectedSSID().

    Thank you

    ReplyDelete
    Replies
    1. Dynamic Remo13 July 2016 at 02:48

      Hi, I recently thought in the same direction. May be you can wait a bit and I will have that one also as a tutorial :)

      Delete
    2. Unknown13 July 2016 at 10:11

      Thank you Remo

      Delete
    3. Unknown27 January 2017 at 14:51

      Hello,

      Is there a WifiWizard release for Angular2/ionic2 app using cordova / Android platform
      Thank you

      Delete
  15. Unknown19 July 2016 at 04:11

    Hey Remo,

    Downloaded the App and tried to get it to run on my iphone. I got the alert pop up saying 'index.html' Network Failure: Not supported.

    When I try running it locally on the mac in the browser I get:
    "wifiservice.js:46 Uncaught ReferenceError: WifiWizard is not defined(anonymous function) @ wifiservice.js:46"

    Would appreciate any help you could give. Not managed to work out what is causing the issue.

    Thanks

    ReplyDelete
    Replies
    1. Dynamic Remo25 July 2016 at 05:10

      Hi, please follow the steps under the heading of "Setting Up the Project" and "Adding Plugin: WiFiWizard".

      Moreover, for IOS you need to have the latest version of the Wifiwizard Plugin as the previous versions were only supported for Android.

      Hope this helps, Cheers!

      Delete
    2. dev14 August 2016 at 06:49

      Hello,
      i facing same issue... please help me...
      Thanks,

      Delete
    3. DesiAmma28 October 2016 at 15:04

      I have the same problem. Do we have to inject WifiWizard as a dependency?

      Delete
    4. DesiAmma28 October 2016 at 15:05

      If so, how do we do the dependency injection?

      Delete
  16. Unknown19 July 2016 at 07:42

    hi thanks for this great tutorial, my problem is i downloaded the GitHub files to my machine but when i try to run it i get this error "WifiWizard is not defined" please can you tell me the problem is.Thanks.

    ReplyDelete
    Replies
    1. Dynamic Remo25 July 2016 at 05:11

      Hi, as Githun repository only contains the skeleton for the Application and you have to explicityly install the plugin. Please follow the steps under the heading of "Setting Up the Project" and "Adding Plugin: WiFiWizard".

      Cheers!

      Delete
    2. DesiAmma28 October 2016 at 13:19

      I get the same error "ReferenceError: WifiWizard is not defined" where the code refers to WifiWizard.startScan()
      I have followed the steps exactly as you have mentioned above. I am new to Ionic and Cordova. Is there something else I need to do? Please help.
      Thanks.

      Delete
    3. DesiAmma31 October 2016 at 11:37

      It works now! Thanks for this app

      Delete
    4. The_Human_Mind14 February 2017 at 02:57

      @DesiAmma: Can you please explain the steps that helped you solve this problem.

      Delete
  17. knsakib28 July 2016 at 23:56

    This comment has been removed by the author.

    ReplyDelete
  18. knsakib28 July 2016 at 23:56

    Hi, is the code need to be updated? In my android, it is always searching, (loading icon)? I could not find any wifi.

    ReplyDelete
  19. Daniel Jauregui12 September 2016 at 09:17

    This comment has been removed by the author.

    ReplyDelete
  20. Daniel Jauregui12 September 2016 at 09:19

    Not detect any network , is kept looking , what I can do?

    ReplyDelete
  21. Unknown14 September 2016 at 19:00

    Many thanks for your sharing.









    Tag: router wifi buffalo

    ReplyDelete
  22. Unknown14 October 2016 at 13:36

    Shouldn't you inject "WiffiWizzard" in the WifiService?

    Thanks!

    ReplyDelete
  23. Unknown28 October 2016 at 00:38

    When i run on marshmallow it show me this error .. Network Failure: Need ACCESS_COARSE_LOCATION or ACCESS_FINE_LOCATION permission to get scan results ...



    Thanks ...!

    ReplyDelete
  24. Fede.19 January 2017 at 09:30

    Hi. Does anyome could make it usin ionic 2?

    ReplyDelete
  25. Unknown3 February 2017 at 12:51

    Thanks for the tutorial. I'm new and trying to learn how to do this... but I'm confused... I followed the steps exactly as above and I get: "ReferenceError: WifiWizard is not defined[Learn More]". Is see others are having trouble as well. What am I misssing?

    ReplyDelete
  26. Arun17 April 2017 at 00:18

    I have added the plugin as mentioned in the above steps. But still shows the error as Uncaught ReferenceError: WifiWizard is not defined at wifiservice.js:46

    ReplyDelete
  27. Kriti Jain1 May 2017 at 01:12

    Did anyone used this plugin in ionic2?

    ReplyDelete
  28. foo12 May 2017 at 09:23

    It works for me on ionic2 but I need to do a few updates:

    - cordova platform update android. It use version 4 and need >= 5.
    - cordova plugin add wifiwizard. The plugin of the tutorial is a legacy version from phonegap.
    - npm install. Cordova throw me and error about this, I don't know exactly why.

    cordova run android --device didn't work but run button in android studio yes. Build your apk and bingo!.

    ReplyDelete

Subscribe to: Post Comments (Atom)