Next steps with Ionic - looking for some guidance please :)

ionic-v1
1

Hi there,

I’ve currently (nearly) finished the front end of a real estate listing apps that i’m building to learn the framework. It’s a tabbed based application with a detail page of the listing - all the routing and controllers are (finally) working as expected… So…

It’s now ready for me to take this app to the next level and wire it up to a backend DB. I want to use postgresql with a node server to provide the API’s (the reading i’ve been doing suggests that this is the solution for this).

My question is around some tutorial documentation however, I’ve been looking but unable to find anything that’s clear and well documented to step a n00b through the process of setting this all up. Does anyone have, or know of, a good resource that shows this??

Would be mucho appreciative!

Adam

2

Congrats on finishing up the front end!

I’ve found this guys tutorial series very helpful and you can look at how he sets up the client side and then the server side to talk with eachother:

http://coenraets.org/blog/2013/09/how-to-upload-pictures-from-a-phonegap-application-to-node-js-and-other-servers-2/

And the repo his is talking about:

Basically what you need to do is set up a node.js server, and have this listen on a particular port. For me, when I’m developing, I have my server pointed to localhost:3000

so then from my app, I can send and recieve requests from http:localhost:3000/api

When I deploy my server, I use heroku which gives me a url for my project, and I just change the endpoints to point to

https:herokuapp.whatever.com/api
instead of localhost

I hope this helps you get started. Please let me know if you need any help.

3

thanks DaDanny! i got this up and running on the weekend and have a get and a put endpoint that work through postman.

I’m looking to see how I can send data to the put api now, it’s displaying the data from the Get okay…

4

How are you getting data from the GET?

You can do something like this:

*note that code won’t run, I just wrote out the syntax for you.

Essentially what you are doing is creating a factory which returns a promise object. A promise is basically a way to say, this is doing something and when its done, I want to do something with the results.

So the promise makes the request to your endpoint. In your case, the request is a PUT request.

Once that request returns, the .then .catch and .finally methods will be called from within your controller. This is when you could display something to the user like “Update successful” or “Sorry there was an error!”.

Make sense?

5

that’s awesome! thanks :slight_smile: so i’ve managed to implement this by changing the method to a post on the rest api that i built… (using ngResource).

So, my factory is:

angular.module('appServices', [
'ngResource'])

// Build this out using a factory
.factory(‘ListingService’, function($resource) {

return $resource('https://stark-bastion-2443.herokuapp.com/listings/:id',{id: "@id"});

})

and i’m calling this in the controller thusly;

 $scope.updateListing = function(listingId,price,date) {

    ListingService.save({id: listingId}, {sale_price__c: price, sale_date__c: date});
 };

now, if i’m reading you right, i should change this to be…

 $scope.updateListing = function(listingId,price,date) {

    ListingService.save({id: listingId}, {sale_price__c: price, sale_date__c: date});
 }.then(function({ //do something else}));

is this correct?

thanks muchly for the help btw!

6

thinking about this i want to refresh the page and then show a user an ‘update successful’ notification.

i’m thinking that this would then change to:

$scope.updateListing = function(listingId,price,date) {
var query=ListingService.save({id: listingId}, {sale_price__c: price, sale_date__c: date});
query.$promise.then(function(){
//not sure what goes in here yet});
}

is that about right? has ionic got any cool animations etc for update successful etc?

7

Hey,

Honestly, I’ve never used ngResource in my life. Never had a need as I found $http to be perfect for my needs. So I can’t really help you out there.

But as far as changing it to include the .then function, that is correct. Do you understand why and what the .then method is for? If not, I can elaborate on it and give you a good article on it. I find promises incredibly useful. They are one of my favorite things in web development, no joke. So make sure you know why/where to use them.

Now for you second comment.

You are correct about where the logic goes. If you want to perform an action once the request is successful, put it in the .then. I forgot to mention that you should also check the status code of your response and make sure its the one you wanted. There can be times a .then would run even though the request doesn’t succeed. Its not often, but still best to be sure.

As far as refreshing the page, may I ask why you would like to do so? Really there is no need. With Angular/Ionic, you can simply update the view without refreshing the entire page.

For example, in one app, I have a chat room view that lists all of your chat rooms. You can click a button called “Add New Chat” which makes a request, returns a promise and when that request comes back successful, I just add the new chatRoom to the chatrooms array and the user sees this. No refresh required.

In regards to a success notification, you have a lot of options. I would recommend chechking out


or
http://ngcordova.com/docs/plugins/toast/

Basically what these will do is display a message to the user that doesn’t require a user action (it can if you want though). These are used throughout apps to say things like “Logged in” or “Profile Saved”, and I think should work in your case.

Does all of that make sense? If not, let me know, I’m more than happy to help.

EDIT

I just noticed that you are defining a variable for the promise. Really, there is no need to do that, and I would avoid creating unnecessary variables. If your Service save function returns a promise, you can just use the .then .catch methods on that, without assigning them to something else. Unless thats what you want/need.

1 Like
8

Hi @DaDanny, thanks so much for all your help on this one!

i’m building out something to show to a customer for a demo and it’s pretty much working now (for demo state anyway), so i’m not going to start this right now…

however, i’ll happily share what i’ve done once this process in over in a couple of weeks or so!

9

I’m looking forward to it and would be happy to give you feedback/tips/advice. Good luck!