Подключаем GigaCode к мобильной разработке
Всем привет! С вами Анна Жаркова, руководитель группы разработки в компании Usetech. Сегодня я вам принесла необычный материал. 27 июня 2024 года для сторонних разработчиков открыли и презентовали российскую среду разработки Giga IDE со встроенным ИИ-ассистентом от «Сбера» и «СберТеха». Заявлено, что встроенный в среду ИИ-ассистент GigaCode анализирует контекст, предлагает полные конструкции функций, циклов и других элементов, что позволяет писать код в среднем на 25% быстрее. Ассистент поддерживает как автокомплит кода, так и интеллектуальные подсказки для ввода, генерацию кода для поддерживаемых язык. Также его можно использовать для выполнения разных команд.
Мы посмотрим, как подключить, настроить и применить GigaCode AI к мобильной разработке.
Для начала нам потребуется скачать специальную IDE GigaCode. Нам предложит перейти на ресурс GitVerse (аналоги GitHub, полностью совместим с Git), где потребуется создать аккаунт и авторизоваться через СберID:
После регистрации мы окажемся на дашборде, где можем смотреть инфо по своим репозиториям, своей активности:
Также здесь мы можем скачать установочный файл IDE под свою версию ОС:
Если у вас Mac, как у меня, вы можете столкнуться с проблемой: />
Не пугайтесь. На самом деле, это просто Mac OS блокирует установку из неизвестного источника. Для разблокировки приложения введем в терминале команду:
sudo xattr -rd com.apple.quarantine /Applications/GIGA\ IDE\ CE\ 2024.1.1.app
После этого мы можем спокойно запустить IDE.Т. к GigaCode IDE базируется на PyChar и JB Idea, то окно приложения очень похоже на оригинал:
Без дополнительных плагинов мы можем создавать и работать с теми же проектами на тех же технологиях, что в Intelij Idea:
А вот чтобы работать с Android проектами, нам потребуется активировать GigaChat AI-ассистента и подключить его к Android. Для этого переходим по ссылке и выбираем нужную IDE.
Попадаем на страницу активации расширения на GitVerse. В процессе может снова потребоваться снова авторизоваться через СберID.
Далее мы попадаем на страницу подробных инструкций для подключения.
Для начала нужно зайти в настройки Android Studio и добавить в разделе управления репозиториями плагинов ссылку на хранилище плагинов GigaCode:
https://gigacode.ru/jarvis/updatePlugins.xml
Во вкладке Marketplace выберите GigaCode и нажмите «Install»:
Перезапускаем IDE и открываем, либо создаем проект. Наш плагин активирован.
Внизу окна появится кнопка GigaCode. Нажав попадаем снова на GitVerse, где наш экземпляр IDE добавляется в список активированных устройств:
Снова перезапускаем IDE. Теперь мы, наконец, можем использовать AI-ассистента Giga в работе.
Давайте посмотрим, что он умеет делать. Тапаем на иконку чата и открываем его:
Визуально это похоже на Gemini AI, который встроен в Koala Preview версию Android Studio. Только работает без впн, и активировать в Gemini нужно не под экземпляр IDE, а под каждый проект с помощью ключа.
Что же нам предлагается:
— создать тест для выделенного блока кода
— объяснить блок кода
— сгенерировать документацию.
Для этого есть готовые команды, которые мы можем ввести в поле ввода.
Что ж. Начнем с генерации теста.
Итак, у нас есть код:
class MainTestConfig : IConfigurator {
override fun create(view: IView): IInteractor? {
val presenter = MainTestPresenter(view = view)
val router = MainTestRouter(view = view)
val interactor: IMainTestInteractor = MainTestInteractor(
presenter = presenter,
router = router
)
view.interactor = interactor
return interactor
}
}
Просто выделим его и вобьем в поле чата /test. Нам сгенерирует сэмпл теста:
При повторном вызове для того же блока кода сэмпл усложняется и даже становится похожим на настоящий с импортами:
import org.junit.Before
import org.junit.Test
import org.junit.runner.RunWith
import org.mockito.Mock
import org.mockito.Mockito.verify
import org.mockito.junit.MockitoJUnitRunner
@RunWith(MockitoJUnitRunner::class)
class MainTestConfigTest {
@Mock
lateinit var view: IView
lateinit var config: MainTestConfig
@Before
fun setup() {
config = MainTestConfig()
}
@Test
fun testCreate() {
val interactor = config.create(view)
assert(interactor is MainTestInteractor)
}
@Test
fun testCreate_Presenter() {
val interactor = config.create(view)
verify(view).interactor = interactor
assert(view.interactor is MainTestInteractor)
}
@Test
fun testCreate_Presenter_Router() {
val interactor = config.create(view)
assert(view.interactor is MainTestInteractor)
assert((view.interactor as MainTestInteractor).presenter is MainTestPresenter)
assert((view.interactor as MainTestInteractor).router is MainTestRouter)
}
}
Бонусом получаем объяснение:
Попробуем сгенерировать документацию для того же блока кода с помощью команды /doc:
class MainTestConfig : IConfigurator {
/**
* This method creates an instance of `MainTestInteractor` and sets it on the `view`.
*
* @param view The view to set the interactor on.
* @return The created `MainTestInteractor` instance.
*/
override fun create(view: IView): IInteractor? {
// Create an instance of MainTestPresenter and MainTestRouter.
val presenter = MainTestPresenter(view = view)
val router = MainTestRouter(view = view)
// Create an instance of MainTestInteractor and set it on the view.
val interactor: IMainTestInter
Вот тут получается довольно хорошо.
Теперь перейдем на сэмплы для Android. Попросим нам создать composable функцию для Image с плейсхолдером:
Получим вменяемый код:
@Composable
fun ImagePlaceholder(
modifier: Modifier = Modifier,
contentDescription: String? = null,
placeholder: Painter = painterResource(id = R.drawable.ic_placeholder),
) {
Image(
painter = placeholder,
contentDescription = contentDescription,
contentScale = ContentScale.Crop,
modifier = modifier
)
}
Поменяем наш промпт: Create a composable function for image placeholder. Also add all needed imports to support Material 3
Получим тот же код, но с добавленными импортами под Material3:
Попробуем пример посложнее. Возьмем Json для SDUI и попросим нам его распарсить:
«data»: [
{
«type»: «SCAFFOLD»,
«top_bar»: [
{
«type»: «CENTER_ALIGNED_TOP_APP_BAR»,
«children»: [
{
«type»: «TEXT»,
«value»: «Server Driven Ui»
}
]
}
],
«children»: [
{
«type»: «VERTICAL_LIST»,
«children»: [
{
«type»: «ROW»,
«children»: [
{
«type»: «TEXT»,
«value»: «Hi 1»
},
{
«type»: «IMAGE»,
«value»: «www.fonstola.ru/images/201510/fonstola.ru_209312.jpg»
}
]
},
{
«type»: «ROW»,
«children»: [
{
«type»: «TEXT»,
«value»: «Hi 2»
},
{
«type»: «IMAGE»,
«value»: «fanibani.ru/wp-content/uploads/2022/12/1617975830_18-p-kotyata-milie-i-pushistie-18.jpg»
}
]
},
{
«type»: «ROW»,
«children»: [
{
«type»: «TEXT»,
«value»: «Hi 3»
},
{
«type»: «IMAGE»,
«value»: «fanibani.ru/wp-content/uploads/2022/12/pushistye-lapki-na-krasnom-barzate.jpg»
}
]
}
]
}
]
}
]
}
Если в качестве промпта используем что-то типа: «Parse selected text to composable», то получим вот такой код с сэмплом использования:
@Composable
fun Scaffold() {
val scaffold = remember { Scaffold() }
val topBar = remember { CenterAlignedTopAppBar() }
val text = remember { Text("Server Driven Ui") }
val verticalList = remember { VerticalList() }
val row1 = remember { Row() }
val text1 = remember { Text("Hi 1") }
val image1 = remember { Image("https://www.fonstola.ru/images/201510/fonstola.ru_209312.jpg") }
val row2 = remember { Row() }
val text2 = remember { Text("Hi 2") }
val image2 = remember { Image("https://fanibani.ru/wp-content/uploads/2022/12/1617975830_18-p-kotyata-milie-i-pushistie-18.jpg") }
val row3 = remember { Row() }
val text3 = remember { Text("Hi 3") }
val image3 = remember { Image("https://fanibani.ru/wp-content/uploads/2022/12/pushistye-lapki-na-krasnom-barzate.jpg") }
Scaffold(topBar = { topBar { text } }) {
verticalList {
row1 {
text1
image1
}
row2 {
text2
image2
}
row3 {
text3
image3
}
}
}
}
Да, он странный, с претензией на DSL и неправильный. Работать это не будет.
Попробуем добавить деталей:
Получаем более осмысленную реализацию:
Тут у нас и импорты, и модели данных, и даже корректная комбинация элементов экрана:
import androidx.compose.foundation.Image
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.items
import androidx.compose.material3.CenterAlignedTopAppBar
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.Scaffold
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.unit.dp
import coil.compose.rememberImagePainter
import kotlinx.serialization.json.Json
@Composable
fun ImagePlaceholder(
modifier: Modifier = Modifier,
contentDescription: String? = null,
imageUrl: String? = null,
) {
val painter = rememberImagePainter(
data = imageUrl,
builder = {
crossfade(true)
}
)
Image(
painter = painter,
contentDescription = contentDescription,
contentScale = ContentScale.Crop,
modifier = modifier
)
}
@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun ServerDrivenUi(json: String) {
val ui = Json.decodeFromString(json)
Scaffold(
topBar = {
CenterAlignedTopAppBar(
title = { Text(text = ui.topBar.title) }
)
}
) { padding ->
LazyColumn(
modifier = Modifier.padding(padding)
) {
items(ui.children) { child ->
Row {
Text(text = child.text)
ImagePlaceholder(
modifier = Modifier
.fillMaxWidth()
.height(200.dp),
contentDescription = "Placeholder image",
imageUrl = child.image
)
}
}
}
}
}
data class Ui(
val topBar: TopBar,
val children: List
)
data class TopBar(
val title: String
)
data class Child(
val text: String,
val image: String?
)
Добавляем сами в gradle Kotlinx.serialization и Coil (версию Jetpack Compose).
Также нам вывело и объяснение с кратким примером использования:
Только десериализовало нам неверно, и работать это не будет. Дубль еще раз. Указываем, что нужна правильная иерархия и имена полей:
Получаем верные модели данных:
import kotlinx.serialization.Serializable
@Serializable
data class ServerDrivenUi(
val data: List
)
@Serializable
data class Data(
val type: String,
@SerialName("top_bar")
val topBar: List,
val children: List
)
@Serializable
data class TopBar(
val type: String,
val children: List
)
@Serializable
data class Children(
val type: String,
val value: String? = null,
val children: List? = null
)
Уже ближе, но все равно не то. Нам еще нужен enum типов, правильный маппинг и соединение всего вместе.
Через какое-то время AI начинает лениться:
Постепенно качество ответов снижается, а ошибок увеличивается. Будто бы AI становится невменяемым.
В итоге нам придется собирать код по частям, чтобы получилось то, что мы хотим:
Полностью его сгенерировать у меня не удалось. Через 30 промптов примерно AI устал, перестал слушаться и стал генерировать какую-то кодовую кашу. Также он перестал учиться. Если сравнивать с аналогами, то Gemini он местами уступает по качеству. О подробностях работы с Gemini будет в одной из следующих статей.
Для начала, конечно, неплохо. Но хотелось бы большей устойчивости. При этом количество промптов не сказывается на заготовленных командах и автокомплите. Также подойдет для решения маленьких атомарных задач.
Но попробовать свою IDE (пусть и на базе JB IDEA, хотя многие технологии рождались из форков, а не с нуля) точно стоит.
gigacode.ru
И полезные статьи на тему:
habr.com/ru/companies/sberbank/articles/816107