Developing a full web application using Node.js, Mongo and Angular.js: Introduction

Recently I was developing a web application for an event at my company. Its a quiz based game where an admin can control and present a quiz to all connected users.

It was my first time developing an end to end web application using various frameworks. Here is the details of software stack I was using for it.

  • Server side: Node.js for server, Express.js a web-application framework for node,  Socket.IO for realtime control over quiz, Passport.js for authentication.
  • database: MongoDB, mongojs module for accessing database from Node.js
  • Client: Angular.js
  • Deployment: Openshift Paas cloud server.

Beast thing about above stack is that everything is JavaScript 🙂 . No switching over languages for server, client and database.)

I had never worked with all of these together. And if you search on internet you’ll get only 2-3 of these together not all of them together. So I searched and found bits and pieces, collected and combined all of them to make a beatiful realtime web-application.

I’ll continue it in several parts. Client, Server, database, authentication and realtime communication – everthing in single tutorial series.

Building and running First Django Application on Ubuntu 13.04 – Part 1

Django is a popular web development framework based on Python. You can read more about here.

In this first part we will do basic setup required for Django on Ubuntu 13.04. Python comes already installed in all versions of Ubuntu. This tutorial will work for Python versions 2.6 or later and may not work for 3.0+ .

To Check python version type following in terminal

Python --version

We will need pip, a tool for installing and managing Python packages. Which can be installed using this command in terminal.

sudo apt-get install python-pip

Now we will install django framework

sudo pip install django

We will also need MySQL on our system for database requirments. So go ahead and follow this link to install MySQL and PHPmyAdmin(web client for MySQL database).

Vitualenv:
Generally you should do python based development in Virtualenv, you can read more about on this tutorial
http://warpedtimes.wordpress.com/2012/09/23/a-tutorial-on-virtualenv-to-isolate-python-installations/

We will use following tools to write and execute the python codes

1. IPython : Interactive python shell unlike boring IDLE(shell which comes with standad python)
run following commands in python

Sudo apt-get install ipython && ipython-qtconsole

you can type ipython directly in console or use ipython-qtconsole – the Qt frontend.

2. Sublime-Text : Very lightweight Text-editor cum IDE. We will use sublime text for coding most of the code.
Follo instruction on this tutorial to install sublime-text on ubuntu.

Now the setup is complete. Follow Part-2 to write your first django Application.

Some Helpful Links:
https://docs.djangoproject.com/en/dev/intro/tutorial01/
http://warpedtimes.wordpress.com/2012/09/23/a-tutorial-on-virtualenv-to-isolate-python-installations/
http://gettingstartedwithdjango.com/
http://learnpythonthehardway.org/book/

How to use jQuery UI datepicker in webpage

I was developing a simple java web application where I needed a datepicker. So here is how I used the jQuery UI datepicker in my application.

First you need to include jQuery UI javascript and css in head of your html page.

<head>
<script type="text/javascript"
	src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<link
	href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css"
	rel="stylesheet" type="text/css" />

<script
	src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
</head>

Then add following html code in body section of your page where you want datepicker.

<input id="datepicker" />

after that add following javascript to your head section.

<script type="text/javascript">
	$(document).ready(function() {
		$("#datepicker").datepicker({
			changeMonth : true,
			changeYear : true,
			dateFormat : "yy-mm-dd",
			altField : "#alternate",
			altFormat : "DD, d MM, yy",
			showButtonPanel : true,
			showOtherMonths : true,
			selectOtherMonths : true,
			showOn : "button",
			buttonImage : "calendar.gif",
			buttonImageOnly : true,
			showAnim : "slide"
		});
	});
</script>

Above javaScript code runs as soon as the full html page is ready. The various options are for different variation available with the datepicker ui. You can remove and add any option as per the requirements.

Suppose you don’t want the animation while calendar loads, then remove the last option ‘showAnim : “slide”.

You can find different variations at jQuery UI datepicker.

I’ll soon upload zip of html file with working the Datepicker.

Qt Creator as an IDE for C++

I was trying to learn C++ for so many months(may be years) but didn’t find any suitable IDE on which I can practice. Then few months ago, one of my friend introduced me to Qt Creator, as one of the best IDE for C++. During the free time in this summer I gave it a try and started learning the language with the help of a ebook on this IDE. And surprisingly, I found Qt Creator to be perfect in so many ways. Every feature I was looking for previously, is  available in it.

Even though, Qt Creator is basically designed for development of Qt applications but It has everything to become a full fledged C++ IDE. I tried it on ubuntu till now. It can be installed directly from software Center. Windows version is also available for download on website.

  • To properly compile and run C++ projects do as following.

– Create a new C++ Project by first clicking on File -> New File or Project then select Other Projects -> C++ Project and follow the instructions.

– You will get checkbox of shadow build, by checking it you can be sure that the source files will be in separate folder than build files.

– Now select the Project mode by clicking on the box below debug box in left side pane. Here go to Run Settings and check the Run in terminal.

– Now go to Tool menu and select Options->Environment -> General . Here look for Terminal in System. Enter /usr/bin/X11/xterm -e instead of existing text.

QtCreator is ready to compile and run your C++ projects. Use Ctrl + B to build and Ctrl + R to run or use buttons given at bottom in left panel for build and run or you can use build menu.

  • To enable C++11 support do as following.

– Find the your_project_name.pro file in your project hierarchy in Qt Creator. Just add  following line in this .pro file to enable the support

QMAKE_CXXFLAGS += -std=c++0x (or -std=gnu++0x)

– This .pro file is used qmake tool to generate makefile for your project. The above line adds flag -std=c++0x(or -std=gnu++0x) to CXFLAGS in the makefile.

– After changing anything in .pro file right click on project and Run qmake so as to generate final Makefile in your build folder

 

  • Qt Creator has many attractive features like

– Autoindentation of selected code by pressing Ctrl + /

– Autocomplete feature is awesome and better than almost all other IDEs

– Beautiful animations.

– Split screen using shortcuts like  Ctrl + E, 2 : Ctrl + E, 3 : Ctrl + E, 0

– Switch Header/Source using F4.

– Switch declaration/definition using Ctrl + Left Click .

Many more features can be found out by using the it. So Install and Experience one of the Best C++ IDE available.