Creating an apk in the apk branch using Travis CI

Post author:nikit19
Post published:August 10, 2018
Post category:Android Event FOSSASIA GSoC Open Event
Post comments:0 Comments

All Android apps in FOSSASIA have an apk branch where after a pull request is merged a new apk gets created so that even people who do not know how to setup the app locally can access it. Let’s see how it is done.

Lets get started

Create a bash file in the scripts folder and name it upload-apk.sh

Here is all the code that you require to create an apk in the apk branch.

First thing that we need to do is setup git. So we’ll set the user name and email just like we do when we setup git for the first time in our own systems.

git config --global user.name "Travis CI"
git config --global user.email "noreply+travis@fossasia.org"

Next we will clone the apk branch of the repository and copy all the files that we need ie the apk and the JSON files.

git clone --quiet --branch=apk https://fossasia:$GITHUB_API_KEY@github.com/fossasia/open-event-android apk > /dev/null
cd apk
\cp -r ../app/build/outputs/apk/*/**.apk .
\cp -r ../app/build/outputs/apk/debug/output.json debug-output.json
\cp -r ../app/build/outputs/apk/release/output.json release-output.json

Next we will create a new branch that contains only the latest apk. After that we will add the APK and then commit all those changes. You can see that the current date and time are printed out in the commit message.

git checkout --orphan temporary

git add --all .
git commit -am "[Auto] Update Test Apk ($(date +%Y-%m-%d.%H:%M:%S))"

We will delete the current apk branch and then rename the current branch to apk. In the end we will force push to origin since histories are unrelated.

git branch -D apk
git branch -m apk

git push origin apk --force --quiet > /dev/null

If you have already integrated Travis CI in your repository then you just need to add this line your travis.yml file.

after_success:
- bash scripts/update-apk.sh

Now every time a PR gets merged in the repository a new apk file is created in the apk branch of your repository.

Resources

Travis CLI – https://github.com/travis-ci/travis.rb#readme
Travis official documentation – https://travis-ci.org/

Attendee details in the Open Event Android App

Post author:nikit19
Post published:August 5, 2018
Post category:Android Event GSoC Open Event
Post comments:0 Comments

To be able to create an order we first need to create an attendee with whom we can associate an order. Let’s see how in Open Event Android App we are creating an attendee.

We are loading the event details from our local database using the id variable. Since only logged in users can create an attendee, if the user is not logged in then the user is redirected to the login screen. If any errors are encountered while creating an attendee then they are shown in a toast message to the user. When the user clicks on the register button a POST request is sent to the server with the necessary details of the attendee. In the POST request we are passing an attendee object which has the id, first name, last name and email of the attendee. The ticket id and event id is also sent.

attendeeFragmentViewModel.loadEvent(id)

if (!attendeeFragmentViewModel.isLoggedIn()) {
redirectToLogin()
Toast.makeText(context, "You need to log in first!", Toast.LENGTH_LONG).show()
}

 

attendeeFragmentViewModel.message.observe(this, Observer {
Toast.makeText(context, it, Toast.LENGTH_LONG).show()
})

attendeeFragmentViewModel.progress.observe(this, Observer {
it?.let { Utils.showProgressBar(rootView.progressBarAttendee, it) }
})

attendeeFragmentViewModel.event.observe(this, Observer {
it?.let { loadEventDetails(it) }
})

rootView.register.setOnClickListener {
val attendee = Attendee(id = attendeeFragmentViewModel.getId(),
firstname = firstName.text.toString(),
lastname = lastName.text.toString(),
email = email.text.toString(),
ticket = ticketId,
event = eventId)

attendeeFragmentViewModel.createAttendee(attendee)

We are using a method called loadEvent in the above code which is defined in the View Model let’s have a look. We are throwing an IllegalStateException if the id is equal to -1 because this should never happen. Then we are fetching the event from the database in a background thread. If we face any errors while fetching the event we report it to the user

fun loadEvent(id: Long) {
if (id.equals(-1)) {
throw IllegalStateException("ID should never be -1")
}
compositeDisposable.add(eventService.getEvent(id)
.subscribeOn(Schedulers.io())
.observeOn(AndroidSchedulers.mainThread())
.subscribe({
event.value = it
}, {
Timber.e(it, "Error fetching event %d", id)
message.value = "Error fetching event"
}))
}

This method is used to create an attendee. We are checking if the user has filled all the fields if any of the fields is empty a toast message is shown. Then we send a POST request to the server in a background thread. The progress bar starts loading as soon as the request is made and then finally when the attendee has been created successfully, the progress bar stops loading and a success message is shown to the user. If we face any errors while creating an attendee, an error message is shown to the user.

fun createAttendee(attendee: Attendee) {
if (attendee.email.isNullOrEmpty() || attendee.firstname.isNullOrEmpty() || attendee.lastname.isNullOrEmpty()) {
message.value = "Please fill all the fields"
return
}

compositeDisposable.add(attendeeService.postAttendee(attendee)
.subscribeOn(Schedulers.io())
.observeOn(AndroidSchedulers.mainThread())
.doOnSubscribe {
progress.value = true
}.doFinally {
progress.value = false
}.subscribe({
message.value = "Attendee created successfully!"
Timber.d("Success!")
}, {
message.value = "Unable to create Attendee!"
Timber.d(it, "Failed")
}))
}

This function sends a POST request to the server and stores the attendee details in the local database.

fun postAttendee(attendee: Attendee): Single<Attendee> {
return attendeeApi.postAttendee(attendee)
.map {
attendeeDao.insertAttendee(it)
it
}

This is how the attendee details are inserted into the local database. In case of a conflict the attendee object gets replaced.

@Insert(onConflict = OnConflictStrategy.REPLACE)
fun insertAttendee(attendee: Attendee)

Resources

ReactiveX official documentation : http://reactivex.io/
Vogella RxJava 2 – Tutorial : http://www.vogella.com/tutorials/RxJava/article.html
Androidhive RxJava Tutorial : https://www.androidhive.info/RxJava/

Handling No internet cases in Open Event Android

Post author:nikit19
Post published:July 29, 2018
Post category:Android Event FOSSASIA GSoC Open Event
Post comments:0 Comments

It’s pretty common to face connectivity issues and when the user has no Internet connection he should be shown an appropriate response rather than allowing him to send requests to the server. Let’s have a look how we are handling such cases in Open Event Android

Firstly we need to add the required permission in the manifest. We need the permission to access the user’s WiFi state and network state.

<uses-permission android:name="android.permission.ACCESS_WIFI_STATE" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />

We use this function to check if the user is connected to the Internet. This function return a Boolean which is true if the user is connected to the Internet otherwise it is false

private fun isNetworkConnected(): Boolean {
val connectivityManager = context?.getSystemService(Context.CONNECTIVITY_SERVICE) as? ConnectivityManager

return connectivityManager?.activeNetworkInfo != null
}

This function is used to decide which screen should be shown to the user. If the user has an active Internet connection he will see events fragment but if there is no Internet he will see the no Internet card.

private fun showNoInternetScreen(show: Boolean) {
rootView.homeScreenLL.visibility = if (show) View.VISIBLE else View.GONE
rootView.noInternetCard.visibility = if (!show) View.VISIBLE else View.GONE
}

Let’s see how the above two functions are used in the events fragment. When the app starts we check if there is a need to show the no Internet screen. If the user is not connected to the Internet, the no Internet card will be shown. Then when the user clicks on retry, the events fragment is shown again if the user is connected to the Internet.

showNoInternetScreen(isNetworkConnected())

rootView.retry.setOnClickListener {
showNoInternetScreen(isNetworkConnected())
}

Let’s have a look a how the XML code looks, here we are only seeing a part of the code as the rest is pretty obvious. We have cardView and inside it all the views ie ImageView,TextView are inside a LinearLayout which has a vertical orientation so that all these views appear below each other.

<android.support.v7.widget.CardView
android:id="@+id/noInternetCard"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="@dimen/layout_margin_medium"
app:cardBackgroundColor="@color/white"
app:cardCornerRadius="@dimen/card_corner_radius"
app:cardElevation="@dimen/card_elevation">

<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="@dimen/layout_margin_extra_large"
android:orientation="vertical">

<ImageView
android:id="@+id/noInternetImageView"
android:layout_width="@dimen/item_image_view_large"
android:layout_height="@dimen/item_image_view_large"
android:layout_gravity="center_horizontal"
android:layout_marginTop="@dimen/layout_margin_large"
android:scaleType="centerCrop"
app:srcCompat="@drawable/ic_no_internet" />

<TextView
android:id="@+id/noInternetTextview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_marginTop="@dimen/layout_margin_large"
android:text="@string/no_internet_message"
android:textSize="@dimen/text_size_medium"
tools:text="No Internet" />

References

AndroidHive tutorial – https://www.androidhive.info/2012/07/android-detect-internet-connection-status/
Official Android Documentation – https://developer.android.com/training/monitoring-device-state/connectivity-monitoring
StackOverflow – https://stackoverflow.com/questions/9570237/android-check-internet-connection

Opening Orga App through Intent in Open Event Android App

Post author:nikit19
Post published:July 28, 2018
Post category:Android FOSSASIA GSoC Open Event
Post comments:0 Comments

In the Open Event Android App there is a section called “Manage events”, we direct the users to the Organizer’s app if the users have the app already installed otherwise we open the organizer’s app in the playstore. This way users are motivated to create events using the organizer’s app. Let’s see how this feature was implemented.

So when the user clicks on the menu item “Manage Events” startOrgaApp function is called with the package name of the organizer’s app as the argument. Android apps are uniquely identified by their package names in the playstore.

override fun onOptionsItemSelected(item: MenuItem?): Boolean {

when (item?.getItemId()) {
R.id.orgaApp -> {
startOrgaApp("org.fossasia.eventyay")
return true
}
}

Let’s have a look at the startOrgaApp function that we are calling above. We are using a try/catch block here. We are opening the app in the try block if it is installed otherwise we throw ActivityNotFoundException and if this exception happens we will catch it and use the showInMarket function to show the Organizer’s app in the market.

private fun startOrgaApp(packageName: String) {
val manager = activity?.packageManager
try {
val intent = manager?.getLaunchIntentForPackage(packageName)
?: throw ActivityNotFoundException()
intent.addCategory(Intent.CATEGORY_LAUNCHER)
startActivity(intent)
} catch (e: ActivityNotFoundException) {
showInMarket(packageName)
}
}

Now since we know this will never raise an exception there is no try catch block as the app with this package name will always be there. We just need to create an intent with the required parameters and then just pass the intent to startActivity

private fun showInMarket(packageName: String) {
val intent = Intent(Intent.ACTION_VIEW, Uri.parse("market://details?id=$packageName"))
intent.flags = Intent.FLAG_ACTIVITY_NEW_TASK
startActivity(intent)
}

Lastly we just need to add the XML code to create a menu item. It should contain the id so that we can reference it and the title that will be visible.

<group android:id="@+id/profileMenu">
<item
android:id="@+id/orgaApp"
android:title="@string/manage_events" />
</group>

That’s it now you can open an app in the playstore if it is not installed or just open the app if the user has already installed the app.

Resources

Vogella Intent tutorial – http://www.vogella.com/tutorials/AndroidIntent/article.html
Official Android Documentation Intent – https://developer.android.com/guide/components/intents-filters
Javatpoint intent tutorial – https://www.javatpoint.com/android-explicit-intent-example

Making the Login fragment in the Open Event Android App

Post author:nikit19
Post published:July 19, 2018
Post category:Android Event Management FOSSASIA GSoC Open Event
Post comments:0 Comments

The first thing that was implemented in the Open Event Android app was the login screen. This is because there were many API endpoints which cannot be accessed without an auth token. Let’s see how this was implemented.

JWT token

Firstly let’s talk about what is this token that I mentioned. The token is JWT (Javascript Web Token) which includes certain information about the user, such as identifier and information about if the token is valid, when will it expire and a signature to verify if it was tampered.

Code

Let’s have a look at the code in the Login fragment. Firstly we have a boolean to check if the user should login or not. If this variable is true we will send the user to the MainActivity. Next if the user clicks on the login button we will check the username and password and then the we will decide whether to show the progress bar or not. If the user encounters an error while logging in that error is shown to the user in a toast message.

if (loginActivityViewModel.isLoggedIn())

redirectToMain()

rootView.loginButton.setOnClickListener {

loginActivityViewModel.login(username.text.toString(), password.text.toString())

}

loginActivityViewModel.progress.observe(this, Observer {

it?.let { showProgress(it) }

})

loginActivityViewModel.error.observe(this, Observer {

Toast.makeText(context, it, Toast.LENGTH_LONG).show()

})

loginActivityViewModel.loggedIn.observe(this, Observer {

Toast.makeText(context, “Success!”, Toast.LENGTH_LONG).show()

redirectToMain()

})

All these methods and variables are declared in the ViewModel so let’s have a look there to understand them. All our variables are of the type LiveData, this is the reason why we are using the observe method in the login fragment. The observe method is used to observe these variables and whenever their value is changed it notifies the observer. In the login function we are sending a request to the server in a background thread.

val progress = MutableLiveData<Boolean>()

val error = SingleLiveEvent<String>()

val loggedIn = SingleLiveEvent<Boolean>()

fun isLoggedIn() = authService.isLoggedIn()

fun login(email: String, password: String) {

if (email.isNullOrEmpty() || password.isNullOrEmpty()) {

error.value = “Email or Password cannot be empty”

return

}

compositeDisposable.add(authService.login(email, password)

.subscribeOn(Schedulers.io())

.observeOn(AndroidSchedulers.mainThread())

.doOnSubscribe {

progress.value = true

}.doFinally {

progress.value = false

}.subscribe({

loggedIn.value = true

}, {

error.value = “Unable to Login. Please check your credentials”

}))

}

Finally lets have a look at the login function of the AuthService class that was used above. We will throw an exception if the username or password is empty. Otherwise we will send a POST request to the server with the username and password. Then we will store the JWT access token which will be used when we will access the endpoints of the server.

fun login(username: String, password: String): Single<LoginResponse> {

if (username.isEmpty() || password.isEmpty())

throw IllegalArgumentException(“Username or password cannot be empty”)

return authApi.login(Login(username, password))

.map {

authHolder.token = it.accessToken

}

This is how the POST request for login looks

@POST(“../auth/session”)

fun login(@Body login: Login): Single<LoginResponse>

This all that is required to create the login fragment.

Resources

ReactiveX official documentation : http://reactivex.io/
Vogella RxJava 2 – Tutorial : http://www.vogella.com/tutorials/RxJava/article.html
JWT token Wikipedia: https://en.wikipedia.org/wiki/JSON_Web_Token