StrongLoop, Ionic, and IBM Bluemix

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!

wecandothis

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:

For the client-side, you'll want:

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.

Like This?

If you like this article, please consider visiting my Amazon Wishlist or donating via PayPal to show your support. You can also subscribe to the email feed to get notified of new posts.

Want to read more like this?