PDA

View Full Version : Bandcast (my first Sencha Touch app)



ln8r
29 Jun 2011, 5:50 AM
I just finished my first Sencha Touch app, called Bandcast (http://m.bandca.st), which I created for the HackLolla competition (http://http://hacklolla.com/submissions/3469-bandcast).

http://m.bandca.st
You can log in with username and password "demo".

The goal of it is to help you organize and connect with your friends at Lollapalooza. You can send status updates, tips and private messages, share schedules, find friends, and easily connect with new friends by scanning their unique QR code.

The non-mobile site is here (http://bandca.st).

kdaffolder
16 Jul 2011, 10:23 AM
Hi ln8r!

I am new to Sencha Touch and trying to figure out how to create a login panel that appears in a model window very much like your app Bandcast. I like how you force the user to log in before they can access the web app. Would you please be willing to send me your source so that I can see how you have created this functionality and also so I can see how you authorize permission through that FormPanel? Do you call upon a SQL directory to verify that the user has permission/credentials to login to the web app? I would GREATLY appreciate being able to see the source. Thank you!!! App looks great and I'm just trying to implement my own log-in functionality to the start of my app.

-Kyle

colworx
18 Jul 2011, 5:42 PM
kdaffolder: you can just de-obfuscate the javascript: http://pastebin.com/uF50X67Y

ln8r
20 Jul 2011, 12:53 PM
I use a custom login API that I wrote (which uses PHP and SQL) to handle the login system. The deobfuscated JS that colworx posted covers all the Sencha-specific code. I sort of fumbled my way through building this, relying on the examples they provided, and I tried using the MVC approach but it seems like not everything is set up for MVC (tab panel, for example) so it's a bit of a hybrid. Also the routing doesn't work so well with this setup so I had to sort of hack that. So while this definitely works, it may not be "right". But then again, it doesn't seem like there is a right way to do anything because all the examples are pretty different.

If you look at the pastebin code you can see at the top there's a setup and an authorize function. Those are the first steps in authorizing the user. The setup function creates a "before-dispatch" listener that runs every time a page is loaded and if there's no sid (session ID) then it will destroy the viewport and run the authorization system. It also passes the current URL to it so the user can be redirected back to where they came in.

There's an auth model, auth controller and several auth views also in the pastebin code. I had to hack the auth model system a bit because it's not a straight CRUD system. The PHP login code returns JSON data with sid (session ID), cookie (a standard authorization cookie) and user (some user data like user ID, username, etc). For each subsequent API request I pass the session ID and cookie data to the API and then the API verifies each request with that info. You can see that happening in the Ext.data.BandcastProxy class.

There's a lot of stuff going on and it's sort of intertwined so I'm afraid I can't just pick out the auth system and give you a shell to start working with, but hopefully you can pick it apart and figure it out.

Here's a stripped down example of the JSON returned from the login API call:

{
"success" : true,
"cookie" : "1:e151e22196c826bc18e75a67c04b895c",
"sid" : "vrs59lhl2j50cbvh3u9qs1tli1",
"user" : {
"displayname" : "Elenor",
"id" : "1",
"username" : "elenor"
}
}

mrduck
24 Jul 2011, 11:33 PM
Looks good. Can you upload a copy of the source code? Would be interesting to take a look at how you did a few things in there. Since it's open source software I reckon it shouldn't be a problem? Thanks.

edspencer
2 Aug 2011, 5:03 PM
Very nice, though you're pushing it a bit with the number of items in that grouped list... look for that to get a lot better in 2.x though :)

jayrobinson
15 Sep 2011, 9:29 PM
Great work for your *first* Sencha Touch app, Ln8r. I can't wait to see what you come up with in the future!