Sunday, March 22, 2015

How to solve Failed to execute 'send' on 'XMLHttpRequest': Failed to load [filename]

So, the other day I was writing my AngularJS Routing Example for the WCG community and I suddenly got in a kind of trouble: I couldn't seem to get it working!!!



My app's critical point was that I was trying to deploy an app that included ng-view, to a browser.

By default, a browser doesn't allow AJAX requests to files located on your local file system. This happens for security reasons. But, ng-view uses an AJAX request to load templates, so the options are:

  • Configuring your browser in order to allow local files access; (this link explains how to implement this action in Google Chrome)
  • Run your app in a local web server.

The first option is quite straightforward, so I'll stick with the second one. I recommend users that don't have locally a web-server, to go for an open-source solution, like http-server, which can be configured very easily.

I'm a Java lover and I have installed one distribution of Tomcat in all of my working instances, so the following demonstration is about running an Angular app to Tomcat:

  • Copy or move your app's folder to Tomcat's /webapps folder and execute:

  • Navigate to Tomcat's /bin folder and execute the startup script:


  • Verify that Tomcat deployed your app:

  • Access your app from Tomcat, you should have a clear console now:
Cheers!

Tuesday, March 10, 2015

Beautifying Javascript's default alerts with sweetalert

Ok, I was in the middle of my upocoming (scheduled for the 17th of March) AngularJS Form Validation example for the Web Code Geeks (WCG)  community, using Twitter Bootstrap and AngularJS and I was quite excited about that, but still my sample app didn't look so beautiful.

What resulted to this condition, was the fact of the deprecated JavaScript's default alert functions, so after a quick search, I found out that sweetalert matched my needs.

SweetAlert is not a jQuery plugin, but a combination of JS, CSS and some images, which together, produce a very catchy product that every front-end developer would love making use of.

What to include in your project in order to use it

All you have to do, in order to use these fancy alerts in your projects, in to download the package from the fore-mentioned link (or just the lib folder) and reference the JavaScript and CSS files manually:


How to use it

A simple alert:
swal("Hello World!");
An error message - the arguments' order is: title, text, message type:
swal("Oops...", "Something went wrong!", "error");

Using sweetalert in a real project

A good starting point would be this repo of mine, where I'm implementing an AngularJS form validation app, using Bootstrap and sweetalert.

 You will be able to read about the project's analysis (from Angular's perspective) in a week, as this is an example that will be published in WCG, as I fore-mentioned.

For the moment, here are the product's screenshots from the successful and erroneous app's alerts:

Success alert

Error alert
Cheers!

Tuesday, January 13, 2015

Create your own movie database easily with SmartMovieDB!

You can directly jump to the git repository that hosts this project :)


There's a pretty nice source over the internet, regarding the creation of your own movie database.
You can read in detail its usage and functionality over the fore-mentioned link, but, generally, the following schematic explains how it works:

That is, you give as an input a text file that contains the desired movies' names and with the help of the perl scrapper, you get an output of an sql format with all the sql commands that need to be done to your database.

This means of course some extra effort, so why don't we go for an automatic process? What about an sql script runner, which takes as an input an SQL file, connects to the specified database and runs the generated from the scrapper script, queries?  It would be nice if we could stick with Perl, but I didn't had the luxury to waste a lot of time on Perl-MySQL connection, so I chose the easy way, which is Java and fortunately, there is an easy way to do it, again with the support of an open source project (we 'll here need only one part of it, as you noticed, too).

I'm choosing to start with the Java project, which is responsible for reading an sql file and executing the included queries to a given database connection:


  • DatabaseConnection.java defines a valid database connection.
  • ScriptRunner.java is responsible for the convertion of sql statements into databse queries.
  • MainClass.java coordinates the game, as the script runner's instance needs a connection argument, which is actually passed by calling the getConnection() static method of DatabaseConnection.java
And that's is! We 're good to go with the script runner's part.

What is left now, is to find a way to connect the script runner (that takes an sql file and executes the existing queries into a db) with the perl scrapper.

According to the scrapper's part, I'd firstly like to introduce a small parenthesis: I support open source software, so I'm here using the OMDB Api, instead of the iMDB's API, so, together with some updates that had to be done to the scrapper script, here is the updated version of getMovieData.pl:

#!/usr/bin/perl -w
use strict; 
use XML::Simple;
use Data::Dumper;

my $xml = new XML::Simple;

die "Please make that you the movie title is provided into quotes!\n" if(!@ARGV);
my $movie = shift;
$movie =~ s/\s/+/g;

my $cmd = "curl http://www.omdbapi.com/?t=$movie&y=&plot=short&r=xml";
my $movieData = `$cmd`;
my $data = $xml->XMLin( $movieData );

my $released = escapeSingleQuote($data->{movie}->{released});
my $rating = escapeSingleQuote($data->{movie}->{imdbRating});
my $director = escapeSingleQuote($data->{movie}->{director});
my $genre = escapeSingleQuote($data->{movie}->{genre});
my $writer = escapeSingleQuote($data->{movie}->{writer});
my $runtime = escapeSingleQuote($data->{movie}->{runtime});
my $plot = escapeSingleQuote($data->{movie}->{plot});
my $imdb = escapeSingleQuote($data->{movie}->{imdbID});
my $title = escapeSingleQuote($data->{movie}->{title});
my $votes = escapeSingleQuote($data->{movie}->{imdbVotes});
my $poster = escapeSingleQuote($data->{movie}->{poster});
my $year = escapeSingleQuote($data->{movie}->{year});
my $rated = escapeSingleQuote($data->{movie}->{rated});
my $actors = escapeSingleQuote($data->{movie}->{actors});

my $tstamp = time();

print "INSERT INTO movie_collection VALUES (NULL , '$title', '$year', ";
print "'$rated', '$released', '$genre', '$director', '$writer', '$actors', '$plot', ";
print "'$poster', '$runtime', '$rating', '$votes', '$imdb', '$tstamp');\n";

sub escapeSingleQuote {
 my $str = shift;
 $str =~ s/\'/\\'/g;
 return $str;
}

Once the sql file creation is done , we 'll make a system call from Perl to run the exported jar file of our Java project. This means that we need to add the following line in the end of the batch.pl script:   
#!/usr/bin/perl
while(<>){ 
 my $cmd = "perl getMovieData.pl \"$_\""; 
 system($cmd);
}
system "java -jar absolute/path/to/the/exported/jar/file.jar"
Finally, everything is fired up from command line, so, keeping in mind the exact locations of the required files (movies list, jar and generates sql's file), execute the following command:
perl batch.pl movielist.txt > sqlInserts.sql

For more details, there's also a git repository that hosts this project :)

Monday, December 1, 2014

How to solve Error parsing XML: unbound prefix for com.facebook.widget.ProfilePictureView in Android

Hey people,

these days I'm working with Android Facebook SDK, a field that I'm pretty new, too, so I considered sharing a little experience that I recently faced.

Supposing that you want to connect your app to Facebook, you obviously need a login button, first of all., so your xml code should look like this:



Ok, nothing special, but if you want to add the user's profile picture too, see what happens:

Error parsing XML


And this is what the console logs:

C:\Workspaces\eclipse_luna\FacebookApp\res\layout\activity_main.xml:14: error: Error parsing XML: unbound prefix

So, if you 've already read that, but didn't find a solution, here is the single line that you need to your namespaces:
xmlns:facebook="http://schemas.android.com/apk/res-auto"

Now, everything seems to work, without any errors:


Cheers!

Sunday, November 30, 2014

How to install Perl and cURL on Windows

Hello!

Perhaps you 'll never need Perl, but when you are about to do it, you obviously don't want to mess with cygwin and stuff like that.

I actually found a simple solution to get it up and running in about 5 minutes, together with cURL installation, without configuring anything on your environment, but only running the .msi installers.

If you don't actually know it, Strawberry Perl is the most stable version for Windows, so:


  • Visit Strawberry Perl site.
  • Download the version that matches your system (I'm on a 64-bit machine):

  • Run the installer.

The installer automatically places the Perl directory under the correspong Program Files folder (so, for me, it is under "Program Files", but if you selected the 32-bit version of it, it should place it under "Program Files (x86)".

It also adds the perl executables to your system path, by default.

  • Validate the successful installation of Perl, to your system: 

I suppose the only reason for someone to start using Perl in 2014, is related to web technology, i.e transfering data by using different protocols. An easy way to do that, is by using the cURL tool.

While on my investigation to do this without having to use cygwin or my cmd, I found this site, that also provides an .msi installer in a reliable way, like the one we 've used for Perl (the highlighted version is what worked for me):


So, when the installation is finished, you just have to validate that you 're good to go:


Cheers!

Tuesday, October 28, 2014

How to install MongoDB on Windows

After all, a new post!

The other day, I found myself messing around with MongoDB and I was wondering if I could find some time to write a blog post about it; this one isn't anything  special, but I hope it 'll be the start for a bunch of MongoDB tutorials.

The goal of this post is not to demonstrate the functionality/usage/advantages of MongoDB, so, if you need further assistance, you should refer to the official docs.

You can download both server and client for MongoDB from a single .msi file, from the official downloads page. For my case, I chose the 64-bit version of it:


The installer, by default creates a new directory named MongoDB [version] Standard  under the Program Files directory.

As with MySQL, we first have to start the server application; what we 're looking for is a similar to mysqld.exe executable; the location where we should search for it is pretty obvious, under the \bin subdirectory of the fore-mentioned, newly created directory:


After ensuring the existence of it, you can open a command prompt and after locating the working directory of it to the specified path of mongod.exe, start the service:


I marked with pink dots the two main points of the service start:

  • MongoDB runs at port 27017.
  • There are initially 0 active connections.
Let's connect from a client to it:


As you noticed, too, it auto-connects to a database, named test.
I saw a blue indicator filling my left tab (this is my MongoDB started server), after giving the connection command, so let's see what's new:



Ok, connection was successful!

Now, let's go back to our client and see a single object, that exists in the things collection of test database:




And that was it!
For more details about the last command and its results, stay tunned!

Saturday, August 9, 2014

How to create a working set in Eclipse

So, the amount of imported projects that your eclipse IDE has, seems like turning it into a mess?

Have you already thought of a way to separating them into smaller sets, according to the project/concept that they rely on?

Here is an example of mine, when I wanted to split some of the projects, regarding the JCG community.

1) Near the "Package Explorer", click the drowdown button (the corresponding tooltip names it "View Menu") :


2) From the options provided, click on Select Working Set:


3) Select th Java as the Working set type:


4) Create a new Window Working Set:


5) Give a name to the working set and after selecting the projects that you want to be added to it, click "Finish":


6) After creating the working set, a window pops up, prompting you to declare the working sets that you currently want to work with, so just check them and click "OK":


7) Obviously, now the Package Explorer is set up according to the projects included in the selected working set:

Alternative Paths
  • You can edit the existing projects of a working set by selecting Edit Active Working Set from the "View Menu" dropdown (this option is visible if there is at least one working set in your Eclipse environment).
  • You can deselect a working set in order to get the Package Explorer to its initial state (displaying all existing projects in the workspace that Eclipse runs on) by clicking Deselect Working Set from the "View Menu" dropdown.