Tag Archives: Javascript

Cloud Envy

6356-1600x1200Everything is about the cloud today. Seeing as I don’t have a cloud to stand on, I thought I should learn me some.

Purely as a proof-of-concept, I whipped up a web application using only cloud development tools and PaaS deployment. The concept of web-based Cubbyholes for text might seem overly simplistic, but all coding was done in the cloud using Exo IDE (now called Codenvy) which provides Python code to be directly deployed to Google’s AppEngine PaaS.

Google-App-Engine-Finally-Graduates-Ready-for-Business

Users can register using their Google account and privately save text in their ‘cubbyholes’, which can also be embedded (need HTML5 for that). Must admit Google’s API is super, plus I’m allowed something like a few million hits per day before any money needs to be thrown at it. So scalability becomes transparent too. Quite honestly I’m really impressed. Programming everything using JQuery UI also made things very simple. Although I can’t stand javascript, and html, this project was fun.

Follow up: Trying to mix JQuery Mobile framework for iPhone with Google AppEngine. Trickier than I thought because of the python handler…
Building Project-2-Factor to be a customizable and mobile (iPhone web app) version of PasswordCard. Bit of a headache.

Oh by the way, did I mention that I hate Javascript?

Been a long while since I published here. Figured out how to create native-looking iPhone/iPad applications from HTML, CSS and JavaScript. Oh by the way, did I mention that I hate javascript? Messy, and disorganized; a hodge-podge of syntax and structure. I can go on and on, but I digress.


http://matt.might.net/articles/how-to-native-iphone-ipad-apps-in-javascript/

I coupled the concepts found in the above article with the JQuery Mobile javascript library, and the results are pretty impressive. This MOBILE app allows you to search on GEDS on a nice clean interface that works on iOS and Android. The mobile app screen-scrapes the actual site to generate the results.

http://myGEDS.alexandredorion.kodingen.com/index.html

For posterity sake, I’ve included the code below. The PHP routines are your standard URL forwarders, supporting the underlying AJAX function. Only had to trim and translate a few characters.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">>
    <meta name="viewport" content="user-scalable=no, width=device-width" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <link rel="apple-touch-icon" href="mygedsicon.png" />
    <link rel="apple-touch-startup-image" href="splash2.png" />    
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
    <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
    <script>
    $(document).bind("mobileinit", function()
    {
        $.mobile.page.prototype.options.backBtnTheme = "b";
    });
    </script>
    <script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
    <script>
    function getGEDS()
    {
        var SV = $('#SV').val();
        var SF = $('#SF').val();
        var ST = $('#ST').val();
        if (SV == "")
        {
            $("#alert_no_result").hide();
            $("#alert_missing").show();
            $.mobile.changePage( $("#alert"), {transition: "pop"} );
            return;
        }
        var build = "SV="+SV+"%26SF="+SF+"%26ST="+ST+"%26x=1%26y=1";
        while (build.search(" ") != -1) {build = build.replace(' ', '+');}
        while (build.search(",") != -1) {build = build.replace(',', '%2C');}
        var $results = $();
        $.get("./geds.php?"+ build +" #center", function(data)
        {
            $results = $(data);
            var titles = "";
            var heading = $results.find('#center h1').text();
            if (heading == "Search Results")
            {
                $("#alert_missing").hide();
                $('#alert_no_result').show();
                $.mobile.changePage( $("#alert"), {transition: "pop"} );
                return;           
            }
            titles += '<li data-role="list-divider">'+ heading +'</li>';
            if ($results.find('.option1').text() != "")
            {
                var link = $results.find('.rightAlign a:first').attr('href');
                link = link.replace("FE", 'RE');
                getDetails(link);
                return;
            }
            $results.find('#center div ul li a').each(function(index)
            {
                if (index % 3 == 0)
                {
                    var link = $(this).attr('href');
                    var info = $(this).attr('title');
                    info = info.replace('; ', '<br>');
                    titles += "<li><a href='#' onclick=getDetails('"+link+"') >";
                    titles += info + "</a></li>";
                }
            });
            $('#results').html(titles);
            $.mobile.changePage($("#list"), {transition: "fade"});
            $('#results').listview('refresh');
        });
    } 
    function getDetails (link)
    {
        var build = link;
        while (build.search(",") != -1) {build = build.replace(',', '%2C');}
        while (build.search(" ") != -1) {build = build.replace(' ', '%20');}
        $.get("./details.php?d="+ build, function(data)
        {
            var $results = $(data);
            var $links = $results.find('#center .option1 .text div ul');
			$results.find('#center .option1 .text div').remove();
			var info = '<li data-role="list-divider">'+$results.find('#center .option1 h1').text()+'</li>';
			info += '<li><p>'+$results.find('#center .option1 .text').html()+'</p></li>';
			var phone_pattern = /[0-9][0-9][0-9].[0-9][0-9][0-9].[0-9][0-9][0-9][0-9]/;
			var num = info.match(phone_pattern);
			var phoneLink = "<strong>"+ num + "</strong><br><br><a data-theme='b' data-role='button' href='tel:"+num+"'>Call Now</a>";
			info = info.replace(phone_pattern, phoneLink);
            info += '<li data-role="list-divider">Organizational Structure</li>';
			$links.find('li a').each(function()
			{
				info += '<li data-theme="e">'+$(this).text()+'</li>';
			});
            $('#user').html(info);
            $.mobile.changePage( $("#details"), {transition: "fade"} );
            $('#user').listview('refresh');
        });
    }
    </script>
</head>
<body>
<!-- ----------------------------------------------------------------------- -->
<div data-role="page" id="home">
    <div data-role="header" >
        <h1>myGEDS</h1>  
    </div>
    <div data-role="content" >
        <ul data-role="listview" data-inset="true" data-theme="c" data-divider-theme="a">
            <li data-role="list-divider"  >
                Search Criteria:
            </li>
            <li>
                <input type="search" name="SV" id="SV" value="" data-theme="d" />
                <select name="SF" id="SF">
                    <option >Surname, Given name</option>
                    <option >Surname</option>
                    <option >Given name</option>
                    <option >Telephone number</option>
                    <option >Title</option>
                    <option >Organization</option>
                    <option >Role</option>
                </select>
                <select id="ST" name="ST">
                    <option >begins with</option>
                    <option >contains</option>
                    <option >ends with</option>
                    <option >approximate</option>
                    <option >exact</option>
                </select>
            </li>
        </ul>
        <a href="#" onClick=getGEDS() data-role="button" data-theme="b">Search</a> <!--href="#" -->
    </div>
    <div data-role="footer" data-id="myfooter" data-position="fixed" >    	
        <div data-role="navbar">
            <ul>
                <li>
                    <a href="#info" data-icon="info" data-transition="slideup" >Info</a>
                </li>
            </ul>
        </div>
    </div>
</div>
<!-- ----------------------------------------------------------------------- -->
<div data-role="page" id="list" data-add-back-btn="true" data-position="fixed">
    <div data-role="header" >
		<h1>Listing</h1>
    </div>
    <div data-role="content" >
        <ul data-role="listview" data-inset="true" id="results" data-theme="c" data-divider-theme="a"> 
        </ul>
    </div>
</div>
<!-- ----------------------------------------------------------------------- -->
<div data-role="page" id="details" data-add-back-btn="true" data-position="fixed">
    <div data-role="header" >
        <h1>Details</h1>
    </div>
    <div data-role="content" >
        <ul data-role="listview" data-inset="true" id="user" data-theme="c" data-divider-theme="a" >
        </ul>
        <br>
    </div>
</div>
<!-- ----------------------------------------------------------------------- -->
<div data-role="dialog" id="info" >
    <div data-role="header" >
        <h1>Information</h1>
    </div>
    <div data-role="content" id="details" >
        <h3>MyGEDS v0.2</h3>
        <p>Unofficial and unsupported mobile GEDS Web Application developed for iPhone with JQuery Mobile 1.0 Final.<p>
        <p>Questions can be sent to:
        <a data-inline="true" href="mailto:alexandre.dorion@pwgsc.gc.ca?subject=myGEDS Comment">alexandre.dorion@pwgsc.gc.ca</a></p>
        <br>
        <a href="#home" data-direction="reverse" data-role="button" data-transition="slideup" data-theme="b">OK</a>
    </div>
</div>
<!-- ----------------------------------------------------------------------- -->
<div data-role="dialog" id="alert" data-add-back-btn="true" >
    <div data-role="header" >
        <h1>Alert</h1>
    </div>
    <div data-role="content" data-theme="e" >
        <div id="alert_missing" >
            <h3>Missing Search Value</h3>
            <p>Please revise and try again.</p><br>
            <a href="#home" data-direction="reverse" data-role="button" data-transition="pop" data-theme="b">OK</a>
        </div>
        <div id="alert_no_result" >
            <h3>No Search Results</h3>
            <p>Please revise and try again.</p><br>
            <a href="#home" data-direction="reverse" data-role="button" data-transition="pop" data-theme="b">OK</a>
        </div>
    </div>
</div>
<!-- ----------------------------------------------------------------------- -->
</body>
</html>