Let’s be honest… It’s been a weird workshop. We took two weeks to get through the first project that was supposed to take a week. I had to cancel the third week because I was sick. And now we’re trying to get you through the workshop with something useful.
So we’re going to do three things:
- Fix our sound app so it works on multiple platforms.
- Give it a custom icon.
- Do a basic hook-up of the accelerometer.
A convention you need to know
In week 2 we had a lot of people get into trouble by cutting and pasting demo code with brackets in it. If your name is Farnalab, you should not enter:
my name is [Your Name] on the command line. You should enter
my name is Farnalab.
Setting Up Our App: With Cordova Plugins
First thing we’re going to do is throw Ionic out the window. It had some neat bells and whistles, but in the end it complicated figuring out some of the other things we needed to do. So we’re doing straight, old-school Cordova.
Our sound app didn’t work on Android Kit-Kat machines because Cordova had an issue with the HTML5 audio element we were using, so we’ll need to use Cordova’s Media plugin. To get access to the accelerometer, we’ll need the device motion plugin.
Set up Our Workspace
One thing we’ll do the exact same way is start the project by setting up our workspace. Follow the steps from Lesson 1 to start the Cloud 9 workspace and get into the editor, AND THEN STOP. We’ll start diverging this early by just installing Cordova (no ionic).
npm install -g cordova
Then we’ll have Cordova scaffold our project for us.
cordova create dsound com.example.dsound "Sound n' More"
You could literally compile what you’ve got into an app at this point. But it wold be very boring.
Adding Android Support & Plugins
We’re going to navigate into our project directory (
dsound), add Android Platform support, and add the media and device motion plugins:
cordova platform add android
cordova plugin add org.apache.cordova.media
cordova plugin add org.apache.cordova.device-motion
To enable the plugins, you’ll need to go down to your config.xml file down near the bottom of the screen.
You’ll see a line near the top that looks like this…
<widget id="com.example.dsound" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
You want it to look like this…
<widget id="com.example.dsound" version="0.0.8"
xmlns:gap = "http://phonegap.com/ns/1.0"
You’re essentially adding
xmlns:gap = "http://phonegap.com/ns/1.0" to set up the “gap” namespace in the Widget element so it knows how to handle the next two lines you’ll be adding.
See where I snuck in that last line, setting the icon for your app? Well, we need a robot head. We could get fancy about sizes of heads for different DPI depths of screens, but we’ll just go with a universal head.
Right click on the img directory in the main www directory and open a terminal there. To load in the robot head, just use:
You’ve told the app you want to set an icon, where to find the icon, and you’ve put it there.
Close that terminal. It’s no longer needed.
Now it gets complicated… sort of
When you install the Android support, a new main directory is created for your Android App, so you’re going to leave the familiar index.html alone. You’re going to go to the Android app directory and find your
Here we will edit three files and create one. Let’s create the one.
www folder, right click and opt to create a new folder. Call it
sounds. Right click on it and open a terminal there so you can import your sound (another lesson you learned in Week 1). But in case you forget, here’s how we import a Santa laugh.
In the new terminal, type:
wget http://seattlecoderdojo.com/wp-content/collateral/sounds/santa.mp3. Your sound can be found.
Now we’re going open the
index.css file in the
css folder. Got it open? Did you just say yes out loud… to a computer?
Okay, now that it’s open, erase everything in it and replace that with:
That’s our button and paragraph styles.
Let’s do the same to the index.html (not the main one, but the one in
android/assets/www, but replace it with this…
You’ll recognize the button from lesson one, and you’ll see this small grid that’s going to show us accelerometer data. There’s also a script sourcing a file in the
js folder that doesn’t exist, so we’ll go fix that next.
Now we’ll create a file in the
js folder. Best to name it
dsound.js. Let’s look at what goes in it and why.
It’s running late. I’ll try to add descriptions, but otherwise we’ll talk about this in workshop.