<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- tweetsearch.qdoc -->
<title>Qt Quick Demo - Tweet Search | Qt Quick 5.9</title>
<link rel="stylesheet" type="text/css" href="style/offline-simple.css" />
<script type="text/javascript">
document.getElementsByTagName("link").item(0).setAttribute("href", "style/offline.css");
// loading style sheet breaks anchors that were jumped to before
// so force jumping to anchor again
setTimeout(function() {
var anchor = location.hash;
// need to jump to different anchor first (e.g. none)
location.hash = "#";
setTimeout(function() {
location.hash = anchor;
}, 0);
}, 0);
</script>
</head>
<body>
<div class="header" id="qtdocheader">
<div class="main">
<div class="main-rounded">
<div class="navigationbar">
<table><tr>
<td >Qt 5.9</td><td ><a href="qtquick-index.html">Qt Quick</a></td><td >Qt Quick Demo - Tweet Search</td></tr></table><table class="buildversion"><tr>
<td id="buildversion" width="100%" align="right">Qt 5.9.4 Reference Documentation</td>
</tr></table>
</div>
</div>
<div class="content">
<div class="line">
<div class="content mainContent">
<div class="sidebar">
<div class="toc">
<h3><a name="toc">Contents</a></h3>
<ul>
<li class="level1"><a href="#running-the-example">Running the Example</a></li>
<li class="level1"><a href="#request-authentication">Request Authentication</a></li>
<li class="level1"><a href="#json-parsing">JSON Parsing</a></li>
</ul>
</div>
<div class="sidebar-content" id="sidebar-content"></div></div>
<h1 class="title">Qt Quick Demo - Tweet Search</h1>
<span class="subtitle"></span>
<!-- $$$demos/tweetsearch-description -->
<div class="descr"> <a name="details"></a>
<p class="centerAlign"><img src="images/qtquick-demo-tweetsearch-med-1.png" alt="" /></p><p class="centerAlign"><img src="images/qtquick-demo-tweetsearch-med-2.png" alt="" /></p><p><i>Tweet Search</i> is a QML application that searches items posted to Twitter service using a number of query parameters. Search can be done for tweets from a specified user, a hashtag, or a search phrase.</p>
<p>The search result is a list of items showing the contents of the tweet as well as the name and image of the user who posted it. Hashtags, names and links in the content are clickable. Clicking on the image will flip the item to reveal more information.</p>
<a name="running-the-example"></a>
<h2 id="running-the-example">Running the Example</h2>
<p>To run the example from Qt Creator, open the <b>Welcome</b> mode and select the example from <b>Examples</b>. For more information, visit Building and Running an Example.</p>
<p>Tweet Search uses Twitter API v1.1 for running seaches.</p>
<a name="request-authentication"></a>
<h2 id="request-authentication">Request Authentication</h2>
<p>Each request must be authenticated on behalf of the application. For demonstration purposes, the application uses a hard-coded token for identifying itself to the Twitter service. However, this token is subject to rate limits for the number of requests as well as possible expiration.</p>
<p>If you are having authentication or rate limit problems running the demo, obtain a set of application-specific tokens (consumer key and consumer secret) by registering a new application on <a href="https://dev.twitter.com/apps">https://dev.twitter.com/apps</a>.</p>
<p>Type in the two token values in <i>TweetsModel.qml</i>:</p>
<pre class="qml">
property <span class="type">string</span> <span class="name">consumerKey</span> : <span class="string">""</span>
property <span class="type">string</span> <span class="name">consumerSecret</span> : <span class="string">""</span>
</pre>
<p>Rebuild and run the demo.</p>
<a name="json-parsing"></a>
<h2 id="json-parsing">JSON Parsing</h2>
<p>Search results are returned in JSON (JavaScript Object Notation) format. <code>TweetsModel</code> uses an XMLHTTPRequest object to send an HTTP GET request, and calls JSON.parse() on the returned text string to convert it to a JavaScript object. Each object representing a tweet is then added to a ListModel:</p>
<pre class="qml">
var <span class="name">req</span> = new <span class="name">XMLHttpRequest</span>;
<span class="name">req</span>.<span class="name">open</span>(<span class="string">"GET"</span>, <span class="string">"https://api.twitter.com/1.1/search/tweets.json?from="</span> <span class="operator">+</span> <span class="name">from</span> <span class="operator">+</span>
<span class="string">"&count=10&q="</span> <span class="operator">+</span> <span class="name">encodePhrase</span>(<span class="name">phrase</span>));
<span class="name">req</span>.<span class="name">setRequestHeader</span>(<span class="string">"Authorization"</span>, <span class="string">"Bearer "</span> <span class="operator">+</span> <span class="name">bearerToken</span>);
<span class="name">req</span>.<span class="name">onreadystatechange</span> <span class="operator">=</span> <span class="keyword">function</span>() {
<span class="name">status</span> <span class="operator">=</span> <span class="name">req</span>.<span class="name">readyState</span>;
<span class="keyword">if</span> (<span class="name">status</span> <span class="operator">===</span> <span class="name">XMLHttpRequest</span>.<span class="name">DONE</span>) {
var <span class="name">objectArray</span> = <span class="name">JSON</span>.<span class="name">parse</span>(<span class="name">req</span>.<span class="name">responseText</span>);
<span class="keyword">if</span> (<span class="name">objectArray</span>.<span class="name">errors</span> <span class="operator">!==</span> <span class="name">undefined</span>)
<span class="name">console</span>.<span class="name">log</span>(<span class="string">"Error fetching tweets: "</span> <span class="operator">+</span> <span class="name">objectArray</span>.<span class="name">errors</span>[<span class="number">0</span>].<span class="name">message</span>)
<span class="keyword">else</span> {
<span class="keyword">for</span> (<span class="keyword">var</span> <span class="name">key</span> in <span class="name">objectArray</span>.<span class="name">statuses</span>) {
var <span class="name">jsonObject</span> = <span class="name">objectArray</span>.<span class="name">statuses</span>[<span class="name">key</span>];
<span class="name">tweets</span>.<span class="name">append</span>(<span class="name">jsonObject</span>);
}
}
<span class="keyword">if</span> (<span class="name">wasLoading</span> <span class="operator">==</span> <span class="number">true</span>)
<span class="name">wrapper</span>.<span class="name">isLoaded</span>()
}
<span class="name">wasLoading</span> <span class="operator">=</span> (<span class="name">status</span> <span class="operator">===</span> <span class="name">XMLHttpRequest</span>.<span class="name">LOADING</span>);
}
<span class="name">req</span>.<span class="name">send</span>();
</pre>
<p>Files:</p>
<ul>
<li><a href="qtquick-demos-tweetsearch-tweetsearch-qml.html">demos/tweetsearch/tweetsearch.qml</a></li>
<li><a href="qtquick-demos-tweetsearch-content-flipbar-qml.html">demos/tweetsearch/content/FlipBar.qml</a></li>
<li><a href="qtquick-demos-tweetsearch-content-lineinput-qml.html">demos/tweetsearch/content/LineInput.qml</a></li>
<li><a href="qtquick-demos-tweetsearch-content-listfooter-qml.html">demos/tweetsearch/content/ListFooter.qml</a></li>
<li><a href="qtquick-demos-tweetsearch-content-listheader-qml.html">demos/tweetsearch/content/ListHeader.qml</a></li>
<li><a href="qtquick-demos-tweetsearch-content-searchdelegate-qml.html">demos/tweetsearch/content/SearchDelegate.qml</a></li>
<li><a href="qtquick-demos-tweetsearch-content-tweetdelegate-qml.html">demos/tweetsearch/content/TweetDelegate.qml</a></li>
<li><a href="qtquick-demos-tweetsearch-content-tweetsmodel-qml.html">demos/tweetsearch/content/TweetsModel.qml</a></li>
<li><a href="qtquick-demos-tweetsearch-content-tweetsearch-js.html">demos/tweetsearch/content/tweetsearch.js</a></li>
<li><a href="qtquick-demos-tweetsearch-main-cpp.html">demos/tweetsearch/main.cpp</a></li>
<li><a href="qtquick-demos-tweetsearch-tweetsearch-pro.html">demos/tweetsearch/tweetsearch.pro</a></li>
<li><a href="qtquick-demos-tweetsearch-tweetsearch-qmlproject.html">demos/tweetsearch/tweetsearch.qmlproject</a></li>
<li><a href="qtquick-demos-tweetsearch-tweetsearch-qrc.html">demos/tweetsearch/tweetsearch.qrc</a></li>
</ul>
</div>
<p><b>See also </b>QML Applications.</p>
<!-- @@@demos/tweetsearch -->
</div>
</div>
</div>
</div>
</div>
<div class="footer">
<p>
<acronym title="Copyright">©</acronym> 2017 The Qt Company Ltd.
Documentation contributions included herein are the copyrights of
their respective owners.<br> The documentation provided herein is licensed under the terms of the <a href="http://www.gnu.org/licenses/fdl.html">GNU Free Documentation License version 1.3</a> as published by the Free Software Foundation.<br> Qt and respective logos are trademarks of The Qt Company Ltd. in Finland and/or other countries worldwide. All other trademarks are property
of their respective owners. </p>
</div>
</body>
</html>
