- Joined
- Jan 28, 2013
- Messages
- 157
- Reaction score
- 104
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
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
GitHub
NPM
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.
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.
Last edited: