HabboAPI CMS | NodeJS | AngularJS | Arcturus

[billsonnn]

HabboAPI CMS
designed for Arcturus Emulator

---

My first released project here was back in 2012 when I released Habblux Housekeeping and was to my knowledge pretty well used for the time. Since then I have sadly started and not completed many developments with my last being HabboAPI Housekeeping. But these past few months I've been working on a new project that has the same system of a RESTful backend written in Node but this time instead of writing the frontend using jQuery I finally took the time to learn AngularJS and I have created something that in my opinion is completely unlike any CMS that I have seen released before.

Highlights​

• 
  [*=1|left]Node
  [*=1|left]Bookshelf
  [*=1|left]Passport
  [*=1|left]Express
  [*=1|left]AngularJS
  [*=1|left]Angular Material

​

Completed Features​

• 
  [*=1|left]Login / Logout
  [*=1|left]Profiles (badges, friends, rooms & groups)
  [*=1|left]Client (read below for more information)
  [*=1|left]Community (latest user / general stats)
  [*=1|left]Staff
  [*=1|left]Settings (password, email & client settings)
  [*=1|left]Group Page (general info, group owner, group room, group members)
  [*=1|left]Room Page (general info, room owner, display group if group room)

​

Node​

I only started learning Node in 2016 and haven't designed anything too crazy but I have learned the basics which has allowed me to write clean, clear, efficient, modular, & reusable code. I'm using Bookshelf as the ORM in this system. I try to take full advantage of database relations which allows me to create very simplistic api calls returning tons of information without the need to keep rewriting different queries over and over. I use Passport for authentication and session storage plus every session is stored in the database for better management. I've chosen Express as the actual APIs framework. I write all my http routes in Express and then call the API functions which give me my result.

​

AngularJS​

The frontend for this CMS is written in AngularJS. I've spent a lot of time learning about all the different features it has and I've tried to make the best use of them possible. Most of the functions are written using promises and simply make http calls to the api to retrieve the info which is received as a JSON. As for the Angular module itself I'm using services, controllers, directives, filters, & templates. Angular does most of the hard work here leaving HabboAPI to simply run its database tasks and send them back to the frontend. HabboAPI never returns any html code leaving everything up to Angular in terms of the template system.

​

Client​

Like Habbo I have designed the client to be displayed directly into the CMS. There are no popups or tabs, we just have states. I used Angular UI Router Extras to do "sticky" states which keeps the client state loaded in the background even after you've changed the page. This allows you to very quickly switch between the client and the CMS. I have also been able to incorporate Habbos FlashInterface to allow certain events to be exchanged between the client and the CMS. This means you can hit the red logout button to trigger the logout event, or the character settings button to bring you to the settings page. Currently the only issue I have with this system is that unlike Habbo, the client will not auto load, you must first hit the client page. But after that is loaded and you switch pages (even using your browser's forward / back buttons) the client will stay right where it is, even the room you've already entered.

​

Gulp​

Not much to say here, I use gulp & uglify to compress the AngularJS application, its dependencies & templates into a single bundle.js this means less requests to the server, & faster load times.


​

Images

You must be registered to see links

GitHub

You must be registered to see links

NPM

You must be registered to see links

Credits Chris Pettyjohn (LeChris) for always getting me on the right track and being awesome

That's all for now, please let me know if you want anymore information or can offer any suggestions.​

 

[maritnmine]

I haven't updated the git in over 2 months besides recently updating the readme.

Then why are you using git? Or are you committing to a local repo?

I have learned the basics which has allowed me to write clean, clear, efficient, modular, & reusable code

The code in your snippets is very far from clean. Imo, it is unclear, obscure, and I fail to see how any of this is modular and reusable. My advice is to follow some JS coding conventions and try make your code cleaner. Part of this is not your own fault but the framework, as for some reason large parts of the JS ecosystem now tends to obscure their business logic within an obscure set of vocabulary which makes it really hard to understand what is happening. The same thing happens in Java when people "over-abstract" things, but here it has more to do with concurrent programming. Interesting project though, but clean up your code and start use github properly.

 

[billsonnn]

Then why are you using git? Or are you committing to a local repo?
The code in your snippets is very far from clean. Imo, it is unclear, obscure, and I fail to see how any of this is modular and reusable. My advice is to follow some JS coding conventions and try make your code cleaner. Part of this is not your own fault but the framework, as for some reason large parts of the JS ecosystem now tends to obscure their business logic within an obscure set of vocabulary which makes it really hard to understand what is happening. The same thing happens in Java when people "over-abstract" things, but here it has more to do with concurrent programming. Interesting project though, but clean up your code and start use github properly.

I'm still learning Node and right now this is what's working for me. To me it all seems pretty reusable maybe my definition of it is different LOL I was waiting until I had something a little more stable to push since I did a lot of recoding since my last git. I've never really managed or kept up with a GitHub before so I'm still learning. I'm most definitely going to try more!

I have pushed the full project to GitHub

You must be registered to see links

 

[Keiz]

Like Habbo I have designed the client to be displayed directly into the CMS. There are no popups or tabs, we just have states. I used Angular UI Router Extras to do "sticky" states which keeps the client state loaded in the background even after you've changed the page. This allows you to very quickly switch between the client and the CMS. I have also been able to incorporate Habbos FlashInterface to allow certain events to be exchanged between the client and the CMS. This means you can hit the red logout button to trigger the logout event, or the character settings button to bring you to the settings page. Currently the only issue I have with this system is that unlike Habbo, the client will not auto load, you must first hit the client page. But after that is loaded and you switch pages (even using your browser's forward / back buttons) the client will stay right where it is, even the room you've already entered.

I like that idea, good luck!

 

[billsonnn]

I like that idea, good luck!

Thanks! Currently working on adding some more content to the me & community pages. Currently planning room promotions & trending rooms (im thinking a limit of 5 sorted by how many users are in the room).

 

[LeChris]

No shout out to me for encouraging you to use Node, and helping you along the way

ONT:
It's been nice seeing you update this over the last few months, especially when you suddenly go from nothing being done to almost every feature in the book being supported.

As for marit up above, seeing as this is one of your first Node projects - the coding style is just fine and so is everything else. You cannot expect class A code from a beginner in Node, especially when Javascript is hard to figure yourself out with versus structuring in other languages.

 

[billsonnn]

No shout out to me for encouraging you to use Node, and helping you along the way

ONT:
It's been nice seeing you update this over the last few months, especially when you suddenly go from nothing being done to almost every feature in the book being supported.

As for marit up above, seeing as this is one of your first Node projects - the coding style is just fine and so is everything else. You cannot expect class A code from a beginner in Node, especially when Javascript is hard to figure yourself out with versus structuring in other languages.

LOL Chris I did plan a shoutout don't worry! & thank you

 

[maritnmine]

... the coding style is just fine and so is everything else. You cannot expect class A code from a beginner in Node, especially when Javascript is hard to figure yourself out with versus structuring in other languages.

I didn't say his code would be "class A", neither do I think it is fair to treat every dev project as someone who is entirely new in the language and therefore be kinder to them. I gave him some pointers on what to improve, and I definitely think the coding style is something that can be improved a lot - regardless of whether OP is familiar or not to the language/framework. Yes, there are caveats in Javascript just as in any other programming language, and it is even more important for new programmers to point these issues out to them, because they don't even realize these issues themselves.

I'm still learning Node and right now this is what's working for me. To me it all seems pretty reusable maybe my definition of it is different LOL I was waiting until I had something a little more stable to push since I did a lot of recoding since my last git. I've never really managed or kept up with a GitHub before so I'm still learning. I'm most definitely going to try more!

I have pushed the full project to GitHub

You must be registered to see links

First of all, you don't realize these issues when you don't have much experience with programming (thats why feedback from others/code reviews is good). Regarding git, consider every increment/unit of work that you put into the codebase as a commit. "Fixed an issue with registration", "new registration layout", etc. are all good examples of what goes into each separate commit. Commit frequently and then push to github. Use source tree if you are not comfortable with the git cli and you will be using git in no time

 

[seanrom]

+1 For AngularJS and taking advantage of its key features. Not just throwing in the AngularJS tag in and using its lazy-loading feature. You're choosing NodeJS for educational reasons eh? Looks promising.

Since Git was discussed earlier in this thread, let me share my 1,5 cents on this.
I used to never use Git, pretty much because I didn't really know what it was. What I had heard tho is that it was a tool for groups of developers to work together making sure that everyone had the same code. I also understood that it was awesome, because so many programmers used it, it had to be awesome right? Not gonna write my whole life history here praising about Git. But I will tell you that after I started using it, I love it's features. Maybe an extra thing todo, but it gives alot back to you.

Use some time to discover Git, even if you are a solo developer. Once you get the hang of it, you will absolutely start to love your own habits, and Git' features. Go back and check versions, "git blame" your buddies (that is always fun), develop on different branches, take advantage of "git hooks" todo cool things and make your life easier like auto deployment, or testing your features on a staging server before pushing to production. AWESOME!

And another thing you don't HAVE to use GitHub either, push to a local repo or setup your own git server on a 2 euro VPS. GitHub is cool if you want open-source and give people opportunity to work easier with your project later. They can go back and look what was done in this specific commit etc etc etc.

First of all, you don't realize these issues when you don't have much experience with programming (thats why feedback from others/code reviews is good). Regarding git, consider every increment/unit of work that you put into the codebase as a commit. "Fixed an issue with registration", "new registration layout", etc. are all good examples of what goes into each separate commit. Commit frequently and then push to github. Use source tree if you are not comfortable with the git cli and you will be using git in no time

+1 One commit for one thing/adjustment/improvement/modification! "Larger commits" should be be in branches with own commits and merged into master. Much easier to track changes later on that way.

 

[billsonnn]

+1 For AngularJS and taking advantage of its key features. Not just throwing in the AngularJS tag in and using its lazy-loading feature. You're choosing NodeJS for educational reasons eh? Looks promising.

Since Git was discussed earlier in this thread, let me share my 1,5 cents on this.
I used to never use Git, pretty much because I didn't really know what it was. What I had heard tho is that it was a tool for groups of developers to work together making sure that everyone had the same code. I also understood that it was awesome, because so many programmers used it, it had to be awesome right? Not gonna write my whole life history here praising about Git. But I will tell you that after I started using it, I love it's features. Maybe an extra thing todo, but it gives alot back to you.

Use some time to discover Git, even if you are a solo developer. Once you get the hang of it, you will absolutely start to love your own habits, and Git' features. Go back and check versions, "git blame" your buddies (that is always fun), develop on different branches, take advantage of "git hooks" todo cool things and make your life easier like auto deployment, or testing your features on a staging server before pushing to production. AWESOME!

And another thing you don't HAVE to use GitHub either, push to a local repo or setup your own git server on a 2 euro VPS. GitHub is cool if you want open-source and give people opportunity to work easier with your project later. They can go back and look what was done in this specific commit etc etc etc.





+1 One commit for one thing/adjustment/improvement/modification! "Larger commits" should be be in branches with own commits and merged into master. Much easier to track changes later on that way.

Thanks for the tips! I appreciate the support. Slowing learning git, not really sure what you mean by separate branches and such sadly.

I did just push an update a couple hours ago with big changes! I have converted the entire NodeJS part of the system to ES6 and so far looks good. I am having a few problems though, for some reason my functions aren't being recognized and are saying undefined. Took a break from that and now I'm converting the AngularJS side, which hopefully will be done tonight! I also published the system to npm

You must be registered to see links

no idea about using that either but figurd it would be something cool to try.

 

[Sonay]

Index credits goes to me. Looks very cool Respect.

 

[billsonnn]

I have pushed some major updates to npm & github. Got the entire system rewritten in ES6. Let me know what you guys think! There may be some bugs and will be working on it tonight.

 

[billsonnn]

Just pushed another updated to NPM & GitHub. Included in the readme are instructions to get the server up and running, they're pretty clear and straightforward. I updated angular to version 1.6.3 (from 1.3.15) and I fixed most of the issues from that but now I'm experiencing trouble with the client. It works, but not always, sometimes takes a couple of refreshes to load properly. Hopefully will get this perfect again in another day or so.

Also I'm using HTML5 now for the routing so we no longer have the hashbang in the routes.

 

[Joopie]

How is this html5 routing work exactly??

 

[billsonnn]

How is this html5 routing work exactly??

Honestly I don't know LOL but I know I have it turned on and setup express to send all requests that aren't in the router to the index file and angular does the rest. Typically in angular applications you will see a hangbang put in between the routes but with this mode it gets rid of that!

 

[maritnmine]

How is this html5 routing work exactly??

Have a look

You must be registered to see links

.

 

[billsonnn]

Have a look

You must be registered to see links

.

@Joopie I didn't realize if this is what you wanted to know exactly, thought you were talking simply about the hashbang (im not sure if that is an html5 thing or what). I use Angular UI router for all the states. @maritnmine did include a great article that explains switching pages without refreshing. I learned about it a few years ago and will NEVER go back to the traditional way!

UPDATE: I have fixed the bug with the client