One More For the Road

This is the conclusion week of my Mobile Application Development class and thus my last blog post for the class. It has been a fun class with a lot of solo work. And a lot of journals.

What did I learn?

This semester I learned how teams could work together successfully. I learned about accepting my teammates’ limitations, as well as my own. I learned that I had more to give to this project then I originally thought. I learned how to use JSON, AJAX and local storage too.

How to learn

I learned that it is harder to make myself go out and teach myself something, then it is to learn it in a typical class setting. I previously felt that I learned better if I had a bit of pressure on me, but now I feel that it’s nice to learn with a little less pressure on you. Allowing myself even as much as an extra day to get things done made a huge difference in the end.

My First Professional Job

Due to my disability, I will have to work at home. I see myself telecommuting with a local company for as long as they will have me. I want to get into back-end development. Not really sure why, but it gets me all excited. Tune in next semester when I start my back-end development class.

What worked/Did not work/How we fixed it

Our team meeting structure worked really well for us. One team member even got his boss to let him off on Thursday’s so we could have our meeting. The meeting’s were a lot of fun. I ended up taking on the role as moderator of the meetings. I also kept an eye on assignments and kept them both informed and updated the best I could. This worked really well for us. They were both busy with work, family, etc., and I had the time.

We had some file structure issues. One teammate decided we needed to keep all CSS and JavaScript in our HTML file. This led to our code being hard to follow and edit. Error finding was a bit tough. They both also had problems with their IDE’s. One emailed me the files and I merged them by hand. The other just saved to a new file each time. Again, I hand merged the files and it almost worked. I apparently missed some code and he took our final file and added it back in. Our other teammate set a good example by having his CSS and Javascript work in separate files, but it was too late by then. I will insist on separate CSS files for sure and perhaps even Javascript files for team projects from here on out.

Final Words

I want to once again state that the structure of this class was a perfect way to give us a real world development experience. Throwing us in the deep end and making us learn the new coding technologies on our own gave us a taste of what it will be like in the real world for us. It was scary and it was fun! I look forward to my next coding classes!

Our Final App is Finished!

We ended up working until the very last minute to add some extra features to our app so I actually forgot to do last week’s blog post. I will do one more for this class and then I will use this blog to report on any of my new classes that require a blog, which start April 20th

Tying Up Loose Ends

My small contribution was done last week, so I was really glad for the opportunity to get the code up and running after both teammates added their work several times. I was able to come up with lines of code to help them get passed a place they were stumped on as well. One design team member worked after I submitted our ‘finished’ app to conform with his wishes. He ended up adding new features, which work, so that’s that. It’s done.

Our App

It’s not pretty, but it’s functional. You signup, login, it flips over and shows seven bars with the name of the days of the week on them and two buttons at the bottom for help and to reset the form. You click a day and it opens up to show three input fields for Name, Time, and Location. It’s a really basic program. The point of the course was that we experience what it is like to develop an application in the real world. The weeks of research, learning new types of code and technologies, planning, design and finally the excitement of getting down to work, feeling not good enough, overcoming fears, and the triumph of getting the code to work all mixed together in a massive sprint. It’s a neat experience.

Conclusions

We could of done a lot better on the file structure. The reason things got lost is one teammate’s bad habits. They created a new file for each version, fine, but it wasn’t the teams current version, just theirs. Things were lost as I tried to merge the files together by hand. Another thing was that all the CSS, JS and HTML were mostly in one huge file. This made it hard to spot changes. It also made it hard to follow the code at times, but it was a learning experience. I think we can expect good things from these two. There are a few bad habits they need to learn how to conquer, but they will. I hope to stay in contact. Good kids.

Broken Finger and JSON

I broke my left middle finger last week. I think that may have been one of the reason’s I was in so much pain last week. I believe I broke it getting out of the car. My nine remaining fingers are worn out and frankly, a bit confused. Not sure why it effects my ability to type with my right hand, but it does. It must be all in my head.

JSON

I wanted to make sure that our code met all the basic requirements of the rubric, so I decided to add some JSON code to the file I shared here last week. I created a JSON Object, used JSON.stringify before I set data via local storage or cookies and I used JSON.parse to retrieve the data. Here is a very short example of each:

JavaScript
Example of JSON Object and Stringify
localStorage.setItem(“objectName”, JSON.stringify({param1: data1, param2: data2 }));

Example of JSON.parse

var varName = JSON.parse(localStorage.getItem(“objectName”));
// Note varName is now a new object holding the info inside the objectName object.

I hope this helps. It is written just as I have it here.

Week 11 Meeting

We were all eager to get the meeting started this week and everyone was well prepared. I presented my updated code and then our visually-orientated teammate presented an awesome changed version of my part of the app placed on his page. You enter you name and password, hit the login button and it does a really cool flip animation to our app’s main page! I love it! Our third teammate has had a little trouble, but will be getting to work this week. Some people perform better under pressure.

Conclusions

This was a triumphant week for me in some ways. I didn’t let my finger stop me from doing my school work, I was able to get my code up and running quickly and my work load was a bit lighter this week in one class. It all led to a great week mentally. I am excited to see how things turn out next week! Until then.

LocalStorage, Loops and Arrays

Week 10 turned out to be a better week then last. I paced myself as I worked and forced myself not to do any work for longer than four hours straight. I’d take a rest and start again with my mind refreshed and my body reinvigorated.

Our App

We all were able to make it to this week’s meeting. They both had code to show, as did I, but my code didn’t work. I wanted to setup an login/registration page using XML and AJAX, without using MySQL. I will be learning that next semester, so I was pulling my hair trying to find a website that had what I wanted to know on it. 🙂 In the end I just used local storage.

Local Storage

My code is pretty straightforward

*************************************************************
JavaScript
function register() {
// Get elements
var uname = document.getElementById(“username”).value;
var pword = document.getElementById(“password”).value;

// Check
if (typeof(Storage) !== “undefined”) {
// store user defined text
localStorage.username = uname;
localStorage.password = pword;
document.getElementById(“loginMessage”).innerHTML = “Your new account has been activated.”;
} else {
var cookieEnabled=(navigator.cookieEnabled)? true : false;
if (typeof navigator.cookieEnabled===cookieEnabled){
document.cookie = “username=uname; password=pword; expires=Thu, 31 Dec 2015 12:00:00 UTC”;
document.getElementById(“loginMessage”).innerHTML = “Your new account has been activated.”;
} else {
document.getElementById(“loginMessage”).innerHTML = “Your new account cannot be created until you turn cookies on.”;
return;
}

}
}

function loginTest() {
// Get elements
var uname = document.getElementById(“username”).value;
var pword = document.getElementById(“password”).value;

// Check
if (typeof(Storage) != “undefined”) {
// store user defined text
var password = localStorage.getItem(“password”);
var username = localStorage.getItem(“username”);

if (username === uname && password === pword){
window.open(“website address here”);
} else {
document.getElementById(“loginMessage”).innerHTML = “Your password or username are not correct. Try again.”;
return;
}
} else {
var username = document.cookie.username;
var password = document.cookie.password;

if (username === uname && password === pword){
window.open(“website address here”);
} else {
document.getElementById(“loginMessage”).innerHTML = “Your password or username are not correct. Try again.”;
return;
}

}
document.getElementById(“firstDisplay”).innerHTML = output;

}

*************************************************************
I have two functions, one to register the user and one to test to see if the entered username/password combo are correct when they register. There is no point in using this for a real app. It’s not secure in the least. You’ll see that I first test to see if local storage is available on the users computer. If not I try to store the data as cookie. If this doesn’t work, the user is told to turn on cookies. It’s simple. Perhaps when I know how to use MySQL I’ll revisit this project and fix it, just so I know how it works.

Loops and Arrays

I worked up some sandbox code demonstrating that I knew how to use Loops and Arrays, but there wasn’t a submission box to submit my code this week. Unfortunately, I had already submitted the lesson submission box. So I’m out of luck. I did it to meet one of the requirements of the rubric.

Conclusion

I’m glad the week is over. We still need to add AJAX into the mix on our app. No idea how we’ll do it or what my next assignment will be. Only the future will tell.

My Coding Blues

We began coding our app this week and it’s slow going.

Team Meeting

There were only two of us for our team meeting and it went off without a hitch. We both have been working on our assignments. My teammate got much further then I did. Our other teammate will be making his own presentation video for us to watch. I have to get my code to work!

Through the Crucible of Affliction

I had a rough week. Spent Tuesday having to deal with a teammate in another class who basically freaked out. I posted a link that was bad. I must of accidentally backspaced and deleted a character. She freaked and eventually setup our team’s work on a platform ‘not recommended’ by our instructor. She had most of the work done by the time I got on the site. She had to have been working on it for at least a day. Yet the site was supposedly create 30 minutes before I got there. I guess when my link didn’t work she freaked and began doing the work on her own. She fought with me to change platforms until she finally decided to stop waiting for the other team members support and started pushing her link. Confused, our team was at a standstill. It took me 25 minutes to decide to just give into her. She was stressed. I was causing her more stress and now the team was being hurt as well. The instructor told me “just fix the link” a few seconds after I finished my work on her platform. I promised to convert it to the proper format and he was OK with it. After all, he saw all the comments on our discussion board. Luckily I was able to convert it to the proper platform extremely easily and the others had added their work to hers. We had the best presentation of the class in the end. It was missing only one item, but otherwise complete and very well documented. I wonder if my coding ‘afflictions’ will bring out some amazing code in the end?

Coding Woes

I worked for about six hours to setup a log-in screen/registration system for our app using a very complicated system I read about. As I struggled to get it to work I discovered there were a myriad of files that needed to be download to be used with the code. It became way too time consuming. It would of been highly function and secure, but it had like 18 files that needed to be tied into it. Overkill for our little app.

I started over and I got the basic un-styled log-in up and running quickly. Now I need to create a JavaScript Object to store the info in and store in on the computer using localstorage. I am having problems with the code so I decided to work it out in my Sandbox code for the week. I worked on that Thursday-Saturday and I’ve hit my limit on my back and hand! In my traffic accident I hurt the 1st, 2nd and 3rd fingers on my right hand. It was numb for years until I started exercising the hand on our Playstation 2. The numbness went away for longer and longer periods as I exercised my hand. Now I can use it for my normal school work without a problem. With all this furious coding (and redoing work in the other class) my fingers started going numb again. So I had to throw in the towel this week. This is my last assignment for the week. My back is just par for the course.

Conclusions

This is troubling. If I work in the industry will the finger numbness (and pain) affect my performance. The idea to work for myself is always an option. I am a self starter. Have owned two successful businesses and thanks to my web business class I’m an expert on setting up a business online. I will try my therapy and see how it goes. If it doesn’t help I’ll ask for some physical therapy. Troublesome, but not the end. I will code again!

Finally Delving In!

This was our last week to learn the nine topics we set out to learn eight and a half weeks ago. We got together to give our presentations and go over our wireframes. And our instructor sat in this week.

Week 8 Meeting

We met for about 10 minutes to prepare ourselves before our instructor joined our meeting via Google HOA. I wasn’t able to connect my audio/video via Google Chrome again, so I used Lenovo’s Maxathon Browser. Apparently there is an issue with Lenovo machines and HOA’s, but it is only happening on Chrome. Interesting, since Maxathon is built on the Chromium Engine. My teammates covered AJAX and a mix of DOM and JavaScript Objects. I covered Mobile events. Afterward we took out our wireframes and made plans on who was going to do what. I am setting up the landing page. Finally, we’re programming!

Mobile Events

I won’t go to deep into Mobile Events, I just want to say that there are a lot of great tutorials out there. Go take a look and you will find the most current information. A lot of work to explain here. I used an example from here in my presentation. If you do not have a touch screen available to test your work on, you can use Google Chrome Developer Console’s emulator feature to test it. Run the app, click [ctrl]+[shift]+[j] to bring it up. You’ll see the emulator on the lower menu.

Conclusions

We really pulled it together well this week. I think it’s safe to say that we killed it at our meeting. I am looking forward to getting to work and am grateful for the two coolest teammates I’ve had in college to date!

Good User Interface and More…

We’re over the hump! Six more weeks and if we’re lucky they’ll cut the last one down to three days.

Our Meeting

We had one teammate absent (he’s moving) and my audio and video never finished connecting to our Google+ HOA, so our other teammate was the only presenter. Not to be put off by this, I did my presentation on my own. I covered good user interface. Hopefully it will work for me next time I need it. I have several nephews and a niece who constantly paw at my headphones. I was afraid they were broken! Thankfully, they still work fine.

Good User Interfaces

I covered ten topics that are important for good user interface based on information I found in this article. There are 12 items in their list, but only 10 applied to our team:

1) Highlight important info as it appears. Use CSS Animation or Transitions to highlight newly AJAX’d info to an area of the screen. IE: Draw the eye to it.

2) Have keyboard Shortcuts. It’s important to have as many ways for your user to navigate your app as possible. Use tabbed menus, site menus and intuitive keyboard shortcuts. IE: Make them meaningful.

3) Use color coding. Help people identify the various aspects of a webpage with a central color coding scheme.

4) Personalization. Allow people to personalize their user experience. Avatars, user names, colors, text, etc.

5) Tooltips/user messages. Have small popup windows with helpful messages to guide your users along. Make sure they can be turned off and are closable.

6) Color code/use icon for each tooltip/user message. This helps users a lot. Match an icon/color with each message type and users will be able to see what’s going on by site. This works for things that are used over and over. For unique messages, create a standard popup window so the user knows that they should read it. Always make the window closable!

7) Tabbed navigation. It looks nice and is trending right now. Very convenient for smaller screens.

8) Darkened window behind popup window. Make the main screen a bit darker while another screen pops up. This shows a change of focus.

9) Use Slideshows (or light boxes). Even pages of text can be presented in a slide show. Light boxes for a series of photos. It looks really slick.

10) Make forms short. Your app may be used on really small screens. Make sure to keep them short. Use multiple ones for different things. Have a way at the beginning to choose the type of form you need, or some such thing. Make it easy!

CSS Animation

I made a green circle bounce based on a tutorial I found. I had to come up with the -webkit- part of the code myself. That was fun. Pretty simple. Now I know.

JavaScript Objects

I played around with JavaScript Objects again. This time I wanted to use a function to construct my objects. You basically set something up like this:

JavaScript
function functionName (arg1, arg2, arg3) {
this.attribute1 = arg1;
this.attribute2 = arg2;
this.attribute3 = arg3;
}

Next we add the objects were setting up:

JavaScript
var myObjectA = new functionName(argA, argB, argC);
var myObjectB = new functionName(argA, argB, argC);
var myObjectC = new functionName(argA, argB, argC);
var myObjectD = new functionName(argA, argB, argC);
var myObjectE = new functionName(argA, argB, argC);

What happens here is that each object (myObjectA, etc.) calls the construction function and passes the three arguments enclosed in the parentheses. Each call to the function assigns the appropriate argument to the appropriate attribute. Now the object and its parts can be pulled up with the objectName (myObjectA).attribute name. As in myObjectA.attribute3. Very useful code indeed.

Conclusions

Well, no surprises here. It was a good week. We have one more week of teaching ourselves the nine topics and then we move on to the coding!

JSON with Data and Scrum Agile Development

We continue exploring the nine topics this week. I covered JSON using data and my teammate covered the Scrum Agile Development process.

JSON with Data

Last week one of my classmates worked on JSON with a txt or xml file. I decided to try it with data this week. It’s very simple. You create a variable name and create an array in brackets []. Each element needs to have a name and a value pair inside braces (curly brackets){}. The name needs to be in quotes, next comes a colon and the value goes inside a second pair if quotes. Place a common between each set of pairs inside each set of braces. A comma must go between each set of braces.

JavaScript Example
var varName = [
{“firstName”:”Joe”, “lastName”:”Wright”},
{“firstName”:”Bob”, “lastName”:”Jones”},
{“firstName”:”Biff”, “lastName”:”Smith”}
]

To access the data by position in the array:

JavaScript Example
document.getElementById(“divNameHere”).innerHTML =
varName[0].firstName + ” ” + varName[0].lastName;

Scrum

Scrum is an Agile Development system. You can read more about it here.

Conclusions

I have to still look into development systems. I’m not a big fan of learning a totally new system just for our short 4-week development cycle. Scrum sounds simple enough.

More Dom’s and JSON!

This is our sixth week of school, our fifth lesson. We continue on with more of the same. Two of us covered DOM’s again this week and the other JSON. It was a good week.

DOM Manipulation

We wondered if we could use Class Names in our DOM Manipulations last week, so I decided to look into it. I found a tutorial on using ClassNames. The cool thing is that you must first setup assign it to a variable:

var varName = document.getElementsByClassName(“classNameHere”);

and then you can call each instance of the class name by position — sorta like using an array:

varName[0].innerHTML = dataGoesHere;
varName[4].style.color = “green”;

It’s a great way to deal with several div’s that share a common purpose.

One of my classmates used JQuery to access different types of DOM not natively available in HTML/JavaScript. I would like to point out that there are tons of DOM’s available. Your browser, programs and apps on your computer and online all have DOM’s. You just have to know they exist and how to use them. Google them!

JSON

My other team mate made a presentation about using JSON. JSON is another way to access data from a text file, like AJAX, but instead of by keyword, you do it by position number. I can’t wait to play around with this one.

Conclusions

This was a good week. We have had endless problems with I-Learn — the platform our class is on — but still managed to get the job done. I enjoyed our meeting and look forward to our next. We are all eager to start programming. We plan during Lesson 8 and code Lesson 9-10. There will be a personal app and a team app. Gonna be a huge crunch… just like the real world.

Animation and Local Storage in HTML

This week we continued on with learning the nine topics we need to know about to write our team app.

Sharing Video

First up this week we needed to share the sandbox code we came up with for the new areas our teammates created last week. I did some HTML Animation and JavaScript Object code snippets so I made a video sharing work with my team. I used Corel Screen Capture to make the video, instead of Google+, and I love it! I just got the program. It looks like the entire suite of three program will be a great benefit.

Our Meeting

This week’s meeting didn’t go so well. One of our members didn’t show. After waiting for 30 minutes we started the video. My teamate redid the topic he did last week and added some information on Local Storage, but he had no code. I added a few words and showed my code on local storage. It was a bit frustrating, but we got it done.

Conclusions

This was a very hectic week. I couldn’t even get started with my work until Thursday. In the end, I got it all done. It was a joy to spend all my school time on Friday on the class. Programming is fun.