NextDB.net

Cool Customer App

2010-08-14 07:00:00.0

Paessler AG's CloudConnect CDN performance measurement app stores its data in NextDB.net.

Adding Style

2010-05-27 07:00:00.0

I have added a second tutorial showing how reformat the default NextDB web-table into a styled photo gallery.

Simple Photo Gallery Tutorial

2010-05-22 07:00:00.0

Here is a 5 minute tutorial teaching how to create a photo gallery and add it to your website or blog.

NextDB REST with jQuery getJSON and the hashchange plugin

2010-05-18 19:34:29.985

The NextDB REST interface now supports JSON and JSONp (callback) and even JSONpx (callbacks and xhtml).

We have put together a little proof of concept which uses the jQuery.getJSON function along with the jQuery hash change plugin, which allows you to control the browser history from inside you single page JavaScript app. You can see the page here, (only 50 lines of code in the page, use view source):

http://brenthamby.com/ajax-table.html

What this demo illustrates is the ability to embed a page-able data table inside your app without needing to navigate away from your app. jQuery intercepts the 'a' tag clicks and loads the new page as JSON and we record each page change in an in memory history index.

JSON++

2010-05-12 07:00:00.0

We are now supporting a variety of formats from RESTful URLs. You can checkout the doc's here. JSONPX is particularly interesting, due to its potential usefulness in combination with JQuery AJAX. JSONPX returns HTML inside a javascript callback. This lets your AJAX app access NextDB's HTML tables asynchronously.

2010-05-09 07:00:00.0

NextDB's JavaScript API has long had the capability to create login protected data. Now, our REST api is following suite. This is hot off the presses, and I haven't even had time to update the wiki with doc's but I wanted to give a quick preview of how it works.

To start with, if you want to log a user in, you have to have the ability to allow a user to create an account. With our REST stuff, you just add "/form" to the URL for the table you created to hold the user accounts. You can also pick a style for the form. For instance: http://nextdb.net/nextdb/rest/geoff/galleries/USERS/ form/style/form-a Go ahead and click the link, and you'll be presented with an autogenerated, "reCaptcha" protected account creation form (no, it doesn't automatically support field validation, and yes, we need that, and yes, it's coming). Here is a screenshot of the form.

Fill out the form, and you will see that it takes you to the data for the user you just created, as shown below. Notice the link that is automatically present that takes you to your private photo gallery. The link is labeled "show" (see screenshot below). This link is automatically generated because this database has defined a one-to-many relationship between USERS and PHOTOS. Here is a screenshot.

Clicking on your private "show" link takes you to the private area of the USER_PHOTOS table that is related to your user account. Here is a screenshot, it looks just like a regular table, except it shows just your own private data.

The main thing to keep in mind is that all of this is enabled with no coding at all which makes it a very easy solution to integrate for adding login protected data to a site.

Better CAPTCHA with reCaptcha

2010-05-04 07:00:00.0

After several nights of hacking, I've integrated recaptcha into NextDB. Recaptcha is a really nice, industry standard captcha, that you've probably seen on sites like the New York Times. This enhancement will become available, most likely this weekend. Couple customers have been asking for it. Basically, all you do is enable captcha through the admin UI, and instead of our old cruddy looking captcha, you get the industry standard reCaptcha. You can access captcha protected forms for inserting data into your table, simply by pointing to your table's REST URL, and adding "/form" to the end.

Autogenerated RESTful form with reCaptcha security

Autogenerated RESTful form with reCaptcha security

Props to Paul Sandoz from Jersey for helping me square away some of the integration issues. Oh, and I also upgraded our XSLT processor to Saxon. I'll do some more thorough posts and wiki entries on how NextDB uses XSLT to allow you to format your REST tables any way/design/style that you like, but for now, suffice it to say that the XSLT processor that Java 1.6 defaults to is pretty weak. Saxon is much better, and it specifically it allows for the xpath-default-namespace attribute in xslt 2.0, which let's you write cleaner, less confusing XSLT.

NextDB demo app in Vodofone App Star Competition

2010-05-01 07:00:00.0

We put an simple NextDB demo app into the Vodofone App Star Competition.

A lot of mobile carriers are really betting on JavaScript 'widgets' as the mobile platform of the future. JavaScript widgets as a technology is very attractive to carriers because the widgets are very easily portable between different hardware and different operating systems.

Vodafone is working in conjunction with Verizon, Softbank, China Mobile under the name JIL ( Joint Innovation Labs) , to build a common cross-carrier, cross-handset, cross operating system app repository. As a developer is really attractive since you get huge reach for your single app. The JIL initiative has the reach of 2 billion handsets, which is really attractive in terms of monetization. You can either sell your app with a 70/30 cut, or make it free and monetize through advertising.

The NextDB.net JavaScript API offers a powerful and simple platform to data enable your widgets. In order to illustrate the features of NextDB to the widget community we built a simple NotePad app to show off the full CRUD features of NextDB:

Here is the app as a simple web page:

http://nextdb.net/widgets/notes/

If you have Opera Web Browser, you can run the app as a widget in the emulator by clicking this link:

http://nextdb.net/widgets/OperaBuild.wgt

This app works great on the phone.

You can get all of the code used for this app simply by doing a view source-- we intentionally left it unobfuscated. All of the forms in the code use the NextDB Form Builder API, is also uses jQuery 1.4 for the UI animations. It only took about a day of coding to build this app. Another cool 100% client side app using NextDB.net.

NextDB and GPS

2010-05-01 07:00:00.0

We have been working on a mobile app for gathering GPS trails from both iPhones and Android phones. It has been really easy writing the client software using the NextDB Android Java API.

Here is a screenshot (stored in geoff's image gallery).

rollin' in oakland

The general idea is to create a client side mobile application, which uses the GPS API's on the phone to gather GPS trails and insert them into NextDB.net-- in real-time. We have an Android version finished. In order to see your GPS trails, there is a web app that uses the NextDB JavaScript API to retrieve the trips. Here is a permalink to a bike ride I took this morning:

http://brenthamby.com/m/?TOKEN=8792472947234729347982374

This is revolutionary when compared to traditional GPS systems which require you to get the GPS off the device manually, with no web based storage system. Also the fact that this data goes into a web based system in real-time is so much more useful and interesting.

The one other aspect to this project that has been interesting is that with HTML5, we also have a fully web based client that allows you to track your phone using the GEO-LOCATION API. This web based tracking app works great on iPhones, this is a ride recorded using just the iPhone Safari browser to gather and store points into NextDB.net:

http://brenthamby.com/m/?TOKEN=817187698325142300

Really accurate! Kind of scary, but really interesting in terms of new possibilities for innovation.

If you have a smart phone, and you want to try this out, shoot us an email with your mobile phone number and we can give you an account.

Image Galleries

2010-04-27 07:00:00.0

NextDB REST+XSLT is nice for making product catalogs, photo galleries, etc. Here is a photo gallery I built in about 20 minutes. I just grabbed the CSS from here, and the XSLT from here. Here is the finished product: image gallery It can be easily embedded as an iframe.
Here is the complete source code for the XSLT that creates the image gallery:

      <?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet 
xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0"
xmlns:ht="http://www.w3.org/1999/xhtml"
xmlns:xs="http://www.w3.org/2001/XMLSchema">
    <xsl:output method="xml"/>
    <xsl:template match="ht:html">
        <html>
            <head>
                <style type="text/css">

                    /*Credits: Dynamic Drive CSS Library */
                    /*URL: http://www.dynamicdrive.com/style/ */

                    .thumbnail{
                        position: relative;
                        z-index: 0;
                        padding: 5px;
                    }

                    .thumbnail:hover{
                        background-color: transparent;
                        z-index: 50;
                    }

                    .thumbnail span{ /*CSS for enlarged image*/
                        position: absolute;
                        background-color: lightyellow;
                        padding: 5px;
                        left: -1000px;
                        border: 1px dashed gray;
                        visibility: hidden;
                        color: black;
                        text-decoration: none;
                    }

                    .thumbnail span img{ /*CSS for enlarged image*/
                        border-width: 0;
                        padding: 2px;
                    }

                    .thumbnail:hover span{ /*CSS for enlarged image
on hover*/
                        visibility: visible;
                        top: 0;
                        left: 60px; /*position where enlarged image
should offset horizontally */

                    }

                </style>


            </head>
            <body>
                <xsl:variable name="imgPerRow" select="3"/>
                <table border="1">
                    <xsl:for-each
select="ht:body/ht:table/ht:tbody/ht:tr[position() mod $imgPerRow =
1]">
                            <tr>
                                <xsl:apply-templates
select=".|following-sibling::ht:tr[position() &lt;
$imgPerRow]"/>
                            </tr>
                    </xsl:for-each>
                </table>
                <br/>
                 <a
href="http://nextdb.net/nextdb/rest/geoff/gallery/IMG/edit/true/style/newspaper-a">edit
me</a>
            </body>
        </html>

    </xsl:template>
    <xsl:template match="ht:tr">
        <td>            
            <a href="#thumb" class="thumbnail">
                <img width="100px"  style="border: 1px dashed
gray;" >
                    <xsl:attribute name="src">
                        <xsl:value-of
select="concat(ht:td[@column='img']/ht:a/@href,'/width/100')" />
                    </xsl:attribute>
                </img>


                <span><img>
                        <xsl:attribute name="src">
                            <xsl:value-of
select="concat(ht:td[@column='img']/ht:a/@href,'/width/300')" />
                        </xsl:attribute>
            </img><br /><xsl:value-of
select="ht:td[@column='title']" /></span></a>
        </td>
    </xsl:template>



</xsl:stylesheet>