Social Networking site with Node.js, Express, HTML5 with Mobile support using JQuery Mobile

Social Networking Site With Node.js, Express And Mongodb

The technology stack that we'll be using will be node + express + mongoDB all of which are exciting, fast and highly scalable. You'll also get to use jade and stylus for driving the templated views and styling! We will be using npm to ease the package management and installation issues.

Installation Steps

• Install mongodb
• Another way to install mongodb : sudo apt-get install mongodb
• Install node.js
• Install npm : curl http://npmjs.org/install.sh | sh
• git clone git://github.com/pragtech/Social-Networking-Site-in-Node.js SocialNetwork
• CD Social Network
• npm install
• Install mailer : npm install mailer
• node app.js
• http://localhost:8000/

Creating your application in node.js

There is a discrete set of operations (or things we want to achieve) that fall within the scope of this article, they are (in the order that we will tackle them):

•  Register
• Login
•   View Profile and Tweets
•   view wall post
• post on wall post
•   comment on wall post
• delete wall post
• view friends
•   view friend requests
•   view videos posted
•   post new videos
• change profile image
• view  videos posted by friends
• share videos posted by friends
• view friends wallpost
• share friends wall Post
• search for the people
• send friend reguests
•   view user geoip location

       

1. After the user registers with the system he is redirected to the home page.The session information is also maintained for the user.

2. Click on wall To view your wall Posts. You can post on your wall, comment on the wall and delete the wall post.

3. Click on the friends tab to view your friends. Click on any friend to view the full profile of your friend along with the his/her geolocation.

4.  To see the list of videos posted by user click on the linked tilted videos posted. Play the videos and have fun.

 

You can also upload your video. This feature truly illustrates how fast a node.js application can be. Browse the video, click on upload button and the video is uploaded for you. You can also change your profile picture.

5. Click on friends wall to view his/her wall post. You can comment on the friends wall and also share his/her wall post

6.  View the videos posted by friends by clicking on the videos posted link under friends profile. Play and share the video as you like

 

 

You can also use the application in your mobile browser. The application recognizes your  mobile browser and provides you the appropriate mobile view of the application.

This application is an effort from pragmatic Techsoft still in the development stage and still many features to add to provide fast, reliable, and highly scalable web application development environment using node.js, express and mongodb.

Jersey Mobile Application using HTML5, JQuery Mobile and Javascript

Make Your jersey Application with HTML5, CSS3 and Javascript

In this application the technology stack which we will be using is HTML5, CSS3 and Javascript, all of which are very easy to learn and understand with a minimum of brain efforts. This application allows the user to customize the given t-shirts and allows him to create his jersey with his own name and number. Also we can save the same and can utilize it say for example, use the customized jersey image as a desktop wallpaper or a mobile wallpaper.

The basic idea behind development of the application in HTML5 is to explore the features of a new framework and to make a habit of coping up ourselves with the changing technology and latest trends in the market.

Creating  application in HTML5, CSS3 and Javascript

This is a single Webpage application developed using HTML5 canvas tag and other basic HTML5 tags with the javascript code.

There is a discrete set of operations (or things we want to achieve) that fall within the scope of this article, they are (in the order that we will tackle them):

•   Select Your Favorite T-shirt.
•   Enter your name and number which you to display on the T-shirt.
•  Save the customized image and use it as per your interest.

1. After the user enters the URL, he is redirected to the application itself.

2.   T-shirt of your choice and it will appear into the editable canvas.

3.   Enter name and number of your choice which you want to display on the T-shirt and click on submit button. Now the image will appear as below.

4.   Right click on the customized image and save it at your specified location.

Code snippet:

Index.html file

◦     Code for canvas tag:

<table align="center" cellspacing="4" cellpadding="4">

<tr>

          <td>

                    <div id="div1" style="width:390px;height:380px;border:1px solid #ddd;" align="center">

                   <canvas id="mycanvas" style="border: 5px solid;"         width="390"           height="380">

                   Sorry! Your browser doesn't support Canvas.

                   </canvas>

                   </div>

                   </div>

          </td>

</table>

◦     Code for form tag:

            <form>

                   Enter Your Name:<input id="textin" type="text" />

                             <br/>

                   Enter Number:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

                   <input id="numin" type="text" />

                             <br/>

                   <input type="button" value="Submit" onClick="entertxt();" />

          </form>

◦     Code for Selecting T-shirt:

◦

</table>

          <tr>

                   <td>

                   <a onClick="loadcanvas('./images/white.JPG');" >

                             <img src="./images/white.JPG" width="50" heigth="50"/>

                   </a>

                   </td>

         

                   <td>

                   <a  onClick="loadcanvas('./images/a.JPG');">

                             <img src="./images/a.JPG" width="50" heigth="50"/>

                   </a>

                   </td>

                   <td>

                   <a onClick="loadcanvas('./images/b.JPG');">

                   <img src="./images/b.JPG" width="50" heigth="50"/></a>

                   </td>

          </tr>

</table>

Javascript code

function loadcanvas(x){

 canvas = document.getElementById("mycanvas");

 context = canvas.getContext("2d");

 draw(x);

}

  function draw(x) {

            var ctx = document.getElementById('mycanvas').getContext('2d');

            var img = new Image();

            

            //image object is onload

            img.onload = function(){

                ctx.drawImage(img,0,0);

            };

            img.src = x;

            }

function entertxt() {

            var userenter = document.getElementById("textin").value;

            context.font="18px sans-serif";

            context.fillText(userenter, 160, 140);

           var userenter1 = document.getElementById("numin").value;

            context.font="80px sans-serif";

            context.fillText(userenter1, 140, 260);

          }

   You can also use the application in your mobile browser. The application recognizes your  mobile browser and provides you the appropriate mobile view of the application.

   This application is an effort from Pragmatic Techsoft still in the advanced development stage and still many features to will be added to this to make it a full fledged application with high quality graphics and improvised user interface.

Odoo OpenERP 6.1 Features Part 3 - Touch Screen - Point of Sale (PoS)

OpenERP 6.1 version has come with very effective Point-of-Sale module. OpenERP 6.0.3 version also contains the same module but the major difference is, here it is a New touchscreen OpenERP Point of Sale interface.

The system works offline when internal connection not available. The data get synchronize as soon as the internet connection is available. This functionality will work on all the touch screen like iPad, iPod, any Tablet PC.
 

The key features are as follows :

• Full touchscreen for product picking

• Effective searching of products by category on click

• Selection of Products/ Rate/ Qty to be sold on a single click

• Offers multiple payment methods like Cash/ bank, Cheque etc

• Multiple Sale Tickets (PoS Orders) can be generated at a same time

• Selectable products though Barcode Reader, Browsing Categories, Or Text Search

• Receipt Voucher generation on sale

Odoo OpenERP 6.1 Features Part 2 - Fixed Asset Management

OpenERP 6.1 Version came up with Fixed Asset module that provides the features and functions to manage all types of properties, plant and equipment. The book and tax accounting implications of all capital assets are addressed with maximum flexibility, recognizing the inevitable changes in depreciation methods. Tracking fixed assets is simplified with free format accounting locations and location information. The Fixed Asset module provides a comprehensive solution to asset control.

Following are some of the main features of Asset Module :

1.   Multiple categories can be created for Fixed Asset

2.   Supports multiple depreciation methods like Linear method , Degresive method etc

3.  Depreciation method can be linked to Asset Category to minimize the repetitive entries

4.  Auto computation of depreciation lines based on the period length

5.  Auto posting of Depreciation entries in Account Module by clicking on Create Move . This will charge the depreciation on Asset and will post the entry in accounts

Odoo OpenERP 6.1 Features Part 1 - Mobile Client for iOS iPhone / iPad, Andrioid, Blackberry, Windows Phone

OpenERP has released  a number of very useful features in the new version. We are writing a series of blogs to describe the new features. In this series this is the first blog showcasing the capabilities of the Mobile client. This client runs in the browser and can run on any mobile phone and tablets. This client works on OS, Android, Blackberry, Windows and Symbian platforms. It is built using JQuery Mobile and HTML5.

OpenERP 6.1 Version launches enhanced features of Mobile Client Application. This enables user to access OpenERP data on Smart phone. Currently, data can be accessed in read-only mode. But you can access all you data from the mobile web interface. It is dynamic so you can add new modules on the server and it can quickly be accessed using the mobile interface.

               

OpenERP  Main Screen                             Module List

                  

Sales Order  Menu                                          Sale Order                             

              

      Product List                                         Product Details