Пишемо Windows Phone JavaScript дебагер для Apache Cordova

Друзі, не так давно вийшов черговий реліз open source фреймворку Apache Cordova, деталі ви можете дізнатися з аннонса.
Я ж поспішаю поділитися деталями однією з цікавих фіч, яка не так очевидна і розрекламована в релізі, але яка значно полегшує життя розробників плагінів під Apache Cordova, надаючи для них практично неграниченное поле для діяльності. Прошу любити і жалувати:

CB-6481 Add unified hooks support for cordova app and plugins

Нижче я покажу, як можна використовувати цю фічу для написання Windows Phone JavaScript дебагера в якості плагіна для Apache Cordova. Результат ви можете побачити на відео нижче (дивитися з включеним HD режимом)




Що таке Apache Cordova Hooks?
Мало хто з розробників додатків з використанням Apache Cordova знає про хуки, але вони є і, навіть, дуже давно. Вони являють собою спеціальні скрипти, які програміст може додати, щоб розширити або змінити поведінку фреймворка. З виходом релізу 4.0 даний функціонал був значно розширений, уніфікований і став доступний для розробників плагінів. Всі подробиці використання хуків можна знайти на тут.

А навіщо це може знадобитися? Весь Apache Cordova JavaScript Api це плагіни (core або third party). Модуль plugman, який відповідає за плагіни, підтримує досить обмежений перелік елементів, які ви можете включити в плагін, наприклад додати потрібну нативну dll або якісь додаткові файли з нативним кодом. Але, розробляючи складні плагіни ви зіткнетеся з проблемою, що вам потрібно слелать щось, що ще не передбачено. Наприклад, одного разу, працюючи над WebSQL плагіном нам знадобилася підтримка додаткового cmd параметра, так як ми не могли билдить під AnyCPU через C++ залежностей і ми використовували недокументовані хакі, дірки в імплементації і молилися, щоб це продовжувало працювати. Тепер же ви можете офіційно додавати додаткові скрипти (nodejs або будь-який інший испольняемый файл) для програмування додаткової необхідної логіки. Аналогічно npm-scripts.

Windows Phone 8 JavaScript Debugger
Щоб подивитися, як працюють хуки і показати їх міць, ми створимо плагіна для налагодження JavaScripta на Windows Phone 8. Вихідний код плагіна цілком можна подивитися тут.

1. Створюємо новий плагін і кладемо open source JavaScript debugger Aardwolf всередину. При цьому plugin.xml у нас практично порожній.

<plugin xmlns="http://apache.org/cordova/ns/plugins/1.0"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:rim="http://www.blackberry.com/ns/widgets"
id="org.apache.cordova.debug.wp8"
version="0.0.1-dev">
<name>WP8 Debugger</name>
<description>Cordova WP8 Debugger Plugin</description>
<license>Apache 2.0</license>
<keywords>cordova,debug, wp8</keywords>
<repo></repo>
<issue></issue>

</plugin>


2. Додаємо скрипти (хуки) для платформи Windows Phone 8, які будуть виконуватися під час білду (pre_package) і після того, як додаток стартувало (after_run):

plugin.xml

<platform name="wp8">
<hook type="pre_package" src="scripts/injectDebugger.js" />
<hook type="after_run" src="scripts/startDebugServer.js" />
</platform>



3. Реалізуємо функціонал кастомних скриптів

scripts/injectDebugger.js — обфусцирует вихідні JavaScript файли і переміщує їх в спеціальне місце, щоб Aardwolf міг їх розпізнати. Щоб не тягати і динамічно підключати aardwolf.js у потрібний файл html, ми записуємо його контент прямо в cordova.js.

module.exports = function(ctx) {
if(ctx.cmdLine.indexOf('--debug') <= 0) {
// debugger should run in debug mode only
return;
}
console.log('WP8Debugger: preparing js files for debugging...');

var serverRoot = path.join(ctx.opts.plugin.dir, 'Aardwolf');
var serverWwwCopyDir = path.join(serverRoot, 'files/www');
var platformRoot = path.join(ctx.opts.projectRoot, 'platforms/wp8');

console.log('Copy original www content');
if (fs.existsSync(serverWwwCopyDir)) {
shell.rm('-rf', serverWwwCopyDir)
}

shell.cp('-rf', path.join(platformRoot, 'www/*'), serverWwwCopyDir);

console.log('Rewriting js files');
rewriteFilesInDir(platformRoot, path.join(platformRoot, 'www'));
console.log('config: ' + JSON.stringify(config));
console.log('inject Aardwolf to cordova.js');
var content = 'window.AardwolfServerUrl = "http://' + config.serverHost + ':' + config.serverPort + '";';
content += fs.readFileSync(path.join(serverRoot, 'js/aardwolf.js')).toString();
content += fs.readFileSync(path.join(platformRoot, 'www/cordova.js')).toString();
fs.writeFileSync(path.join(platformRoot, 'www/cordova.js'), content);

console.log('WP8Debugger: done!');
}


scripts/startDebugServer.js — єдиним завданням даного скрипта є вчасно запустити Aardwolf сервер разом з самим додатком.

module.exports = function(ctx) {
if(ctx.cmdLine.indexOf('--debug') <= 0) {
// debugger should run in debug mode only
return;
}
console.log('WP8Debugger: launching debug server...');
console.log('WP8Debugger: debug server host:' + config.serverHost);
var serverRoot = path.join(ctx.opts.plugin.dir, 'Aardwolf');

shell.exec("explorer " + '"http://' + config.serverHost + ':' + config.serverPort + '"');

var cmdLine = 'node ' + path.join(serverRoot, 'app.js') + ' -h ' + config.serverHost;
console.log(cmdLine);

shell.exec(cmdLine);
} 



Запускаємо
1. Чи встановлює Apache Cordova
npm install-g cordova

2. Створюємо додаток
cordova create testApp
cd testApp

3. Додаємо наш плагін
cordova plugin add location-of-cordova-debug-wp8

4. Запускаємо
cordova run wp8 --debug


image

Корисні посилання


Джерело: Хабрахабр

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.