Ok, added two new features to the demo app. I implemented a Facebook login and sharing using the OpenFB library.
https://github.com/ccoenraets/OpenFB
I also added a Pull to Refresh feature for one of the pages using the sample from Ionic
Actually the implementation was very easy, but since I still haven’t figured out what I am using for the back end its all show right now. But I am thinking it will be pretty easy to add my data refresher to the that function.
I was pretty surprised that adding the delete friend feature didn’t take all that long this morning. I had to do two things.
The first was to get the app not to use the default friend id number as this was being assigned as the next one in the list depending on the array length. This becomes a problem when you want to delete something based on it. If you have 5 items and delete number three, based on the length alone you will have a duplicate. I manage to drop the id all together. I had to change the ng-repeat track by to the name, so I can assume I will have to add some checking to make sure the end user does not use a duplicate name. But for now this works well.
The second thing I had to do was to use the index of the list to delete from the array. Turned out to be easier that I thought. In the href I was able to simply use {{$index}}, this is scoped to the list so it passes the index that is clicked on. As the code that was already in there sets the parameter I just used that in the array splice call.
Just a note, if you have ran this before you may need to delete you local storage as the previous one still used the ID variable.
So, playing around with Ionic a bit more I decided to pull the initial data from the server and then store that onto the device using local storage, a technique I have used a lot in the past. It worked well except for a problem when using the ng-repeat. It seems that angular adds a hash key to the array to keep track of them The problem was when reading this back from local storage it had a repeating key, which broke the repeater. After much searching on removing these to no avail I finally found out how to stop it. In the hg-repeat you have to add a ‘track by ‘ that angular can use to keep track of the repeater. This allowed it to stop adding the hash key and breaking the app.
You can see the current result here: http://cincyplanet.com/ionic
It loads the first time from the server. Then saves that to local storage. This allows you to add new friends and save them on the device. Currently you cannot delete a friend. This is due to using the Ionic template set us to read the id number that has to correspond to the array position. I plan to change this to allow deleting of the friends, just not sure the best way to do it as of this writing.
It’s been a while since I’ve posted so I thought I would share a bit of what I’ve been up to.
I’ve been working in MyEclipse using the Ionic framework. It does have a bit of a learning curve, but seems to be well worth it. I was able to modify one of the sample projects that uses their tabs, add a slider and a little data modifying to the sample. Certainly something I will focus on more in the future.
Using MyEclipse has some great advantages, it also has a few pretty big pit falls. One being app design. It has a HTML visual designer, but its not the best. So, I have been looking into other designers that I can use to design the app, then bring the design into MyEclipse for further development and compiling. As I don’t want to spend any more on development tools I will only be looking at free options. While this does limit what I will be looking at the price point is pretty good.
Now that I have the start page where I want it, let’s look at the map. Google maps actually have a style wizard you can use to get your map looking just the way you want it.
http://gmaps-samples-v3.googlecode.com/svn/trunk/styledmaps/wizard/index.html
and the documentation on the styling: https://developers.google.com/maps/documentation/javascript/styling
Since I’m using a lot of red I decided to go with a slight red tinted map to give it more of a fun, cartoonish look to it.
Here is the resulting game screen
The code was pretty easy to implement. For this example I will keep it more basic.
I already have my initialize function with my map that I just got from their sample page. So I only needed to add the JSON code from the wizard into a variable:
var styles = [
{
“featureType”: “poi.government”,
“elementType”: “geometry.stroke”,
“stylers”: [
{ “visibility”: “on” },
{ “weight”: 3.3 },
{ “saturation”: -41 },
{ “color”: “#ff7a80” }
]
}
]
I then need to create a new styled map
var styledMap = new google.maps.StyledMapType(styles,
{name: “Styled Map”});
After that I have my basic map code with my map properties from their sample page. It’s after this that I can apply my map style to our now generated map:
map.mapTypes.set(‘map_style’, styledMap);
map.setMapTypeId(‘map_style’);
Notice I used my map variable. I’m sure there probably another way (a better way?) to do this, but this seems to work out pretty well for this game.
The screen above doesn’t show it, but I will be adding a back button as well to get back to the main screen.
I have decided that I am not very happy with how the game is looking using the plain phone gap, so I am trying something new. Looking at Ratchet and Topcoat I have decided to go with Topcoat (http://topcoat.io).
I’ll be honest, Topcoat was not my first choice, it was actually Ratchet. But, after a few minutes of testing it seems either my system or the MyEclipse IDE does not like the Ratchet components. It would freeze up and not display correctly (the IDE, not the components). The Topcoat seems to play nice and has a good look to it. So, after downloading it I added it to the folder in the IDE. It seems a bit easier to use that Ratchet at first try as well. I added the code to the top of the page and after grabbing some code from their demo page was able to quickly change the look of the game screen:
The title bar is the default navigation bar from the demo, the button is the mobile call to action button with my added default graphic and a Start Game text. I also placed the button inside a div tag to get it centered, I think it works out pretty well.
Here is the button code I used:
<div style=”text-align: center;”>
<button class=“topcoat-button–cta” onclick=“javascript:getUsername();”>Start Game<br> <img src=“icon.png” ></img></button>
</div>
You can see the call to my getUsername function I added the other day. As I am pretty happy with the intro screen I will move on to the game screen and try to get that looking a bit better.
I decided to personalize the game a bit by getting the user’s name at the start and then use it for the tips and different aspects. I used the Phonegap Prompt notification. It’s working well now but does not test well in the simulator. As it asks for the name before going on to the game screen that’s going to be a little annoying, I’ll have to comment it out and then hard code a name for the testing.
The code itself is pretty easy to implement though.
function getUsername()
{
navigator.notification.prompt(
‘Please enter your name’, // message
onPrompt, // callback to invoke
‘What\’s your name?’, // title
[‘Ok’,’Exit’], // buttonLabels
” // defaultText
);
function onPrompt(results) {
if (results.buttonIndex == 2){return;}
if (results.input1 == ”){return;}
localStorage.setItem(‘yourName’, results.input1);
//Edit below
// > do not use, will open in inappbrowser: window.open(“game.html”)
window.location = “game.html”; //use this instead
}
You can see I’m setting the input result into local storage so the player will not have to retype it each time they play. Come to think of it could make a small list of players they can select from, or and a new player. Might be a nice feature for down the road.
Edit, ok, so I just noticed if you use the window.open it loads in the inappbrowser window instead of the view, so this was changed above to the window.location call.
Last night I worked on the map game and its coming along nicely. I have the main intro screen and then the game screen. I only have a couple questions. I think tracking down and logging the question and answer parts is the most tedious aspects. I’m thinking for the first test to use the states capitals. Not just the cities, but the actual building locations, the cities lat and lng can be very sporadic locations.
To get some basic gameplay into it I really just need the locations and probably and end screen when they are done that gives them a result. Maybe keep track of how many times they try without having it in the view. As I want to keep it a learning game I don’t want to use a ‘failed’ reasoning. I want to keep it upbeat and positive.
OK, a much requested feature is a simple share button for Facebook, LinkedIn, Twitter, and other social networks. So, while not the best solution, here is a way to incorporate them without having to deal with their, sometimes difficult, APIs.
These are simple URLs you can add to your buttons and use the gotoURL, or even into your Javascript if you want to do more advanced links.
Facebook:
https://www.facebook.com/sharer/sharer.php?u=http://cincyplanet.com
As you can see, the URL on the end is what is going to be shared.
Twitter:
https://twitter.com/intent/tweet?url=http://cincyplanet.com&text=Cincy Planet Development&hashtags=web,development, mobile apps
Twitter offers a bit more with Text and even Hashtags.
Google+
https://plus.google.com/share?url=http://cincyplanet.com
LinkedIn
http://www.linkedin.com/shareArticle?mini=true&url=http://cincyplanet.com&title=CincyPlanet Mobile Development
LinkedIn you have to set mini=true, the rest is yours to add.
Cincyplanet 