Skip to content

Rebuilt 'App Analytics & Push' tab and added Firebase config feature. #32

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Sep 12, 2019
Merged

Rebuilt 'App Analytics & Push' tab and added Firebase config feature. #32

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions css/interface.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -497,3 +497,7 @@ h3 small {
.screenshot-previews img {
border: 1px solid #F0F0F0;
}

.analytic-enabled {
color: #6aa84f;
}
96 changes: 66 additions & 30 deletions interface.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -138,32 +138,45 @@ <h4 class="panel-title collapsed" role="button" data-toggle="collapse" data-pare
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="appStorePushHeading">
<h4 class="panel-title collapsed" role="button" data-toggle="collapse" data-parent="#accordionAppStore" href="#appStorePush" aria-expanded="true" aria-controls="appStorePush"><strong>2 -</strong> Push notification <small>(Optional)</small> <i class="fa fa-angle-down" aria-hidden="true"></i></h4>
<h4 class="panel-title collapsed" role="button" data-toggle="collapse" data-parent="#accordionAppStore" href="#appStorePush" aria-expanded="true" aria-controls="appStorePush"><strong>2 -</strong> App Analytics & Push <small>(Optional)</small> <i class="fa fa-angle-down" aria-hidden="true"></i></h4>
</div>
<div id="appStorePush" class="panel-collapse collapse" role="tabpanel" aria-labelledby="appStorePushHeading">
<div class="panel-body">
<p>If you want to enable push notifications on your app, we recommend you upload the notification icon, doing it at a later stage will require a new submission.</p>
<h3>Fliplet Analytics</h3>
<div class="form-group clearfix">
<div class="col-sm-4 control-label">
<label>Notification icon</label>
<p class="help-block label-helper"><small>This will be the icon users will see when they receive a notification from your app. <a href="https://developer.android.com/guide/practices/ui_guidelines/icon_design_status_bar.html" target="_blank">Learn More</a><br><strong>The image should be 512x512</strong></small></p>
</div>
<div class="col-sm-8">
<label for="fl-store-notificationIcon" class="fileUpload btn btn-primary">
<i class="fa fa-plus"></i>
<span>Choose image</span>
<input type="file" id="fl-store-notificationIcon" name="fl-store-notificationIcon" class="input-file selectfile" accept="image/png">
</label>
<p class="help-block image-name"><small></small></p>
<div class="col-sm-12">
<h4>Status: <span data-fl-analytics-status>Disabled</span> </h4>
<br>
<p>Fliplet’s analytics records usage data, including the user’s login if the app has a login, and displays the data within Fliplet Studio. <a href="#">Learn more about Fliplet Analytics</a></p>
<small>To enable in Fliplet Studio visit App Settings > Add-ons tab > Fliplet Analytics</small>
</div>
</div>


<h3>Google Firebase & Push Notifications</h3>
<div class="form-group clearfix">
<div class="col-sm-4 control-label">
<label for="fl-store-senderId">Sender ID</label>
<p class="help-block label-helper"><small>The sender ID can be found in the Firebase Console in <strong>Settings > Cloud Messaging</strong>.</small></p>
</div>
<div class="col-sm-8">
<input type="text" name="fl-store-senderId" class="form-control" id="fl-store-senderId" />
<div class="col-sm-12">
<h4>Status: <span id="fl-store-firebase-status">Disabled</span></h4>
<br>
<p>Google Firebase offers analytics via Google Analytics, push notifications and other features. <a href="">Learn more about Firebase</a></p>
<small>
To enable:
<ol>
<li>Login to a Firebase account (any existing Google Account can be used</li>
<li>Create a new app</li>
<li>Select Android</li>
<li>Download your Firebase json file</li>
<li>Upload it by clicking the button below</li>
</ol>
</small>
</div>
<div class="col-sm-4">
<label class="input-group-btn">
<span class="btn btn-default">Upload Firebase .json file<input id="fl-store-firebase" name="fl-store-firebase" class="hidden" type="file" accept=".json" data-error="Please upload a .plist file."></span>
</label>
<div class="help-block with-errors">
<p id="fl-store-firebase-uploaded" class="hidden"><strong>✔ You selected a config file.</strong></p>
</div>
</div>
</div>
</div>
Expand Down Expand Up @@ -259,25 +272,48 @@ <h4 class="panel-title collapsed" role="button" data-toggle="collapse" data-pare
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="enterprisePushHeading">
<h4 class="panel-title collapsed" role="button" data-toggle="collapse" data-parent="#accordionEnterprise" href="#enterprisePush" aria-expanded="true" aria-controls="enterprisePush"><strong>3 -</strong> Push notification assets <small>(Optional)</small> <i class="fa fa-angle-down" aria-hidden="true"></i></h4>
<h4 class="panel-title collapsed" role="button" data-toggle="collapse" data-parent="#accordionEnterprise" href="#enterprisePush" aria-expanded="true" aria-controls="enterprisePush"><strong>3 -</strong> App Analytics & Push <small>(Optional)</small> <i class="fa fa-angle-down" aria-hidden="true"></i></h4>
</div>
<div id="enterprisePush" class="panel-collapse collapse" role="tabpanel" aria-labelledby="enterprisePushHeading">
<div class="panel-body">
<p>If you want to enable push notifications on your app, we recommend you upload the notification icon, doing it at a later stage will require a new submission.</p>

<h3>Fliplet Analytics</h3>
<div class="form-group clearfix">
<div class="col-sm-4 control-label">
<label>Notification icon</label>
<p class="help-block label-helper"><small>This will be the icon users will see when they receive a notification from your app<br><strong>The image should be 512x512</strong></small></p>
<div class="col-sm-12">
<h4>Status: <span data-fl-analytics-status>Disabled</span> </h4>
<br>
<p>Fliplet’s analytics records usage data, including the user’s login if the app has a login,anddisplays the data within Fliplet Studio. <a href="#">Learn more about Fliplet Analytics</a></p>
<small>To enable in Fliplet Studio visit App Settings > Add-ons tab > Fliplet Analytics</small>
</div>
<div class="col-sm-8">
<label for="fl-ent-notificationIcon" class="fileUpload btn btn-primary">
<i class="fa fa-plus"></i>
<span>Choose image</span>
<input type="file" id="fl-ent-notificationIcon" name="fl-ent-notificationIcon" class="input-file selectfile" accept="image/png">
</div>

<h3>Google Firebase & Push Notifications</h3>
<div class="form-group clearfix">
<div class="col-sm-12">
<h4>Status: <span id="fl-ent-firebase-status">Disabled</span></h4>
<br>
<p>Google Firebase offers analytics via Google Analytics, push notifications and otherfeatures. <a href="#">Learn more about Firebase</a></p>
<small>
To enable:
<ol>
<li>Login to a Firebase account (any existing Google Account can be used</li>
<li>Create a new app</li>
<li>Select Android</li>
<li>Download your Firebase json file</li>
<li>Upload it by clicking the button below</li>
</ol>
</small>
</div>
<div class="col-sm-4">
<label class="input-group-btn">
<span class="btn btn-default">Upload Firebase .json file<input id="fl-ent-firebase" name="fl-ent-firebase" class="hidden" type="file" accept=".json"data-error="Please upload a.plist file."></span>
</label>
<p class="help-block image-name"><small></small></p>
<div class="help-block with-errors">
<p id="fl-ent-firebase-uploaded" class="hidden"><strong>✔ You selected a config file.<strong><p>
</div>
</div>
</div>

</div>
</div>
</div>
Expand Down
84 changes: 83 additions & 1 deletion js/interface.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,8 @@ var appIcon = '';
var appSettings = {};
var allAppData = [];
var appStoreSubmission = {};
var appStoreFirebaseFileField = undefined;
var enterpriseFirebaseFileField = undefined;
var previousAppStoreSubmission = {};
var enterpriseSubmission = {};
var previousEnterpriseSubmission = {};
Expand Down Expand Up @@ -56,6 +58,36 @@ function incrementVersionNumber(versionNumber) {
return splitNumber.join('.');
}

function saveFirebaseSettings(origin) {
if (origin === 'appStore' && appStoreFirebaseFileField && appStoreFirebaseFileField.files[0]) {
var formData = new FormData();

formData.append('firebase', appStoreFirebaseFileField.files[0]);

return setFirebaseConfigFile(appStoreSubmission.id, formData);
}

if (origin === 'enterprise' && enterpriseFirebaseFileField && enterpriseFirebaseFileField.files[0]) {
var formData = new FormData();

formData.append('firebase', enterpriseFirebaseFileField.files[0]);

return setFirebaseConfigFile(enterpriseSubmission.id, formData);
}

return Promise.resolve();
}

function setFirebaseConfigFile(id, file) {
return Fliplet.API.request({
method: 'PUT',
url: 'v1/organizations/' + Fliplet.Env.get('organizationId') + '/credentials/submission-' + id + '?fileName=firebase',
data: file,
contentType: false,
processData: false
});
}

function incrementVersionCode(versionNumber) {
var newVersionNumber = incrementVersionNumber(versionNumber);
var splitNumber = newVersionNumber.split('.');
Expand Down Expand Up @@ -95,6 +127,11 @@ function loadAppStoreData() {
return;
}

// Firebase
if (name === 'fl-store-firebase') {
return;
}

/* NOTIFICATION ICON */
if (name === "fl-store-notificationIcon") {
if (appStoreSubmission.data[name]) {
Expand Down Expand Up @@ -206,6 +243,12 @@ function loadEnterpriseData() {
$('[name="' + name + '"]').val(enterpriseSubmission.data[name]);
return;
}

// Firebase
if (name === 'fl-ent-firebase') {
return;
}

/* NOTIFICATION ICON */
if (name === "fl-ent-notificationIcon") {
if (enterpriseSubmission.data[name]) {
Expand Down Expand Up @@ -269,7 +312,9 @@ function loadPushNotesData() {
}

function submissionBuild(appSubmission, origin) {
Fliplet.App.Submissions.build(appSubmission.id).then(function(builtSubmission) {
saveFirebaseSettings(origin).then(function () {
return Fliplet.App.Submissions.build(appSubmission.id);
}).then(function (builtSubmission) {

if (origin === "appStore") {
appStoreSubmission = builtSubmission.submission;
Expand Down Expand Up @@ -505,6 +550,10 @@ function saveEnterpriseData(request) {
value = value.trim();
}

if (name === 'fl-ent-firebase') {
return; // saved in credentials
}

if ($(el).attr('type') === "file") {
var fileList = el.files;
var file = new FormData();
Expand Down Expand Up @@ -652,6 +701,26 @@ $('[name="submissionType"]').on('change', function() {
Fliplet.Widget.autosize();
});

$('#fl-store-firebase').on('change', function() {
appStoreFirebaseFileField = this;
var fileName = this.value.replace(/\\/g, '/').replace(/.*\//, '');

if (this.files && this.files[0]) {
$('#fl-store-firebase-uploaded').html('File uploaded: <strong>' + fileName + '</strong>').removeClass('hidden');
$('#fl-store-firebase-status').html('Enabled').addClass('analytic-enabled');
}
});

$("#fl-ent-firebase").on('change', function() {
enterpriseFirebaseFileField = this;
var fileName = this.value.replace(/\\/g, '/').replace(/.*\//, '');

if (this.files && this.files[0]) {
$('#fl-ent-firebase-uploaded').html('File uploaded: <strong>' + fileName + '</strong>').removeClass('hidden');
$('#fl-ent-firebase-status').html('Enabled').addClass('analytic-enabled');
}
});

$('.fl-sb-appStore [change-bundleid], .fl-sb-fliplet-signed [change-bundleid]').on('click', function() {
Fliplet.Modal.confirm({
message: 'Are you sure you want to change the unique Bundle ID?'
Expand Down Expand Up @@ -1199,6 +1268,19 @@ function initialLoad(initial, timeout) {
})
.then(function(org) {
organizationName = org.name;
}),
Fliplet.API.request({
cache: true,
url: 'v1/widgets?include_instances=true&tags=type:appComponent&appId='+Fliplet.Env.get('appId')+'&package=com.fliplet.analytics'
})
.then(function(res) {
var isEnabled = !_.isEmpty(res.widgets[0].instances);

if (isEnabled) {
$('[data-fl-analytics-status]').each(function(index, item) {
$(item).html('Enabled').addClass('analytic-enabled');
})
}
})
]);
})
Expand Down