Category: Mobile

Posted on

Fixing “:CFBundleIdentifier, Does Not Exist” Error in React Native iOS build

After spending a couple of hours trying to debug this issue, I thought I would write about the solution that worked for me. Here are some of the possible solutions I found on the web –

  1. Make sure 8081 port is free and not taken by any application. On Mac you can check this by running command lsof -i :8081. If any process is running then kill it – kill -9 <pid>
  2. Remove spaces from the folder path of the project
  3. Run react-native upgrade in the project folder

In my case the problem was #1. However simple lsof command did not show any process. But sudo lsof -i :8081did show the process. It turned out that McAfee agent was running on the same port. Killing the agent is not an option for me. So the next thing to do was find a way to change the port of Ract-Native packager.

Following steps worked for me –

  1. Opne node_modules/react-native/local-cli/server/server.js and change port 8081 to the port you want to run the packager on. In the version of React-Native I am using, it is in the following code – 
    module.exports = {
  name: 'start',
  func: server,
  description: 'starts the webserver',
  options: [{
    command: '--port [number]',
    default: 8090,
    parse: (val: string) => Number(val),
  },
  2. Change references to port 8081 in following files –
    1. node_modules/react-native/Libraries/Core/Devtools/getDevServer.js
    2. node_modules/react-native/React/React.xcodeproj
    3. node_modules/react-native/React/ReactLegacy.xcodeproj
    4. node_modules/react-native/React/Base/RCTBundleURLProvider.m

If above changes do not fix the problem, you may want to try replacing all references to port 8081 in the files in node_modules/react-native folder.

Wish Facebook makes changing packaging port easier than the above process.

-Ram Kulkarni

Posted on

Encrypting data with Crypto-JS in JavaScript


I have been working intermittently on a HTML5 mobile application for some time now. This application stores some sensitive date locally (it is a standalone mobile application) and I did not want to store the data in clear text. I wanted to make retrieval of data difficult to some extent, if the device ends up in the wrong hands. So the data had to be encrypted. The application code is in JavaScript, so I started looking for a JS library that can encrypt data. I found that Crypto-JS met my requirements and it was easy to use too.

Before I proceed further, I must confess that my knowledge of encryption and digital security in general is very basic. So the solutions discussed in this post may not be the best in terms of protecting the data.

As I said, Crypto-JS is very simple to use. You can use different cipher algorithms like AES. DES etc. and APIs are simple. e.g. to encrypt using AES , you would call –

encryptedData = CryptoJS.AES.encrypt(textToEncrypt, secretPhrase); //include aes.js script

In the above API, the first argument to encrypt function is text data you want to encrypt, e.g. password. The second argument is a secret phrase (also called passPhrase). This could be any text. Secret phrase is the key that is used to encrypt the data. However you will have to use the same key (secret phrase) when decrypting the data. Continue reading “Encrypting data with Crypto-JS in JavaScript”

Posted on

Creating CFMobile Application using AngularJS

In my previous blog articles I had explained how to create CFMobile applications using JQuery, Bootstrap/JQueryMobile. Here are links to sample (CFMobileExpenseTracker) applications using the two UI frameworks –

I wanted to create the same application using AngularJS. It had been on my ‘to learn’ list for sometime now. So I spent the last weekend learning it. If you already know concepts of MVC and Dependency Injection, then understanding AngularJS is not difficult. The well documented tutorials also helped.

I decided to re-write CFMobileExpenseTracker using AngularJS and JQueryMobile. Since AngularJS provides very easy way to manipulate DOM, you really don’t need JQuery. But I had to include it in the application anyway because JQueryMobile depends on it. I also used JQuery for basic event handling.

Earlier in my application I had used client side custom tag (expenseList.cfm) to display expense items by calling JQuery APIs to modify DOM and update UI. I could get rid of this custom tag entirely after using AngularJS, because of templating features  and automatic synchronisation between model and view provided by Angular JS.

Here are the screen shots of the application –
2014_04_24_image12014_04_24_image2

Though I said that I re-wrote the application, it was not a complete re-write. I could reuse CFCs and made small modifications to index_include.cfm. I added a new JS file (angular_app.js) to crate AngularJS application and controllers – Continue reading “Creating CFMobile Application using AngularJS”

Posted on

ColdFusion Splendor – When to use invokeCFClientFunction

I have seen some confusion when it comes to using invokeCFClientFunction. I have been asked this question a few times, more recently on LinkedIn, so I thought explaining it in a blog post might be a good idea.

If you don’t know already, ColdFusion Splendor has added support for client side CFML (<cfclient>) and this code is translated to JavaScript.  You can call JavaScript functions from cfclient and vice versa.

cfclient also makes calling asynchronous functions of PhoneGap easy by providing synchronous access to them. All device APIs are asynchronous in nature, but in cfclient block you call then as synchronous functions and ColdFusion translates them to asynchronous PhoneGap functions. All function starting with ‘cfclient.’, e.g. cfclient.camera.getPicture(), are asynchronous. In addition to device APIs, data access function, executeQuery and tag, cfquery, are also asynchronous in cfclient.

When you call asynchronous functions in cfclient, ColdFusion takes care of chaining callback functions – any code following an asynchronous function goes in the success callback function. But if you call asynchronous cfclient function form JavaScript code block, then ColdFusion compiler does not touch it. Note that if a UDF in cfclient block calls any asynchronous function (e.g. cfquery or any device APIs) then that function also becomes asynchronous.

Let’s see an example. In the following code, I have a UDF in cfclient block, createDatabase. It does not need any argument, but let’s say it takes one argument, arg1. This function calls queryExecute function, which is an asynchronous function – so createDatabase function also becomes asynchronous. If you call it from JavaScript and have some JS code to be executed only after database is created, then calling createDatabase function directly from JavaScript is not going to work as expected – Continue reading “ColdFusion Splendor – When to use invokeCFClientFunction”

Posted on

CFMobile Example – Accessing remote data from mobile application

So far I have posted CFMobile examples that were mostly standalone applications (except a photo application that uploaded image to server). However many mobile applications may need to interact with server, for example to show data from a remote database, to modify data or for many other purposes.

CFMobile features in ColdFusion Splendor make accessing remote CF server very easy. I will demonstrate this using a simple example – I will build a mobile app that displays employee records fetched from a remote CF server. The client side (cfclient) code calls a CFC on the server side which fetches data and returns result to the calling page. You will see that creating and accessing a server side CFC is as easy as it is in a completely server side CFML code – you don’t need to worry about writing code to make AJAX calls. cfclient does that for you transparently. I should mention here that this feature to call server CFCs from cfclient is not limited to mobile application, you can even use it for any web application.

Here is a screenshot of the application –

2014_03_25_image5

Continue reading “CFMobile Example – Accessing remote data from mobile application”

Posted on

CFMobile Example – Record and playback audio using ColdFusion Splendor

In this post I am going to show how easy it is to record audio and play it back in a mobile application using ColdFusion Splendor. If you haven’t already, you can download it from Adobe Labs.

I have tried to keep the application simple. There are two buttons, Record and Play. When you click Record button, the recording starts and the Stop button is displayed. Speak into the phone microphone to record your voice. When done, click Stop button. You can play back the audio by clicking Play button. You can also stop playback any time by clicking Stop button.

Here are the screen shots –

2013_03_18_screen1 2014_03_18_screen2

Continue reading “CFMobile Example – Record and playback audio using ColdFusion Splendor”

Posted on

ColdFusion Thunder – It's all new IDE

Though ColdFusion Thunder is the next version of ColdFusion Builder (the last version was 2.0.1), it is like a new IDE because it’s a major re-write. Past versions of ColdFusion Builder were built on top of Aptana. I had noted some of the challenges in implementing ColdFusion Builder a couple of years back, when CFB 2.0.1 was released.

ColdFusion Builder (till version 2.0.1) used a very old version of Aptana. Aptana later re-wrote and improved their IDE and released it as Aptana Studio 3.  The integration points in Aptana Studio were changed to such an extent that integrating CFB in it would have meant re-writing it. So we decided not to base ColdFusion Thunder on Aptana and implemented many features that Aptana had contributed earlier – most notably editors for HTML, JavaScript, CSS and XML. This also meant CFML editor had to be re-written because it was based on Aptana APIs to integrate HTML, CSS and JS editors in it.

The task was huge and we, in the ColdFusion team, had been working very hard during the past two years to – first build all (or most) the features of CFB 2.0.1 in Thunder, and then to add some more features. If you have used ColdFusion Builder in the past, then you will see great performance improvements in all the editors in Thunder. Specifically you should see difference when editing large files. The memory footprint is also improved.

Here are some of the new/improved features in Thunder –  Continue reading “ColdFusion Thunder – It's all new IDE”

Posted on

CFMobile Example – Taking picture and uploading to ColdFusion server

In this post I am going to show you how to create a mobile application using ColdFusion Splendor that can take a picture and upload the picture to CF server. This application uses Camera and File APIs.

The application is very simple – it has two buttons, one to take picture and the other one to set URL where pictures are to be uploaded. You can set URL of the server before taking a picture or after, just before it is to be uploaded. Once the URL is set, it is stored in the localStorage and will be remembered.  There is a messages div where the application displays messages about different operations it is performing.

2014_03_04_image1 2014_03_04_image2 2014_03_04_image3

Continue reading “CFMobile Example – Taking picture and uploading to ColdFusion server”

Posted on

CFMobile Example – Using Geolocation APIs in ColdFusion Splendor

I was going to cover a use-case of taking picture in a mobile app and uploading it to ColdFusion Server in this post, but I found some issues in packaging an app that used Geolocation APIs when helping someone and thought that I would cover geolocation first.

This sample application is very simple – it gets your current location and displays a marker at that location on the Goole Map APIs. Here is how the application looks – Continue reading “CFMobile Example – Using Geolocation APIs in ColdFusion Splendor”