首先，我们来打开我们的Ubuntu SDK来创建一个最基本的应用。我们选择菜单“New file or Project”或使用热键“Ctrl + N”。我们选择“Unity Scope”模版。

我们给我们的应用一个名字“ChinaWeather”。我们同事也选择template的类型为“Scope using HTTP+JSON API”

   

接下来，我们也同时选择不同的Kit，这样我们都可以在他们上面编译并部署我们的应用。

我们直接在电脑的Desktop上运行我们的应用。为了确保我们能够在desktop上运行我们的scope并看到界面，我们可以点击“Projects”，并在Desktop中的“Run Configuration”中进行设置。确保选中“chinaweather”。

我们可以在“Unity Scope tool”中输入北京，我们就可以看到北京的天气的情况：

如果你能运行到这里，说明你的安装环境是没有问题的。如果有问题的话，请参阅我的Ubuntu SDK安装文章。这个最基本的应用其实没有什么内容。在下面的章节中我们来向这里添加一些东西以实现我们所需要的一些东西。

如果大家有手机的话，也可以直接在手机上运行看一下运行的效果。

我们可以看到在项目的“src”目录下有两个目录：api及scope。api目录下的代码主要是为了来访问我们的web service来得到一个json或是xml的数据。这个数据可以在我们的Scope中进行利用并得到显示。下面我们来完成我们的工作。

首先我们需要在百度的开发者网站来申请我们的开发者账号。大家可以放问网站来申请账号。我们首先来做一个测试以确保我们的账号是可以工作的。按照文中所提到的，我们可以在浏览器中输入如下的地址：http://api.map.baidu.com/telematics/v3/weather?location=%E5%8C%97%E4%BA%AC&output=json&ak=DdzwVcsGMoYpeg5xQlAFrXQt。我们可以得到如下的内容：

{"error":0,"status":"success","date":"2014-09-29","results":[{"currentCity":"北京","pm25":"42","index":[{"title":"穿衣","zs":"较冷","tipt":"穿衣指数","des":"建议着大衣、呢外套加毛衣、卫衣等服装。体弱者宜着厚外套、厚毛衣。因昼夜温差较大，注意增减衣服。"},{"title":"洗车","zs":"较不宜","tipt":"洗车指数","des":"较不宜洗车，未来一天无雨，风力较大，如果执意擦洗汽车，要做好蒙上污垢的心理准备。"},{"title":"旅游","zs":"适宜","tipt":"旅游指数","des":"天气较好，温度适宜，但风稍微有点大。这样的天气适宜旅游，您可以尽情地享受大自然的无限风光。"},{"title":"感冒","zs":"易发","tipt":"感冒指数","des":"昼夜温差大，风力较强，易发生感冒，请注意适当增减衣服，加强自我防护避免感冒。"},{"title":"运动","zs":"较适宜","tipt":"运动指数","des":"天气较好，但风力较大，推荐您进行室内运动，若在户外运动请注意避风保暖。"},{"title":"紫外线强度","zs":"弱","tipt":"紫外线强度指数","des":"紫外线强度较弱，建议出门前涂擦SPF在12-15之间、PA+的防晒护肤品。"}],"weather_data":[{"date":"周一 09月29日 (实时：23℃)","dayPictureUrl":"http://api.map.baidu.com/images/weather/day/duoyun.png","nightPictureUrl":"http://api.map.baidu.com/images/weather/night/qing.png","weather":"多云转晴","wind":"北风4-5级","temperature":"23 ~ 10℃"},{"date":"周二","dayPictureUrl":"http://api.map.baidu.com/images/weather/day/duoyun.png","nightPictureUrl":"http://api.map.baidu.com/images/weather/night/yin.png","weather":"多云转阴","wind":"微风","temperature":"18 ~ 12℃"},{"date":"周三","dayPictureUrl":"http://api.map.baidu.com/images/weather/day/zhenyu.png","nightPictureUrl":"http://api.map.baidu.com/images/weather/night/zhenyu.png","weather":"阵雨","wind":"微风","temperature":"15 ~ 12℃"},{"date":"周四","dayPictureUrl":"http://api.map.baidu.com/images/weather/day/duoyun.png","nightPictureUrl":"http://api.map.baidu.com/images/weather/night/duoyun.png","weather":"多云","wind":"微风","temperature":"23 ~ 13℃"}]}]}

首先，我们可以看到API是工作的。没有任何问题。显示的架构是json格式的。我们下面来修改架构中的“Client”类来完成对所得到的json格式的内容进行解析。首先，我们删除整个“Client::Current Client::weather(const string& query)”函数，因为这个是我们不需要的。为了能够编译，我们也删除或注释掉在query.cpp文件run函数中的部分内容，这样我们可以集中精力来完成这个Client API的设计。我们只留下最基本的部分以帮助我们来完成如下的设计。

void Query::run(sc::SearchReplyProxy const& reply) {try {// Start by getting information about the queryconst sc::CannedQuery &query(sc::SearchQueryBase::query());// Trim the query string of whitespacestring query_string = alg::trim_copy(query.query_string());Client::Forecast forecast;if (query_string.empty()) {// If there is no search string, get the forecast for Londonforecast = client_.forecast_daily("北京");} else {// otherwise, get the forecast for the search stringforecast = client_.forecast_daily(query_string);}// Register a category for the forecastauto forecast_cat = reply->register_category("forecast","7 day forecast", "", sc::CategoryRenderer(WEATHER_TEMPLATE));// For each of the forecast daysfor (const auto &weather : forecast.weather) {// Create a resultsc::CategorisedResult res(forecast_cat);}} catch (domain_error &e) {// Handle exceptions being thrown by the client APIcerr << e.what() << endl;reply->error(current_exception());}
}

为了能够正确地使用API，我们还必须在项目的设置文件中做一些设置。打开IDE项目中的api文件夹，并打开config.h文件。把它的内容修改为：

#ifndef API_CONFIG_H_
#define API_CONFIG_H_#include <memory>
#include <string>namespace api {struct Config {typedef std::shared_ptr<Config> Ptr;/** The root of all API request URLs*/std::string apiroot { "http://api.map.baidu.com" };/** The custom HTTP user agent string for this library*/std::string user_agent { "chineweather 0.1; (foo)" };
};}#endif /* API_CONFIG_H_ */

为了适应我们的情况，我们把forecast_daily API修改为：

    virtual Forecast forecast_daily(const std::string &query);

这是因为我们的百度API中不需要天数。为了能够使得我们的数据结构和我们上面百度天气API接口返回的数据相匹配，我们对“client.h”做了修改：

class Client {
public:/*** Information about a City*/struct City {unsigned int id;std::string name;std::string country;};/*** Weather information for a day.*/struct Weather {std::string date;std::string dayPictureUrl;std::string nightPictureUrl;std::string weather;std::string wind;std::string temperature;std::string uri;};/*** A list of weather information*/typedef std::deque<Weather> WeatherList;/*** Forecast information about a city*/struct Forecast {City city;std::string pmIndex;WeatherList weather;};Client(Config::Ptr config);virtual ~Client() = default;/*** Get the weather forecast for the specified location and duration*/virtual Forecast forecast_daily(const std::string &query);/*** Cancel any pending queries (this method can be called from a different thread)*/virtual void cancel();virtual Config::Ptr config();protected:void get(const core::net::Uri::Path &path,const core::net::Uri::QueryParameters ¶meters,Json::Value &root);/*** Progress callback that allows the query to cancel pending HTTP requests.*/core::net::http::Request::Progress::Next progress_report(const core::net::http::Request::Progress& progress);/*** Hang onto the configuration information*/Config::Ptr config_;/*** Thread-safe cancelled flag*/std::atomic<bool> cancelled_;
};}

特别值得注意的是，我们修改了weather的数据结构。这个和我们从百度API中返回的数据结构是一样的：

{"date":"周一 09月29日 (实时：23℃)","dayPictureUrl":"http://api.map.baidu.com/images/weather/day/duoyun.png","nightPictureUrl":"http://api.map.baidu.com/images/weather/night/qing.png","weather":"多云转晴","wind":"北风4-5级","temperature":"23 ~ 10℃"}

下面我们来看一看在client.cpp文件中的“get"函数。这是一个标准的函数接口。它是通过http来访问所需要访问输入参数所提供的地址，并得到相应的内容。这个内容可以是json或xml形式的。这个函数，我们不需要做任何的改变。

void Client::get(const net::Uri::Path &path, const net::Uri::QueryParameters &parameters, json::Value &root)

我们来修改forecast_daily函数，如下：

Client::Forecast Client::forecast_daily(const string& query) {json::Value root;// Build a URI and get the contents// The fist parameter forms the path part of the URI.// The second parameter forms the CGI parameters.get( { "telematics", "v3", "weather" },{ { "location", query },{ "output", "json" }, { "ak", "DdzwVcsGMoYpeg5xQlAFrXQt" } }, root);// e.g. http://api.map.baidu.com/telematics/v3/weather?location=%1&output=json&ak=DdzwVcsGMoYpeg5xQlAFrXQtForecast result;//    // Iterate through the weather datastring date = root["date"].asString();cerr << "date: "  << date << endl;int indexofYear = date.find_first_of("-", 0);cerr << "indexofYear: " << indexofYear << endl;string year = date.substr(0, indexofYear);cerr << "year: " << year << endl;int indexofMonth = date.find("-", indexofYear+1);cerr << "indexofMonth: " << indexofMonth << endl;string month = date.substr(indexofYear + 1, indexofMonth-indexofYear-1);cerr << "month: " << month << endl;string day = date.substr(indexofMonth +1, date.length()-indexofMonth);cerr << "day: " << day << endl;std::locale::global(std::locale(""));// current date/time based on current systemtime_t now = time(0);tm *localtm = localtime(&now);localtm->tm_year = stoi( year ) - 1900;localtm->tm_mon = stoi( month );localtm->tm_mday = stoi( day );json::Value results = root["results"];for (json::ArrayIndex index = 0; index < results.size(); ++index) {json::Value item = results.get(index, json::Value());// Extract the first weather itemresult.city.name = item["currentCity"].asString();cerr << "city name: " << result.city.name << endl;result.pmIndex = item["pm25"].asString();cerr << "PM index: " << result.pmIndex  << endl;json::Value weathers = item["weather_data"];for ( json::ArrayIndex i = 0; i < weathers.size(); i ++ ) {json::Value weather = weathers.get(i, json::Value());localtm->tm_mday++;time_t newtime = mktime(localtm);tm *newlocaltm = localtime(&newtime);char buffer[256];strftime(buffer, sizeof(buffer), "%a %Y年%b%d ", newlocaltm);string date = buffer;cerr << "date: " << date << endl;string dayPictureUrl = weather["dayPictureUrl"].asString();cerr << "dayPictureUrl: " << dayPictureUrl << endl;string nightPictureUrl = weather["nightPictureUrl"].asString();cerr << "nightPictureUrl: " << nightPictureUrl << endl;string weather1 = weather["weather"].asString();cerr << "weather: " << weather1 << endl;string temperature = weather["temperature"].asString();cerr << "temperature: " << temperature << endl;string wind = weather["wind"].asString();cerr << "wind: " << wind << endl;cerr << "====================================" << endl;result.weather.emplace_back(Weather { date,dayPictureUrl,nightPictureUrl,weather1,wind,temperature,URI});}}return result;
}

同时我们在client.h中定义如下的宏：

#define URI "http://www.weather.com.cn/html/weather/101010100.shtml"

重新编译项目，如果遇到任何的问题，我们必须停下来解决以使得整个项目能够被正确地编译。在Ubuntu Desktop下运行我们的应用。我们可以在Application Output窗口看见许多的输出。

src/scope/scope.cpp

我们再重新运行程序，我们可以看到如下的画面：

      

在手机上的运行情况如下：

   

最后，我们可以找到data文件夹，并换上我们喜欢的应用图标。这样，我们就基本完成了我们所要完成的应用了。

所有的程序代码可以在如下的网址找到：

bzr branch lp:~liu-xiao-guo/debiantrial/chinaweathernew

该应用的另外一个用Qt进行开发的范例可以在如下的网址找到：

bzr branch lp:~liu-xiao-guo/debiantrial/chinaweatherfinal

4）调试Scope