使用 dart 中的 googleapis 库更新日历并将其显示在网页上 [英] using the googleapis library in dart to update a calendar and display it on a webpage

问题描述

我是 dart 新手，我一直在尝试弄清楚如何使用 googleapis 库来更新日历事件，然后在网页上显示日历/事件.

I am new to dart and I have been trying to figure out how to use the googleapis library to update a calendars events, then display the calendar/events on a webpage.

到目前为止，我有这段代码，我希望只是将 #text id 的文本更改为所选日历 ID 中的事件列表:

So far I have this code that I was hoping would just change the #text id's text to a list of events from the selected calendars ID:

import 'dart:html';
import 'package:googleapis/calendar/v3.dart';
import 'package:googleapis_auth/auth_io.dart';

final _credentials = new ServiceAccountCredentials.fromJson(r'''
{
  "private_key_id": "myprivatekeyid",
  "private_key": "myprivatekey",
  "client_email": "myclientemail",
  "client_id": "myclientid",
  "type": "service_account"
}
''');

const _SCOPES = const [CalendarApi.CalendarScope];

void main() {
  clientViaServiceAccount(_credentials, _SCOPES).then((http_client) {
    var calendar = new CalendarApi(http_client);

    String adminPanelCalendarId = 'mycalendarID';

    var event = calendar.events;

    var events = event.list(adminPanelCalendarId);

    events.then((showEvents) {
      querySelector("#text2").text = showEvents.toString();
    });

  });
}

但网页上没有显示任何内容.我想我误解了如何在 dart 中使用客户端和服务器端代码......我是否将文件分成多个文件?我将如何使用 dart 更新日历并将其显示在网页上?

But nothing displays on the webpage. I think I am misunderstanding how to use client-side and server-side code in dart... Do I break up the file into multiple files? How would I go about updating a calendar and displaying it on a web page with dart?

我熟悉 browser 包，但这是我第一次使用服务器端库编写任何东西(googleapis 使用 dart:io 所以我假设它是服务器端的?我无法在 dartium 中运行代码.

I'm familiar with the browser package, but this is the first time I have written anything with server-side libraries(googleapis uses dart:io so I assume it's server-side? I cannot run the code in dartium).

如果有人能指出我正确的方向，或提供如何实现此目标的示例，我将不胜感激！

If anybody could point me in the right direction, or provide an example as to how this could be accomplished, I would really appreciate it!

推荐答案

使用以下代码，您可以显示与登录帐户关联的日历事件.在此示例中，我使用了 createImplicitBrowserFlow(请参阅 https://pub.dartlang 中的文档.org/packages/googleapis_auth )，带有来自 Google Cloud Console 项目的 ID 和密钥.

Using the following code you can display the events of a calendar associated with the logged account. In this example i used createImplicitBrowserFlow ( see the documentation at https://pub.dartlang.org/packages/googleapis_auth ) with id and key from Google Cloud Console Project.

import 'dart:html';
import 'package:googleapis/calendar/v3.dart';
import 'package:googleapis_auth/auth_browser.dart' as auth;

var id = new auth.ClientId("<yourID>", "<yourKey>");
var scopes = [CalendarApi.CalendarScope];

  void main() {

  auth.createImplicitBrowserFlow(id, scopes).then((auth.BrowserOAuth2Flow flow) {
        flow.clientViaUserConsent().then((auth.AuthClient client) {

          var calendar = new CalendarApi(client);

              String adminPanelCalendarId = 'primary';

              var event = calendar.events;

              var events = event.list(adminPanelCalendarId);

              events.then((showEvents) {
                showEvents.items.forEach((Event ev) { print(ev.summary); });
                querySelector("#text2").text = showEvents.toString();
              });      


          client.close();
          flow.close();
        });
      });

}

这篇关于使用 dart 中的 googleapis 库更新日历并将其显示在网页上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！