All posts by admin

Build a NodeJS stack with TypeScript, ExpressJS, MongoDB, AngularJS

I’m writing this post to those who want to start a new Node.js project and also wants to understand how it works and connects all the elements, without using a preset stack.

Let’s star for the basics, I use the Webstorm IDE from JetBrains, it’s awesome, all the source code will be uploaded in this repo: https://github.com/Squallium/node-express-typescript, I’ll try to use git-flow and also I will deploy the project in Heroku at important milestones

Firstly we’re going to create a basic node project structure with ExpressJS framework, to do this I use the WebStorm’s wizard, but you can use express-generator.  Once it’s created and you’ve checked it’s working we’re going to deploy it in heroku. You need to install the heroku toolbelt by following this instructions heroku setup

In order to let know heroku how to run our project we need to create a Procfile in the root of our app. If you’re using WebStorm, is similar to the www file inside the bin directory. We’re going to create a new file named pre-prod-env.ts with the following content.

The Profile file will contains:

After that, we’re going to create a git repo, and also add two different remotes, one for github, and the other one for heroku.

If everything it’s correct, you should have your source code in your repo (GitHub, BitBucket…) and also you’re app up and woking in heroku opened in your default browser 🙂

I use Admin-LTE as a template for my app. Because my template engine is Jade, I’m also porting to Jade the Admin-LTE project. In order to make all this things work, we’re going to cover a few dependencies. Let’s start by installing admin-lte as a module in our project.

You can copy my views directly from my project, but if you try to run it, you’ll see an ugly website without CSS. Admin-LTE needs some external libraries like JQuery or Fon-Awesomes to work. To install those dependencies we’re going to use the nicest third-party dependencies manager, bower. Let’s star with bootstrap, first we install the bower module npm install --save bower , then we initalize the bower.json config file, with the wizard  bower init . Finally  we install bootstrap,  bower install bootstrap --save . We need to be sure that our app has access to the bower_components folder, simply add these lines in the app.js file and publish this path. 

The last thing, It’s make sure that your project will deploy its third party dependencies like the Node JS ones. We need to add this line into the “scripts” section inside the package.json file:  "postinstall": "./node_modules/bower/bin/bower install" , with this line, when you deploy your code, the npm install command will install the node and bower dependencies. The rest of the necessary bower modules are in my github repo, you can copy and paste the dependencies from the bower.json file.

Looks better now, but still not perfect. What is wrong? It’s simple, my templates now have what they need from browser, but still need some files from the admin-lte module. We need to allow the project access to the admin-lte files, adding the following line in the app.js file.

Now that we have a better look and some forms, let’s fix the routes so we can see them. In the users.ts file inside the routes folder.

As a login strategy we’re going to use the passport module. In this first stage we’re only going to make sure is working without problems. Also we’ll use mongodb for storing the login’s data, if you don’t have mongodb installed read the following instructions  Install MongoDB. Now we need to add passport as a dependency in your project and also a middleware for the sessions.

After that, we have to initialize passport inside our app.ts and also the session management.

Now we need to connect our project with the mongodb database. For the different environments configurations (test, dev, prod) I’m going to use a configuration file like the following config.ts.

And in our app.ts file, we initialize the database depending on the environment, and we need the mongoose module  npm install --save mongoose :

Once we have mongoose connected, we’re going to integrate the local login strategy using passport, and specifically we install the node module passport-local  npm install --save passport-local. First thing we need is create a model to store the data of the different login strategies. Also we’re going to cipher the passwords using bcrypt  npm install --save bcrypt-nodejs.

Now we’re going to create a file that will contain all the management of the different login strategies. Create a passport.ts file in the config folder with the following content.

And then we include it in the setup process of our app.ts this way.

Now we have to define the routes of our app. We’re going to use express.Router(). The basic GET routes are: “/”, “/login”, “/signup”, “/logout” and “/profile”. This last one use a helper function that allow us to know if the user is authenticated or not ir order to show the info.

Now if you run your app, you must be able to sign-up, login and see your profile. In the next post I’ll continue adding features to my app.

Referencias:

Install Python 3 coexisting with Python 2 in Linux

In this post I’m going to explain how to install Python 3 coexisting with Python 2 in Linux (Kubuntu 13.10 in my case). First step is install some dependencies.

After that, download from the website and uncompress the latest version of Python 3 in a folder of your choice.

Inside the uncompressed folder, we’re going to compile and install Python 3 with the following commands:

To make sure about the correct installation execute the following command  /opt/python3.3/bin/python3 and you must get something like that:

Also you should have brand new commands like python3  and python3.3. For the Python 3 modules management we’re going to install pip, but for Python 3 :-). Happily there is a debian package for that, use the following command  sudo apt-get install python3-pip to install it.

Finally we’re going to create a virtual environment of Python 3. There is two ways to do that. The first one, the hard way is specifing the python path that you want to use.

The second one, needs a previous installation of the virutalenv module using pip3  sudo pip3 install virtualenv . After you have installed it, to create Python 2 virtual environment you’ll must use virtualenv-2.7 and to create Python 3 virtual environment virtualenv-3.3. Enter the following command to get your Python 3 virtual environment.

Once you’ve created and set your Python 3 virtual environment, you’ll be able to install new modules using the pip command (inside our Python 3 virtual environment pip command is the same as pip-3.3). Let’s test it by installing the django module with  pip install django. After that, run the Python 3 console and write down the following instructions:

I hope it helps you!

Scraping website using Python, Selenium, Lxml and PhantomJS

In this post I’m going to show a basic example of scraping website using Python with the headless browser PhantomJS. In other words, I’m going to automatize the extraction information process from a website using a browser that doesn’t have/need an user interface.

  • The easiest way to work with Python is using virtual environments with virtualenv. In Linux (Debian in my case) insert the following commands to install it.

    Now, go to a directory of your choice, then you must create and set the new virtual environment with the following commands.
  • First test. We need a couple of dependencies for doing the scraping, selenium and lxml. To do that, type down the following commands  pip install selenium and  pip install lxml inside of our virtual environment. If you have problems installing lxml is because you need some dependencies. So you need to erase the virtual environment that you have just created.

    After that you must install the following dependencies, they’re necessaries for compile the lxml module.

    Once you’ve installed it, create again the virtual environment like we did before, and inside of it execute the installation of lxml. If everything going well you should see something like  Successfully installed lxml . Now we are going to test the following code:

    Save it into a file named “test1.py” and execute it inside the virutal environment venv with  python test1.py, you must get the following exit:
  • Second test. Firstly we are going to install PhantomJS following the instructions in phantomjs.org, we create a folder for it and execute

    Now we’re going to modify the source code of the previous example by changing the instantiation of the browser. Firefox() by PhantomJS(). Beside I’ve specified a dimension for the window browser. If the website have a responsive desing maybe you are interest only in some data for one resolution.

    Save the source code into a file “test2.py” and execute it inside the virtual environment with the following command  python test2.py and you must get the same exit but without open a window browser.

 

References

Setup Cocos2dx environment in Linux for Android (Part 2)

Hi again! If you’ve been able to accomplish the first one, and you’re aim to continue, thi is the second part. In this part, we’re going to run the TestCpp project of Cocos2dx in Android. It’s going to be shorter process than the previous one.

Before we start with the Android part, I want you to try to make a debug against the HelloCpp project in eclipse. In Debian I had a problem. My eclipse said “Error while launching command: gdb –version”. After a while I realized that I hadn’t installed it, http://www.gnu.org/software/gdb/ and it’s necessary for debugging, so sudo apt-get install gdb.

Let’s start with Android. We have to define a couple of enviroment variables inside our eclipse. The first one, COCOS2DX must be defined in Eclipse->Preferences->General->Workspace->Linked Resources. Click in the New button and set the variable to the path of the uncompress folder of Cocos2dx, in my case /home/borja/Programas/cocos2d-x-2.1.4.

The second one, NDK_ROOT, must be defined in Eclipse->Preferences->C/C++->Build->Environment. Click in Add and set the variable value to the path of the uncompress folder of NDK, in my case /home/borja/Programas/android-ndk-r8e.

If you’re compiling the TestCpp project with the last version of Android like me, maybe the NDK shows this error android-ndk-r8e/build/core/add-application.mk:128: Android NDK: WARNING: APP_PLATFORM android-14 is larger than android:minSdkVersion 8 in ./AndroidManifest.xml. You can work around it by modify the file add_application.mk in the line 128, changing  $(call __ndk_warning by $(call __ndk_info.

Now, try to compile the TestCpp project, you should get an output console like this, but a little much longer :-).

Once the building process has finished, launch the app normally in an Android device, and everything should work well.

SC20130717-214505

Thanks for read this. The new group of post that I’m going to write, will be about setup a continuous integration environment in general and for Android particulary.

See you soon!

Install libwebsockets library in Linux

Like the post’s title says, I’m going to explain how I installed the libwebsockets in my Linux distribution. I needed it for one of the Cocos2dx‘s libraries (the extension library). At first, by mistake, I thought that this library didn’t exist, but finally I found it, libwebsockets project.

Let’s download the last version wget http://git.warmcat.com/cgi-bin/cgit/libwebsockets/snapshot/libwebsockets-1.22-chrome26-firefox18.tar.gz  and uncompress it tar -xzvf libwebsockets-1.22-chrome26-firefox18.tar.gz . The installation instructions are in the INSTALL file. The first thing you have to do is check that you have already installed the autoconf package http://www.gnu.org/software/autoconf/. I don’t even known about its existence till I tried to install the libwebsockets today :-). Just type down in your terminal  sudo apt-get install autoconf. After that, launch the autogen.sh script ./autogen.sh. The first time I launched it in my laptop, Debian required to me the GNU Libtool package, if this is your case, just sudo apt-get install libtool.

Finally the steps described in the library for the correct installation are:

That will install the library in your system. In my case in the /usr/local/lib directory. If this is your case too, I recomend create a symbolic links in the /usr/lib/ directory for avoiding problems with Eclipse when you’ll try to use the library as “shared library”

 

References

Setup Cocos2dx environment in Linux for Android (Part 1)

In this post I’m going to explain the steps for installing the Cocos2dx environment in Linux for working with Eclipse and Android. We travel from basics to compile and execute the examples HelloCpp in Linux and TestCpp in Android. I’m assuming you have knowledge of Android, C++, Linux and you have already installed  and configured Eclipse with Android.  I’ve included some paths in my .bashrc file. I’m going to use them during this post, with this I can make some things easyly, for example, I can access to my android adb from any terminal. In order to do this, open a terminal in your home directory, and with your favourite editor modify the .bashrc file, nano .bashrc, and add the following lines:

Now for making the change effective we have to execute the following command: source .bashrc. The first thing that we’re going to do is install the eclipse plugin for C/C++, the Eclipse CDT Plugin, we have two different ways for doing that. The first one, is looking for it in the Eclipse Marketplace via Help > Eclipse Marketplace..”, the second one is using the update site: http://download.eclipse.org/tools/cdt/releases/juno. After this, we’re going to download the last version of Cocos2dx from the official site (http://www.cocos2d-x.org/projects/cocos2d-x/wiki/Download), in our case the version 2.1.4, and the last version of the Android NDK (http://developer.android.com/tools/sdk/ndk/index.html), unzip both files in a directory of our choice, in my case the “Programas” directory.

Now we have to define a few environment variables by editing the .bashrc file again nano .bashrc.

Again, for making the change effective we have to execute the following command: source .bashrc. You must be sure that you have installed the Java JDK because we’re going to need it later. If you don’t have it installed, use the command sudo apt-get install openjdk-6-jdk. If you have already installed a Java JRE, check your version with java -version, in my case I had the 6, so I installed the correspondednt JDK.

Now the fun part begins. We’re going to install the necesary dependences to use Cocos2dx. If you have not installed it yet, you’ll have to install the build essentials and the ia32-libs packages, check my previous post. Now we launch the scrpit “make-all-linux-project.sh”, in the root directory of the Cocos2dx uncompressed files:  sudo bash make-all-linux-project.sh. When the process finished, we’ll check if everything went ok, so we have to go to the  “cocos2d-x-2.1.4/samples/Cpp/HelloCpp/proj.linux/bin/release”  directory and execute the HelloCpp: ./HelloCpp. If you see a window with the Cocos2dx logo and the “Hello World” text, we can proudly follow with the next step.

Now starts the hard part. Let’s make all this work in eclipse in order to develop more comfortably. The first thing that we’re going to do is import all the necessary project for working with Coco2dx in Linux and Android. To do this right-click on the Project Explorer of the C/C++ perspective of Eclipse, then, click “Import…> General > Existing Projects into Workspace”. Right-click on “Browse” and choose the Cocos2dx root directory. Once we get the complete list, right-click on “Deselect All” and from the list we select the following projects only:

  • libBox2D – (proj.linux)
  • libChipmunk – (proj.linux)
  • libcocos2d – (proj.linux)
  • libcocos2dx – (android/java)
  • libCocosDenshion – (proj.linux)
  • libExtension . (proj.linux)
  • HelloCpp – (proj.linux)
  • TestCpp – (proj.android)

It seems a pretty obvious list, but took me a good while to figure out which projects I needed. But what really was a real waste of time was my ignorance about the CDT plugin. I have a 64bits Linux distribution, because of this when I compiled the projects by command line I didn’t get any errors. But when I used eclipse, all projects had problems with the dependencies. After reviewing all the compilation scripts used by the “make-all-linux-project.sh” and putting one by one all the correct dependencies to compile the projects in eclipse, I found out that every C++ project had a 64bits configuration ready to be used in eclipse, it could be selected in the project properties. I show you in these images the steps to follow, if your operating system is 64-bit based.

Main Menu Home Logo

Let’s build the projects in the  previous list order, and I’ll explain the details that we found along the process.

  • We build libBox2D without problems.
  • We build libChipmunk without problems.
  • In the libcocos2d library we found the first little issue, there is a dependency error with an static library, libxml2.a. This problem has a quick solution. In the project properties C/C++ Build > Settings. In GCC C++ Compiler > Includes and GCC C Compiler > Includes remove the following library dependence: ../../../cocos2dx/platform/third_party/linux/libxml2. And in GCC C++ Linker > Miscellaneous remove ../../../cocos2dx/platform/third_party/linux/libraries/lib64/libxml2.a. I’ve already make a pull request fixing that https://github.com/cocos2d/cocos2d-x/pull/3019.
  • In the libCocosDenshion library something strange happend, after fixing al the dependencies, when you try to build the eclipse project you get a nevereding error list like “…multiple definition of…” related with the classes SimpleAudioEngineFMOD.cpp and SimpleAudioEngineOpenAL.cpp. However, by command line it works perfectly, that’s because in the Makefile choose one file or another for build process according of the dependecies that you have already installed . I guess there’s a more elegant way to do this, but I don’t know how to make condicional linked files with the CDT plugin so I simply remove one of the files. I decided to keep SimpleAudioEngineFMOD.cpp, but if you decide to keep the SimpleAudioEngineOpenAL.cpp and eclipse fails building for some dependencies issues (that was my case in Debian) you must install:
  • In the libextension project we found a few issues too :-). At this point, I recognize that these problems are new from the last version 2.1.4. There is a new WebSocket entity that needs a non existing library “libwebsockets.h”.

    Errata (06/07/2013)
    <ERROR>And again… Why is it working perfectly building it by command line?, you know that, don’t you?, it’s because this entity is not included as source in the Makefile :-). So we’re going to remove both files WebSocket.h and WebSocket.cpp from the project explorer in eclipse.</ERROR>
    There is a way to install the “libwebsockets” library :-), and the reason why it’s working perfectly by command line is because this entity is not included as source in the Makefile. For installing this library follow the steps in my new post. I don’t explain that in this post because a think is long enough 🙂

  • But it’s not good enough!! :-), eclipse not found SimpleAudioEngine.h, that’s easy, I know the answer!, just access to the project properties, C/C++ Build > Settings and in the section GCC C++ Compiler > Includes add ../../../CocosDenshion/include. I’ve done the corresponding pull request https://github.com/cocos2d/cocos2d-x/pull/3034
  • And.. finally THE ROCK… I mean, we get to the HelloCpp project, and after build it we get the following errors:

    In the previous Cocos2dx versions I didn’t get these errors, because of this I did some research for a while. After more than an hour I realize a few things. The first one, this two elements are defined in ccFPSImages.h and ccFPSImages.c. The second one, building the project by command line it worked perfectly, of course, bacause are included in the Makefile. The last one, building the project by eclipse it didn’t work bacause the generated libcocos2d.so library didn’t cotains this two elements.
    This error was fixed adding this two files to the “Linked Resources” list in the project properties inside the “Resources” option. I didn’t found the way to do this using the eclipse interface so I edited the .project file directly adding the following lines into the <linkedResources> section. Here is the corresponding pull request: https://github.com/cocos2d/cocos2d-x/pull/3035

    Now the last attempt. Refresh, clean and build the libcocos2d project, do the same thing to the HelloCpp project, and if everything is ok, and you’re not about to surrender, you can execute the project a see a window like this:

Well, I think that’s enough for the first part of the tutorial :-). In the second one, we are going to  run the TestCpp Android project in a real device. Thanks for reading this long post.

Setup Android development environment in Debian 7 (Wheezy)

In this post I’m going to describe the steps for setup the Android development environment in Debian 7 (Wheezy).

Firstly we are going to change the apt repository list, to do this we’ll edit the source.list file

We comment the line/s of the installations cd/s, in my case:

And in the end of each debian repostory urls we are going to add “non-free contrib”, for example:

After that, we need to install the build-essential package that we are going to need for compile some stuff  apt-get install build-essential.

The next step, only going to be needed if as me, you are using a 64-bit Debian distribution. For the proper functioning of the Android SDK we need to install the ia32-libs package. To do this, the Debian’s package manager need to know that we want to install packages for another architecture using the dpkg command.

The fourth line is optional, in my case both packages was been requested.

Now we just need to download the last eclipse (http://www.eclipse.org/downloads/), the Android SDK (http://developer.android.com/sdk/index.html#download), uncompress these files, install the ADT plugin for ecplise from the update site (https://dl-ssl.google.com/android/eclipse/) and finally configure the ADT plugin setting where your SDK is.

I hope it helps!!