window.plugins.AdMob always undefined in ionic app - angularjs

I'm trying to include this admob plugin.
I've tried everything, but whatever I do, the window.plugins.AdMob is always undefined.
I checked it on my android device and also on the ios simulator (I know it's not working in the browser).
What I did:
I added the plugin with the following command:
cordova plugin add com.google.cordova.admob
Then I tried following the instructions from the plugin, but also used the code example from here.
But whatever I do, window.plugins.AdMob is always undefined.
I also tried loading it with a 3000ms timeout (because some answers say that the plugin is not initially ready and takes some time).
I really don't have a clue what to try next or what step I missed.
I also tried the google analytics plugin and followed the tutorial here but again, the "analytics" object is undefined. What do I miss here?

Instead of using window.plugins.AdMob, please directly use AdMob, or window.AdMob.
It's defined in the plugin.xml:
<js-module src="www/AdMob.js" name="AdMob">
<clobbers target="window.AdMob" />
</js-module>
The example code you see, is for the old AdMob plugin.

1.install admob phonegap plugin
cordova plugin add https://github.com/admob-google/admob-cordova
init admob plugin
init plugin after deviceready event
admob.initAdmob("admob banner ID","admob interstitial ID");
3.show admob ads
admob.showBanner(admob.BannerSize.BANNER,admob.Position.TOP_APP);//show banner at the top of app

Take a look at this https://github.com/Dharmoslap/ng-cordova. You can use AdMob Pro as well.

Related

How to include and use cordova plugins

I'm struggling with cordova plugins in my ionic app. Been googling whole day, no big win yet.
here's what I'm trying to do - open a web page inside my app with navbar present. I found that cordova-themeable might work that out
...however...
I installed it
$ cordova plugin add cordova-plugin-themeablebrowser
ok, it's present
$ cordova plugin list
cordova-plugin-camera 2.2.0 "Camera"
cordova-plugin-compat 1.0.0 "Compat"
cordova-plugin-console 1.0.3 "Console"
cordova-plugin-device 1.1.2 "Device"
cordova-plugin-splashscreen 3.2.2 "Splashscreen"
cordova-plugin-statusbar 2.1.3 "StatusBar"
cordova-plugin-themeablebrowser 0.2.15 "ThemeableBrowser"
cordova-plugin-whitelist 1.2.2 "Whitelist"
ionic-plugin-keyboard 2.2.0 "Keyboard"
now, I'm trying to use it in controller function
$scope.doStuff = function doStuff() {
cordova.ThemeableBrowser.open('http://apache.org', '_blank', {
...
and call it in my .html file
<ion-item ng-click="doStuff()">
I get the following error
ReferenceError: cordova is not defined at Scope.doStuff
in my index.html, I've got
<script src="lib/ionic/js/ionic.bundle.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<script src="js/app.js"></script>
please help, thanks
Can you verify the plugin is in your config.xml?
It should look something like this:
<plugin name="com.phonegap.plugins.example">
<param name="APIKey" value="12345678" />
<param name="APISecret" value="12345678" />
</plugin>
would have added this as a comment, but not enough rep and only posting as i cant see any mention of any of this.
make sure it is injected properly into your app, given the error or cordova not defined i'm assuming this might be an issue. i couldnt find any specifc references to it, but considering it is built on top of the inappbrowser, i would assume the DI would be $cordovaInAppBrowserProvider.
while reading the docs, from their gitgub FAQ "I just installed this plugin, how come it just shows a blank toolbar?
The purpose of this plugin is to allow you to style the in app browser the way you want. Isn't that why you installed this plugin in the first place? Hence, it does not come with any defaults. Every UI element needs to be styled by you, otherwise it's hidden. This also avoids polluting your resouce bundle with default images."
To add a plugin you are doing right, i.e. if you want to use cordova adomb plugin:
cordova plugin add cordova-admob
Regarding to the error: Are you debugging in browser or in real device? Normally in browser, you should use
cordova platform add browser
phonegap serve
(I recommend you to use phonegap serve insetad of cordova serve as sometimes it works better, but shouldn't make the difference)
Another way to debug apps is to use android remote debug.

Implementing a Social Sharing in Ionic using cordova plugins

I'm trying to implement social sharing in ionic. I followed this tutorial https://www.thepolyglotdeveloper.com/2014/10/implement-social-media-sharing-ionicframework/
I'm getting the error as
TypeError: Cannot read property 'socialsharing' of undefined
at Object.share (ng-cordova.min.js:9)
at Scope.$scope.shareAnyWhere (shareController.js:10)
at $parseFunctionCall (ionic.bundle.js:21037)
at ionic.bundle.js:53344
at Scope.$get.Scope.$eval (ionic.bundle.js:23093)
at Scope.$get.Scope.$apply (ionic.bundle.js:23192)
at HTMLButtonElement.<anonymous> (ionic.bundle.js:53343)
at HTMLButtonElement.eventHandler (ionic.bundle.js:11706)
at triggerMouseEvent (ionic.bundle.js:2863)
at tapClick (ionic.bundle.js:2852)
I have install the plugins which was mentioned in the tutorial.
First make sure you include ng-cordova before cordova.js. Then take a look at the working example here, try that.
Secondly, Make sure you are doing your tests on a real device or on an emulator, Social sharing plugin is intended for native sharing functionality on the OS you are targeting, it is not intended and it will not work on the browser. If you are on a browser then that is why!
You can use the Ionic CLI to run your tests.
You can make use of window.plugins.socialsharing object and call the functions like shareViaFacebook etc ..this is working for me right now in all my projects.
For more details and full code you can check the video here Social Sharing Plugin: Ionic App

ngCordova PROGRESS INDICATOR doesn't works

I'm trying create ionic app project with ngCordova plugin progress indicator, but it doesn't works. Somone know How to do to make it work ?
angular.module('starter')
.controller('MyController',
function ($scope,$ionicPlatform, $state, $cordovaProgress, PopupService, $cordovaCamera) {
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
}
$scope.login = function()
{
$cordovaProgress.showDeterminateWithLabel(true, 50000, "Loading");
}
If we look at the official ngCordova documentation found here:
http://ngcordova.com/docs/plugins/progressIndicator/
It says that it works for Android and iOS, however as of right now, this is not true.
Let's dig a big deeper.
ngCordova is just a wrapper for Apache Cordova plugins, so if we visit the plugin developers page found here:
http://paolobernasconi.com/cordova-progressIndicator/
It says that only iOS is supported and Android is coming soon. However, this is not entirely true either. I personally made a revision to ngCordova found here:
https://github.com/driftyco/ng-cordova/commit/67f5f0dd2359aee3e53b0adf91c2f6c0d2c30854
The only Android ProgressIndicator commands are show and hide.
Example:
$cordovaProgress.show(message)
This might change in the future (or already has?), but as of right now there are plenty of iOS commands for ProgressIndicator, but only two for Android.
I suggest tracking the module to see if it changes since it is still alpha.
Regards,
I tried $cordovaProgress.show(message) - $cordovaProgress.show("Searching...") to be exact and it's still not working on Android.
Tested on both android emulator and physical Asus zenphone.
However definitely working for IOS.

built ExtJs 4.2, app doesn't run without old classes

I minified/built my app that uses ExtJS 4.2.0 (free version) using Sencha SDK Tools 2.0.0 beta3, and the app was built successfully. However, when I try deleting the old "app" folder containing my old classes, the app no longer works.
I also tried generating a new app using Sencha CMD 4.0.1.45 and then adding my classes, but the results are the same.
I am confused why this happens, because as I understood it, your old classes are not needed to deploy production app. In fact, the only javascript files you need to include in your "index.html" file are "ext.js" and "app-all.js".
I used Firebug and saw in the DOM that the app, along with my classes, are loaded.
I also noticed that "app-all.js" defines classes like this:
Ext.define("MyApp.view.MyClass"...
Is this really how it is supposed to behave? or am I missing something?
Thanks in advance!
Okay, I got it. A .js file in my application calls Ext.require on itself, causing the app wiring go crazy.

Sencha touch app remains on blue loading screen when viewing on Android device or emulator

I just created a basic sencha app by
sencha generate app --name AndroidDemo --path ../demo
and I viewed it in browser and everything is perfect.
I then followed the instructions here: http://www.sencha.com/blog/android-setup-for-sencha-touch/
and compiled the app with Sencha Cmd and when the emulator opens I only get a blue loading screen.
I also tried compiling/building the app with phonegap on phonegap build site and the build finishes successfully and after loading the app in my andoid device, again I only see the loading page and it stays on this page and the app does not launch.
I'm completely clueless. Need your help friends.
Thanks,
In your app code may be miner syntax error or other error so while app run in emulator check log cat or other option run or app in chrome and check console log. Because loading screen display in case of error as my expression with this.
i'm having the exact same problem..
(currently on windows, btw)
while it's not exactly a solution,
a workaround that i did (out of desperation to see the rest of my app on the emulator):
is to just install it directly to the emulator using the "adb" command.
haven't tried this on a mac, but i'm guessing it's almost the same thing?
after building the app using "sencha" cmd, open cmd/terminal to the build directory.
-assuming you did not change the output location, the apk will be created in your
project root folder under this folder:
"build\native-package-mobile\MYAPPNAME\packager.json\"
make sure the emulator is already running
run the following in command/terminal at the folder where the apk is located:
adb install -r MYAPPNAME.apk
wait for awhile and it should say successfully installed.
run the app in the emulator and hopefully it will go beyond the loading screen.
I don't know why this issue is happening though.
(only started tinkering with android dev/sencha yesterday and it seems to be doing all in it's power to prevent me from running my app. haha)
please share if you find the correct fix for this :)
This usually happens when you build your version and you did not imbed all needed components.
For example, when you use ...
Ext.Image
... in your code.
While running without ...
Sencha app build xxx
... Sencha will grab the component from the touch/src components folder.
But at the time you build the app, it cannot reference to that folder any longer and Sencha will stall.
Please open the console and look out for a warning like this:
[WARN][Anonymous] [Ext.Loader] Synchronously loading 'Ext.MessageBox';
consider adding 'Ext.MessageBox' explicitly as a require of the
corresponding class
You need to add these to the requires section of either App.js or a class where you use the item (here Ext.Messagebox).
Another way to find out what is happening is to run the build code inside the browser and look into the console (so instead of localhost/myapp/index.html you run localhost/myapp/build/{package}/{myapp}/index.html).
There is one other thing that might happen. It’s the scope of async operations.
Like this:
Ext.defer(function() {this.log(‘all good’);}, 500);
this is not the scope of your class.
You need to use:
Ext.defer(function() {this.log(‘all good’);}, 500, this);
Or you might even use ...
Ext.bind()
...to bind the scope to the function.

Resources