A tutorial series about Moai basics... Today in our Moai Basics Tutorial, we’re going to get started with the Moai Cloud by deploying a application to it and then we will create a client to pull information from that application.

Talk about the tutorial in our forums!

Creating your Hello World Moai Web Application

After you log into your account, you’ll see the main Moai Cloud dashboard. Here is where you can check the deployed status of your application. If this is your first time logging into the dashboard, you won’t have any applications. Thankfully, it is very easy to create a new one. Click on the “Create Application” button. You’ll then be moved to the Create Application screen with a few inputs.

First up is your application name. Next is the version number of your application. And finally, the route that will be used to access your application and the files access within. After you’ve filled those out, select “Use Moai ‘Hello World’ Template” and then click “Install Service.” Now the Hello World template is part of your Moai Cloud Applications, but it hasn’t been deployed yet, so it can’t be used.

To deploy it to the Moai Cloud, click on the box where the application is listed. After clicking on that, you will be sent to the app info screen.

You can probably figure out what to do here… go ahead and click on the “Deploy Application” button.

Now that your application has been deployed, you will notice that above the deployment status there is a new link. Click on that link and... You now have a web service that has been created and posted to its own personal URL in less than a minute. And if you click on the application's box, you will be taken to the application information screen. From here, you check the status of your application and you can also edit the application's resources. Yes, with the Moai Cloud service a user can actually edit code after it has been deployed. This is a convenient option for when you are still in the development stage and wanting to test a change rather quickly, but it is highly suggested to never attempt to edit any of your application once they are in production. You don't want to accidentally ruin your application while you have hundreds of people accessing it, do you? (Note: As of this writing, we are in the process of creating an easy way to duplicate your applications in order to have a staging build as well as a production build.) For now, let’s return back to the dashboard. Now that we have our Hello Tutorial Moai Cloud Application up and deployed, it’s time to actually do something with it.

Creating your Hello World Client

So now that you have the URL of your Moai Cloud Application, it’s time to create a client to talk to the application and take advantage of it. Below is a super simple client that will pull information from our cloud application.


MOAISim.openWindow ( "Cloud", 64, 64 )

function findString ( task )
	print ( task:getString() )
task = MOAIHttpTask.new ()
task:setCallback ( findString )
task:httpGet ( MOAI_CLOUD_URL ) 

First off, a note about HTTPTask. HTTPTask is Moai's object for performing asynchronous http actions, and it requires a loop in order to function properly. The way the asynchronous fetcher works is that it starts fetching the data that is requested, then the program continues to work, and finally when the fetching is completed, it interrupts the program with the results of the fetch. That being said, the opening of the game window will simulate a game loop. Next, we will create our function for printing of the string. After making that, we create a MOAIHttpTask and then set the function to callback to our findString function after it finishes "httpGet" from the cloud URL. Running this program so far we will get: And congratulations! You have successfully created a program that pulls information from your Moai Cloud Application… but having a program that can only display text from the cloud onto the debug screen isn’t really much of a program. So let’s edit this program so that it will instead take the string from the cloud and print it into a textbox. To do that, we’ll need to first set up our textbox and font (and also increase the size of our window). You should remember all of this from our Textbox tutoriala few days ago.

 MOAISim.openWindow ( "Textboxes", 320, 480 )

viewport = MOAIViewport.new ()
viewport:setScale ( 320, 480 )
viewport:setSize ( 320, 480 )

layer = MOAILayer2D.new ()
layer:setViewport ( viewport )
MOAISim.pushRenderPass ( layer )

charcodes = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789 .,:;!?()&/-'

font = MOAIFont.new ()
font:loadFromTTF ( 'Bastarda-K.ttf', charcodes, 16, 163 )

textbox = MOAITextBox.new ()
textbox:setFont ( font )
textbox:setTextSize ( font:getScale ())
textbox:setRect ( -100, 100, 100, -100 )
textbox:setYFlip ( true ) 

Now that we’ve got our viewport, layer, font, and textbox ready, it’s time to insert the string from the website and insert the textbox onto the layer. This is accomplished very easily by going into our findString function and adding the following lines:

 hello = task:getString ()
textbox:setString ( hello )
layer:insertProp ( textbox ) 

Now that we have that, we can run it. And we have successfully pulled information from our Moai Cloud application and placed it into our client. We can also go back into the Moai Cloud Dashboard and edit our string so we get something different. Save the file and relaunch your program. Ta-da! Keep your eyes peeled to our site over the next few weeks for a few more tutorials on the Moai Cloud, including a tutorial on uploading data to the Moai Cloud.