Badgeyay project is divided into two parts i.e front-end with Ember JS and back-end with REST-API programmed in Python.
Badgeyay comes with many features for customising the process of generation of Badges. It gives freedom to user to choose Input Badge data which is to be printed on the individual badges, choosing the badge size, applying custom background to the badges and then optional features of font customization helps to generate cool badges.You have to just click on create badges and the generated badge with download link appear at bottom of form. But a problem arises with the generated badges link that after logout/login or generation of new badges just after creating badges one time, the link of the previously created badges is still there which is a bit confusing, as user might think the previous link to be the new link and press on that in order to download and find the old badges downloaded.
To resolve this issue, I have used the power of Ember notify library and customized it to show the generated badges link and disappear after a specified time in my Pull Request and after that user can always see his previously generated badges in My Badges route.
Let’s get started and understand it.
Customizing Notify library and making the changes in the send Badge data function to show the generated badge link just after the completion of badge generation process.
import Controller from '@ember/controller';
import { inject as service } from '@ember/service';
exportdefault Controller.extend({
....
routing : service('-routing'),
notify : service('notify'), // importing Notify service
.....
sendBadge(badgeData) {
const _this =this;
let badgeRecord = _this.get('store').createRecord('badge', badgeData);
badgeRecord.save()
.then(record => {
_this.set('badgeGenerated', true);
_this.set('genBadge', record);
var notify = _this.get('notify');
var link = record.download_link; // Assigning download link to a variable var message = notify.success( // Configuring the message of notify service
{ html:// Adding the html in notify message'
Badge generated successfully.
'+'<p>Visit this<b>'+'<a href='+ link
+'> Link </a></b> to download badge.</p>',
closeAfter:10000 }); // Specifying the time of closing the message
})
.catch(err => {
_this.get('notify').error('Unable to generate badge');
});
},
I have implemented the customized notify function to show the badge generation link for a specific time.
Now run the server to see the implemented changes by following command.
$ ember serve
Ember Notify service showing the generated Badges link:
Now, I am done with the implementation of customised notify function to show the badge generation link for a specific time of 10 seconds.
Badgeyay project is divided into two parts i.e front-end with Ember JS and back-end with REST-API programmed in Python.
Badgeyay comes with many features for customising the process of generation of Badges. It gives freedom to user to choose Input Badge data which is to be printed on the individual badges, choosing the badge size, applying custom background to the badges and then optional features of font customization helps to generate cool badges. If a helper is not there for the directions to use these features then these features may be difficult to use for a user.
To resolve this issue and make Badgeyay more user friendly I have implemented a User Guide to help user to go through the User Manual before generating Badges in my Pull Request.
To implement user guide, I have used Semantic UI tables to give examples for CSV format and used other components for Manual format.
Let’s get started and understand it step by step.
Step 1:
Create User Guide component with Ember CLI.
$ ember g component user-component/user-guide
Step 2:
Now, We will use Semantic UI while editing Handlebars.
class="user-guide">
class="ui center aligned huge header">User-Input Guide
class="ui center aligned small header">
Please check what is the "Correct Format"?
class="ui segments">
class="ui segment">
class="ui raised segment">
class="ui header">class="file excel icon">
class="content">
CSV Format
</div></div>
class="ui bulleted list">
class="item">The CSV must be uploaded with 5 columns of data.
class="item">Five comma (',') seperated values should be present in the CSV
This blog will illustrate about how we, at Open Event Android, have implemented the way to show the number of tickets of every type of ticket bought by the user in Orders Under User fragment itself!
1. Modify ordersUnderUser function in Order API
The ordersUnderUser function in Order API doesn’t include attendees. So, if we we need to show the number of attendees which is basically the number of tickets, we have to include all the attendee ids.
fun ordersUnderUser(@Path(“userId”) userId: Long): Single<List<Order>>
1. Modify the orderUnderUser function in viewmodel
Now, we have to modify the OrderViewModel where we will make changes in the orderUnderUser function. We create a LiveData of attendees number which will contain a list of attendee ids received from the order.
val attendeesNumber = MutableLiveData<ArrayList<Int>>()
Then, in the orderUnderUser function, we add a line of code of setting the value of the LiveData.
This basically takes the orders as a list and as List<AttendeeId> is a variable inside the object of Order, we map out the same ArrayList full of attendee ids!
…
}.subscribe({
order = it
attendeesNumber.value = it.map { it.attendees?.size } as ArrayList<Int>
val query = buildQuery(it)
if (idList.size != 0)
eventsUnderUser(query)
else
progress.value = false
}
2. Modify OrdersUnderUserFragment code
We add a observer in the Fragment file. The observer will fire up whenever there is a value received for attendeesNumber. It will fire up the function setAttendeeNumber in ordersRecyclerAdapter.
We add a variable called attendeesNumber in the file. Another function called setAttendeeNumber is also made to set the Attendee number. We then proceed to bind the number to the view holder.
var attendeesNumber = ArrayList<Int>()
fun setAttendeeNumber(number: ArrayList<Int>) {
attendeesNumber = number
}
override fun onBindViewHolder(holder: OrdersViewHolder, position: Int) {
This blog will illustrate about how forgot password feature is implemented in the Open Event Android app. This feature is quite necessary for users as the user might forget his or her password whenever he needs to login. Thus, this feature utilises only the email of the user. When clicked on “I forgot my password” option, the user is sent an email to reset his/her password!
1. Create the RequestToken, Email and RequestToken response models
The first step is to create all required models. We actually send a POST request to the server and the body of it contains the RequestToken model. The response received is contained in the RequestToken response model. We create an Email model for our use.
RequestToken class:-
data class RequestToken(val data: Email)
Email class:-
data class Email(val email: String)
RequestTokenResponse class:-
data class RequestTokenResponse(val message: String)
2. Show the option only when correct Email Id is entered.
We create a verification method to verify the email. The app will only send a POST request using a correct email. This method is present in the ViewModel.
fun showForgotPassword(email: String): Boolean {
if (email.isNotEmpty() && Patterns.EMAIL_ADDRESS.matcher(email).matches()) {
return true
}
return false
}
2. Update the Login Fragment file.
We add an onclicklistener to the forgot password option. This will call a function in the ViewModel. The function is sendResetPasswordEmail which utilises the actual email of the user entered.
error.value = “Email address not present in server. Please check your email”
}))
}
3. Create an observer for the requestTokenSuccess variable in the Fragment.
Thus, the final task at hand is to create an observer to observe the vaue of requestTokenSuccess variable. Once the variable is set to a message “Email Sent”, we can clearly notify the user that the email is sent perfectly! (The feature image represents this)
Thus, this is how we have implemented the forgot password feature in the app.
The Open Event Android app uses innumerable open source softwares. Fortunately, android allows us to give credit to each OSS (Open Source Software). We can do this just by writing a few lines of code. In this blog we will illustrate about how we are showing a list of acknowle- dgements in the Open Event Android app.
First of all we will add all the dependencies required. In the app level gradle file, we will add the plugin.
After that we add the classpath to the project level gradle file in dependencies.
classpath “com.google.gms:oss-licenses:0.9.2”
The google() function must be added in maven for this to work. So, after adding all these dependencies, we click the Sync button in Android Studio. We wait for the project to refresh.
In our Settings Fragment file, we add another preference called “Acknowledgements”. Let us head into the code below. In the SettingsFragment file.
if (preference?.key == resources.getString(R.string.key_acknowledgements)) {
As we can see, we have added a conditional in the onPreferenceClickListener. If the user clicks on a preference whose key is “key_acknowledgements”, an OssLicensesMenyActivity opens in the app. This is a predefined activity and is only available after we have successfully integrated oss licences. Heading onto some xml code for the feature. We move onto settings.xml file.
This section is present under the main PreferenceScreen. It is nested and is actually present under a PreferenceCategory named “About”. The final thing we do to complete the process successfully is store our strings in the strings.xml file.
The web generator application can generate event websites by getting data from event JSON files and binary media files, that are stored in a compressed zip file or through an API endpoint. The JSON data format of version 1 as well as version 2, provides user an option to add the slide and video URLs of the sessions. The data from JSONs is extracted and stored in the objects for a particular session, and in the template, the data for videos and slides are rendered in their corresponding iframes.
Extracting data from event JSONs
The data is extracted from the JSONs and is stored in an object. The object containing the data is sent to the procedure which compiles the handlebars templates with that data.
The JSON data format for v1 and v2 are different and thus the data is extracted from the file depending on API version chosen for web app generation. The files where data extraction takes place are fold_v1.js and fold_v2.js for API v1 and v2 respectively.
Adding event emitter
Onclick event emitter on schedule division calls the procedure “loadVideoAndSlides” with the parameters corresponding to the session clicked.
The parameters Session ID, Video URL and Slide URL are passed to the procedure which is responsible for displaying the slides and video iframes for the sessions. This resolves the problem of heavy data binding to the page, as the frames for videos and slides are loaded on page only when the session is clicked.
Procedure called on click event
The performance of web app is significantly improved by using the call and listen mechanism as only the requested videos are loaded into the document object model.
The video and slide URLs passed to the procedure are used for loading the iframes from youtube and office apps or google docs respectively as shown above, and the resulting slide view is as shown below
Open Event Web app generator provides an option to event organizers to choose the theme for their event website. Previously it supported the default light theme for the websites, but now it supports a customized dark-theme as well inspired from the twitter dark-mode. Adding this new feature to the User Interface of the generated website, Open Event Web app provides a stylish view for the website of an event.
How we enabled multiple theme support?
The client is provided an option to choose the theme, either ‘light’ or ‘dark’ from the generator. Depending on the option selected, the data is sent to the server, the server extracts the data and while compiling the stylesheet for the pages takes into the account which theme is chosen by the client.
Adding option to choose theme
A drop-down menu is added on the generator page which lets the client choose either of the light or dark themes. The default theme is light.
The color schema is set different for both the themes, this is achieved by making two different stylesheets for the light and dark themes. The style or color of an element is assigned a variable in main css file(application.scss). Those variables are overwritten while compiling these specific files depending upon the theme chosen.
_light.scss
Defines the values of variables for light theme.
Now we have the value for theme selected by the client, the data used for rendering the CSS file is chosen accordingly. If the theme is light, the file containing color-scheme for light proposition is selected else the dark one. The output file contains the values for color variables according to the theme.
As any user can add or remove devices from their account, there needed to be a way by which Admins can manage the user devices. The Admins and higher user roles should have the access to modify the config of devices of any user. This blog post explains how an API has been implemented to facilitate Admins and higher user roles to change config of devices of any user.
Implementing a servlet to allow changing review status of a Skill
The basic task of the servlet is to allow Admin and higher user roles to modify the config of devices of any user. The Admin should be allowed to edit the name of the device and also the room of the device, similar to how a user can edit his own devices.
Here is the implementation of the API:
The API should be usable to only the users who have a user role Admin or higher. Only those with minimum Admin rights should be allowed to control what Skills are displayed on the CMS site. This is implemented as follows:
The main method of the servlet is the serviceImpl() method. This is where the actual code goes which will be executed each time the API is called. This is implemented as follows:
JSONObjectresult=newJSONObject(true);Collection<ClientIdentity>authorized=DAO.getAuthorizedClients();List<String>keysList=newArrayList<String>();authorized.forEach(client->keysList.add(client.toString()));String[]keysArray=keysList.toArray(newString[keysList.size()]);List<JSONObject>userList=newArrayList<JSONObject>();for(Clientclient:authorized){JSONObjectjson=client.toJSON();if(json.get("name").equals(email)){ClientIdentityidentity=newClientIdentity(ClientIdentity.Type.email,client.getName());Authorizationauthorization=DAO.getAuthorization(identity);ClientCredentialclientCredential=newClientCredential(ClientCredential.Type.passwd_login,identity.getName());Authenticationauthentication=DAO.getAuthentication(clientCredential);Accountingaccounting=DAO.getAccounting(authorization.getIdentity());if(accounting.getJSON().has("devices")){JSONObjectuserDevice=accounting.getJSON().getJSONObject("devices");if(userDevice.has(macid)){JSONObjectdeviceInfo=userDevice.getJSONObject(macid);deviceInfo.put("name",name);deviceInfo.put("room",room);}else{thrownewAPIException(400,"Specified device does not exist.");}}else{json.put("devices","");}accounting.commit();}}
Firstly, the list of authorized clients is fetched using DAO.getAuthorizedClients() and is put in an ArrayList. Then we traverse through each element of this ArrayList and check if the device exists by checking if there’s a key-value pair corresponding to the macid passed in the query parameter. If the device doesn’t exist, then an exception is thrown. However, if the macid exists in the traversed element of the ArrayList, then we put the name and the room of the device as passed as query parameters in that particular element of the ArrayList, so as to overwrite the existing name and room of the device of the user.
This is how an API has been implemented which allows Admins and higher user roles to modify the config of devices of any user.
In Open Event Android we are using fastlane to automate the process of releasing the app to the Play Store, otherwise without this tool we would have to sign the release apk everytime before making a release but with fastlane all we need to do is just merge the development branch with the master branch and the updated app is released in Play Store.
The first thing that we need to do is encrypt the signing keys and upload it to the repository so we will create an encrypted tar file of the signing keys and upload it to the repository.
Now we want to decrypt the tar file everytime we merge our development branch into the master branch. We will create a bash script which does the above task which looks like this.
#!/bin/shset -e
export DEPLOY_BRANCH=${DEPLOY_BRANCH:-master}if["$TRAVIS_PULL_REQUEST" !="false" -o "$TRAVIS_REPO_SLUG" !="fossasia/open-event-android" -o "$TRAVIS_BRANCH" !="$DEPLOY_BRANCH"]; thenecho"We decrypt key only for pushes to the master branch and not PRs. So, skip."exit 0
fi# Decrypt keys
openssl aes-256-cbc -K $encrypted_59a1db41ee4d_key -iv $encrypted_59a1db41ee4d_iv -in ./scripts/secrets.tar.enc -out ./scripts/secrets.tar -d
tar xvf ./scripts/secrets.tar -C scripts/
We need to define all these variables written after the $ sign as our Travis environment variables.
Next thing that we need to do is sign the apk so first thing that we check in the update-apk script is if we are on the master branch. We take the unsigned apk and sign it with the following commands.
That’s it! Now releasing an update to the playstore is as simple as sending a pull request to the master branch. A process that would have otherwise required few minutes has been reduced to just seconds.
Badgeyay is a badge generator service developed by FOSSASIA community for generating badges for conferences and events. Project is separated into frontend that is designed in EmberJS and backend that is created in Flask. Now The Badges tab in admin shows the total badges that are in the system. Along with different meta attributes like Badge creator name, date and other data. The main problem is that it doesn’t provide a way to search the badges from the admin panel. In this blog post i am going to explain about integrating badge search functionality in admin.
Main difficulty is to send the data to route components as we can’t pass the props, like we pass in components. The workaround is to send the query as route parameter.
findBadges() { var userTerm = this.get(‘user’); this.transitionToRoute(‘admin.badges.list’, userTerm); }
Extracting the query parameter and making request to backend
You must be logged in to post a comment.