Some Screenshots, SearchBar functionality (2/28)

I thought I would include some screenshots here just to see the app's beginning stages! It's pretty basic, but it looks nice for now. Colors can be easily changed as well, which is nice.

On a side note, I'm still working on some searchbar issues. I've made a post on StackOverflow for now, if it can't be solved soon, I'll just check back Monday. Hopefully it can be fixed this weekend, though!

Working with Search Results, JSON (2/27)

Today we had a lot of progress on the JSON side. We've gotten results working now! They don't display yet, since we're still working on a ListView (via JQueryMobile), but they display in console.

The reason that my JSON wasn't working is because of the fact that it wasn't loading the URL properly. We quickly found a way to fix this - it wasn't using spaces, etc. properly when loading the web page, so we used the method getURIComponent, which basically turns a string into a proper URL.

From there, JSON results were working perfectly, we can now access specific parts of the JSON [Array Books] and then individual properties of those [Book.title].

We made some changes so that it passes a function when XHR loads, so that we're not having issues with null JSON (we weren't able to get it perfectly from the URL after some testing). Hopefully, it'll work perfectly, although it'll still require some major testing.

Working on Savable Settings (2/26)

I know it was a snow day, but I felt the need to at least put some time towards LibriFox. I felt as if there was a lot of stuff that we were so close to creating, and so I decided to work on it a bit!

Today, I accomplished something I find important: savable settings.

We already have JSON and search functionality will hopefully come tomorrow, so I did some research into how I could get the settings to save, and return as soon as a user comes back in the app.

At first, I messed around with creating files manually. I couldn't find anything on Mozilla's website about savable settings (maybe I didn't look enough?) so I worked on some very large and complicated methods to do it for me. I was able to get settings to save, but I couldn't add settings to the file. I tried help from various websites. I was ending up in the same place every time, the FileHandle API. Which, I now understand, but I don't really need it [yet].

I then did some more research and found that it was a lot more simpler. In fact, it's just a single line. This line involves a variable called localStorage, which looks like it's pretty much on every app - however I include checks to make sure it exists in my methods to make sure the file is saving.

LocalStorage defines the settings file. You basically just code:

localStorage.setItem(key, value)

And the settings are saved. You can later go back:

localStorage.getValue(key)

And get the value of any key you have previously set.

Here's my two usable methods that I have tested:

  function writeToSettings(key, value){ // Writes a key, value pair to settings
    if(window.localStorage){
      localStorage.setItem(key, value);
    }
  }
  function getValue(key){ // Gets a value based on a key provided
    if(window.localStorage){
      localStorage.getItem(key);
    }
  }

However, I'm currently having an issue as to it not saving when the app closes. I'll look into this more tomorrow.

Searchbar Functionality, Blog Changes, and Themes (2/25)

To start out, I fixed some things with this blog today. New title and new GitHub link (on the right!).

I also added searchbar functionality with JQuery. It took a lot of googling, but I finally found a StackOverflow post with a person with the similar issue. Instead of calling the text() method of my searchbar, it was the var() method that I needed to call. Now, I have a searchbar that calls a method when the user presses enter, and the text that is inputted is stored in a variable for searching! Once Alex figures out how to use JSON requests with permissions, we should have a stable first release.

I also started looking around for themes. I really want to use the Graphite theme in blue. I think it matches the LibriVox's colors best, and I also believe that it looks clean and simplistic. Sadly, I've figured out that this theme was abandoned years ago, so it looks as if we're going to have to do another theme.

So, I decided to make my own theme. I started out with some help from Aki; we created a header and a div that created a menu-like theme, using data-role. I then created buttons to go to a settings menu, created a new settings.html page, and then buttons to go from the settings menu back to home. I tested the button and it works great, and looks nice as well! Alex got the JSON working, so an early version might be possible by tomorrow! It had to do with app permissions, and a few lines fixed it.

I worked on a volume slider as well. As we're working with audiobooks, this function is key for our app. I'm still working on getting its value, but I'm pretty close to that - so volume should be working tomorrow as well, provided we can get permissions working!

GitHub issues and some progress (2/24)

Today we setup a basic GitHub repo such that we can both push into the same repository. However, we're working on setting up a better situation - currently, our app is very small and doesn't have much code. As a result, we have to manually merge lines, line-by-line. Hopefully we'll find a solution tomorrow.

I also made a search bar :)

I know it's not too much, it was just a first test. It also has a function that's called when the user searches. I'm working on getting it's input, and then searching through the database.

JSON is also having some issues with accessing the database and Content Security Policy. We'll work a bit more on that tomorrow as well.

Switching from "Download Failed" to "Download Stopped" (2/20)

Well, I guess I made some progress.

At the beginning of this period, I was having issues with a "download failed" error. I found this post on StackOverflow, which said that it was a result of a manifest error. I then found a place on Mozilla's website where I could check the manifest. Slowly, I removed all the errors from it, and now my packaged app has no errors according to their website here. (I uploaded the .zip every time I wanted to check for errors)

Now, both Alex and I are facing another issue: "Download Stopped". Once again, it's the same process, although now our manifests are perfect, and our .zip files are also perfect, according to their checker. I'm still experimenting with different possibilities of removing this, such as different ways of zipping the file, etc., but nothing is working so far. This time, there is no information on Google as of yet. I'm just getting directed to StackOverflow posts from the "Download Failed" issue. While it could be OS-based, I'm thinking that it has something to do with how our packages are compressed or the file structure of our apps.

I'll continue trying; hopefully I can solve this issue soon!

Working with installation of the app (2/19)

Today I attempted to self-host and self-publish the app. Although the instructions to do so looked very simple, it turned out to be a very difficult process.

Alex and I tried as many options as we could think of. I decided to start by self-hosting the app on the students server, so it's now there in zipped format. We installed a manifest file, as well as an index file that triggers the installation. We've gotten to the point where the user can accept the install. The device even says that the install succeeds. However, once it downloads the file, it quickly fails, and there's no way to check exactly why the errors are occurring. I checked ADB and the console in the WebIDE, and there's no display of the error, no logs at all.

To back up a bit and go over the basics:

• There's an index file, index.html, which executes the script to install the app
• There's an app mini-manifest file, which defines the name and hosted file location of the app, and
• There's a .zip file of the app and all of its source, including a full manifest file

There's two options for the install: install and installPackage. Both would be run in <script> tags in the index.html file. We are going with installPackage, since our app is a self-hosted, self-published app. If it was a simple webapp, it'd be install. However, the install method is installing the app, but when we click on it, it's redirecting us to the students.gctaa.net homepage...

I guess I'll try more options tomorrow. Hopefully, it'll work, but it will definitely take a lot more trial and error!

Self-Hosted Apps & A Very Complex Process (2/18)

Today I did some research on self-hosting apps. Basically, there's two types of apps: a web app and a packaged app.

Web apps are hosted by the developer on his/her own server, such that they are like mobile websites. For a more in-depth explanation, a YouTube video is provided here.

Packaged apps are installable, which is the main difference from a web app. It's similar to android in that you can simply download it on your phone and install it, which is exactly what we need in our situation.

Since we needed a packaged app, I began to read a tutorial on "Publishing Apps Yourself". While we could publish our apps to the marketplace, we're far from that, and since these are more... test applications, it's better to publish them by ourselves and self-host them. However, this is a bit of a complex process.

It starts off easy. First, you just .zip up your project folder. Then, it gets a bit more complex - you need to create a manifest file for your app. This manifest file is a bit smaller than the FirefoxOS manifest, but contains basic information about the app - developer name, website, app name, etc.

So far, so good. However, it's getting a bit complicated when I start looking around on how exactly to host my app. I'm thinking I'll host it on the students server, but I'm not exactly sure how it should be hosted, whether it should be zipped, or follow a specific file structure, etc. Tomorrow I'll look at this more in-depth and see how exactly I can approach this. Hopefully, we'll have a readily-packaged app by the end of the day tomorrow.

Settings Menu! (2/13)

Today I mainly worked on implementing a settings menu. I had done this yesterday, but the code needed some cleaning up.

I now have it so that you can press a gear icon in the top-right of the app. This gear icon will redirect you to the settings menu when you press it, and I've also included a back button to go back to the main game from the settings menu. Both buttons work via the <a> tag in HTML. No Javascript is used (yet), but I plan to change them to Javascript so I can work on their design a bit more.

Here's a code example of the settings button:

    <a href="settings.html"><img id="settingsButton" src="settings.png"></img></a>

And the back button:

    <a href="index.html"><img id="proBackButton" src="settings.png"></img></a>

Together, they work very well. On Monday I'll work on saving data, and hopefully getting some background sounds!

Working with Buttons / Menus (2/12)

Today I worked with some buttons and menus. It's pretty different on FirefoxOS, since you cannot have objects float to the bottom for some reason. Jack, Dylan, Aki, and I all tried to modify this, but had no success. I decided to have the settings menu button at the top of the page instead.

I also worked on an interesting concept: getting text to change size based on how many characters it has. I successfully got that working with the following function in Javascript:

function checkText(newtext){
  console.log("Newtext.length is " + newtext.length);
  if(newtext.length >= 15){
    if(newtext.length >= 30){
      if(newtext.length >= 40){
        $("#textId").animate({
        "font-size":"5pt"
      });
      console.log("setsize to 5");
      $("#textId").text(newtext);
      }
      else{
        $("#textId").animate({
        "font-size":"7pt"
      });
      console.log("setsize to 7");
      $("#textId").text(newtext);
      }
    }
    else{
      $("#textId").animate({
        "font-size":"10pt"
      });
      $("#textId").text(newtext);
      console.log("setsize to 10");
    }
  }
  else{
    $("#textId").text(newtext);
  }
}

Probably not the best way to get it to work, but it does the job. I just check to see how many characters the text has, and then based on how long it is, I change its size. That way, my elements won't shift down, if it's done correctly. It still needs some experimentation, but it's working well so far.

Working with a master branch (2/10)

Today we came into an issue when we added Aki into GitHub, and that was the realization that my code wasn't pushing to the right repo. Instead of our shared repo, it was pushing to a repo with the same name on my account, while Aki's was pushing straight to the shared repo. We fixed this on my machine with the following commands:

git remote add upstream "giturlhere"
git pull upstream master
git push upstream master

My code can now be pushed to the shared repo by the following:

git commit -a
git push upstream master

And if I want it only to go to my repo:

git commit -a
git push

Thursday we're going to setup Aki for this.

In other news, I also setup JQueryMobile. I haven't really used the library yet, however I plan to implement a settings menu using this, and possibly a store. It looks fairly simply to use!

Setting Up GitHub and Pushing Changes (2/9)

Today I mainly worked on setting up GitHub on my Mac. I started out with installing Git (using Homebrew):

brew install git

Then I set it up with my username and email:

git config --global user.name "YOUR NAME"

git config --global user.email "YOUR EMAIL ADDRESS"

After that, I cloned the repository in my project's folder:

git clone "url" - replacing URL with our repo's url

Then I cd'd into the repository's new folder.

cd FXOS_Experimentation

... and committed all my files

git commit -A

... then pushed them all!

git push

It was fairly simple, and now I can commit and push whenever I like. Our repo is now available here.

I also got custom fonts working in my app!

Working with Aki and BuddyUp (2/5)

Today I mainly worked with Aki on setting up BuddyUp. I had originally intended to work on setting up Google Fonts on my app, but after asking the question on IRC, I didn't really get enough help towards that, so I decided to do something else. Edit: I got a lot of help in the last few minutes! I'll attempt a fix tomorrow.

Anyways, the setup of BuddyUp was fairly simple. We first downloaded it from the GitHub repo, then added it into the WebIDE. From there, we pretty much were able to launch it right to the device in a few seconds. We even tested asking a question, which worked as well. However, one issue so far is that the app is EXTREMELY laggy. I think it's because it's trying to load all of the questions every single time a character is typed. That, or it's because we're running the app via USB. It'll take a lot of experimentation.

More Experimentation with Firefox OS (2/4/15)

Sorry for the lack of blog post yesterday! I was working very hard on my Javascript/HTML code, and I wanted to save the best for last!

I've been experimenting in Javascript for the past few days with a pretty basic app, I'm calling it "Project Push The Button" at the moment. Basically, it's a 'game' in which the user of the phone taps the button a ton of times. There's a counter, which displays how many times the button is pressed, as well as messages to encourage the player.

Today, I implemented an EXP and leveling system, as well as animations! I've gotten a lot of help from Aki and Alex, and I almost fully understand Javascript and JQuery now.

I've decided to post my code when it's a bit more finalized. However, I'll post some examples of how I handled EXP, Leveling, and Animations.

All of the variables I write are stored to IDs, I've learned. These IDs show what you're modifying, and you can modify them in all sorts of ways. For the most part, I've been changing their text. I do that with the following code:

$("#idName").text("yourTextHere");

Where idName is the name of your ID.

Animations are just as simple. I've been messing around with both fadeTo and slideToggle, both of which are handled by JQuery.

FadeTo fades a block of text, either to dissolve or to make it more visible. It's done by the following code:

$("#idName").fadeTo(400, 0.01);

Where idName is the name of your ID, 400 is the time of the fade, in MS, and 0.01 is the opacity of the object after the fade. You can fade in with the code below:

$("#idName").fadeTo(400, 1);

Where 1 is setting it's opacity to 100%.

SlideToggles are called with the following code:

$("#idName").slideToggle();

The time slideToggles take by default is 400ms. It can be set by putting a number in the parenthesis. I use slideToggles to handle when a user levels up, as it provides me with a nice little animation.

Experimenting with my first Firefox OS App!

Today I fooled around with Javascript and HTML a bit and got my first app working. It's pretty simplistic. Basically, the user clicks a button a ton of times, and there's a counter. When they reach certain milestones, a text area will display messages. I'm also working on exp, levels, coins, and a reward system. All in one day!

Working with Javascript is really nice for apps, it's much easier to work with than Android, and you can refresh the app in under a second, rather than taking the time to reinstall it a ton of times. I'll post source for my app tomorrow!