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!

54 comments:

  1. This comment has been removed by the author.

    ReplyDelete
  2. 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. 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. it does not perform amit's desired functionality

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

      Delete
  3. 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. 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. This comment has been removed by the author.

      Delete
  4. This comment has been removed by the author.

    ReplyDelete
  5. This comment has been removed by the author.

    ReplyDelete
  6. 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. 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. This comment has been removed by the author.

    ReplyDelete
  8. 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. @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. 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. 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. 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. that's strange, may be I need to review the application or some appropriate function (from the plugin) for this.

      Delete
  10. This comment has been removed by the author.

    ReplyDelete
  11. 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. 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. 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. 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. This comment has been removed by the author.

    ReplyDelete
  13. 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. 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. 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. 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. 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. Hello,

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

      Delete
  15. 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. 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. Hello,
      i facing same issue... please help me...
      Thanks,

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

      Delete
    4. If so, how do we do the dependency injection?

      Delete
  16. 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. 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. 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. It works now! Thanks for this app

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

      Delete
  17. This comment has been removed by the author.

    ReplyDelete
  18. 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. This comment has been removed by the author.

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

    ReplyDelete
  21. Shouldn't you inject "WiffiWizzard" in the WifiService?

    Thanks!

    ReplyDelete
  22. 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
  23. Hi. Does anyome could make it usin ionic 2?

    ReplyDelete
  24. 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
  25. 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
  26. Did anyone used this plugin in ionic2?

    ReplyDelete
  27. 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