AIGC打造Xcode辅助开发插件-iTATools

见贤思齐

0.背景日常的开发迭代中，相信大家都会有很多重复的劳动，略显枯燥和拉低了生产效率。而去年ChatGPT的横空出世，我们有了比谷歌和Github更好的代码咨询小助手。但就像做菜一样，我们首先需要的是准备“环境”来让自己拥有询问小助手的资格，然后打开浏览器，提问-抄答案-commandC-commandV到我们的开发AppXcode中。用一件枯燥的事情代替了另一件事情。显得非常的不爽，于是便有了直接开发Xcode插件的念头，深度结合AIGC的能力，无缝衔接。iTaTools便因此诞生。1.成果1.1Mac端AIGC小工具iTaTools首先是一个独立的Mac端的App，这个App的初衷呢其实是组内成员日常学习Swift和SwiftUI的一个辅助App，大家可以使用SwiftUI来构建自己喜欢的功能。首先看一下它的用户界面:左图为Mac端的iTaToolsApp，也是主要和AIGC相结合的工具类App，用户可以在第一个Tab中向ChatGPT提问，并等待回答，在第二个Tab中，可以进行文生图的操作，第三个Tab则是汇总了市面上一些AIGC实用的工具和一些使用AIGC的技巧。1.2Xcode插件目前根据平日的需求，制作了四个小插件，分别是根据所选内容直接生成代码(懂的都懂，它生成的大部分时间比自己写的靠谱😈)将后台给的Json假数据直接生成对应的业务模型(可以省去大量的手动书写模型的时间)‍给相应的代码块或者方法添加苹果官方味道的注释(注释写的好，屎上雕花都不怕)选中代码块的通俗易懂的解释(程序员最怕的就是看别人的代码，写得再好也需要一个小助手帮忙翻译一下)这样我们便可以直接在Xcode开发环境中通过设置自己喜欢的快捷键，直接和ChatGPT交互。下面简单的拿Json2Code举例：第一个图是将这个快捷指令设置快捷键：Command+Shift+Z给出模型文件的同时，还能够给出Json解析和Demo模型的代码。该插件制作之后的两个月时间，已经有大量业务模型由AIGC产生，节约了大量的时间，而代码生成质量也十分合格，因为不涉及较复杂的业务逻辑，这部分的代码工作交给AIGC是十分合适的。自动添加注释案例:1.3iOS自动生成UI代码在iTaTools之中，开发者还可以根据自己的需要自动生成UI，按照我们网易新闻iOS团队的开发习惯指定了一个特殊的Prompt，以此来针对性的输出UI代码：团队使用Objective-C或者Swift语言来搭建用户UI团队使用第三方框架SnapKit/Masonry来生成自动布局代码团队代码规范规定使用Get方式生成UI元素，例如文本、图片团队使用统一的日夜间生成方式以及统一的字号管理方式开发人员可以通过输入目标文本、图片等基本UI元素的个数、命名，来让App自动生成可以直接使用的代码，下边是生成的代码案例：根据您的描述，我将为您生成Objective-C的代码：```Objective-C//NTESNBLoginHeader.h#import@interfaceNTESNBLoginHeader:UIView@property(nonatomic,strong)UILabel*username;@property(nonatomic,strong)UILabel*password;@property(nonatomic,strong)UIImageView*avatar;-(void)updateUsernameNSString*)username;-(void)updatePasswordNSString*)password;-(void)updateAvatarUIImage*)avatar;@end//NTESNBLoginHeader.m#import"NTESNBLoginHeader.h"#import@interfaceNTESNBLoginHeader()@end@implementationNTESNBLoginHeader-(instancetype)init{self=[superinit];if(self){[selfaddSubview:self.username];[selfaddSubview:self.password];[selfaddSubview:self.avatar];[selfsetupLayout];}returnself;}-(UILabel*)username{if(!_username){_username=[[UILabelalloc]init];_username.textAlignment=NSTextAlignmentCenter;_username.numberOfLines=0;_username.textColor=[UIColorblackColor];_username.font=[UIFontsystemFontOfSize:14];}return_username;}-(UILabel*)password{if(!_password){_password=[[UILabelalloc]init];_password.textAlignment=NSTextAlignmentCenter;_password.numberOfLines=0;_password.textColor=[UIColorblackColor];_password.font=[UIFontsystemFontOfSize:14];}return_password;}-(UIImageView*)avatar{if(!_avatar){_avatar=[[UIImageViewalloc]init];_avatar.contentMode=UIViewContentModeCenter;}return_avatar;}-(void)setupLayout{//这里是使用Masonry进行自动布局，请按照您的实际需求进行修改//示例代码如下：[self.avatarmas_makeConstraints:^(MASConstraintMaker*make){make.top.equalTo(self).offset(20);make.centerX.equalTo(self);make.size.mas_equalTo(CGSizeMake(50,50));}];[self.usernamemas_makeConstraints:^(MASConstraintMaker*make){make.top.equalTo(self.avatar.mas_bottom).offset(10);make.left.right.equalTo(self);}];[self.passwordmas_makeConstraints:^(MASConstraintMaker*make){make.top.equalTo(self.username.mas_bottom).offset(10);make.left.right.equalTo(self);}];}-(void)updateUsernameNSString*)username{self.username.text=username;}-(void)updatePasswordNSString*)password{self.password.text=password;}-(void)updateAvatarUIImage*)avatar{self.avatar.image=avatar;}@end2.实现原理2.1AIGCAPI的使用项目使用的是ChatGPT官方提供的API，需要注意的是，开发者需要根据自己对接的API提供方来调整API请求，且部分API文档和实现可能已经和实现时存在差异，请以最新文档为准。以下代码均为示例代码。‍‍2.1.1请求头以下是使用Swift语言生成的ChatGPT请求头，关键参数请参考官方文档。extensionNTESNeteaseAIService{///创建通用请求Header，授权每次的API请求///-Parameters:///-appId:AppID，需要在开发者后台创建///-appKey:appKey，需要在开发者后台创建///-Returns:返回满足条件的Header，时效10分钟，建议每次请求时实时获取当前HeaderpublicfuncsignedHeaders(appId:String,appKey:String)->[String:String]{letnonce=String((0..扩展中，找到并打开需要的插件:我们便可以在Xcode->Editor最下方看到开启了的插件，随便打开一个代码文件，便可以使用其中的内置功能。2.2.1创建Extension通过File->New->Target的方式，在macOS中找到SourceEditorExtension并创建。在整个Extension当中，我们需要关注到如下几个类:XCSrouceEditorExtension所有SourceEditor必须实现的插件入口，类似主App的应用入口，我们可以在ExtensionDidFinishLaunching中打印Log等。XCSourceEditorCommand这个是我们的主战场，上文所说的每一个AIGC功能都是一个CommandXCSourceTextBuffer开发者正在编辑的源文件中的源码信息XCSourceEditorCommandInvocation获取源码、操作源码核心类，AIGC内容创作之后借助这个类来改变源码2.2.2获取源文件高亮中代码这一部分代码较长，就不一一贴出来了，只列举部分关键代码。获取鼠标选中代码块，起始坐标和结束坐标：letmouseLine=self.buffer.selections.firstObjectas?XCSourceTextRangeletmouseLineNum=mouseLine?.start.line??0letmouseColumnNum=mouseLine?.start.column??0letmouseLineEndNum=mouseLine?.end.line??0letmouseColumnEndNum=mouseLine?.end.column??0将高亮行数的代码拼接:letstartString=String(mouseLineText.dropFirst(mouseColumnNum))varresultString=startStringforiinmouseLineNum...mouseLineEndNum{letiString=lines[i]ifi==mouseLineEndNum{letcutString=String(iString.prefix(mouseColumnEndNum+1))resultString+=cutString}else{resultString+=iString}}最终这部分源码会作为Prompt来传递给ChatGPT。2.2.3Json2CodeCommand刚才说到每一个AIGC功能都是一个Command，首先创建一个继承自XCSourceEditorCommand 的类，用户点击Editor中的item或者快捷键呼出功能是，便会走进这个方法:funcperform(withinvocation:XCSourceEditorCommandInvocation,completionHandlerescaping(Error?)->Void)->Void{}在这里，直接调用上文创建的NTESNeteaseAIService，发起相应的请求即可，并按照网易杭研接口的Response进行解析即可guardlet(data,response)=try?awaitURLSession.shared.data(for:request),lethttpResponse=responseas?HTTPURLResponseelse{throwNTESOpenAIError.NTESOpenAIErrorServerError}ifhttpResponse.statusCode==200{letchatGPTResponse=tryself.processChatResponse(data:data)returnchatGPTResponse}else{throwNTESOpenAIError.NTESOpenAIErrorMalformedResponse}通过invocation类插入得到的Response(记得要调用completionHandler告诉系统我们正确处理了)Task{letfileSourceCode=invocation.buffer.completeBufferdo{letsuggestion=tryawaitself.openAIService.json2Code(content:fileSourceCode)letmessageResult=suggestion.detail?.choices?.firstletinsertedExplanation="\n\(messageResult?.message?.content??"无法生成代码解释，去问你身边的大佬吧,Sorry")\n"invocation.buffer.lines.removeAllObjects()invocation.buffer.lines.add(insertedExplanation)}catchleterror{...}completionHandler(nil)}2.2.4功能菜单栏想要将刚才创建好的Command的告诉系统，还需要在ExtensionInfoplist文件中配置：截图中可以看到我们包含了四个Item，四个功能，每一个字典当中配置显示名称、指定类名、指定唯一ID。3.总结以ChatGPT为代表的AIGC工具正在逐渐的走进平日的开发工作之中，一些重复性极强的、或者不包含复杂业务逻辑的代码已经完全可以交给AIGC来自动生成，自己则可以专注于核心业务的开发。而本着别人不管咱们，咱们自己争口红烧肉的态度，Xcode插件结合AIGC则可以实现一些简单的功能，基于XPCService，Xcode还可以做的更多，这一部分需要后续继续的调研和开发。后续可以通过训练子模型(本地)来学习我们的工程代码，来实现更加灵活、更加贴切我们网易新闻团队（可拓展）的开发插件，因为我们团队有着优秀的代码规范，常用且固定的三方库，也有大量自己团队生成的工具库、业务库，这部分是ChatGPT联网都拿不到的😁。