Introduction: Host Your Smartphone App on Your Raspberry Pi!

Background:

I'm currently working on a Sencha Touch project making an Entrepreneur application, which will be released in a couple of months... Stay tuned! I only want say that it is a bit more complex than this example... but you have to start with something, right?!

To get some knowledge of the Sencha Touch Framework I created a basic App - based on my Nonsense Guru javascript from 1997. Yes that's right! Just a couple of lines had to be changed.

The app was made entirely in javascript so the old script fitted right in...

Next step: The framework

Step 1: Host Your Sencha Touch App on Your Raspberry Pi!

Sencha Touch is in my opinion the greatest framework for making a web page / javascript based application simulating a native app in your smartphone there is! (The framework take care of browser kirks and it doesn't mater if it's displayed on an iPhone or Android phone)

If you really are thinking of making an App, you should look at http://docs.sencha.com/touch/2-0/#!/example

Creation of an App
This was my first try, so I made some minor good codelines, but even though.... it works!! (Not in Internet Explorer, because the framework doesn't support it, but who has a Windows phone... ;).

The basics are:

Define your app in a MVC fashion:
Model
View
Controller

The Models take care of data structure.
The Views displays data.
The Controllers take care of logic.

You need an Index.htm file which declare javascripts, framework files and css-files used.

The app.js holds the application.
(And the other files are filed as above... if it is a big App).

Read more at http://docs.sencha.com/touch/2-0/#!/guide/getting_started

(Mine is not a good example, but as I said it works!)

Next step:
IDE

Step 2: Create Your Sencha Touch App !

IDE... You could use Sencha Architect or senchafiddle to make your Web-App, but I really recommend you to just design your views, models and controllers in those program and then start using Aptana Studio to make your coding easier.

Aptana can be found here http://aptana.org/

Import your Sencha project an let the keys fly!

Always use the Docs for reading about the xtype's or containers etc, you are using in your application!
Let the docs be your best friend!

Next step: Place the App on your Pi!

Step 3: Host Your Sencha Touch App on Your Raspberry Pi!

To make your Pi visible on the Internet look here:
https://www.instructables.com/id/Raspberry-Pi-as-webserver/

To enable ftp and ssh look here:
https://www.instructables.com/id/Use-ssh-to-talk-with-your-Raspberry-Pi/

Place your Sencha Touch app in var/www/ [your app]

Surf to your created app. (Mine is here: http://213.65.123.101/guru/
Note: use Safari or Chrome preferably. The Guru can be a bit grumpy.. ;)

Make a bookmark on the home screen, and voilá, you have your own iPhone or Android app!

Perhaps you have a question? Feel free to ask!

May the Guru and Pi with Sencha be with U!

Comments

author
SowmyaGuru made it!(author)2014-10-28

I have used an example from Sencha docs. Kept it at /var/www location. But Host:IP/index.html does not load in my chrome web browser. Do I need to make any other changes?

Screenshot from 2014-10-28 14:55:12.png
author
antares72 made it!(author)2014-11-06

Hi SowmyaGuru!

Are you sure you have the right ip-address? Are you sure your startpage is index.html (Capital letters matters. .htm perhaps)?

Please post your result!

BR
Andrew

author
SowmyaGuru made it!(author)2014-11-06

I resolved this problem. Thank you. :)

author
antares72 made it!(author)2012-10-22
author
amandaghassaei made it!(author)2012-11-01

thanks!

author
jimbob138 made it!(author)2012-10-29

Just saying, the image of the guru here is Guru Tegh Bahadur. Some people might take offense when they see this Sikh religious leader portrayed this way. You might want to change the image to a non-Sikh Guru image. Just a heads-up.

author
antares72 made it!(author)2012-10-30

Changed guru. Hope he doesn't mind. (Note that page can be cached..)

author
antares72 made it!(author)2012-10-30

Can you please give example? I really don't want to offend someone.

author
amandaghassaei made it!(author)2012-10-22

sounds cool! do you know of any good resources to get started with Sencha?

About This Instructable

23,127views

107favorites

License:

More by antares72:See the world as BitsCheck who is at home! Home automation. Surveillance. Big Brother tech. Raspberry PI.Emergency supplies
Add instructable to: