Сегодня я хотел бы сделать предварительный просмотр нашей IDE, чтобы показать вам основные функции. Итак, давайте начнем.
Все, что вам нужно для использования нашей IDE, — это устройство с Chrome, Firefox или Safari. Мы официально поддерживаем Chrome, но у вас не должно возникнуть проблем при использовании других браузеров.
Итак, чтобы открыть нашу IDE, просто зайдите на наш веб-сайт и прокрутите вниз до раздела «Начать новый проект». Здесь вы можете выбрать, какой проект вы хотели бы запустить. Вы можете выбирать между нашими демонстрациями, шаблонами или просто пустыми проектами, чтобы создать приложение в нашей среде IDE.
Для нашей демонстрации я выберу шаблон.
После загрузки IDE в верхнем левом углу вы увидите имя пользователя и проекта. В настоящее время мы работаем над учетными записями пользователей, поэтому на данный момент используется имя пользователя по умолчанию. Чтобы изменить имя проекта, вы можете просто дважды щелкнуть по нему или щелкнуть значок «ручка», чтобы отредактировать его. Помните, что вы не должны использовать специальные символы или пробел в названии вашего проекта.
В правом верхнем углу вы увидите еще 2 кнопки; один для открытия новой вкладки с предварительным просмотром в реальном времени. Вы можете легко перетащить вкладку предварительного просмотра на другой экран.
Хотя использование 2 экранов не является обязательным, вам будет удобнее разделить предварительный просмотр в реальном времени и редакторы кода на 2 экрана.
Следующая кнопка открывает редакторы CSS.
Он будет доступен только в «многоразовых слотах» или редакторе страниц. После того, как вы нажмете ее, откроется CSS текущей страницы, на которой вы находитесь. В правом верхнем углу редактора вы можете переключаться между определенными файлами CSS, которые IDE генерирует для вас, когда вы печатаете HTML или устанавливаете виджеты.
Как создавать слоты и редактировать CSS в виджетах, будет объяснено в следующих видео.
Посередине панели навигации вы можете увидеть помощника по реализации. Он активируется, когда IDE распознает, что вы ввели ссылку на поставщика или команду, которая еще не была реализована.
Теперь мы можем взглянуть на боковую панель.
Первая иконка открывает панель навигации по проекту. Здесь вы можете скачать свой проект. В ближайшее время также реализуем интеграцию с GitHub и возможность сохранения вашего проекта в облаке.
Для перемещения между файлами просто щелкните имя файла или используйте среднюю кнопку мыши, чтобы открыть его в отдельной вкладке. Здесь вы также можете создать новый файл, если вы еще не сделали этого с помощью помощника по внедрению или атрибутов HTML.
Панель поиска позволит вам найти ссылки в коде между всеми файлами. Функция пока недоступна, но мы уже работаем над ее реализацией.
Следующая кнопка приведет вас на вкладку зависимостей. Здесь вы можете использовать библиотеки npkg, используя простой файл JSON; вы также можете увидеть весь импорт виджетов.
Кнопка виджета открывает панель, где вы можете искать и устанавливать новые виджеты. Помните, что виджеты будут установлены именно там, где находится вставка клавиатуры в редакторе кода. Если вы хотите узнать больше о конкретном виджете, вы можете нажать на него, чтобы открыть его файл readme. Здесь вы найдете всю основную информацию в виде настраиваемых классов или функций виджета.
Настройки позволят вам изменить тему редакторов кода и размер их шрифта. Здесь вы также можете добавить глобальные переменные, такие как ключ Google Recaptcha.
Надеюсь, вам понравился предварительный просмотр нашей IDE. Вскоре мы выпустим серию руководств, в которых более подробно рассказывается о создании проектов на нашей платформе. Вы также можете поддержать нас на Patreon и проголосовать за функции, которые мы реализуем дальше.
