Category Archives: Cordova/Phonegap

Angularjs with Baasbox

Ionic framework for mobile app development use angularJs at its core while baasBox is an open source backend-as-a-services platform (pretty much like parse.com except it allow you to self hosted). I encounter problem when using both together. baasBox provide a javascript framework but it required jquery as dependency. Problem is… when I using baasbox ajax function, its callback fail to access angularJs $scope directly, hence i failed to assign variable to my html. for example, this would fail: Then, I did a little experiment trying to grab baasBox API in raw and prove to be successful: This means I can write an angular javascript sdk for baasBox. That would be a prefect solution but I am running out of time. Then, I think of the possibility to make use of $scope.$apply. This allow me to use back the baasBox jquery base js sdk with angularJs in a straight forward manner. Bingo! It works like a charm now.  

WebSocket Server & Mobile Client

Has been playing around on socket.io  but couldn’t get the client and server code separated. I need the server code running on a pc while the client code is just a static html that I can embed inside phonegap or etc. After hours of struggle, I decided to looks for other library and finally rest on these 2 combination: https://github.com/Worlize/WebSocket-Nodehttps://code.google.com/p/jquery-websocket/ thru Simon’s Hamsphire’s kraken blog Simon wrote a very good article on demonstrating these 2 combination. My article here  further demonstrate how to broadcast the msg to multiple clients and fixed some bugs. Ok, so lets’ do this step by step, server first then only the client.

Server part:

  1. First, you need to have nodejs installed.
  2. Save the above code into websock-server\index.js
  3. Then, in your terminal/cmd, type npm install websocket@1.0.3 to install the nodejs websocket library.
  4. Make sure your port 8080 is not occupied by other program as I am using port 8080 in this example.
  5. Next, in your terminal/cmd, cd into the folder and type node index.js
As you can see, I made some modification to the index.js file:
  • It now do not take in a protocol
  • Able to do broadcast by keeping a list of connected clients
  • Modified on request and close request to support the clients tracking function
  • Instead of parrot back the same msg, it is now broadcasting any sender’s msg to everyone. More like how a chat room behave

Client Part:

For the client part, I going to create 2 interface, one for sending and receiving chat msg (index.htm), another for receiving chat msg only (logger.htm).
  1. You will need to change the Server IP in it into yours (ws://192.168.0.200:8080)
  2. The code is pretty simple, everything is self described.
  3. So now i can open the index.htm and type a msg, and it will appear on the space below the input box, as well as in logger.htm
  4. I can even put index.htm into phonegap (need to provide option for user to enter the Server IP) and it can serve as a ‘controller’ while logger.htm can be modified to be a ‘receiver’
Index.html code   Finally, to save your day, I put up the full source code here at https://github.com/exiang/websock. All the best and have fun!  

PhoneGap App

Spending too much time to edit, build, transfer and run your app between PC and mobile device? Web browser cant test all the features? PhoneGap App is here for rescue http://app.phonegap.com First, you need to install the desktop app, then install the mobile app, and last pair the two. However, it only support phonegap project and not codova.      

Getting started with Cordova

Formerly known as phonegap, cordova helps you build hybrid type of mobile app fast and easy across all platform. If you are accessing from http://phonegap.com/, then the documentation there will ask you to do the following installation which is deprecated at the moment: You should enter from http://cordova.apache.org/ and follow the instruction there. Basically, you need to have npm first. I assume you are just like me, using windows and focusing on android app development. Basically, cordova will ask you to  follow either the cross-plaform or platform-specific method. I will just use cross-platform as it’s the point of picking up cordova iin firstplace. At the time of writing, cordova is at version 3.5.0. The documentation is available here. After you have installed the cordova CLI and created your first app, …you will wanto try to add a platform to it: Then, you realize there is an error. Basically, it is bcs your android SDK path is not register on windows environment. You may follow this stackoverflow article solution. If you dunno what I am talking about at this point, most probably you haven’t get your android SDK installed too. Basically, you need to have these setup first:
  1. Download and install Eclipse Classic
  2. Download and install Android SDK
  3. Download and install ADT Plugin
Finally, when you have got everything ready, to build the app, you call: and to send it to your phone thru usb cable: You should beable to see the default page with cordova logo now. Congratulation, you have got your very first cordova app built and running!