Google App Engine: How to select entity by key in Datastore Viewer

This is used in the dashboard of a Google App Engine application. More specifically in the Datestore Viewer section on the left.

SELECT * FROM EnityName where __key__ = KEY(‘EntityName’,’value’)

Say if you define a Entity as below:

class StudentEntity(ndb.Model):

     name = ndb.StringProperty()

     age = ndb.IntegerProperty()

To get the entity with keyname is “20083021”,

SELECT * FROM StudentEntity where __key__ = KEY(‘StudentEntity’,’20083021′)

Mac: How to kill a port. A port that a process use.

When developing web application, you are running a localhost with different ports.
Sometimes the localhost goes down and there is a dead process running on a port.
When you want to restart the server, the port is occupied so that you cannot restart.

How to kill a port?

lsof -i :port_number

If the :port_number is 11999, then try lsof -i :11999.
In the result you will see the process with PID.
Screen Shot 2014-09-26 at 11.07.50 AM

Then just kill the process by
sudo kill -9 PID
So the above example would be sudo kill -9 63043

Bootstrap UI datepicker only open once. Not shown up the second time.

I have met this issue about Bootstrap UI datepicker.

I have an input field that is using datepicker of Bootstrap and the datepicker popup shows up when user click on the input field.

HTML snippet:

Screen Shot 2014-09-23 at 1.02.39 PM

JS snippet:
$scope.openDatepicker = function($event) {
console.log('openDatepicker');
$event.preventDefault();
$event.stopPropagation();

$scope.opened = true;
};

This codes is modified from the official Bootstrap UI http://angular-ui.github.io/bootstrap/#/datepicker. But the popup window will only show up the very first time.

When I use the AngularJS extension of Chrome to debug, the value changes to the correct value but the popup window never show up except the first time.

I haven’t figured why this happens but found a solution on the Internet.
It might be some issue with the scope. In order to make it work. Instead of using $scope.opened use $scope.mydp.opened. Make sure $scope.mydp is initialized to be a dict.

Working code:
HTML snippet:
Screen Shot 2014-09-23 at 1.01.42 PM

JS snippet:
$scope.openDatepicker = function($event) {
console.log('openDatepicker');
$event.preventDefault();
$event.stopPropagation();
if (typeof($scope.mydp.opened) === 'undefined'){
$scope.mydp = {};
}
$scope.mydp.opened = true;
};

Two different ways to use jinja2 template in Google App Engine

It is very convenient to use a template framework when developing a web app. For Google App Engine, many people choose to use jinja2.
There are two ways to use.
1 More Basica Way:

In app.yaml file, include library of jinja2.

libraries:
- name: jinja2
version: latest

Note: If you are developing a real application, you should not use latest but a fixed version, e.g “2.6”.

Move your html file into a folder called templates.

In the handler file you want to use jinja2 template, set the jinja2 enviroment.


import os
import webapp2
import jinja2

jinja_environment = jinja2.Environment(autoescape=True,
loader=jinja2.FileSystemLoader(os.path.join(os.path.dirname(__file__), ‘templates’)))

Then in the request handler you could render the template html.


template_values = {'hello':'world'}
template = jinja_environment.get_template('index.html')
self.response.out.write(template.render(template_values))

2 Wrapped way
The first way is a more lower level way to use jinja2.
Here, the second one is more like a simpler way.

from webapp2_extras import jinja2

class BaseHandler(webapp2.RequestHandler):
@webapp2.cached_property
def jinja2(self):
return jinja2.get_jinja2(app=self.app)
def render_template(self, filename, **template_args):
self.response.write(self.jinja2.render_template(filename,**template_args))
class IndexHandler(BaseHandler):
def get(self):
self.render_template(‘index.html’, {‘hello':’world’})

You may notice that in this way you are not setting the template folder. jinja2 has a default value for the template_path which is templates. So you have to have a folder called templates if you don’t specify where all template html are. If you want you may change the path.
You could find the official documentation right here.
https://webapp-improved.appspot.com/api/webapp2_extras/jinja2.html

There are some discussions about which way is better in StackOverFlow.
http://stackoverflow.com/questions/13022030/which-is-the-preferred-method-to-use-jinja2-on-app-engine
I am not sure yet which way is better.

Google App Engine: How to pass variable value from request handler to javascript js file?

Assumption: Using Python environment, but it might still work and be similar if you are using Java or Go to do so.

When developing with Google App Engine, there are times that you have a variable in your request handler, this is going to be used by the js file but how to pass this variable to the js?

Method 1:

The most straightforward way maybe passing the variable to the html first, then the js file can reference the variable by jquery.
Here is how it looks:

I am using jinja2 template, so in a request handler, I am doing as follows,
self.response.write(self.jinja2.render_template(filename, **{‘key':value}))

So in the html file you can reference this variable by saying,

Then in the js file, you can use following jquery to get the value,
var thevalue = $(‘#key’).text();

This is using a two step way.

To make it better, we can avoid using var thevalue = $(‘#key’).text();

Method 2:
In request handler, I am doing the same.
self.response.write(self.jinja2.render_template(filename, **{‘key':value}))
But in html, instead of putting the variable value into a hidden paragraph, just get the value in a inline js script.

var thevalue = ‘{{key}}’

Now in the thejstoload.js, you can reference the variable thevalue without doing anymore work.

 

If you have a better way to do so, please let me know.

Useful library for Twitter Bootstrap (Keep updating)

1 bootstrap-select  

This makes select element pretty.

Image

 

StickyTableHeaders

Makes headers of a table stays.

 

Image

 

toastr

This is a great library to show toast on a web site. Sending out short notification on the page.

Image

 

4 Twitter Typeahead

Screen Shot 2014-06-30 at 2.00.17 PM

 

 

5 Animated Weather Icons

Skycons

Screen Shot 2014-07-21 at 3.48.53 PM

6 Gesture in Web Page

Hammer js lib.

6 To be continued