AtomGit 开源生态应用开发赛

AtomGit 开源生态应用开发赛

报名链接

报名地址：https://competition.atomgit.com/competitionInfo?id=eca0df1cde63cbdaaa93a521069d1304&utm_source=GSXQ

接口

https://apifox.com/apidoc/shared-73b8c7b4-3e67-4fa1-b4b3-334e61013225/doc-5326879

现在的效果：

大家在手机端查看https://zijin.atomgit.com/

总的入口 https://atomgit.com/explore/community

作品提交地址

https://atomgit.com/nutatomgit

atomgit id

初赛阶段

（1）作品说明文档（包括但不限于以下内容）项目概述和创新点、应用功能说明、技术架构设计、系统性能指标、项目进度规划、商业价值分析。

（2）技术文档（包括但不限于以下内容）环境配置说明、编译构建指南 、API 接口文档、数据库设计文档、部署运维手册、测试报告。

（3）源代码及相关资料（包括但不限于以下内容）完整源代码工程、数据集/测试样例、使用示例/Demo、开源许可说明、代码规范文档。

目的

做客户端，可以运行平台：

OpenHarmony

安卓，ios

跨平台

ArkUI-X

Flutter

uniapp

taro

rn

目标

参考代码

添加网络权限

"requestPermissions": [
  { "name": "ohos.permission.INTERNET" }
]

代码

import axios, { AxiosResponse } from '@ohos/axios';
import { BusinessError } from '@kit.BasicServicesKit';
import { webview } from '@kit.ArkWeb';
import { url } from '@kit.ArkTS';
PersistentStorage.persistProp<string>("token", "");
export class RN {
  code?: number = 0;
  msg?: string = "";
  data?: RNData = new RNData();
}

export class RNDataUser {
  userNameSpace?: string = "";
  emailVerified?: boolean = false;
  adminRoleCode?: string = "";
  phone?: string = "";
  phoneVerified?: boolean = false;
  nickname?: string = "";
  photo?: string = "";
  id?: string = "";
  email?: string = "";
  username?: string = "";
}

export class RNData {
  access_token?: string = "";
  refresh_token?: string = "";
  expires_at?: number = 0;
  id_token?: string = "";
  expires_in?: number = 0;
  user?: RNDataUser = new RNDataUser();
}

export interface UserInfo {
  id: string;
  username: string;
  nickname: string;
  email: string;
  profile: string;
  photo: string;
  allowLoginAdmin: boolean;
}

@Entry
@Component
struct Index {
  @State AccessToken: RNData = new RNData()
  @StorageLink("token") @Watch("updateUserInfo") token: string = "";
  @State _userInfo: UserInfo | null = null;
  @State isLogin: boolean = false;
  controller: webview.WebviewController = new webview.WebviewController();
  private loginUrl: string =
    "https://passport.atomgit.com/login?app_id=62d7a0ebaf95bdacf74fc6b9&protocol=oidc&finish_login_url=%2Finteraction%2Foidc%2F617084b1-6d98-4045-bba9-f6a2cf28fec7%2Flogin&login_page_context=";

  async updateUserInfo() {

  }

  build() {
    Column() {
      if (this._userInfo !== null) {
        Column({ space: 10 }) {
          Text(`用户名：${this._userInfo.username}`)
            .fontSize(20)
          Text(`昵称：${this._userInfo.nickname}`)
            .fontSize(20)
          Text(`邮箱：${this._userInfo.email}`)
            .fontSize(20)
          
      

        }
        .width('90%')
        .height('100%')
        
      } else {
        Stack() {
          Button('还未授权登录，请登录授权后查看您的信息～')
            .visibility(!this.isLogin ? Visibility.Visible : Visibility.Hidden)
            .onClick(() => {
              this.isLogin = true;
            })
          if (this.isLogin) {
            Web({ src: this.loginUrl, controller: this.controller })
              .domStorageAccess(true)
              .onLoadIntercept((event) => {
                if (event) {
                  let urlString: string = event.data.getRequestUrl();
                  console.info("event.data ==== " + event.data.getRequestUrl());
                  if (urlString.indexOf("httts://atomgit.com/callback")) {

                  }
                  const _url = url.URL.parseURL(urlString);
                  const code = _url.params.get('code');
                  if (code !== undefined) {
                    this.getAccessToken(code!);

                  }
                }
                return false;
              })
          }
        }
        .width('100%')
        .height('100%')
      }
    }
    .height('100%')
    .width('100%')
    .justifyContent(FlexAlign.Center)
  }

  getAccessToken(code: string) {
    const tokenUrl: string = `https://openatom.atomgit.com/api/user/accessToken?code=${code}`;
    axios.get(tokenUrl, {
      headers: {
        'X-ATOMGIT-POP-COMMUNITY': 'openatom'
      }
    }).then((data: AxiosResponse) => {
      console.info('Result:返回的内容是' + JSON.stringify(data.data));
      let MsgReturn: RN = data.data
      this.getUserInfo(MsgReturn.data?.access_token!)
    }).catch((err: BusinessError) => {
      console.error('Result:返回的内容是' + JSON.stringify(err));
    })
  }

  getUserInfo(code: string) {
    const tokenUrl: string = 'https://openatom.atomgit.com/api/user/userInfo';
    axios.get(tokenUrl, {
      headers: {
        'X-ATOMGIT-POP-TOKEN': code,
        'X-ATOMGIT-POP-COMMUNITY': 'openatom'
      }
    }).then((data: AxiosResponse) => {
      console.info('Result:返回的内容是' + JSON.stringify(data.data));
      this._userInfo = data.data["data"]

    }).catch((err: BusinessError) => {
      console.error('Result:返回的内容是' + JSON.stringify(err));
    })
  }
}

开发技巧

1.不要用HarmonyOS特色SDK。

网络请求http /axios，不要用远厂

2.看文档：https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/Readme-CN.md

文档模版

项目介绍

项目概述和创新点、应用功能说明

技术架构

系统性能指标

项目进度规划

商业价值分析

环境配置

环境配置说明

编译构建

效果

视频效果图

开源协议

码及相关资料（包括但不限于以下内容）完整源代码工程、数据集/测试样例、使用示例/Demo、开源许可说明、代码规范文档。