In this post, I will continue from where we left in Part 1 of this series. In part 2, I will talk more about the front-end side of things. Ahh, I have a background in web development, hence I call this front-end, but that's not the most accurate thing to say in these modern times. So the right way to say this is, I will talk about the Ionic app in this Github repository(IonicAppWithRestBackend) in more details in this post.
The Ionic app is a simple sidemenu app which fetches some data from the backend and displays it . The screenshot on the right shows what the app looks like.
So what did we do in part 1?
In part 1, we got to the point of running our backend on the web server that ships with Django. To refresh your memory, this is how we got the backend server running,
Clone the repo
git clone https://github.com/cptdanko/IonicAppWithRestBackendcd IonicAppWithRestBackend/backend/python_django/restBackend/
Note: if you are using Windows, you may want to change "/" to "\" in the above command.
Once there you can run the backend server with the following command
python manage.py runserver
At this point we should have out backend running on http://localhost:8000/, which exposes two RESTful endpoints that can be accessed like this
http://localhost:8000/smugglers/
and
http://localhost:8000/smuggler/id/
I will talk more about what these end points do a bit later, but for now lets talk about the Ionic app.
So how do we run the Ionic app?
To run the Ionic app in this project, in the folder where you cloned the repo i.e. IonicAppWithRestBackend, navigate to the following directory
cd IonicAppWithRestBackend/ionicApp/
Note: Windows users watch out for the "/"
and run the following command
ionic serve
This will start the Ionic app and you can test it in the browser using at http://localhost:8100.
What is the Ionic app in this repo?
The Ionic app is a simple sidemenu app which fetches some data from the backend and displays it . The screenshot on the right shows what the app looks like.
When you run the app, it fetches some data(names of 2 smugglers) from the
http://localhost:8000/smugglers/
endpoint from our backend. Data is fetched using the $http service in AngularJS. In addition to the official AngularJS docs, you can also look at the tutorial: Integrating a Backend Service with AngualrJS on Learn Ionic.
If you click on Hondo or Han the app will use the id of the smuggler to fetch more details about him from this endpoint
http://localhost:8000/smuggler/id/
and show that info using an Ionic popup.
p.s. regarding the data, hmmm...let's just say, I am looking forward to Dec 2015!
So any other problem solved to be able to have a solution like this?
Since both our Ionic app and the RESTful backend are running on localserver, I ran into the CORS issue when I first started working on this. Thankfully this blog post on the Ionic blog provides a solution to this owing to which the ionic.project file for the Ionic app in this repo(IonicAppWithRestBackend) looks like this,
"proxies": [
{
"path":"/api/",
"proxyUrl": "http://localhost:8000/"
}
]
Now, if you look at the code in HomeCtrl.js in this repo, the urls we pass to the $http service look something like
/api/smugglers
or
'/api/smuggler/'+smugler.id+'/';
That combined with the proxy that we have in our ionic.project file means that every time our app is calling a url which has api in it's path, the api part of the url will be replaced with
http://localhost:8000/
http://localhost:8000/
so when we call(invoke)
/api/smugglers/
thanks to our proxy, the actual url invoked will look like this
http://localhost:8000/smugglers/
/api/smugglers/
thanks to our proxy, the actual url invoked will look like this
http://localhost:8000/smugglers/
Any last words?
None actually! Like I said in part 1, should you have any questions about this or suggestions on how I can improve this repo, then please leave a comment.
The fate of the project with my associate
To get an idea of what project am I talking about, have a read of the motivation section in part 1 of this post. To avoid any distractions from the actual content of this post, I was saving this for the end. So the project for which I had to build a solution like this: after a year of working on it, it came to a very sudden and somewhat quick finish. The best way to summarise it would be.. it was like a girl breaking up with a guy over a text message. So this is the summary of our breakup conversation,
Associate: 'Bhuman there have been problems from the beginning and I am done now'
Bhuman: 'But we can make this work, it's been a year and you never mentioned this'
Associate: 'No, I can't do this anymore. It's not me, it's you and I don't think you can change!'
Yeap that is pretty much how it happened. So there was no talking about it or any warnings prior to this, the only time she mentioned anything was when she was ending it. Ohh and all of this was over email. There's more to the story, she used a few(harsh) words that she really shouldn't have but I will spare you the details. You know summarising all of it this way and given how it happened it's hard not to see the funny side of it.
Comments