Deploying a PARSE server to Heroku

Heroku is a PaaS (Platform as a Service) that enabled developers to build and run applications entirely in the cloud. If you followed my previous post about PARSE server you will see that we are just one step ahead to move things from a self-hosted environment to the cloud. Heroku offers a free tier with 1 web and 1 worker (2 dynos - smart, lightweight containers) but they can't run 24/7 (must sleep 6 hours in a 24h period). For any additional dyno you'll have to pay $7/month. (there are also some considerations in terms of memory that can increase your final bill).

Deploy PARSE server to Heroku.

To deploy PARSE server to Heroku there are two alternatives. The first one which is the easy one where we just press the deploy button from the PARSE server example page and this would lead us to the Heroku page with the details we need to set up our system. To create a deploy button for your repo you need to follow the following tutorial.

The second one involves a bit more of configuration and I would definitely recommend you not to pursue this one. I spent one afternoon to correctly configure git and heroku to achive the same results as pushing a button.

Once you press the deploy button from PARSE server example, you'll be prompted with the following details:

Add you AppName and set the runtime selection. You will see that there is one additional addon added automatically in the app for a MongoDB database.

To finalise this step, the system will ask you to add your credit card details. There is no charge here as the deployment is for free and the MongoDB sandbox is also free, but this is one of the requirements.

Now the app is deployed and it will appear as active under Heroku:

It's time now to test the application. You can use curl, javascript or any other language to test the connectivity with Parse. In my case I will use Delphi as my preferred language and because I already have the libraries for it.

Here is my code:

As you can see this will call the remote instance of my Parse server and add a new item under Instances classes.

To see that everything has worked correctly. I can go to the remote mongoDB instance and check out the results:

And the records that have been inserted:

Now I can happily connect my devices to my remote Parse server and remove the old dependencies to Parse.com.

The second option to produce the same results involve using Heroku Toolbelt and mongoDB addon. For this, get the latest Heroku Toolbelt from here. I'm testing everything from a Win7 machine so I have downloaded the installer for windows. Then follow the steps from Heroku in terms of deploying the application through the command line via heroku and git. And you'll achieve the same results. Remember to configure your SSH key first before pushing anything through git.

In conclusion, using PaaS will change the future in terms of DevOps. Companies will rely more in cloud base platforms for their operations as the will require less worries in terms of load balancing, VPNs, clusterint, key rotation and some complex security policies. DevOps tools have matured a lot nowadays and with all this landscape constantly changing you can learn some valuable skills along the way.

There are also some other deployment solutions that I would like to try like Docker, Chef, Puppet, Ansible and Capistrano. Hopefull I will have the time to test them soon!.

Related material:

• Deploying a Parse Server to Heroku.
• Public permission denied when deploying to Heroku.

Creating your own self-hosted PARSE server

As you might be aware, PARSE service is shutting down beginning of 2017. This was a really great solution to quickly spin up the infrastructure needed to build an app. I still have some of my apps relying on that infrastructure and I think it's time to make the move to my own self-hosted PARSE server (for local Development). Here you will find a quick guide through the initial configuration required to have your PARSE server up and running in no time.

PARSE is actually really easy to set up. You just need a NoSQL DB (MongoDB in this case) and then get the latest source code from GitHub to create your own PARSE self-hosted instance. My sandbox is a Windows 2012 R2 and I will guide you through the required steps in there.

The prerequisites are as follows:

• Node 4.3
• MongoDB version 2.6.x or 3.0.x
• Python 2.x (For Windows users, 2.7.1 is the required version)

Installing MongoDB.

First you'll need MongoDB. Download the latest version of MongoDB from here. In my case I installed version 3.2.6 for Windows Server 2008 R2 and later with SSL support.

Install the complete version and once finished, go to MongoDB folder and run mongod.exe command:

Notice that I had to run the command twice as the folder that MondoDB needs was not there: C:\data\db. I created the folder manually and then ran again the executable. Now MongoDB is up and running awaiting for connections on port 27017.

Installing Node.js.
Next step is to download and install Node.js. You can get the latest version here. I will install version 4.4.4 LTS which is the recommended for most users. Download the installer and continue clicking next until it is completely installed on your machine.

Installing Python.
The required version for Windows is 2.7.1. In my case I will install 2.7.11 as it's the recommended version from Python. You can get the latest installer from here. Once the setup is completed you will have to reboot your machine to make sure the configuration is updated.

Downloading PARSE server example.
Head to PARSE server source code on GitHub and download the PARSE server example from here. Unzip the zip file under C:\Parse for example. Once everything is in place, open node.js command prompt with admin rights and run the command npm install under C:\Parse folder:


During the installation I hit a small bump with the following error message:
MSBUILD : error MSB4132: The tools version "2.0" is unrecognized. Available tools versions are "14.0", "4.0".

To overcome this issue, just install the MSBuild Tools from VS2013. This can be found here. Now we are ready to start our PARSE server.

Starting PARSE server.
Remember to start mongoDB first here as the server was restarted from installing Pyhton. MongoDB should show that its waiting for connection. Here are some logs when the system is up and running:

Configure PARSE:
Open the file index.js under C:\Parse and edit the sections appId and masterKey

In my case, I mentioned the appId as 'thunderParse' and the masterKey as a nice key (base64 string).

Run PARSE server via npm:
Once configured, run in the same command line the command npm start.

Now parse is up and running and is ready for requests.

Configuring and Starting PARSE Dashboard.
Now that our PARSE server is running, we can configure and start the PARSE dashboard which is a web base application to manage our PARSE apps.

To get PARSE dashboard, you only need to type the following from npm:

Now we can go to localhost:4040/apps and we will see our application described there:

Testing our self-hosted PARSE server.
Now is the time to test our self-hosted PARSE server. To test it out, we just need to use curl or any other mechanism that we like. I've used curl and Delphi as I already had some libraries prepared for it. Here is the command with curl:
And here with Delphi:

And here are the results of the App writing to Parse server:

Next step is to bring this online and host it somewhere else like Heroku, AWS, AZure or Scalingo.

I hope you find this useful.

Jordi

Testing new Windows 10 components of Delphi 10 Seattle

It's been a while since I got my Delphi 10 Seattle and I really love its new Windows 10 components and styles. I have already played with it and I can say that these new components are really slick and will make your apps really stand out. I've tried the TSplitView and the ActivityIndicator which are great for a full Windows 10 integration. 

Here you can see some screenshots of one of the applications I have created with it and the source code is available on Github:

Initial Screen:

Notice the home button that will control the split view.

Showing the controls:

Controls are hidden/displayed when the home button is pressed. Each of those actions will call each page on the TPageControl component. I'm still looking for a solution where I don't have to show the tabs on the TPagecontrol but I'll get to it later on. I think that as of now, I have a pretty interesting solution that runs fine in my Surface under Windows 10 and it totally looks awesome.

Animation Controls:

I've just added one of the animation controls with a simple processing. There is nothing fancy here, just updating the process regularly would do. If I wanted to make anything better I should put it in a thread for better refresh.

I also tried the TToggleSwitch but it was flickering in runtime so I will report the problem to Embarcadero later on. The new style works really well but I found that the ShBrowseForFolder is not rendering it correctly:

The source code of this little utility can be found here:

• https://github.com/JordiCorbilla/search-replace

Executables can be downloaded here:

• https://app.box.com/s/gww9193ay627xzv3h9h1umrp501qjmzh
• https://github.com/JordiCorbilla/search-replace/releases/download/v1.0/SearchReplace.zip

This small application will allow you to:

• Perform a search on a particular folder and file extension.
• Replace the content of each file for some other content. (really handy when you need to replace a variable in source code files for example).
• Delete the files.
• Also to search empty folders and delete them (really handy when your svn complains about checking in empty folders).

Let me know if you have any questions.

Jordi

Sending REST API messages with Delphi to Parse.com

Parse.com is one of the most interesting cloud base solutions I have found so far, and most importantly; basic accounts are for free (up to 30 requests/second, after that is when you have to pay). Using Parse.com I can keep track of my applications, using the Analytics feature. This is an easy way of knowing how many installs you have running and also it provides cloud storage to add some more details etc. I'm using this module for my project "Flickr Photo Analytics" as I currently have over thousand downloads but I don't have a clue whether the app is being used or not. Here is where the Analytics feature of parse.com gets really handy.

Embarcadero has its own AppAnalytics but I just wanted something that I could handle on my own with an easy setup. I have been using Parse for a while for few mobile applications and now I've decided to extend it to my windows desktop applications.

The idea is very simple. Every time the application is used, it will send a notification to Parse.com via REST API. Parse.com provides several communication protocols for different languages e.g. Java, Javascript, .NET, etc. but unfortunately not for Delphi. Here is why I decided to write about it as I haven't seen anything on the Internet and it could be interesting for many users out there.

To use it in Delphi, we can use the REST API via IdHTTP component. On their website they provide the syntax using curl and here is the correct translation to use it with Delphi and that works:

Curl:

Delphi:

With just this little piece of code, the Analytics feature of Parse will start tracking down your installs. It's not a real time tracking so it takes time to appear on the dashboard. Once you have your applications there, you can review the stats:

As I'm not expecting any traffic at all in my app it is really a good solution and it serves my needs. I also have a small android app that pulls from there so I can read some of the stats published by my app anywhere I go. In the end it all lies to connectivity and what's the best and easy way to achieve it. Using this approach didn't take me long at all. 

I hope it can be useful to the community.

PS: If you know any better solution out there, please do let me know!.

Jordi

How to use Eclipse for Ruby on Rails

I have been trying to use different alternatives to run Ruby on Rails locally with available tools in the market. I have used nice editors like Sublime Text 2, notepad++ and others but I really wanted a programming IDE that I could interact with (navigate through the classes, files, etc. with easy clicks). I tested also Rubymine which is the Ruby on Rails IDE but still I wondered if there was another solution available. Then I discovered that I could use one of my favourite editors...eclipse with the DLTK (Dynamic Language toolkit) to achieve my purposes.

In this post I will cover the necessary steps you need to do to get your eclipse IDE up and running to become your Ruby on Rails IDE.

First you need to get a version of eclipse. (The Eclipse Java EE IDE for Web Developers in my case)

For this article I will use the Eclipse Luna SR2 version so everyone has a reference. You can use the version you currently have installed as the DLTK packages can be installed separately.

Once eclipse is up and running, go to Help menu and Install new software. A new window will open and in there use the following URL:

   dltk - http://download.eclipse.org/technology/dltk/updates-dev/latest/

Select the packages DLTK and DLTK test and click Next.

Now you can create Ruby Projects:

Once we want to create a new project, the system will ask for an interpreter. We will have to configure where ruby.exe is located:

Click on Configure interpreters and add a new ruby interpreter pointing to the location where your ruby files are.

Now you can add your files into the project and start working with it. Here is a simple example that I have coded for this article that you can test:


If you try to run this in eclipse, an error is thrown in the console:

C:/luna/eclipse/configuration/org.eclipse.osgi/898/0/.cp/testing/dltk-testunit-runner.rb:252:in `block in <top (required)>': uninitialized constant Test::Unit::UI::SILENT (NameError)

To fix this, you need to open:

C:/luna/eclipse/configuration/org.eclipse.osgi/898/0/.cp/testing/dltk-testunit-runner.rb and solve this by commenting out:

#autoRunner.output_level = Test::Unit::UI::SILENT
and adding the following:

autoRunner.runner_options[:output_level] = Test::Unit::UI::Console::OutputLevel::SILENT

as shown in the image:

and run the test again.

Now your IDE is ready for action.

Jordi

jqplot integration with ASP.NET MVC

I haven't been writing for a while and it's not always easy to find time to write about interesting stuff. I must say that I wish I had enough time to post all what I have been learning for the last past years, but I will try to keep it up. Today I'm bringing you an interesting post about jqplot integration with ASP.net MVC. I have been using ASP.NET for quite a while now (more than 5 years) and I hope this post could help you with the integration of jqplot as I faced some challenges that I'm resolving here.

jqplot is a plotting and charting plugin for the jQuery Javascript framework. It's very pluggable and really easy to use.

jqplot can be easily installed using Nuget package from VS:

Here is a simple example from the website:

As you could see, integration is quite simple and to plot the data, this one needs to be formatted in the format of a set [Date, value] to be displayed correctly. So here is the first challenge as we need to find a way to populate this list from our controller and then pass the correct formatted list to our jqplot function.

I'm working on an application called Flickr Photo Analytics. This application is able to connect to your Flickr stream and retrieve some useful stats that you can keep track overtime. The base application is written in Delphi and now I'm developing the web interface that goes with it using ASP.net MVC. For this article I will use the examples from my source repository.

The best way to approach this problem is by creating a new ActionResult in the controller that will build the relevant data (data that we want to display and in the correct format -> [Date and Value]). Then via javascript, I will use an AJAX (Asynchronous JavaScript and XML) call to call the action method from the controller and retrieve the data in JSON format. One the data is back, I will generate the list in the correct format so jqplot can plot the data.

Here is the code from my controller:



This code loads an xml file containing some relevant data from my application and according to an id that can be passed as an argument in the url, it will return a different JSON list.

The view only needs a div with an id, in this case, chart1 that will be automatically populated with a graph by jqplot once the following javascript is loaded:


The javascript will receive the results from the JSON call in a stats variable. Once we get the whole content of the variable, we need to build the correct array that will go into jqplot. This will be done using: arr.push([new Date(date), value]):

The html is as follows (view):

Loaded units required for jqplot and the div required to display the chart.


And the final result can be seen here:

Check out the properties that I have enabled for jqplot as I've use it for quite a while and I like the way I can configure it.

Any questions, please ask!.

Jordi.

Gource history visualisation.

Few days ago, one of my colleagues showed me one amazing tool to display the history from your repository. I thought this tool was only available for TFS as the tool was called (TFS Source control History Visualization) and it can be added to your Visual Studio easily through NuGet packages.

It's quite cool as it lets you see the files you are working on in a really nice graph using some force-directed based diagram. This reminds me of a similar diagram I was working on few years ago. You can read more about it here.

The tool that I've been using here is called Gource. It's really easy to use and it supports multiple types of repositories like SVN, GIT, TFS, etc. I've tried with all three and the results are excellent.

Here is a little demonstration of the tool running against one of my personal repositories: 

• https://github.com/JordiCorbilla/FlickrPhotoStats

The command to get this running is as follows:

There are several ways for generating the video and some examples can be found here:

• https://git.help.collab.net/entries/22604703-Visualize-Git-logs-using-Gource

Latest version of the application can be downloaded here:

• http://gource.io/

Projects moved to Github

As you might be aware, Google Code Project Hosting is about to shut down so I have decided to move all my projects to GitHub as it was one of the options Google was offering. So here you have all my Delphi Open source projects for your entertainment. Most of them are already finished and not much is going on, but they are good for reference. Some of my active projects are already on GitHub and I do really like the platform:

Open Source Projects:

• thundax-delphi-physics-engine
• thundax-delphi-personal-repository
• thundax-pzaggy
• atom-table-monitor
• thundax-tools
• thundax-macro-actions
• thundax-ai

Projects that were already in Github:

• Flickr Photo Stats.
• Distributed decision Making system.

I need to add the documentation, but I will be doing it over these weeks.

Jordi

"Cannot load SSL Library" using Delphi XE7

Delphi XE7 is using Indy version 10.6.0.5169 and if you want to use SSL components you now need to install OpenSSL. I'm using IdSSLIOHandlerSocketOpenSSL1 component for my FlickrPhotoStats application (you can read more about it here : Delphi REST client to retrieve flickr statistics ) that uses REST technology to retrieve flickr stats using the available API.

My tool used to work under Delphi XE6 without problems and after my upgrade to Delphi XE7 I can see that when it tries to use the IdHTTP component the following exception is thrown: "Cannot load SSL library". Basically the error is raised because now you need to install (*see comments below) you need to update OpenSSL as Delphi XE7 has a dependency with the latest library. Update it locally in your machine in order to use IndySSL components. At runtime, Indy loads two libraries: libeay32.dll and ssleay32.dll (these libraries are not distributed with Indy due to some restrictions exporting SSL technology). 

The easiest solution to fix this issue, is to download the following library:

• Win32 OpenSSL v1.0.1i.
• Win32 OpenSSL v1.0.li light. (Light version).

This library among others can be found here: Win32OpenSSL.

NOTE: this solution is only applicable on Windows. I have only tested it under Windows 7 64 bits and it works fine.

Once the setup has been launched, select the following option:

After the libraries have been installed, the application will work without problems. DLLs can be found in the OpenSSL-Win32 directory also. With the selected option (Windows system directory) the libraries will be installed at C:\windows\SysWOW64 folder.

Update: KM mentioned that it's better to distribute the libraries with the app instead of installing the libraries under windows directory.

Update: Nicholas Ring has provided a very useful link for OpenDec (Home of OpenSSL DLLs & the Delphi Encryption Compendium), DLLs can be found here also:

• OpenDec. 

If you are interested in my application, this can be found here:

Source code and binaries can be found here:

• https://github.com/JordiCorbilla/FlickrPhotoStats (Source code)
• FlickrPhotoStats(x86) v3.0. (binaries)
• FlickrPhotoStats(x64) v3.0. (binaries)

Screenshots:

Delphi REST client to retrieve flickr statistics

It's been a while since I last posted an article here, and today I'm coming with an exciting application I have been working on lately called "flickr photo stats". I'm a keen photographer and I like posting all my pictures in Flickr as it's a great platform for sharing and publishing your work. You can find my profile here:

    - Jordi Corbilla Photography.

What's most important is that Flickr provides an API which allows you to request information about your pictures. The Flickr API is available for non-commercial use by outside developers and we can request an API key for our particular use. To use the Flickr API, you need to have an application key that can be requested here: The App garden. As mentioned before this application key is for personal use and I had to request mine and explain the intentions for its use as I only wanted to get some values from my photos and keep track of them.

What I'm trying to achieve...

If I open one of the pictures, I can see that every picture contains 3 main values regarding statistics:

  - Views: Number of views that the picture receives.

  - Favourites: Number of likes that the picture receives.

  - Comments: Number of comments that the picture receives.

In previous versions of Flickr, they offered a professional profile in where users could see the global stats for the entire portfolio. Now with the new version, they only show the values for individual pictures. Many other platforms like ViewBug or 500px show the total number of views and other interesting information that could be useful when building your portfolio and study the data to see what people are more interested in seeing in your profile. I spent a while going through some forums in Flickr, trying to see if someone had created an additional service or application to display the information of the profile, but after weeks of research, nothing original came up.

Then I started doing my own research as to see how difficult or easy it would be to request the information from the API and when going through the definition of it I saw that they provide a REST request/response. A smile was drawn to my face :) when I immediately thought that I could build a REST client with Delphi and get the information I needed easily.

I'm on the phase of testing Delphi XE6 so I developed the application with it. :)

My solution

The requirement is to get as much information regarding the number of views, comments and likes from your portfolio. As the profile could have many pictures, this application only focuses in the photos you want to track e.g. the number of views overtime of one of your photos or counting the total views, likes and comments for the photos you add into the app list.

My current solution is really simple and effective after the results of my testing. Here you can see a screenshot of the application:

On the left, a list of photos containing the ID, title, number of views, likes, comments and the last time the application update the counters.

On the right a view of one of the pictures with the number of views (depending on the selection) over time. The application allows a batch update where it will request an update all the counters. Every day the system creates a new entry under a particular photo, so we can keep track of the overtime. Current example is just showing the data from the last 3 days.

The application stores all the details in an internal repository in XML format (see figure below) and it can be loaded/saved any time. The app is still under development so there could be bugs but it works fine.

The REST client uses a IdHTTP component with a IdSSLIOHandlerSocketOpenSSL handler as Flickr uses https. 

The main API methods used by the app are:

• flickr.photos.getFavorites (Returns the list of people who have favorited a given photo)
• Arguments:
• api_key (Required) Your API application key.
• photo_id (Required). The ID of the photo to fetch the favoriters list for
• flickr.photos.getInfo (Get information about a photo. The calling user must have permission to view the photo)
• Arguments:
• api_key (Required) Your API application key.
• photo_id (Required). The ID of the photo to fetch the favoriters list for

Example response:

Once we get the values from the REST response, we can use a XMLDocument component to read the values we need:

How to start 

Once you have your application key sorted out, you can check that your API key works by running the test echo that Flickr service API provides:

• flickr.test.echo.

An example response is as follows:

From here we will use the api_key value and place it into the apy key textbox in the app:

To know what's your photo_id, you just need to open your picture on Flickr and you will get the ID on the URL:

Once we have the photo_id we can add it into the list and the application will add a new entry. If we click on the checkbox associated to the entry, the graph on the right will be displayed with the values (current and stored). The graph is dynamically build so you can add/remove as many as you want. A selection of views/likes/comments is possible under the graph so every time a selection is made, the graph is generated displaying one of those selected values.
At the end of the main list there is a label that tallies up all the values from the list which gives you a great indication about how your pictures are doing.

Source code and binaries can be found here:

• https://github.com/JordiCorbilla/FlickrPhotoStats (Source code)
• FlickrPhotoStats.exe (binaries)

Enjoy the reading and do not hesitate to add your comments and thoughts about it. There are still many things to fix and enhance but at least I can get some meaningful values and track items easily without having to explore each single picture on Flickr.
A better example is shown in the figure below after adding 275 photos into the app:

I can easily see that those pictures have reached more than 200k views in total which gives me a good indication of the amount of visits the profile gets. As I run the app every day (to keep track of everything), I can see that the number of views are going up.

Update 20/07/2014.
A second version of the up is ready and it just enhances the way information is displayed:

New version here:

• FlickrPhotoStats(v2).exe (binaries).

Jordi

My first Android App with Delphi XE5

A lot has been going on since Embarcadero released Delphi XE4. I must say I was astonished with what they achieved in such a short time with that version. Just being able to develop your own mobile applications using Delphi was something amazing. Even though I found that version quite cumbersome as it was not trivial the way to deploy your app into an iOS system I gave it a try with no much success (I needed a virtual machine for the Mac device and had to borrow someone's iPad to publish the app, but I'm not a Mac person). So, what I was really waiting for was their latest release Delphi XE5 with Android compatibility. The most interesting part: how simple it is to create a project and deploy it into your android device. In less than a minute you can have your "hello world!" app in your phone with just few clicks. 

Delphi XE5 comes with the Android SDK 22.0.1 32 bit (at least the one that I got when installing Delphi) and you can see all the configuration paths for that particular SDK under Tools -> SDK Manager:

The first step is to enable your device to accept USB Debugging. To achieve this, you can follow the steps from the following link which related the way you have to enable developer mode for Samsung Galaxy Note 3. I have got a Samsung Galaxy Mega, so the same rule applies:

• Enable USB Debugging Samsung Galaxy Note 3.

Once done, you will see new options in your phone:

Enable "Still awake" and "USB debugging". Once those are enabled, plug your phone into the computer using the USB cable. Then, the phone will ask you if you want to allow USB debugging: Accept it and let's go to Delphi UI.

Now in Delphi XE5, I will create a very simple project. So, go to File -> New -> FireMonkey Mobile Application.

As my new device is not in the list of available devices, I just choose something that more or less has the same dimensions. In this case as my phablet is a 6.3 inches, I choose the WSVGA 7" option:

Once this is done, I just want to create a simple "hello world" app which consists of displaying a label and when a button is pressed displaying a message. A very simple application but without changing the way I think (I'm building a Delphi application).

As you can see, I'm coding in Delphi. Once this is done, If I have followed the previous steps correctly, my phone should appear under targets for that particular SDK:

Now I just need to Save my project and Run it so it can be automatically deployed in my phone. Once done, I'll be able to see the app in my phone and perform the operations it was designed to do:

Here it is. As you can see really simple steps and with a great outcome: A Delphi App in your most loved android device. Now it's time to explore and do some more research about what you can do here.

Jordi

Related links:

• Code Snippets.