This post was originally published at Tutorial: Mobile Development From Mobile

This guest tutorial comes to you courtesy of Matt Webster, a.k.a. “HoraceBury.” Matt is a Development Manager working in central London. He has over 15 years of experience building enterprise sites in .NET and Java, but he prefers Corona to build games and physics-based apps. As a Corona Labs Ambassador, Matt has organized Corona meet-ups in London and looks forward to a productive 2015. Matt’s first game in Corona was Tiltopolis, a hybrid twist on the classics Columns and Tetris.


Introduction

Developing with Corona using your desktop or laptop is easy and smooth, but did you know that you can also develop for mobile devices while mobile? Yes, with the addition of CoronaViewer, you can now design, code, and test on devices without a PC or Mac. In this tutorial, I’ll show you how to build a very basic app which posts to Twitter while out and about.

1. Install Dropbox

If you’re unfamiliar with Dropbox, it is a cloud service which monitors the folder it creates on your computer for changes (new files, folders, and changes to anything inside) and syncs them to their cloud servers. On any other computer which you have the Dropbox client installed, you’ll get those changes too, and if necessary, you can browse all of your content on the Dropbox website. Mobile devices such as an iPad will need to be synced manually, but CoronaViewer will auto-sync with Dropbox (and there is a manual force-sync if necessary).

To install Dropbox, first go to www.dropbox.com and sign up (a basic account is free). After signing up, download the Dropbox client to your Mac or PC and sign into it with the account you created. There’s also a Dropbox app for iOS and Android which can make the following process a little easier, in addition to giving you a handy browser for your project files.

dropboxInstalling Dropbox will create a folder on your computer and the application will give you a menu bar icon, as shown here for Mac.

To test this, open the Dropbox folder on your computer and paste a small file into it. You will see the green tick on the Dropbox icon change to a pair of blue syncing arrows. This means that Dropbox is copying your file to the cloud. Now, click the Dropbox icon and then click the Dropbox.com button (the globe in the top right of the popup). Your folder will be shown in the cloud in your browser. Now, right click over the file in your browser to open the context menu and select Delete. Again, your menu bar icon will show that it’s syncing and the file will be deleted from your local folder. You are now fully in sync with the cloud!

2. Download CoronaViewer

CoronaViewer (download) is an app available to Pro/Enterprise subscribers which you build and install on your test device (not the Simulator) and allow it access to your Dropbox account. It then creates a special folder in the root of your Dropbox folder, and this folder is where you’ll place your app code.

The main issue to remember here is that there will be two sets of code running when you test your app in CoronaViewer: your app and CoronaViewer. This is worth emphasizing because, if you need to change the build.settings and/or config.lua files in your app, you will need to change them in CoronaViewer, since iOS or Android OS will take its values from the binary it is running and not from the simulated app within it. Other than that, any changes that you make in your code will show up in the app.

Now that we’ve noted a distinction between CoronaViewer and your app, you should decompress the CoronaViewer-master.zip file that you downloaded. I recommend that you decompress it into your Dropbox folder. You won’t be able to update CoronaViewer itself from within Dropbox, but it’s handy to keep all your code in one place. Alternatively, if you already have a working code folder, decompress it there.

Open the decompressed CoronaViewer-master app in the Corona Simulator. You should see a on-screen message with a Simulator alert that says “The ‘viewer’ plugin is designed to be used on device.” This tells you that you can’t really do anything in the Simulator with CoronaViewer. So, go to the File menu and hit Build to generate an installable build. Note that building for devices are entire tutorials themselves, and if you’re not familiar with the process, here are the primary guides:

3. Run CoronaViewer

Once you’ve installed the CoronaViewer app on your device, run it and it will ask Dropbox for permission to access your Dropbox folders. If you have the Dropbox app installed, it will request access; if you don’t, you’ll see a web view asking for permission. In either case, grant it access and it will create the special folder in your Dropbox folder:

$DROPBOX_FOLDER/Apps/CoronaViewer/

This is where your app files will go. Anything in this directory will get automatically synced with the CoronaViewer app on your device and run just as if you had installed it.

4. Building the App

Now that we have the CoronaViewer running on device, let’s drop a main.lua file in to test it. Download the following main.lua file and save it inside the $DROPBOX_FOLDER/Apps/CoronaViewer/ folder:

With CoronaViewer running on your device, make sure that both your computer and device are connected to the Internet, confirm that your computer’s Dropbox has finished syncing, and you will see a syncing message (left) followed by a successful report (right):

cv-sync

This is a good start but it’s not very exciting, so let’s get it doing something! Download the following “improved” main.lua file and place it into your $DROPBOX_FOLDER/Apps/CoronaViewer/ folder.

In CoronaViewer, you’ll see the syncing screen again. If you don’t see it, tap four fingers on the screen (iOS) or press the “back” button (Android) and select Reset Project. This will tell CoronaViewer to re-sync everything in the /CoronaViewer/ folder. Note that it must check everything in the folder via the Dropbox API, so allow it a little time.

cv-sync-2

Once the sync is complete, you should see a white screen with two buttons: Test and Tweet. If you don’t, make sure that the code runs without problems in your Corona Simulator. If it works in the Simulator but still doesn’t work in CoronaViewer, make sure that both your computer and your device are connected to the Internet without any problems. After that, force a restart of CoronaViewer (kill the app and reload). If you still don’t see anything, you may need to rebuild and reinstall CoronaViewer.

These buttons don’t do anything yet, so let’s add some functionality. Download the following main.lua file and copy it into your $DROPBOX_FOLDER/Apps/CoronaViewer/ folder.

Now, this won’t work immediately — you’ll need to add one other file in the next step. At this point, however, let’s take a look at the Tweet button code. In the main.lua file, check out the postTweet() function. It uses the Social Plugin which is basic enough, but all plugins require a build.settings file entry, and the Social Plugin is no exception. So, download the following build.settings file and copy it into your $DROPBOX_FOLDER/Apps/CoronaViewer/ folder.

The first thing you’ll notice — after CoronaViewer syncs with Dropbox on your device — is that the functionality has not changed. The Tweet button in the app still won’t work, even though we have the correct build.settings file!

Remember the note from earlier: CoronaViewer is the application which is running and encapsulating your app. So, it’s important that the CoronaViewer app is built and deployed with the same build.settings values that your app uses, otherwise it will not have access to the plugins you want to use. The same principle applies to the config.lua file, since both your app and CoronaViewer should share the same configuration settings such as scale, content width/height, etc.

To get everything working, open up the build.settings file within your $DROPBOX_FOLDER/Apps/CoronaViewer/ folder and add the yellow highlighted lines into the build.settings file of your CoronaViewer app. WARNING: Do not just copy your app’s build.settings over top of the CoronaViewer’s build.settings or you will erase important pieces of code needed for CoronaViewer to run.

In order, these include:

  1. Inclusion of the Social Plugin.
  2. Permission for Android apps to use the Internet.

It is important that the CoronaViewer build.settings file be correct because it also needs the plugin.viewer and the first CFBundleURLScheme entries. These allow the CoronaViewer app to behave as a viewer for your Lua code.

To get the Twitter button working, rebuild CoronaViewer as in Step #2, using this new build.settings file, and then deploy it to your device. Run it and you should see your app running. Now, tap the Tweet button and you should see a “Post to Twitter” dialog open.

Great! You can now write code and deploy it to CoronaViewer. Any changes you make in the $DROPBOX_FOLDER/Apps/CoronaViewer/ folder will be instantly reflected on your device and the app will restart. This will even happen when the app has crashed, because CoronaViewer is always running behind the scenes, watching for changes in your Dropbox.

Going Mobile (iOS)

Now that you understand CoronaViewer, how can you take the next step and build from the bus, train or (WiFi enabled) plane? Don’t worry, this is actually very easy to set up!

On your iOS device, download one of the following Dropbox-friendly text editors:

Alternatively, check out one of the many competing iPad/iPhone text editors available in the marketplace, many of which can open files from the Dropbox app and save back to it. Here is a good comparison list for iOS, but don’t forget that the homegrown Dropbox app is getting better all the time, and Dropbox has just acquired CloudOn to soon give their lineup rich cloud document editing.

For this tutorial, we’ll use Textastic. Once it’s installed, run it and click on the little “world” symbol to open the sync access view. Choose Dropbox and, when it asks for your permission, select Allow. Then navigate to /Apps and select /CoronaViewer by putting a tick in the circle next to it.

tt1Now, in the files view, select Local Files and hit Download. Once the directory has finished downloading, you can hit Done and close the sync access view.

Having closed the sync access view, you should see that the file tree has the CoronaViewer folder. Select it to view the files inside. You should see both build.settings and main.lua, and selecting them will show you their code.

tt2If you change the code, you can then upload it directly to where it was by hitting the Share icon and selecting Upload. If your CoronaViewer app is running on your device, you will see it sync files again and restart your app. Of course, if you’re doing all of this on the same device, you’ll need to toggle between CoronaViewer and Textastic.

Congratulations! You have just edited your first app on a mobile device and tested it live on a mobile device without using a desktop or laptop computer. The entire application can actually be edited in the same way, including all graphic and audio files (the exception being if you need to update the build.settings or config.lua files which, as explained above, will require that the CoronaViewer app be rebuilt from a computer and reinstalled on the proper device).

Conclusion

Hopefully, this tutorial has shown you the power of CoronaViewer and how it can work in conjunction with a Dropbox-friendly code editor to facilitate mobile development from a mobile device.

View this article: 

This post was originally published at Tutorial: Mobile Development From Mobile