Teaching Native Qt to Talk Web

Teaching Native Qt to
Talk Web
by Alan Uthoﬀ

Web API
• RESTful API

• POST

• GET

• Javascript module

• Ruby module

Useful tools
• Web debugging Proxy (Charles)

• Curl

Qt and Web APIs
• C++ Network model

• Javascript modules in a web view

• QML using XMLHttpRequest

Qt Network Module
•QNetworkRequest

•setRawHeader

•post

•get

•Signal

•ﬁnished(QNetworkReply * reply)

•QNetworkReply

•readAll

•size

•error

•QJsonDocument

•toJson

Curl Example API
$ curl https://api.intercom.io/events
-X POST
-H 'Authorization:Bearer <Your access token>'
-H "Content-Type: application/json" -d'
{
"event_name" : "invited-friend",
"created_at": 1389913941,
"user_id": "314159",
"metadata": {
"invitee_email": "pi@example.org",
"invite_code": "ADDAFRIEND"
}
}'
Example from Intercom Api docs https://developers.intercom.com/reference#events

Qt C++ Example
QJsonDocument json;
json = QJsonDocument::fromVariant(dataMap);
metadata=","metadata":"+json.toJson();
QByteArray timeStamp =
QByteArray::number(QDateTime::currentSecsSinceEpoch());
QByteArray body("{"event_name" :""+ eventName.toUtf8() +”",
"created_at":"+ timeStamp+ ","user_id" :""+user.toUtf8()
+"""+metadata+"}");
QByteArray postDataSize = QByteArray::number(body.size());
QNetworkRequest request ( QUrl::fromUserInput("https://api.intercom.io/
events");
);
QString appString = qApp->applicationDisplayName()+tr(" v”)
+qApp->applicationVersion();
request.setRawHeader("User-Agent",appString.toUtf8());
request.setRawHeader("X-Custom-User-Agent", appString.toUtf8());
request.setRawHeader("Content-Type","application/json");
request.setRawHeader(“Authorization",
QByteArray(m_accessTorken.toStdString().c_str()));
request.setRawHeader("Content-Length", postDataSize);
QNetworkReply reply = m_networkManager.post(request,body);

ﬁnished Signal Example
QByteArray response_data = reply->readAll();
int bytesRead = response_data.size();
if(reply->error() == QNetworkReply::NoError)
{
//Note they may not be any on a good reply
if(bytesRead != 0)
{ //process response_data
qInfo()<<response_data;
}
}
else
{
//handle error
if(bytesRead != 0)
{ //handle error with error message in response_data
qWarning()<<response_data;
}
} 
reply->deleteLater();

QML Web View with
Javascript
• WebEngineView

• Javascript code from site

• QWebChannel

Web View Example
WebEngineView
{
property bool isLoaded : false
url:"qrc:/index.html"
onLoadingChanged:
{
{
if(loadRequest.status === WebEngineLoadRequest.LoadSucceededStatus)
{
var webcannelString = "new QWebChannel(qt.webChannelTransport,
function(channel) {"
+"var qmlObject = channel.objects.htmlQmlObject;"
+"console.log('calling function'); "
+ "window.Intercom('onShow', function()
{ qmlObject.requestHalfSize(); });"
+ "window.Intercom('onHide', function()
{ qmlObject.requestHelpBubble(); });"
+ ";});"
runJavaScript(qwebchannelJS)
runJavaScript( webcannelString)
isLoaded = true
}
}

Web View Example
Continued
function startIntercom(){
if(isLoaded === true)
{
runJavaScript("window.Intercom('boot', {app_id:
‘dnhfike36’,email:’"+htmlQmlObject.email+"',user_id:'"+htmlQm
lObject.email+"'});");
runJavaScript("window.Intercom('trackEvent',
‘"+eventName+"');");
return true
}
}
}//end of WebEngineView

Web View Example Html
<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<titleMy App</title>

<script >Javascript API code Here</script>

</head>

<body></body>

</html>

QML with XMLHttpRequest
• XMLHttpRequest

• onreadystatechange

• responseText

• readyState

• XMLHttpRequest.HEADERS_RECEIVED

• XMLHttpRequest.DONE

Example XMLHttpRequest
function requestLogin(username_To_Use , password_To_Use) {
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState === XMLHttpRequest.HEADERS_RECEIVED) {
print('HEADERS_RECEIVED');
}
else if(xhr.readyState === XMLHttpRequest.DONE)
{
if( xhr.status == 200)
{
var object = JSON.parse(xhr.responseText.toString());
if(object["result"] === "okay")
{ print(JSON.stringify(object, null, 2)); }
}
else
{ //error }
}
}
var body = new Object()
body.username = username_To_Use
body.password = password_To_Use
xhr.open("POST", "https://vurhafa2.e1.loginrocket.com/v1/login");
xhr.setRequestHeader("Content-type", "application/json");
xhr.send(JSON.stringify(body));
}

Final Thoughts
• QNetworkRequest

• WebEngineView

• XMLHttpRequest

Teaching Native Qt to Talk Web

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Similar a Teaching Native Qt to Talk Web

Similar a Teaching Native Qt to Talk Web (20)

Último

Último (20)

Teaching Native Qt to Talk Web