Drupal 7 and Sencha Touch

Events happening in the community are now at Drupal community events on www.drupal.org.
Posted by nickvidal on October 31, 2010 at 2:05pm

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.

Categories:

Comments

P.S.

Posted by nickvidal on October 31, 2010 at 7:26pm

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!

Posted by mossy2100 on October 31, 2010 at 9:46pm

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

Nice Demo Nick Thnx for

Posted by rajarju on November 1, 2010 at 8:06am

Nice Demo Nick
Thnx for sharing

rajarju

Very very interesting! Thanks

Posted by upupax on October 31, 2010 at 3:01pm

Very very interesting! Thanks for sharing!

This is great. I am doing the

Posted by dishui on November 1, 2010 at 7:10pm

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

Posted by nickvidal on November 5, 2010 at 5:39pm

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

Sencha Touch 1.0

Posted by Chris Charlton on November 16, 2010 at 9:44pm

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

Posted by nickvidal on November 17, 2010 at 1:28am

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? :)

Posted by akash87 on March 24, 2011 at 1:19pm

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? :)

Posted by nickvidal on March 24, 2011 at 1:43pm

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 :)

Posted by ardnet on April 24, 2011 at 6:32am

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

Posted by nickvidal on April 24, 2011 at 2:48pm

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

Posted by orkutmuratyilmaz on April 24, 2011 at 3:03pm

Dear Nick,

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

Kind regards,
Murat

Email

Posted by nickvidal on April 24, 2011 at 3:16pm

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

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

Code for Tea Sencha Network

Posted by saratt on July 6, 2011 at 12:47pm

Hi Nick,

Great work and thank you for the code.

Sarat.

the site doesn't work

Posted by scripthead on October 25, 2011 at 3:07am

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

Expired

Posted by nickvidal on November 24, 2011 at 5:32pm

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

Posted by victor_ray on January 23, 2012 at 1:25pm

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

Posted by sjkim on March 12, 2012 at 2:02am

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

Posted by nickvidal on March 19, 2012 at 1:13pm

Hi Kim,

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

Kind regards,
Nick

Thank You

Posted by sjkim on March 20, 2012 at 7:05am

Thank you for your kindness.

Awesome Work

Posted by androit on December 20, 2012 at 2:54am

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

Posted by AkashSaikia on April 22, 2012 at 10:49am

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

Posted by nickvidal on April 22, 2012 at 12:22pm

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

Posted by AkashSaikia on April 22, 2012 at 12:30pm

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:

AltStyle によって変換されたページ (->オリジナル) /