Блог

1. Запускаем Android Studio.
2. Ждем индексацию.
3. Ставим выделение на Gradle Scripts.
4. Выбираем в меню Refactor -> Migrate to AndroidX…
5. Жмем кнопку Migrate.
6. Сохраняем бекап-архив где-нибудь.
7. Ждем выполнение операции миграции.
8. Жмем Do Refactor.
9. Ожидаем окончания.
10. Пробуем собрать привычным способом.

Идем в Targets -> Цель для Tests

Меняем значение Host Application на основное целевое приложение.

Например

Приложение называется AwesomeApp. Цель соответственно, тоже называется AwesomeApp.

Идем в цель AwesomeAppTests, на вкладке General выбираем Host Application как AwesomeApp.

Причина: ошибочная версия у GEOS. Происходит на MacOS.

Как исправить

Удалить новую версию:

brew unlink geos

И установить более старую версию (подходит для MacOS Catalina):

brew install https://raw.githubusercontent.com/Homebrew/homebrew-core/823b700ab61eeec57f34d50be2cc34a285fb5abc/Formula/geos.rb

Крайне приятно, когда результаты твоей работы показывают по федеральному каналу :)

Фрагмент здесь: https://www.1tv.ru/shows/dobroe-utro/reportazh/zhkh-eto-celaya-nauka-dobroe-utro-fragment-ot-27-08-2019

По работе снова столкнулся с необходимостью реализации 3D в вебе. Что хорошо - сейчас WebGL довольно развился и появились хорошие фреймворки, что плохо - до сих пор это сильно не дотягивает до Unity3D и подобных движков. Так что если есть возможность выбора - лучше собирать на Unity3D под web - проблем будет гораздо меньше.

Итак, у нас webgl-фреймворки, выбрал A-Frame. В будущем может потребоваться необходимость прикрутить виртуальную реальность, а он это умеет “из коробки”. Есть много компонентов (контроллеры, эффекты и т.п.).

По ходу разработки столкнулся с тем, что стандартные для Unity3D форматы obj и fbx плохо поддерживаются в A-Frame, как выяснилось позже - three.js, babylon.js тоже их не особо поддерживают, например, большинство fbx со сторов подгружались с поехавшими текстурами. После гуглежки выяснилось, что стоит применять формат glTF. В целом этот формат файлов имеет уже вторую версию (2.0) и хорошую поддержку аудитории. Его создавали специально под веб, следовательно сам имеет внутреннюю структуру как JSON и плюс бинарник для материалов и отдельные файлы текстур - jpg, png и т.п. Формат поддерживает текстуры, bump-мэппинг (не сразу получилось это найти), анимацию, свет (но его официально еще поддержки нет, поэтому лучше использовать не внутри модели, а расставлять через A-Frame). ВНИМАНИЕ! Используйте ТОЛЬКО стандартные или физические текстуры (PBR), V-Ray текстуры не отображаются без конвертации в стандартные, а физические имеют максимально возможную поддержку - как раз бампы работают только с ним. Также, можно упаковать это все в один файл - glb.

Вот способ, через который делали модели:

1. В 3dsmax делать модели с физическими или стандартными текстурами.
2. Все текстуры складывать в общую кучу и накладывать в 3dsmax оттуда, чтобы пути были максимально короткие и без “../../..” подобных вещей.
3. Установить плагин для 3dsmax - Babylon.js и экспорт делать в формат glTF через него со включенной конвертацией текстур. Все остальные галки по умолчанию. Директория с файлом и текстурами должна быть одна и та же. Все имена файлов должны быть на английском языке и без пробелов.
4. Объекты-линии делать всегда с модификатором Editable Poly.
5. Не использовать Pro Boolean - с ним текстуры накладываются совсем не так как надо и в итоге потом модель черного цвета.
6. Сохранять каждую модель, с которой возможно взаимодействовать, в отдельный файл с сохранением координат. Т.е. скрываем все, кроме одной двери, экспортируем, скрываем эту дверь, показываем другую, экспортируем и т.п. Остальную сцену можно сохранить целиком. Тут возможен другой вариант - сохранять все в нулевых координатах и расставлять движком - но это будет дольше для разработчика.
7. Использовать размеры текстуры, кратные двум. Можно просто изменить размер (не обрезать, а “resize” обычный). Т.е. если текстура 1000х1000, то ресайзим в 512х512. Если 1025 на 1023, то ресайзим в 1024х512. Если этого не сделаете вы, то это сделает three.js в рунтайме - и это будет заметно.
8. Для физических материалов настраивать металл (metalness) и шероховатости (roughness), чтобы блики от света были более реалистичными.
9. Запекать текстуры (texture baking) необходимо в 3dsmax, A-Frame на сегодняшний день не сделает красивых теней.

Также учитывайте, что стоит экспортировать отдельно все объекты, с которыми необходимо взаимодействовать, исключая их из основной сцены, т.к. один подгруженный объект не предполагает наложить на него разные шейдеры, назначить разные действия и т.п. Думаю, что это возможно, но не столь удобно, как различные объекты. В итоге у меня получилось следующее - все двери и объекты с которыми может взаимодействовать пользователь, находится в тех же координатах, как и на основной сцене, но сохранены отдельно. А общая сцена сохранена без этих дверей и объектов целиком в один файл.

Пример ошибки

/Users/user/Library/Developer/Xcode/DerivedData/Unity-iPhone-dpiwnljjsxiubxbjbdnsqncxpxfn/Build/Intermediates.noindex/Unity-iPhone.build/Release-iphoneos/Unity-iPhone.build/Script-033966F41B18B03000ECD701.sh: line 2: /Users/user/Game_iOS_1.9_XCODE/MapFileParser.sh: Permission denied
Command PhaseScriptExecution failed with a nonzero exit code

Решение:

<span>1.</span> Выставить права запуска на файл /Users/user/Game_iOS_1.9_XCODE/MapFileParser.sh:

chmod +x /Users/user/Game_iOS_1.9_XCODE/MapFileParser.sh

<span>2.</span> Заменить #!/bin/sh на #!/bin/bash в этом файле (первая строка в любом редакторе)

<span>3.</span> После этого сделать Clean и можно повторно собрать приложение - все должно быть ок.

Подготовка

<span>1.</span> Создание нового проекта Django

$ django-admin startproject app
$ cd app
$ virtualenv -p python3.6 venv
$ source venv/bin/activate
$ pip install django
$ python manage.py migrate

<span>2.</span> Создание React-приложения

$ mkdir frontend
$ cd frontend
$ npm init -y

Дружим

<span>3.</span> Измените содержимое ключа scripts в файле frontend/package.json

"scripts": {
  "build": "webpack --config webpack.config.js --progress --colors",
  "watch": "webpack --config webpack.config.js --watch --mode development"
},

<span>4.</span> Установите необходимые библиотеки

$ npm install --save-dev babel-core babel-loader babel-preset-env babel-preset-react webpack webpack-bundle-tracker webpack-cli clean-webpack-plugin @babel/core @babel/preset-env @babel/preset-react
$ npm install --save react react-dom

<span>5.</span> Создайте файл frontend/webpack.config.js

var path = require("path");
var webpack = require('webpack');
var BundleTracker = require('webpack-bundle-tracker');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

module.exports = {
  context: __dirname,

  entry: './src/index',

  output: {
      path: path.resolve('./build/'),
      filename: "[name]-[hash].js",
  },

  plugins: [
    new CleanWebpackPlugin(),
    new BundleTracker({filename: './webpack-stats.json'}),
  ],
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: ['babel-loader']
      }
    ]
  },
  resolve: {
    extensions: ['*', '.js', '.jsx']
  }
};

<span>6.</span> Создайте файл frontend/.babelrc со следующим содержимым

{
    "presets": ["@babel/preset-env", "@babel/react"]
}

<span>7.</span> Создайте индексный файл для реакта frontend/src/index.js

import React from 'react'
import ReactDOM from 'react-dom'


function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

const element = <Welcome name="world" />;
ReactDOM.render(
  element,
  document.getElementById('react')
);

<span>8.</span> Установить модуль django-webpack-loader в Django

pip install django-webpack-loader

<span>9.</span> Добавить его в INSTALLED_APPS и настроить

INSTALLED_APPS = (
    # ...
    'webpack_loader',
)

WEBPACK_LOADER = {
    'DEFAULT': {
        'BUNDLE_DIR_NAME': 'build/',  # это префикс для урла - /media/build/
        'STATS_FILE': os.path.join(BASE_DIR, 'frontend', 'webpack-stats.json'),  # путь до файла webpack-stats.json
    }
}

<span>10.</span> Создать индексный файл в темплейтах Django

{% load render_bundle from webpack_loader %}

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Example</title>
    </head>
    <body>
        <div id="react"></div>
        {% render_bundle 'main' %}
    </body>
</html>

Разработка

Запустить React

cd frontend && npm run watch

И запустить Django

source venv/bin/activate && python manage.py runserver

Внести изменения, сохранить файлы в реакте, перейти на необходимую страницу и перезагрузить (хот-релоада нет).

<hr />

Источник, переведенный и дополненный (исправлены ошибки): https://medium.com/uva-mobile-devhub/set-up-react-in-your-django-project-with-webpack-4fe1f8455396

Когда что-то пошло не так при работе с docker/docker-compose, вы можете увидеть эту ошибку.

Решение:

<span>1.</span> Выполняем команду docker network ls, чтобы увидеть, какиие сети докера есть.

Пример вывода:

2bb4da84a955        site_default   bridge              local
a51623d2e6f7        site_default   bridge              local

<span>2.</span> Удаляем сети.

docker network rm 2bb4da84a955
docker network rm a51623d2e6f7

<span>3.</span> Далее, можно работать в обычном режиме с докером.

Когда вы видите подобное сообщение от git при пуше:

Delta compression using up to 2 threads.
warning: suboptimal pack - out of memory 
error: pack-objects died of signal 90)   
fatal: The remote end hung up unexpectedly
fatal: The remote end hung up unexpectedly
error: failed to push some refs to '...'
fatal: write error: Bad file descriptor

То можете попробовать увеличить размер доступной памяти, это может помочь. Для этого выполните команду

git config --global pack.windowMemory "32m"

и попробуйте запушить еще раз.

Для разработки периодически возникает необходимость логировать запросы для того, чтобы разобраться в проблеме. Если используете nginx, то можно настроить логирование запросов на его стороне.

Для этого надо создать новый формат лога и выставить его в виртуальном хосте. Также, рекомендую выставить client_body_buffer_size побольше, т.к., если вы превысите стандартный размер в килобайт, то вместо тела запроса будет “-“.

Форматируем лог, в убунту при стандартной установке это файл /etc/nginx/nginx.conf:

# ...

http {
    # ...
    client_body_buffer_size 100K;
    client_header_buffer_size 10k;

    log_format postdata '$http_x_forwarded_for - $remote_user [$time_local] "$request" '
                '$status $body_bytes_sent "$request_body" "$http_referer" '
                '"$http_user_agent" $request_time';
    # ...
}
# ...

И выставляем в виртуальном хосте, например /etc/nginx/sites-enabled/default:

server {
    # ...
    access_log /var/log/nginx/postdata.log postdata;
    # ...
}

Проверяем, что все написали правильно и конфигурация “ок”:

nginx -t

Перезагружаем сервер:

service nginx restart

Делаем запрос и идем смотреть лог /var/log/nginx/postdata.log.

Если у вас не создался лог, проверьте, создана ли директория, где он лежит и есть ли у nginx права на запись в этой директории на этот файл.