I am trying to get the Wikitude Cordova plugin to work with a blank Ionic project. But not getting a lot of success trying to link all the javascript files etc.
So these are the steps i did:
create a new ionic project
installed ngCordova
added the iOS and android platform
did a build of them both
installed the Wikitdue Cordova plugin
added my license key to the following file WikitudePlugin.js
added index.js to the main index.html file in the www folder
created in www a folder called views and in there I created another folder called camera
in the camera folder I created a js folder and place the js files (marker.js & fromwebservice.js), this folder also contains the following files: cameraview.html and poidetail.html
In the cameraview.html file I call upon the wikitude architect like so:
<ion-view view-title="Pub Stop">
<ion-content class="background">
Camera
</ion-content>
</ion-view>
And in the poidetail.html I place the following code:
<ion-view view-title="Detail">
<ion-content class="background">
<h1>test</h1>
</ion-content>
</ion-view>
When I run it on the phone via Ionic View nothing happens, so I run it in the browser and I get the following error:
Anybody who was able to successfully integrate the Wikitude plugin with Ionic or sees what I did that went wrong ...
In order to use the wikitude SDK you need a real device not the browser or emulated device.
Related
I’m unfortunately having difficulty deploying my ionic project for web. No matter what I do, commands such as 'ionic build, ‘ionic build --prod’, ‘ng build --prod’, or whatsoever always create a www folder that is incorrect. The index.html in this www folder is always blank when viewed from a browser.
I’ve tested this issue on other ionic projects as well (just generated some from templates) and the same issue occurs here, with the index.html in the www folder always being displaying a blank site. If possible, I’d appreciate any help if that’s OK!
ionic cordova platform add browser
ionic cordova run browser
ionic cordova build browser --prod
For testing purpose use ionic serve . It will rebuild automatically every time when you update your code.
have you changed the base href in index.html from
base href="/"
to
base href="."
I am trying to build a cordova/ionic app in visual studio 2015. I have loaded the ionic & cordova extensions. I have installed Node. When i create the template for an ionic app, none of the ion tags in the html file are recognised.
e.g. both of these are not recognised
<body ng-app="starter">
<ion-nav-back-button>
After much searching i also have noticed that i don't have a _references.js file. I created the file but i don't get the auto sync option.
Have i missed a reference in my setup?
Did you create your ionic project from an existing VS template? That could help you avoid any missing parts that you forgot to manually install. The first few steps of this guide can show you how to add these ionic templates to VS: http://taco.visualstudio.com/en-us/docs/tutorial-ionic/
I installed Cordova Plugin for OpenTok iOS in Ionic app
Using this
cordova plugin add https://github.com/songz/cordova-plugin-opentok/
When i refer it using this
< script type="text/javascript" charset="utf-8"
src="opentok.js">
in Index.html File
I get not found (404)
This is normal behavior, because cordoba serves the plugin on the mobile device. When you debug on your web, cordoba is inactive, so you need to provide these dependencies yourself.
In order to incorporate the Toastr ngCordova plugin.. I followed the following steps
bower install ngCordova
include ngCordova in my app
angular.module('app', ['ionic', 'ngCordova'])
Install plugin
cordova plugin add https://github.com/EddyVerbruggen/Toast-PhoneGap-Plugin.git
Use the plugin
app.controller('myController', function($cordovaToast) {
});
This seems pretty straight forward. However I encounter the following errors:
ionic.bundle.js:21157 TypeError: Cannot read property 'toast' of undefined
at Object.show (http://localhost:8100/lib/ngCordova/dist/ng-cordova.min.js:9:20474)
I am running the app in chrome browser.
What am I missing here ?
ngCordova plugins won't work in the browser.
From documentation:
Only develop on your phone
Cordova plugins do not work while developing in your browser, because each plugin accesses a specific API (such as camera, microphone, accelerometer) which is not available in your browser. Additionally, some plugins don't work in the emulator, such as the Camera plugin, so development on your physical device is required.
In this case be sure that your application works on your device.
The Ionic framework is pretty great stuff. I was able to successfully build an app with some Angular code I have been working on, but I can't find an answer to the simple question of how to rename the app that gets generated. The output app is always called HelloCordova and there doesn't seem to be any documentation on how to change the name of the app. If I start manually digging through the project directory replacing HelloCordova, I end up with an app that won't run. Surely, people have solved this before.
Edit: You want to change the config.xml file in your project's root directory.
The tag which is responsible for the app name is <name>.
look up the config documentation for more.
Updated
Change the name in config.xml (# project root) see the : documentation.
Execute this command : $ sudo ionic cordova platform remove ios
Check if the folder ios under platforms folder is deleted.
Execute this command : $ sudo ionic cordova platform add ios
If changing the name is not working for any reason delete entire platform folder and then
cordova platform add ios
ionic build ios
If your looking to change the iconic view name be sure to also update ionic.project
Yes, you just have to modify the config.xml. Find a "name" tag and put your required name between this tag.
The following steps will help you as it did to me.
Rename app name in config.xml
<name>Your_new_name</name>
ionic cordova plugin save
ionic cordova rm ios
ionic cordova add ios
ionic cordova plugin add --save cordova-plugin-facebook4 --variable APP_ID="my_app_id" --variable APP_NAME="my_app_name" --variable CHANNEL_NAME="master"
In the parent directory of the ionic project there is a config.xml
<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<widget id="com.ionicframework.todo497320" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
<name>CHANGE NAME HERE</name>
Note that the project name will be seen in various other places in the app, all these will be changed automatically when the app is built
In the parent directory of the ionic project there is a config.xml
CHANGE NAME HERE
If changing the name is not working for any reason delete entire platform folder and then
cordova platform add ios
ionic build ios
You should make this change in the config.xml found at the root of your project. For example you might have something like this:
***<widget id="com.ionicframework.exampleproject223738" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">***
Change the id to whatever you wish your package to be and it will work for the entire project, Android and iOS.
However, if you've already submitted to the app store with a package name, you cannot change the package name at this point. Not unless you want to submit a new project. Updates must be made with matching package names.
For ionic 4.5.0 the "ionic platform" command has been renamed and the following commands are not used anymore:
ionic platform remove ios
ionic platform add ios
Instead use:
ionic cordova platform add ios
ionic cordova platform remove ios
Note: ios or android depending on your case