C# SQL DB ad hoc workflow with EF

Standard

From time to time my customers, or their end users, call me with a problem that requires some direct editing in the database for some application.

Previously I solved those kinds of changes with the help of the good old Sql Server Management Studio, writing some T-SQL directly. But I’m not very comfortable doing so, one reason is T-SQL is not very friendly, another reason is I dont have any history to look back to. I could write management scripts in stored procedures, but that just feels clunky.

A much better solution is to use LinqPad to query and edit the data. For a few bucks I get intellisense C# with Linq and can do whatever I need very quick.

However - I do have C# projects for my data access, and there are a few methods I sometimes like to run alongside the data changes. Plus some data maintenance comes with requirements to add features to the API.

So – my current workflow is to use an EF context inside a testproject in my Visual Studio solution. And inside that I write testclasses and methods with the maintenance code I need:

Namnlös bild

 

I like how I keep the maintenance code easily available for future reference this way. And also the closeness to the C# application code. Ideas for improvement are much easier to implement than if I’m inside SSMS.

Notice the long descriptive method name, and for the class name I just use date as it is only expected to work on this time only.

Very important – thanks for the comment Jonas J – I do need to make sure to not run the test more than once – in my code I solve that with asserts, but that might be easy to forget. So a bettersolution might be to comment out the whole code – or at least the [TestMethod] line - after running the maintenance.

Trying out the new Azure WebSites backup

Standard

With the new backup feature for Azure WebSites its easy to create a backup for a website and its database:

backups

I tried the manual backup and it got a basic Umbraco site backuped including the database – and restored to a new sites in a couple of minutes. (The backup gets stored (as a zip) in a blob container and can easily be deleted or downloaded.)

backups

I stretched my tests and tried to restore a site to a staging site (a separate deployment slot). I could not do that without a small workaround:

1) Restore from the original site to a new site. This will make it possible to restore without settings that might conflict, in my case an additional domain name.
2) Create another backup from that new site.
3) Swap to the staging deployment slot.
4) Restore from 2) to the now active deployment slot.

5) It’s very cheap to temporarily create a site – and deployment slots – just be sure you delete the ones you do not need later :)

I also tried to restore a site to another subscription. I could not do that currently. I got error messages when I tried to restore from the blob storage from across subscriptions. I also tried to download the zip and upload it to a blob storage of the other subscription, but that resulted in the same error messages.

Failed to load resource: the server responded with a status of 404 (Not Found) https://manage.windowsazure.com/Websites/DiscoverRestore

Conclusion: the website backup is very easy to use and a welcome addition to the Azure portal. Hopefully they will fix the problem with restoring across subscriptions aswell.

Azure docs resources:
backup
restore

Select images from photo gallery in a Cordova (Phonegap) App on Android

Standard

A week after release we realised that Android phones sometimes duplicated the photos uploaded to the server from our app. Turned out to be a bit tricky to find the solution. 

The problem only appeared on Androids. And only when adding more than one image. And only with images from the photo gallery (not from the camera).

In Phonegap I used code like this to get the photo from the gallery:

 function getPhotoWithSize(source) { 
 // Retrieve image file location from specified source
 navigator.camera.getPicture(onPhotoURISuccess, onFail, { quality: 50, 
 targetWidth: 960,
 targetHeight: 960,
 destinationType: destinationType.FILE_URI,
 sourceType: source });
 }

Which gave me a result URI like this on Android devices:

file:///storage/emulated/0/Android/data/com.telerik.CameraTests/cache/resize.jpg?1397645214730

And that kind of path works perfect in the app webview for an img src. But the resize.jpg is only a temporary file, and when the user selects the next one the file is overwritten with a new one.

That does not affect the actual webview – so everything looks fine. But when the user uploads the images later, the uploader uploads the latest file repeatedly.

I found out that it’s only for resized images cordova handles the images this way. When getting picture without height and with settings I get the path to the original file:

content://media/external/images/media/152

For that reason I need to use un-resized images here. However – for users with phones with high resolution cameras this will be a problem, especially if they add lots of pictures. So I need to handle some resizing on my own.

But – what is worse is that in the newest version of Android, the content path is changed like this:

content://com.android.providers.media.documents/document/image%3A153

Which neither the web viewer, nor the uploader likes. Apparently this has been fixed in the Cordova 3.5. https://issues.apache.org/jira/browse/CB-5398

But it takes a while for Telerik to add new Cordova releases to AppBuilder - I don’t expect 3.5 to show up until in a few weeks. Too late for our app. So – I needed a workaround.

It took me too many hours to find a good workaround, and I only succeeded after I got a nice debug setup for my Android development:

1) Genymotion to be able to test my application on emulators for any Android version. I use Telerik AppBuilder to build and publish my app, and AppBuilder automatically recognizes running Genymotion emulators, which means I can deploy directly from AppBuilder to the running emulator. Also small updates (js / html) are pushed instantly from AB to the emulator.

genymotion

2) It’s a PITA to try find errors in code without a console. Weinre is a great solution for that. Just by running Weinre server on my PC and hooking up to the .js on that server from my app I get a console on the running app. http://blogs.telerik.com/appbuilder/posts/13-09-24/remote-debugging-icenium-apps-with-weinre

With these tools I soon found that I did not only have to deal with the path problem.

I found out by looking at the HTML that AngularJs caused problems for me here – prefixing the src path with “unsecure:”. Turns out I needed to add “content” to the img src whitelist to make it work. http://stackoverflow.com/questions/15606751/angular-changes-urls-to-unsafe-in-extension-page

With “content” whitelisted a simple string replacer fixed the problem with the new path for me:

if (imageURI.substring(0,21)=="content://com.android") {
  photo_split=imageURI.split("%3A");
  imageURI="content://media/external/images/media/"+photo_split[1];
}

http://stackoverflow.com/questions/20638932/unable-to-load-image-when-selected-from-the-gallery-on-android-4-4-kitkat-usin

 

Faster clicks on buttons and checkboxes with phonegap & angular

Standard

To be able to click on buttons without the default 300ms delay on mobile webapps you need to make the browser respond to touch events instead of click events. There are several options to enable that, fastclick might be the most popular all round solution. For angular there is the ngTouch module

With ngTouch js in place you enable it just by adding the module to your app and it will automatically boost all your ng-click’s.

angular.module('myApp', ['ngTouch']);

So a regular button will respond immediately rather than after that small default delay.

However, it will not change any behaviour for checkboxes – unless you add a ngclick to them aswell. And if a checkbox is wrapped inside a label, or the two of them inside a div, simply put the ngclick on the div:

<li ng-repeat="option in model.options" class="list-group-item" ng-click="option.checked=!option.checked">
<input type="checkbox" ng-model="option.checked">
<label>
{{option.text}}
</label>
</li>


 

Napkin-Syntax DSL + nodejs text template code generation to any language

Standard

I’ve been looking for a way to keep domain types specified in a very simple, “napkin-syntax” like way:

Project

  Name
  Address
  SomeValue :num

And with string descriptions for use in application(s):

Project
  Id :key
  Name
    "Descriptive name"
  Address
    "Full address"
    "I.e Street 123"
  City

The reasons for this are

1) to keep the domain type specifications above everything else, dependent on nothing

2) to be able to easily communicate the specifications with the domain knowers (my clients) in a human understandable – and not cluttered – language

3) to be able to use the code to generate necessary types and code in whatever syntax necessary; C#, Typescript and Javascript for example

4) to make it possible for easy iterations of “top-level changes” – for me or the business persons themselves to see the results of adding and changing details immediately. Without involving the ordinary developer process.

A short (2 mins) demonstration:

Github repository https://github.com/joeriks/napkin-sample

Example of editing DSL code and get the generated code automatically immediately on save. The templates (for cs and html in the example) are written with standard text template syntax.

steps

DSL + a code generation template

The solution I’m trying here is to use a parser generator tool to define a domain specific language (DSL), and then pass the code files to language and application specific templates for the code generation.

steps

First I looked at the MPS tool (Meta Programming System) from Jetbrains. It seems to be the most sophisticated way to do this, and is completely free. However I hoped to be able to keep this in node to be able to combine it with other nice tools I use. So I found and choose to go on with Peg.js http://pegjs.majda.cz/ Parser Generator for javascript, made by David Majda.

With Peg.js you define a set of syntax rules (grammar) for your DSL and then Peg generates a parser for you.

The PEGjs DSL grammar

I was a bit tricky to understand how the grammar syntax works, but I found the online playground(s) available to be very helpful. With that, some examples in the wild and the js console I managed to create a grammar that works fairly well for a first attempt in a few hours. From there to a more useful version (as in the video) it took me a little while longer, but the syntax was not very hard to learn.

Use the generated parser

After I created my grammar, I let PEG.js generate my parser (as a javascript file) which I need to use it on my domain type syntax files.

To be able to run the parser easily I used the quickpeg.js npm package which is a tiny wrapper around peg. With that I created and used this node script to generate a json object for my source:

var qp = require("quickpeg");
qp("dsl.grammar",{cache:false},function(err,parser){
  parser.parseFile("project.txt",function(err,data){    console.log(data);
  });
});

(dsl.grammar is the file with my dsl grammar). When I run it with my project.txt source file (as above) the created object is:

{ text: 'Project',
  type: '',
  children:
   [ { text: 'Id', type: 'key' },
     { text: 'Name', type: '' },
     { text: 'Address', type: '' },
     { text: 'SomeValue', type: 'num' } ] }

Run the created object with a template

With this object the next step is to combine it with a text template to generate the actual code.

I found that the “swig” template engine is a popular one on node and decided to give it a go. I actually never heard of it before, but the syntax is very mustache like and it was easy to create what I needed:

public class {{ text }} { {% for child in children %}
 {% if child.type=="key" || child.type=="num" %}int{% else %}string{% endif %} {{ child.text }} {get;set;}{% endfor %}
}

The complete node script

Here is all the node code I needed to be able to parse a piece of DSL code and combine it with a template to generate a C# class file:

var fs = require("fs");
var qp = require("quickpeg");
var swig = require("swig");
var args = process.argv.splice(2);
var tpl = swig.compileFile(args[0]);
qp("dsl.grammar",{cache:false},function(err,parser){
  parser.parseFile(args[1],function(err,data){
    fs.writeFile(args[2],tpl(data),function(err,data) {
        console.log("Saved to " + args[2]);
    });
  }); 
});

I run it with command line arguments

node runqp cstemplate.swig project.txt project.cs

and the generated code (project.cs) looks like this

public class Project { 
 public int Id {get;set;}
 public string Name {get;set;}
 public string Address {get;set;}
 public int SomeValue {get;set;}
}

I found this useful and will continue to work with my DSL to generate both C#, javascript / typescript and possibly even SQL schema from it.

Trying out ftploy.com – autodeploy to ftp on github push

Standard

I just found a tool I like, it’s called ftploy.com and it deploys to ftp on a push to github (or bitbucket). As I have a few sites still on ftp, and I like the git push -> deploy flow this is a service I wanted to try. The service is made by a british company called Cocoon http://wearecocoon.co.uk/.

It was easy to get started, just by log in with my Github account and add an ftp server. The service has been around for a while and they seem to be serious and alert https://twitter.com/ftploy so I dared to add the credentials for a ftp login for their service on my server.

My idea is to push deploy javascripts from one project and razor from another project to a website of mine.

I had a few questions:

  • Can I deploy to a specified folder?
  • From a specified branch?
  • Will it keep files I have in the folder before?
  • Can it delete files I delete from the repository?

I did some experiments and I was happy to find out that the answer to all my questions was yes. I can deploy from a branch to a specified subfolder in the ftp, and it did not touch the files I had in the folder before, nor the ones I added manually in between deploys. But it took care of deletions I made within the repository.

The UI could need a little bit of love. Some minor issues (far from showstoppers). Also I would like to be able to pay with paypal. The service costs 12£ a month for unlimited projects. One proj is free.

I like their roadmap, both for being explicit with their plans and for many of the features they plan to add.

Typescript is simply about programming language evololution

Standard

Typescript is not only about getting static types in javascript. It is a lang that can, and promise to, evolve, when javascript cannot because it has to support old browsers.

For wide browser support javascript is still in 1999, as vb, early php or early ruby.

Sure I could still use vb and classic asp (many do), but I don’t need to – I use c# because I think it’s better (and more fun).