Drupal 7 and Sencha Touch

nickvidal's picture

I've created a demo to show how Drupal and Sencha Touch can work together. The demo is called "Tea Sencha Network" and it displays information from Sencha's official blog.

Please access:

I followed a Service-Oriented Architecture. The demo uses Drupal as the back-end and Sencha Touch as the front-end. There are actually two Drupal sites being used. While the Drupal sites provide all the data and services, the Sencha Touch interface consumes those data and services and displays them in an innovative way to the user.

Whatever action the user performs in the graph, it's immediately synchronized on the menu. This way, the user can jump from one visualization to the other. Since this interface was specially tailored for mobile devices, only one of the visualizations is available at a time to save screen space. However, it would be interesting to provide both visualizations simultaneously for tablet and desktop users.

The menu provides access to a set of services from different websites. I've used JSONP since both sites are trustful, but it would be a good idea to use CORS for a real-world application. The services layer I've built on top of Drupal already supports CORS. The services are interlinked and use a mechanism I've developed called serviceLink. With serviceLink, it's possible for a user to navigate a Contacts List from a friend, jump to another service, navigate another user's home menu, and come back to the user's own home menu, all this without even noticing that several websites were contacted.

In conclusion, this was a very exciting opportunity to not only create something fun (by the way, the name Tea Sencha Network was inspired by the movie The Social Network), but also something that demonstrates very important concepts regarding social networks and mobile applications.

This site was built in 3 weeks for the Sencha Touch Contest.

Thank you for your attention.

Kind regards,
Nick

P.S.: This demo's only intention is to demonstrate how Drupal and Sencha Touch can work together and the copyright of the aggregated blog entries belong to the original authors.

Comments

P.S.

nickvidal's picture

P.S. 2: Please access from a phone with SVG support (e.g. the iPhone). SVG support for the Android is coming. There is also a version without SVG:

http://teasencha.net/index-no-graph.html

P.S. 3: If you don't have a phone, like me, try using a webkit-based browser (e.g. Safari or Google Chrome). Sencha Touch for now only supports these browsers.

P.S. 4: For a quick look under the hood, try this:

http://yellow.teasencha.net?q=ios&method=user.home&uid=12&debug=1

excellent!

mossy2100's picture

Great demo, Nick, and thanks for bringing Sencha Touch to my attention. Good luck with the contest!

Nice Demo Nick Thnx for

rajarju's picture

Nice Demo Nick
Thnx for sharing

rajarju

Very very interesting! Thanks

upupax's picture

Very very interesting! Thanks for sharing!

This is great. I am doing the

dishui's picture

This is great. I am doing the same thing for a site we are planning right now. Doing SOA architecture. Using drupal as backend and leave the front end to something else, that is it can be mobile (like iphone, android or other mobile apps, mobile web) or web. Glad that you have achieve this success with drupal 7. I am considering both drupal 6 and 7, depending on our deadline and some of the drupal 7 contribiute modules.

Thanks

nickvidal's picture

Thank you for the positive feedback everyone! Feel free to contact me if you need more information.

Sencha Touch 1.0

Chris Charlton's picture

I just completed a proof-of-concept with Sencha Touch RC1 last week and heard 1.0 is out now. I think the next steps for Drupal is to adopt a Sencha add-on to the EXTJS module, and of course maybe some heavy theme layer mods.

Chris Charlton, Author & Drupal Community Leader, Enterprise Level Consultant

I teach you how to build Drupal Themes http://tinyurl.com/theme-drupal and provide add-on software at http://xtnd.us

Sencha Touch 1.0

nickvidal's picture

Hi Chris,

Yes, 1.0 looks good!

I think the best way is to follow a SOA approach.

Let's keep in touch!

Kind regards,
Nick

Code please? :)

akash87's picture

Hey

Great job on this. I'm looking for using extjs4 with drupal, and possibly integrate with node.js. But to start off with, i'd like to see how this is done. Would it be possible to get access to the code?

Thanks in advance

Code please? :)

nickvidal's picture

Sure. I used a modified version of the services module:
http://drupal.org/node/477012#comment-2050614

If you want, send me an e-mail and I'll send you the exact code I have running on this site.

Hi Nick :)

ardnet's picture

Hi Nick, this is so cool!
I was also planning to build mobile site that were build using Sencha and Drupal.
I came across this thread when I googled keyword "Drupal sencha". Thx for sharing this.

Btw, can I have the code also for this? I'd really like to build this with some proper start, instead of digging around from scratch.

Thanks a lot!

Regards,
Ardi

Server Code

nickvidal's picture

Hi Ardi,

Sure. I've sent you an email with the code. If you need further help, let me know.

Kind regards, Nick

Code Request

Orkut Murat Yılmaz's picture

Dear Nick,

Would you please send me an email too? I'd be very happy to examine the system&code.

Kind regards,
Murat

Email

nickvidal's picture

To receive the server code, just send me an email:

http://groups.drupal.org/user/9332/contact

Code for Tea Sencha Network

st455's picture

Hi Nick,

Great work and thank you for the code.

Sarat.

the site doesn't work

scripthead's picture

The site http://teasencha.net/ doesn't work - shoes the stock BlueHost filler page. Do you have plans on reviving it?

Expired

nickvidal's picture

Hi,

Sorry for the delay answering this, I missed your email.

I didn't renew the domain since it was just a demo and I used an old version of sencha touch. But I'm happy to provide anyone with the code if you want to learn.

There is another demo that uses a newer version of sencha touch at:

http://foz.iss.im

Code Request

victor_ray's picture

Hi Nick,
I need your http://foz.iss.im source code. Could you please share your code? My emai-id is: victor.ray22@gmail.com.

ios module

sjkim's picture

To nick vidal
I read the source code in index.js from pt.foz.iss.im
there is a query: ../?q=ios&method=foz.language
Is the "ios" a module?
Could I get the source code(PHP: ios.module, ios.info, ...) of "IOS" module?

Certainly

nickvidal's picture

Hi Kim,

Certainly, just email me and I'll send you the source, as this is FOSS.

Kind regards,
Nick

Thank You

sjkim's picture

Thank you for your kindness.

Awesome Work

androit's picture

Hi Nick,

This is most probably the only working example of Drupal + Sencha available. Thank you in advance for the good work. Could you please send me your code (client+server side) at pdesai @@@ androit.com

Thanks.

drupal api

AkashSaikia's picture

Hi i am confused whether drupal provides extremely powerful apis to access almost every part of data in the site?

For example, i have a drupal site, that contains blogs and few images. So can i get access to these blogs and images through any api in json/jsonP requests, so that i can use it in sencha touch app?

I know you have done the same thing elegantly, but i mean is their any restriction or limit in acessing the data through api?

Thanks.

Data Access

nickvidal's picture

Drupal does provide an API to access almost every part of data. For example: node_load to load information from a node. The API is available here:

http://api.drupal.org/api/drupal

You may also bypass the API entirely and access the data directly from the database using Drupal's database abstraction layer:

http://api.drupal.org/api/drupal/includes%21database%21database.inc/grou...

You might also want to look at some service modules provided here to see how to access the data:

http://drupal.org/project/services
http://drupal.org/project/restws
http://drupal.org/project/webservices

Data acess

AkashSaikia's picture

Thanks.

I am very happy to hear about the availability of such apis.

Now i am forward to look at it to combine the power of drupal and sencha together.

Thanks Nik.

Usability

Group organizers

Group categories

UX topics

Group notifications

This group offers an RSS feed. Or subscribe to these personalized, sitewide feeds: