Over the past few weeks I've been digging deep into StrongLoop and rather enjoying the heck out of it. As I said in my earliest post - I'm not necessarily a fan of tools generating code for me or lots of "automagical" stuff at the framework level, but after working with the LoopBack framework and models I got over it pretty darn quickly. I'm definitely sold on the concept and am exciting about digging into the other parts of StrongLoop's offering. But before I went too much further in that direction, I wanted to write up a complete example that covered a fully functioning server and mobile app running on Bluemix. To the end I've created a project and a set of videos to help guide you through the process. Let's get started!
Getting the Code and Testing
You can find all of the code on GitHub: https://github.com/cfjedimaster/StrongLoop-Bluemix-Ionic. While this will give you the raw code, obviously it won't give you all the tools you need to run through everything. For the server-side, you'll need:
- Node.js
- StrongLoop (installs via npm, you also want to register at the site)
- Sign up at Bluemix and grab the cf command line tools here: Deploying your app with the Cloud Foundry command line interface
For the client-side, you'll want:
- Apache Cordova and some mobile platform to test on. You may be able to get buy with the browser platform though.
- Ionic (installs via npm)
That's a lot, but I assume if you are a developer you probably already have Node and hopefully you have Cordova done too. There are no requirements for editors but I strongly recommend Visual Studio Code. Ok, so let's get started!
An introduction
In this video, I go into detail about what is being built and what components are being used. To be honest, this blog post itself explains most of that so I won't be offended if you skip this, but I also demonstrate the final app so you can see everything come together.
Server-Side Setup
In this video, I walk you through creating the Node.js application using the StrongLoop command line. I then show StrongLoop Arc Composer visually designing a simple model. I then show you the API in action and quickly create a few objects to test that everything is working.
Building the mobile app in Ionic
In this video, I create the application with Ionic. I don't walk you through every line of code, but rather show the completed source code and explain how I did it. Angular's $ngResource made this incredibly simple. Shockingly simple actually.
Deploying to Bluemix and adding Cloudant
In the final, and longest, video, I walk you through pushing the application up to Bluemix and then adding Cloudant to the mix. As I said, this is the longest part, so let me know if anything isn't clear.
Wrap Up
All in all, you've got about 20 minutes of video, and in that time a server is created and hosted live and a front end application is setup to speak to that server via an API. That's power. Incredible power. Obviously I'm pretty biased towards all the technologies used in the stack here but frankly I think I have reason to be. They kick butt. I hope you think so as well!
Edit
Just a quick FYI - after posting this article, I discovered that the StrongLoop folks actually had a four part series on the same topic! I haven't read it yet, but part one is here: Part 1: Ionic & LoopBack Frameworks – Building a REST API.