Excellent Reader,
It is my humblest pleasure to produce and here lay down something new; an interesting technology that Google has recently put its mind into bringing to a wider audience, and I pray my humble tutorial upon it will follow similarly to their aim. I pray, should you wish, you read on and (I hope) learn from this basic tutorial.
_________________________________________________________________
Contents
1.1: Requirements/Resources
1.2: My First App
– 1.2.1: Setting up App Engine
– 1.2.2: Creating a New App
– 1.2.3: Uploading to Google
– 1.2.4: Running your App
1.3: Creating More than Hello World
– 1.3.1: Setting up your YAML
– 1.3.2: Adding Images file
– 1.3.3: Adding CSS
– 1.3.4: Favicons
1.4: Adding More Pages
1.5: Final Notes
– 1.5.1: Program Overview
– 1.5.3: Good luck and Have Fun!
_________________________________________________________________
1.1: Requirements/Resources
This app is being developed in Google App Engine 1.8.5, available here. It requires Python to be installed on your computer, at this time version 2.7 seems to be the most stable with the app engine so that’s what I’m using. If you don’t have it, it’s around about here.
Otherwise, I’m assuming you know a bit about PHP, HTML, and CSS; if not you might want to do a basic tutorial of those languages, but I’ll give you pointers here and there as we go along, and I’m sure you’re clever enough to pick up the basics.
1.2: My First App
1.2.1: Setting up App Engine
Open up Google App Engine, we need to sort it out so it knows where everything is – such as where to find the Python installation. Go onto Edit on the top menu bar and select the bottom option on that drop down; Preferences.
Now check that your preferences are set out so that the locations of your App Engine install and your Python install are listed. Click on the Select button to the right of the text boxes to find it, once done your window should look something like this:
1.2.2: Creating a New App
Go onto the top File menu and then pick Create New Application. A window will appear; give your app a name (no capital letters, spaces or anything else funny), pick where you want to save it to by clicking Browse, and finally make sure you pick PHP from the Runtime dropdown option list.
1.2.3: Uploading to Google
Although Google App Engine offers the wonderful option to run PHP locally (which, if you are newish to php and haven’t tried, normally doesn’t go too well), it also has access to Google’s cloud facilities and lets you upload it to that. You can probably get away with this if you’re just looking to play around with app engine, but I’d recommend you go and sign up for a Google account if you don’t already have one (or if, like me, you’ve forgotten your password). Now click the Deploy button; the upwards pointing white arrow on a blue circle background above the window with your new app’s name in it. Now log in with your Google account details and it will upload, nice and easy, eh?
1.2.4: Running Your App
With your app’s name selected in the large white box, press the Run button (the green play button) and let your app load for a second, now that it’s running you can press the Browse button (the world button). Now your app will load up in your favourite internet browser. And now you’ve created, cloud-ed, and run your first* app.
1.3: Creating More than Hello World
1.3.1: Setting up your YAML
YAML is the file type used by Google App Engine to list the directories and files that the app is allowed to access. It’s a security measure that probably has its uses somewhere more complicated than here. Anyway, to include images, CSS, or other files you need to set up the files or the directories that they are in so that the app can access them.
In the folder that the app’s files are currently saved in (in the same folder as the file called main.php) create a new folder. Lets call this one images. All lower case like with the app name.
Once that’s done go into Google App Engine, make sure the app is selected in the bottom window, and click the Edit button with the image of paper and pencil. This will open the YAML file.
To enable the app to access the images folder add a new line that says:
– url: /images
static_dir: images
This tells the app that there will always be a directory called images, and since it is now in the YAML file the app will trust content from there and allow it to be used. We’ll stick with that for now, we’ll change it as we go along.
I had some trouble here with the YAML file; by having the declarations arranged with url: /favicon\.ico at the top, followed by the above images declaration, followed by the url: .* declaration that handles main.php.
1.3.2: Adding Images
Put a picture in the images folder you created above, now open the main.php file in your app’s directory using the editor of your choice. (Notepad++ is always a favourite.) Replace the hello world code with the following.
<?php
echo “<img src=’/images/test.png’>”;
?>
Now run your app and press browse and look – it’s a picture.
1.3.3: Adding CSS
Create a new folder again in your app directory, call this one stylesheets. In this create a file called style.css or whatever you like to call your style.
Arrange your YAML file like this:
handlers:
– url: /favicon\.ico
static_files: favicon.ico
upload: favicon\.ico
– url: /stylesheets
static_dir: stylesheets
– url: /images
static_dir: images
– url: .*
script: main.php
Now open your style.css and enter some style stuff; for demonstrative purposes I entered p { color: red; } and then edited my main.php file so that it was creating a full web page. I.e. I added the html, header, and body tags. Then I linked in the CSS into the header and put a <p> tag around a few words. If you did that, you’ll see they’re red. Have a play around and see what happens; it’s just like building a website.
1.3.4: Favicons
Your YAML file should have the favicon.ico already declared, and the .ico file itself should have been made automatically when you created your app. If it’s not declared or there’s some kind of problem, then check that your YAML file has it listed similar to the above.
The favicon is basically what shows as the image in the browser bar at the top, whether it ties in much with the finished app depends on what you build. For now, I wouldn’t worry too much about it; change it if you want. You can change the location of the favicon file by editing the YAML file and changing static_files: and upload: to static/folder_path/favicon.ico
1.4: Adding More Pages
An app really needs more than one page. Unless its an app that displays a picture of a nice beach to cheer you up on a rainy day.
Time to change your YAML file again, after the images directory declaration, and before the main.php declaration add the following code:
– url: /newpage.php
script: newpage.php
Now create a newpage.php file in your app directory, in the same folder as main.php. Add a link into your main.php folder along the lines of <a href=’/newpage.php’> Remember the / in front of the link, that seems to be important.
Awesome, what else do we need for an app basics tutorial?
My second tutorial, a shorter and simpler attempt to explain Google Cloud SQL connection, is somewhere around here.
1.5: Final Notes
1.5.1: Program Overview
I’ve only had a little while to get to grips with the program; there are plenty of good sources out there for tutorials and stackoverflow seems to have a wealth of problems and solutions for them. If you have a problem your best bet is it’ll be an error in your YAML, sounds nice, eh?
1.5.2: Good Luck and Have Fun
Good luck and have fun.
*I assumed, I do apologise if you’re in fact an experienced app builder. I am not.
