地図移動応用実戦:Ionic ElasticSearch検索サービス


前回の「GISモバイルアプリケーション実戦-Django Haystack ElasticSearch構築」では、検索結果を検索することで、簡単な検索を構築するサービス・エンドを構築しました.
最後の効果は次の図のようになります.
開始前
Ionicの経験がない場合は、以前の記事を参考にしてみてください.「HTML 5のオリジナルアプリケーション-Ionicフレームワークの概要とIonic Hello World」です.
使用するライブラリは次のとおりです.
  • elasticsearch
  • ionic
  • ngCordova
  • bower.jsonに追加し、
    bower install
    

    ああ
    Ionic ElasticSearch作成ページ
    1.ライブラリの導入index.htmlに追加
    
    
    

    テンプレートtab-search.htmlを き めました
    html    
            
                
            
        
    

    セクションの
    xml 
                    
                        

    {{result.title}}

    : {{result.body}}

    {{result.location_info}}

    たちが しているSearchCtrlはこうです
    $scope.query = "";
    var doSearch = ionic.debounce(function(query) {
        ESService.search(query, 0).then(function(results){
            $scope.results = results;
        });
    }, 500);
    
    $scope.search = function(query) {
        doSearch(query);
    }
    

    をクリックすると、ESServicesが び されます.
    Ionic ElasticSearch Service
    に、ESServiceを します. の はネット から ています.
    angular.module('starter.services', ['ngCordova', 'elasticsearch'])
    
    .factory('ESService',
      ['$q', 'esFactory', '$location', '$localstorage', function($q, elasticsearch, $location, $localstorage){
        var client = elasticsearch({
          host: $location.host() + ":9200"
        });
    
        var search = function(term, offset){
          var deferred = $q.defer(), query, sort;
          if(!term){
            query = {
              "match_all": {}
            };
          } else {
            query = {
              match: { title: term }
            }
          }
    
          var position = $localstorage.get('position');
    
          if(position){
            sort = [{
              "_geo_distance": {
                "location": position,
                "unit": "km"
              }
            }];
          } else {
            sort = [];
          }
    
          client.search({
            "index": 'haystack',
            "body": {
              "query": query,
              "sort": sort
            }
          }).then(function(result) {
            var ii = 0, hits_in, hits_out = [];
            hits_in = (result.hits || {}).hits || [];
            for(;ii < hits_in.length; ii++){
              var data = hits_in[ii]._source;
              var distance = {};
              if(hits_in[ii].sort){
                distance = {"distance": parseFloat(hits_in[ii].sort[0]).toFixed(1)}
              }
              angular.extend(data, distance);
              hits_out.push(data);
            }
            deferred.resolve(hits_out);
          }, deferred.reject);
    
          return deferred.promise;
        };
    
    
        return {
          "search": search
        };
      }]
    );
    

    このサービスは にElasitcSearch Queryを し、 を します.
    うんてん
    ホスト で する は、 じセグメントに するか、サーバに する があります.
    その
    サービス コード:https://github.com/phodal/django-elasticsearchクライアントコード:https://github.com/phodal/ionic-elasticsearch