Using Ionic 1.2.x I'm trying to setup notifications using Ionic's new cloud services, and I followed the very few instructions to install and configure it within the application, but then the docs say the app_id is in ionic.config.json, which it isn't. So I looked in a new file .io-config.json, and I can see the "app_id" key has a value of "undefined", and then I have what looks like a proper api_key. The app also doesn't get created in the Dashboard, which the docs say it should.
What do I do if there is no app_id value, and the Dashboard doesn't contain an application? The new Cloud services docs definitely don't appear to be up to date.
Okay, you need to run ionic login in your terminal, and then follow the setup instructions by running ionic io init.
Related
I have a project in Ionic 4, when I do ionic serve it runs at localhost:8100/
Now when it loads home page, the URL is localhost:8100/home, if I open contact page the URL becomes localhost:8100/contact.
When I try to copy the above URL and hit, then it says -
Sorry, this page doesn't exist. Please check the URL or go back a page.
What do I need to do to get this working?
Based on your comments this is happening because your server does not support fallback. So when you enter a url manually, the server is trying to find that page, but you only have index.html in your app because of Client side routing.
If the app uses the Angular router, you must configure the server to
return the application's host page (index.html) when asked for a file
that it does not have.
The configuration is specific to your server or cloud platform. You can check Angular deployment for more info.
This regularly should not happen and you can't do anything for this. Try to upgrade your ionic to the latest with nodejs since the error my be from currupted project creation. Then after update create a new project and it should go good.
How to use Ionic Cloud in AngularJs - Ionic Projects generated using generator-ionic
While it is straight forward to use Ionic Cloud services in an angular app, it is not working in apps generated using yeoman ionic generator. It is because of the packaging steps followed by it. How to make those projects to work with Ionic Cloud?
Ionic Platform:
Build, push, deploy, and scale your Ionic apps, the easy way.
Title Description:
The Ionic Platform is a cloud platform for managing and scaling cross-platform mobile apps. Integrated services enable you and your team to build, deploy, and grow your apps efficiently.
Document Objective:
Ionic Platform works well with the standard Ionic projects. But projects following any Non-standard Directory Structure may face a few hurdles. This documents provides the steps to use Ionic Platform in the Ionic projects created using Yeoman.
Document Scope:
This document covers the basic steps for creating an Ionic project using Yeoman and integrating it with Ionic Platform using the Ionic Platform Web Client. This document covers the basic steps to utilize Ionic Deploy, Ionic Analytics and Ionic Push.
Intended Audience:
The intended audience for this document is Web/Mobile App developers, with both beginner and expert level expertise, who are familiar with the below Prerequisites.
Prerequisites:
You should be familiar with the following frameworks/tools before trying this document.
AngularJs: https://docs.angularjs.org/guide
IonicFramework: http://ionicframework.com/docs/guide
Yeoman: http://yeoman.io/codelab/index.html
Ionic Generator: https://github.com/diegonetto/generator-ionic
Ionic Platform: https://ionic.io/platform
Ionic Framework generator
A generator for the Ionic Framework from Yeoman, the Web's Scaffolding tool for modern webapps
Node.js is a JavaScript runtime built on Chrome's V8 JavaScript engine. npm is the package manager for JavaScript. Download and install Node (and npm) from http://nodejs.org
$ npm install npm –g
$ npm install -g yo
Yeoman helps you to kick-start new projects, prescribing best practices and tools to help you stay productive.
$ yo ionic [app-name]
In package.json include the following in devDependencies
"grunt-string-replace": "^1.2.1"
In bower.json include the following in dependencies
"ionic-platform-web-client": "^0.7.1"
In Gruntfile.js change the scripts folder to ‘js’. Change in index.html too if required.
grunt.initConfig({ yeoman: {………… scripts: 'js', ………… } })
Then run
$ bower install && npm install
$ grunt$ grunt serve$ cordova platform add android $ grunt build:android --debug
ionic-platform-web-client
A web client that provides interactions with the Ionic platform.
We need some code to let your app talk to the Ionic Platform. We need to add the Ionic platform web client for the Ionic app to interface with the plugins and the Ionic.io platform.
$ ionic io init
In your app.js add the ‘ionic.service.core’ module dependency. In Gruntfile.js add the grunt task ‘ionicSettings’ as given below.
grunt.initConfig({
ionicSettings:JSON.stringify(grunt.file.readJSON('./.io-config.json')),
ionicIoBundlePath:'www/bower_components/ionic-platform-web-client/dist/ionic.io.bundle.min.js',
'string-replace':{
ionicSettings:{
files:{
'<%= ionicIoBundlePath %>':'<%= ionicIoBundlePath %>',
},
options:{
replacements:[
{
pattern:'"IONIC_SETTINGS_STRING_START";"IONIC_SETTINGS_STRING_END"',
replacement:'"IONIC_SETTINGS_STRING_START";var settings =<%= ionicSettings %>; return { get: function(setting) { if (settings[setting]) { return settings[setting]; } return null; } };"IONIC_SETTINGS_STRING_END";'
}
]
}
}
},
copy:{
ionicPlatform:{
expand:true,
cwd:'app/bower_components/ionic-platform-web-client/dist/',
src:[
'**'
],
dest:'www/bower_components/ionic-platform-web-client/dist'
}
}
});grunt.registerTask('ionicSettings',
[
'copy:ionicPlatform',
'string-replace:ionicSettings'
]);
Add the 'ionicSettings' in init and compress tasks after copy.
In index.html move the below tag after all the tag declarations.
<script src="bower_components/ionic-platform-web-client/dist/ionic.io.bundle.min.js"></script>
Then run
$ Grunt serve
Ionic Deploy
Push real-time updates to your production apps, and manage version history.
Ionic Deploy lets you update your app on demand, for any changes that do not require binary modifications, saving you days, or even weeks, of wait time. Follow the below procedure to configure Ionic Deploy for your App.
In Gruntfile.js add the grunt task ‘deploy’ as given below.
grunt.registerTask('deploy',
function (){
return grunt.task.run( [
'init',
'ionic:upload' + this.args.join()
] );
});
then run
$ ionic plugin add ionic-plugin-deploy
Ionic Deploy Code:
var deploy = new Ionic.Deploy();// Check Ionic Deploy for new codedeploy.check().then(function(hasUpdate){
},
function(err){
});// Update app code with new release from Ionic Deploydeploy.update().then(function(result){
},
function(error){
},
function(progress){
});
Deploying Updates:
Send out new code for your app.
Create an apk and install your app. Make few changes in your code and deploy the changes using 'grunt deploy'. Then update it from your app.
You can also deploy it from the apps.ionic.io dashboard. You can deploy the app without the deploy parameter. Then, in the dash board you can add the metadata and versioning details and deploy the app from there.
$ grunt build:android --debug
$ grunt deploy --note "release notes"
$ grunt deploy --note "release notes" --deploy=production
Ionic Analytics
View the live feed of events or the raw / unique number of events / users over time.
How many users are on your app right now? How many of those will use your app tomorrow, or next week? Without information, you have no way of telling if your app is being used in the ways that you expect. Follow the below procedure to configure Ionic Analytics for your App.
In your app.js add the ‘ionic.service.analytics’ module dependency after the ionic.service.core
Run the analytics register method in our module's run function.
$ionicAnalytics.register();
In Ionic Analytics, each tracked action a user makes in your app is represented by an event object. An event is a single action done at a specific point in time. To track your own events, call $ionicAnalytics.track(eventType, eventData) whenever an action occurs.
$ionicAnalytics.track('User Login', { user: $scope.user});
The ion-track-tap directive sends an event when its host element is tapped. The associated ion-track-data directive attaches event data.
<button ion-track-tap="eventType" ion-track-data="expression"></button>
In the apps.ionic.io dashboard you can view the following analytics data,
Events: View the raw number of events over time, or the number of unique users who completed an event. An event can be anything from a user loading the app, to confirming a purchase.
Funnels: A funnel is a sequence of actions that you expect users to take in your app, leading up to a defined goal. Thoughtful use of funnels will let help you improve conversion rates.
Segments: View events over time, grouped by a specified property. Or, calculate the percentage of events that match a given property. Segments helps you understand your user base and see how properties change over time.
Retention: Track how long users are active on your app before they stop using it. Or, identify how long it takes for users to reach a defined goal, like a completed sale.
Pulse: A live feed of events coming in from your users.
Ionic Push
Send targeted and automated push notifications to your users.
Ionic Push lets you create targeted push notifications through a simple dashboard that will be sent automatically when users match specific criteria, and offers a simple API to send push notifications from your own servers.
Android Push Profiles:
Android push notifications use the Google Cloud Messaging (GCM) service. Open the Google Developers Console and create a project. Copy down your project number. This will be the GCM sender ID or GCM Project Number.
In the API Manager section, enable the Google Cloud Messaging API. Then navigate to Credentials section and select Create credentials, then choose API Key, then Server Key. Name your API key and leave the Accept requests from... field blank and click Create. Save your API key!
Authentication:
Go to your app's dashboard on the Ionic Platform and navigate to Settings -> Certificates. If you haven't already, create a new security profile, then hit edit. Note down the Profile Tag.
Now, click the Android tab and find the section marked Google Cloud Messaging, enter the API Key you generated on the Google Developer Console, then click Save. Go to Settings -> API Keys. Under API Tokens, create a new token and copy it. This will your API Token.
$ ionic plugin add phonegap-plugin-push --variable SENDER_ID="GCM_PROJECT_NUMBER"
$ ionic config set gcm_key <your-gcm-project-number>
$ ionic config set dev_push false$ ionic io init
Note: phonegap-plugin-push requires Android Support Repository version 32+
In your app.js add the ‘ionic.service.push’ module dependency after the ionic.service.core
Ionic Push Code:
Initialize the service and register your device in your module's run function. You'll need the device token that is registered by the user for sending notification to the user.
$ionicPush.init({
debug:true,
onNotification:function (notification) {
console.log'token:', notification.payload); }, onRegister: function (token) { console.log(' Device Token:',
token); $ionicPush.saveToken(token); // persist the token in the Ionic Platform
}
});
$ionicPush.register();
then run
$ grunt build:android --debug
Ionic Push lets you create targeted push notifications through the dashboard. You can also send notifications from the server in the below format.
curl -X POST -H "Authorization:Bearer API_TOKEN" -H "Content-Type:application/json" -d '{
"tokens":[
"DEVICE_TOKEN"
],
"profile":"PROFILE_TAG",
"notification":{
"message":"Hello World!" "android":{
"title":"Hi User",
"message":"An update is available for your App",
"payload":{
"update":true
}
}
}
}'"https://api.ionic.io/push/notifications"
Note: The steps to configure Ionic Push for iOS is the same except for creating the Push Profiles. To create iOS push profiles refer http://docs.ionic.io/v2.0.0-beta/docs/ios-push-profiles
I am currently learning OpenShift and would like to experiment with a few examples. I have created an OpenShift account (using my github account as a login) and was able to create a new project and deploy an application online. Note that I'm using OpenShift Online (Developer Preview) which I think is OpenShift 3.
Now, I'd like to import that OpenShift project into Eclipse IDE. However, I cannot sign in to connect to the online server.
I tried both the versions 2 and 3 of the OpenShift server unsuccessfully. Attached is a screenshot of the error I'm getting
As shown on the screenshot, I can get a token when clicking the retrieve link (which does take me to the OpenShift site, with a token generated. This shows that eclipse does connect to https//console.preview.openshift.com).
I've also tried authentication with both username and password, leading to the same outcome.
Any help is appreciated.
This error is because you are using the free version. You need to use you console address in 'Server:' that you get after clicking the 'Open Web Console' button that you get after logging in to openshift.
This url should be something like this: "https://console.starter-us-east-1.openshift.com/console/catalog". You may use just "https://console.starter-us-east-1.openshift.com". And then click 'Next', it should work.
i've got a problem with google appengine and eclipse.
I'm going and try to be very specific:
I'm trying to make it work NOT locally, so i've done the following:
1) create a project in the google developer console
2) created a google app engine new project in eclipse passing the project number and the api key obtained in the google developer console
3) deployed the app engine project on appengine.google.com, and it says that the state is "running"
4) to do the previous point i had to give the app id number generated in the developer console
5) i set this variable: LOCAL_ANDROID_RUN to false, because i want to do it online
that's it, i get the following error:
2) Registration with Endpoints Server...FAILED!
Unable to register your device with Cloud Endpoints server running at https://myapp.appspot.com/_ah/api/ etc etc
Ah and "myapp" is not a generalization i made to hide the app id of my app, thats exactly what it tells, it seems like the id i gave it is not passed to the url...
I've been trying this for 2 hours, it's getting painful, please help me!^^
The Google Earth browser plugin apparently no longer requires a key and it's impossible to request one.
The problem is when I run their sample code (Chrome 18 and FireFox 10) found here I get an error message:
The Google Maps API key used on this web site was registered for a different web site. The developer of this web site can generate a new key here.
When I check their plugin page it tells me:
Good news, you already have the Google Earth Plug-in installed. (Version 6.0.3.2197)
So no key is required, but when I try to run the code sans key I'm told to get one, and I can't because Google has removed the ability to request one or download the update. I read online that 6.2 is the newest version but the key has not been required since 6.
Any advice is appreciated.
After trying a force refresh, emptying the cache, and upgrading the browser, Google Chrome still wouldn't allow my example that doesn't use a key to work. I've figured out how to fix the issue.
The problem was that Chrome wasn't automatically updating the Google Earth browser plugin, regardless of the browser. Additionally, their plugin page confirmed I had an old version (6.0.3) but wouldn't allow me to manually update either. So I deinstalled the plugin following these instructions, and then downloaded the newest version (6.2.2) and installed it. One final thing I had to do (on my MacBook Pro): the new plugin installed in Library in my user directory
~/Library/Internet Plug-Ins/
but to get it working correctly I had to move the "Google Earth Web Plug-in" file to the root's library and then restart Chrome.
/Library/Internet Plug-Ins/
The Earth API doesn't require a key - your sample code appears to be working properly. In case you do see an error message in the future, make sure that there's no key= parameter when loading the Google JS:
<script src="http://www.google.com/jsapi?key=ABQIAAAAwbkbZLyhsmTCWXbTcjbgbRSzHs7K5SvaUdm8ua-Xxy_-2dYwMxQMhnagaawFo7L1FE1-amhuQxIlXw"></script>
The keys are specific to a domain, so if you copy old sample code from somewhere (such as from the Demo Gallery, for example) you should just strip out the key=xxx portion:
<script src="http://www.google.com/jsapi"></script>
Despite it saying you don´t need an API key for Google Earth at various official places, your problem is solved, if you create one on https://code.google.com/apis/console (under "API access" and then click on "Create new browser key") and include in the jsapi include: <script src="//www.google.com/jsapi?key=yourkeyhere" type="text/javascript"></script>