Parse push notification with ionic - angularjs

I am trying to set up a push notification with parse to handle received notifications.
I used phonegap-parse-plugin plugin and was able to set it up correctly.
My problem with it is that I cannot handle the received notifications. I would like to redirect a user to a the page for the notification based on the notification json params.
So, I decided to switch to parse-push-plugin, but my problem with it is that I cannot even get it to show the alert registered box; it cannot even find the ParsePushPlugin method.
I followed the tutorial which is simple enough and added this to my app.js file
ParsePushPlugin.register(
{ appId:"xxx", clientKey:"xxx", eventKey:"myEventKey" }, //will trigger receivePN[pnObj.myEventKey]
function() {
alert('successfully registered device!');
},
function(e) {
alert('error registering device: ' + e);
});
ParsePushPlugin.on('receivePN', function(pn){
alert('yo i got this push notification:' + JSON.stringify(pn));
});
The alert success just failed to show so I guess it is not working or I am not doing the right thing.

Use phonegap-plugin-push. It is easy to implement and use.
Config :
var push = PushNotification.init({
"android": {
"senderID": "Your-sender-ID",
"forceShow": true, // To show notifications on screen as well
"iconColor": "#403782",
"badge": "true",
"clearBadge": "true" // To clear app badge
},
"ios": {
"alert": "true",
"badge": "true",
"clearBadge": "true",
"sound": "true",
"forceShow": "true"
},
"windows": {}
});
Device Registration :
push.on('registration', function(data) {
localStorage.setItem('pushToken', data.registrationId); // Save registration ID
});
Handle Notifications
push.on('notification', function(data) {
console.log(data);
// Handle all requests here
if (data.additionalData.$state == "mystate") {
$state.go('app.conversations');
}
})

Related

Ionic 1 deploy service progress bar

i implemented the deploy service to my ionic app (i am using ionic 1) and it is working fine, now i want to show the users the time remaining for the download or maybe a progress bar so they do not think that the app is freezing.
below is the function of the deploy
var deployFunction = function() {
$ionicDeploy.check().then(function(snapshotAvailable){
if (snapshotAvailable) {
// When snapshotAvailable is true, you can apply the snapshot
MainService.startSpinner("Downloading Updates");//this shows a loading image indicating that the download started
//applying the snapshot
$ionicDeploy.download()
.then(
function() {
MainService.stopSpinner();
MainService.startSpinner("Extracting");
$ionicDeploy.extract()
.then(
function(){
MainService.stopSpinner();
$ionicDeploy.load();
}, function(error) {
console.log("ERROR EXTRACT "+error);
// Error extracting
}, function(progress) {
// progress of extracting
console.log('extraction progress '+progress);
}
);
}, function(error){
//download error
console.log("ERROR Downloading "+error);
}, function(progress) {
//download progress
console.log('download progress '+progress);
}
);
}
});
}
i've read somewhere that the progress function should return an integer...
but it is not and i have no idea how to get information about the download beside that it is started or it is finished.
any help would be appreciated
for future references this was solved based on this documentation, the code will be
$ionicDeploy.download({
onProgress: function(p) {
console.log(p);
}
})
.then(
function() {...
i tried it and the console logged numbers from 1 to 100 indicating the download progress.

Display JSON array data in reactjs

I might be making a silly mistake but I have this REST API output that i am consuming in UI through React and I am partially getting the output. When i console log, i get the output for ( testRows is data in AJAX - this.setState({testRows: data});) :
this.state.testRows.Type as 'Application Performance'
but when i do this.state.testRows.Names[0] to print first value i.e. desc2, i face an error. What is the correct way to display or print array values of JSON in react?
{
"Names": [
"desc2",
"desc3"
],
"Result": 0,
"Type": "Application Performance",
"dateTime": [
"2016-07-26 20:35:55",
"2016-07-26 20:35:55"
]
}
ReactJS :
var App = React.createClass({
getInitialState: function () {
return {
testRows: []
};
},
componentWillMount: function (event) {
$.ajax({
type: "GET",
crossDomain: true,
url: /details/3,
success: function(data) {
this.setState({testRows: data});
}.bind(this),
error:function(data) {
alert("Data sending failed");
}
});
},
render: function() {
console.log(this.state.testRows.Type); ~~ I get the output
console.log(this.state.testRows.Names[0]); ~~ Error
return (
);
}
});
var element = document.getElementById('content');
ReactDOM.render(React.createElement(App), element);
You are trying to console log the Names from your render method.
Render method gets called immediately after the component is mounted, which means that your ajax has not completed by that time and so your state does not have Names and hence when you try to access an undefined error is thrown.
But after your ajax is completed and state is set, and when render is called again the if clause satisfies and your code works as the names is now available.

Loopback angular 401 Authorization Required

i'm developing app with loopback & angular. I extened "user" modal in loopback into "puser" modal with some addi. fields('reportto'). Login & Register for the extended modal is working fineBut when i tried to use the method "find", its showing 401 Authorization required.
Code:
Puser.find({
filter : {
where : {
"reportto" : '639124805'
}
}
}, function(success) {
console.log(success);
}, function(error) {
console.log(error);
});
Please chk the screenshot for req. header.
Can anyone help on this?
By default, loopback protects find method to be accessed only the owner rule.
In order to change it you have to override the model configuration json. (for more information click here)
For example, to allow public access to all methods add the following acl:
"acls": [
{
"principalType": "ROLE",
"principalId": "$everyone",
"permission": "ALLOW"
}
]

Cordova FileTransfer: upload image to AWS s3

Am using ng-cordova file-Transfer plugin to upload images to my AWS s3 bucket.
but i run into two problems first it didn't work, second i have no idea how to debug the problem while the App running on the emulater.
here is my code:
.controller('newItemCtrl', function($scope, $http, API_URL, me, $cordovaFileTransfer) {
var s3URI = encodeURI("https://mybucketname.s3.amazonaws.com/"),
policyBase64 = "MY_BASE64_ENCODED_POLICY_FILE",
signature = "MY_BASE64_ENCODED_SIGNATURE",
awsKey = 'my AWSAccessKeyId',
acl = "public-read";
var options = {
fileKey: "avatar",
fileName: "image.png",
chunkedMode: false,
mimeType: "image/png"
// params = {
// "key": fileName,
// "AWSAccessKeyId": awsKey,
// "acl": acl,
// "policy": policyBase64,
// "signature": signature,
// "Content-Type": "image/png"
// }
};
var imageURI = '../img/ionic.png';
$scope.upload = function($cordovaFileTransfer) {
$cordovaFileTransfer.upload(s3URI, imageURI, options)
.then(function(result) {
console.log("SUCCESS: " + JSON.stringify(result.response));
}, function(err) {
console.log("ERROR: " + JSON.stringify(err));
}, function(progress) {
// constant progress updates
});
}
})
I also left the params code to ask another question it's commented, but before i run my app and it gives me an error with the params but my question why i got the error even before invoke the template assosiated with that controller
I had a similar problem, to debug I used the live server logs to check and see if the file upload hit the server at all, some errors I noticed:
my server was expecting a different file key
the Access-Control-Allow-Origin header wasnt being sent properly in the server's response
Then, I also installed the cordova native notifications plugin (link here) and sprinkled alerts throughout the file transfer callbacks to see where things were getting stuck
Anyway probably not the best way to debug, but it worked.
Hope that helps.
...one more thing the params part of "options" seems to work best when applied in this format:
var options = {
fileKey: "avatar",
fileName: "image.jpg",
/*params: {
"value1":"value1",
"value2": "value2"
}*/
};
var params = new Object();
params.value1 = "value1";
params.value2 = "value2";
options.params = params;
from the cordova docs "params: A set of optional key/value pairs to pass in the HTTP request. (Object)" so passing in a dictionary may be subtly different, I'm not sure, all I know is that it worked once I made that change.
To debug on emulator I use this from my app directory: ionic emulate ios -lc
That shows me errors or logs into the console.

Show json returned message in a div after each ajax response , extjs4 grid

I have a gridpanel , a Model, an autosync Store with an ajax proxy with read and update functions and a RowEditing plugin in extjs4 .
Consider the following json:
{ "success": true,"Message":"Grid Data Successfully updated.", "users": {"uname":"jdoe","fname":"John","lname":"Doe","SSN":125874,"mail":"jdoe#example.org"},{"uname":"jsmith","fname":"Jack","lname":"Smith","SSN":987456,"mail":"smith#example.com"}}
I want to know if there is a way to render the value of "Message" to an HTML div tag (my_div for example) after receiving each response?
You can use the DOM Helper, see the sencha api : http://docs.sencha.com/ext-js/4-0/#!/api/Ext.DomHelper
Ext.onReady(function(){
Ext.DomHelper.insertHtml('beforeBegin', Ext.getDom('test'), "Prepend this string");
});​
Above code will get the HTML element with ID test and it will insert the string Prepend this string beforeBegin of the content of this div.
See the fiddle to play around: http://jsfiddle.net/PddU4/Prepend this string
EDIT 2012-02-16:
You need to listen to your proxies success and failure: (you could also implement a listener when loading your store or on update)
listeners: {
success: function( response, options ){
console.log(response);
},
failure: function( response, options ){
console.log(response);
},
}
EDIT BASED ON YOUR COMMENT:
First make sure you configured properly your successProperty and messageProperty in your reader. Then implement the listener where you want it to be, update, remove, add, exception etc. :
(configure the listener within your proxy object)
listeners : {
update : function(thisStore, record, operation ) {
console.log('Update happened');
console.log(record);
console.log(operation);
},
save : function() {
console.log('Save happened');
},
exception : function(dataproxy, type, action, options,response, arg) {
console.log('Error happened');
console.log(response);
doJSON(result.responseText);
},
remove : function() {
console.log("Record removed");
}
}
When you console.log(response), you will see the response object. This would be your actual JSON so you need to parse it (as in doJSON() method):
function doJSON(stringData) {
try {
var jsonData = Ext.util.JSON.decode(stringData);
Ext.MessageBox.alert('Success', 'Your server msg:<br />jsonData.date = ' + jsonData.message);
}
catch (err) {
Ext.MessageBox.alert('ERROR', 'Could not decode ' + stringData);
}
}
Please check out this AJAX tutorial: http://www.sencha.com/learn/legacy/Manual:Core:Ext.Ajax

Resources