Blog

Blog

PHODAL

地图移动应用实战:Ionic ElasticSearch 搜索服务

在上一篇《GIS 移动应用实战 —— Django Haystack ElasticSearch 构建》中,我们构建了我们的服务端,可以通过搜索搜索到结果,这一篇,我们来构建一个简单的搜索。

最后效果如下图所示:

Ionic ElasticSearch
Ionic ElasticSearch

开始之前

如果你没有Ionic的经验,可以参考一下之前的一些文章:《HTML5打造原生应用——Ionic框架简介与Ionic Hello World》

我们用到的库有:

  • elasticsearch
  • ionic
  • ngCordova

将他们添加到bower.json,然后 bower install

Ionic ElasticSearch 创建页面

1.引入库

index.html中添加

<script src="lib/elasticsearch/elasticsearch.angular.min.js"></script>
<script src="lib/ngCordova/dist/ng-cordova.js"></script>

接着开始写我们的搜索模板tab-search.html

<ion-view view-title="搜索" ng-controller="SearchCtrl">
        <ion-content>
            <div id="search-bar">
                <div class="item item-input-inset">
                    <label class="item-input-wrapper" id="search-input">
                        <i class="icon ion-search placeholder-icon"></i>
                        <input type="search" placeholder="Search" ng-model="query" ng-change="search(query)" autocorrect="off">
                    </label>
                </div>
            </div>
        </ion-content>
    </ion-view>

显示部分

<ion-list>
                <ion-item class="item-remove-animate item-icon-right" ng-repeat="result in results">
                    <h2 class="icon-left">{{result.title}}</h2>
                    <p>简介: {{result.body}}</p>
                    <div class="icon-left ion-ios-home location_info">
                        {{result.location_info}}
                    </div>
                    <div class="button icon-left ion-ios-telephone button-calm button-outline">
                        <a ng-href="tel: {{result.phone_number}}">{{result.phone_number}}</a>
                    </div>
                </ion-item>
            </ion-list>

而我们期待的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);
}

当我们点下搜索的时候,调用 ESService.

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
    };
  }]
);

这个Service主要做的是创建ElasitcSearch Query,然后返回解析结果。

运行

如果是要在真机上运行,需要处于同一网段,或者是部署到服务器上。

其他:

服务端代码: https://github.com/phodal/django-elasticsearch

客户端代码: https://github.com/phodal/ionic-elasticsearch

关于我

Github: @phodal     微博:@phodal     知乎:@phodal    

微信公众号(Phodal)

围观我的Github Idea墙, 也许,你会遇到心仪的项目

QQ技术交流群: 321689806

新书《全栈应用开发:精益实践》

这不是一本深入前端、后台、运维、设计、分析等各个领域的书籍。本书以实践的方式,将这一系列的领域及理论知识结合到一起,来帮助读者构建全栈Web 开发的知识体系,并辅以精益及敏捷的思想,来一步步开发Web 应用:从创建一个UI 原型到编写出静态的前端页面;从静态的前端页面到带后台的应用,并部署应用;从Web 后台开发API 到开发移动Web 应用。在这个过程中,我们还将介绍一些相辅相成的步骤:使用构建系统来加速Web 应用的开发;为应用添加数据分析工具来改进产品;使用分析工具来改善应用的性能;通过自动化部署来加快上线流程;从而帮助读者开发出一个真正可用的全栈 Web 应用。同时,我们也将帮助读者把这些步骤应用到现有的系统上,改进现有系统的开发流程。

comment

Feeds

RSS / Atom

最近文章

关于作者

Phodal Huang

Developer, Consultant, Writer, Designer

ThoughtWorks 高级咨询师

工程师 / 咨询师 / 作家 / 设计学徒

开源深度爱好者

出版有《前端架构:从入门到微前端》、《自己动手设计物联网》、《全栈应用开发:精益实践》

联系我: h@phodal.com

微信公众号: 与我沟通

标签