Если вы пытаетесь создать новый проект с помощью NativeScript, Vue.js и Firebase, вы можете столкнуться с несколькими проблемами в процессе. Это краткое руководство должно помочь вам избежать нескольких ловушек, с которыми я сталкивался всякий раз, когда шел по пути.
Мы начнем демонстрационный проект под названием tnsvuefirebasestarter. Если вы хотите увидеть исходный код готового проекта, он доступен здесь:
Сначала начните с создания вашего нового проекта. Я только что установил новую версию Vue CLI 3.0 и никаких проблем не возникло:
$ vue init nativescript-vue/vue-cli-template tnsvuefirebasestarter
Как только шаблон инициализирует ваш проект, перейдите в каталог
$ cd tnsvuefirebasestarter
Теперь установите зависимости с помощью npm. ПРИМЕЧАНИЕ: не используйте пряжу. Я обнаружил, что по какой-то причине каталоги хуков не создаются при использовании пряжи, и это мешает корректной компиляции проекта.
$ npm i
Затем вам нужно открыть консоль firebase и загрузить файлы проекта, которые позволяют приложениям подключаться к firebase. Если вы используете Android, поместите файл google-services.json в каталог template/app/App_Resources/Android. Для iOS загрузите файл GoogleService-Info.plist и поместите его в template/app/App_Resources/iOS.
Теперь мы установим плагин firebase. Выполнение этой команды приведет к выполнению шаблона, который спросит вас, какие службы firebase вы хотите включить. ПРИМЕЧАНИЕ. У меня возникли проблемы с компонентом обмена сообщениями, и мне не удалось его скомпилировать или запустить на Android или iOS. Я не знаю, существует ли эта проблема, но, чтобы обойти ее, я решил не включать ее. Кроме того, известно, что при обмене сообщениями на iOS в эмуляторе возникают проблемы. Возможно, вам потребуется протестировать на реальном устройстве.
$ npm i --save nativescript-plugin-firebase
Затем нам нужно перейти в каталог шаблонов и запустить там npm install.
$ cd template $ npm i
На этом мы почти закончили. Давайте подключим наш src / main.js к firebase. Сразу под строкой import './styles.css' добавьте следующий код:
import firebase from ‘nativescript-plugin-firebase’;
firebase.init({
// Optionally pass in properties for database, authentication and cloud messaging,
// see their respective docs.
}).then(
instance => {
console.log(“firebase.init done”);
},
error => {
console.log(`firebase.init error: ${error}`);
}
);
Vue.prototype.$firebase = firebase;
Теперь убедитесь, что вы запустили чистую перед запуском:
$ npm run clean
На этом этапе ваш проект должен быть готов к работе. Для запуска Android:
$ npm run watch:android
Для iOS запустите:
$ npm run watch:ios
Если все пойдет так, как ожидалось, приложение должно запуститься, и вы должны увидеть в консоли следующее:
JS: 'firebase.init done'
Я хотел бы выразить особую благодарность Джен Лупер, которая работала со мной по выходным, помогая мне разобраться в этом. Если вам нужна дополнительная помощь, есть канал #firebase в NativeScript Community Slack, по которому вы сможете связаться с любым из нас.
Также не забудьте ознакомиться с двумя ее примерами проектов, если вам понадобятся другие примеры:
P.S. Я относительно новичок в мобильной разработке, и у меня возникли проблемы с компиляцией на iOS. Если у вас возникли проблемы с компиляцией iOS, убедитесь, что ваша учетная запись разработчика подключена к xcode, и проверьте проект на наличие ошибок. Вы можете открыть выходной проект xcode после запуска сборки NativeScript по адресу: dist/platforms/ios/dist.xcworkspace
Удачного кодирования!
-g
