DEV Community: Jolene

How to Set Up Weekly Notifications in Android: Recurring Notifications, Styling Options, and More.

Jolene — Mon, 10 Apr 2023 15:02:45 +0000

As a developer, you know that user engagement is crucial for the success of your app. But how do you keep users coming back? One simple solution is to implement weekly notifications that remind them to use your app regularly. In this blog post, I'll walk you through the process of setting up weekly notifications for your app using Android's AlarmManager and Calendar classes. Whether you're building a productivity app, a fitness tracker, or a meditation guide, these notifications can help your users stay on track and achieve their goals.

This is what happens when you set the scheduled weekly notification (to 1213pm every monday).

This post will cover the following

Creating Immediate Notifications
Creating Weekly Notifications (doesn't repeat if user doesn't re-enter the app)
Creating Recurring Notifications (repeats even if user doesn't re-enter the app)
Styling the Notification

Creating Immediate Notifications

For every notification we wil need to set up the following things Notification Manager, Channel (Id, Name and Importance), notification builder (where you add your notification details) and finally calling .notify() on the manager together with the builder to show the notification.



    fun triggerImmediateNotification(context: Context) {
        val notificationManager = context.getSystemService(NOTIFICATION_SERVICE) as NotificationManager
        // create notification channel
        val channelId = "my_channel_id"
        val channelName = "My Channel"
        val importance = NotificationManager.IMPORTANCE_HIGH
        val channel = NotificationChannel(channelId, channelName, importance)
        notificationManager.createNotificationChannel(channel)

        // build notification (style it here)
        val notificationBuilder = NotificationCompat.Builder(context, channelId)
            .setSmallIcon(R.drawable.ic_notifications)
            .setContentTitle("My Notification Title")
            .setContentText("This is an immediate notification.")
            .setPriority(NotificationCompat.PRIORITY_HIGH)
            .setAutoCancel(true)

        // set it to notify immediately
        val notificationId = 1
        notificationManager.notify(notificationId, notificationBuilder.build())
    }

Creating Scheduled Weekly Notifications

Now to the part that we're all here for. How do we set up weekly notifications? We will move to our MainActivity for the below code, meaning this code will run everytime the user enters the app

Scheduling The Notification

What day of the week and time do you want to show the notification? We don't have to store this in preferences as if its within the same week it will always be set to sunday of this week.



// sunday 12pm in the afternoon
val calendar = Calendar.getInstance()
calendar.set(Calendar.DAY_OF_WEEK, Calendar.SUNDAY) // Sunday
calendar.set(Calendar.HOUR_OF_DAY, 12) // 12pm
calendar.set(Calendar.MINUTE, 0)
calendar.set(Calendar.SECOND, 0)

Then we need to check if the scheduled time has passed. This happens when user opens the app again after recieving a notification, we will want to reset the calendar day to the following week.



// Check if the scheduled time is in the past, if it is, add a week
if (calendar.timeInMillis < System.currentTimeMillis()) {
    calendar.add(Calendar.WEEK_OF_YEAR, 1)
}

Next, we will set up a intent which will be sent to the NotificationReciever Class which we will be working on later



val notificationIntent = Intent(this, NotificationReceiver::class.java)
notificationIntent.putExtra("notificationId", 1)
notificationIntent.putExtra("message", "Time to kick back, relax, and focus on your well-being. Don't forget to use our app to track your progress and goals. Let's make this week amazing together!")
notificationIntent.putExtra("title", "Self-Care Sunday!")
val pendingIntent = PendingIntent.getBroadcast(
    applicationContext,
    0,
    notificationIntent,
    PendingIntent.FLAG_UPDATE_CURRENT or PendingIntent.FLAG_MUTABLE)

We will also need to set up the alarm manager to push the intent when the time comes.



val alarmManager = getSystemService(ALARM_SERVICE) as AlarmManager
alarmManager.setExact(AlarmManager.RTC_WAKEUP, calendar.timeInMillis, pendingIntent) // will not repeat until user enters app again

Responding to Alarm and Notification: NotificationReciever Class

Now let's handle the intent that we scheduled initially



class NotificationReceiver : BroadcastReceiver() {
    // creates notification when it is time

    override fun onReceive(context: Context, intent: Intent) {
        val notificationId = intent.getIntExtra("notificationId", 0)
        val message = intent.getStringExtra("message")
        val title = intent.getStringExtra("title")

        val notificationManager = context.getSystemService(NOTIFICATION_SERVICE) as NotificationManager
        val notificationBuilder = NotificationCompat.Builder(context, "my_channel_id")
            .setSmallIcon(R.drawable.ic_notifications)
            .setContentTitle(title)
            .setContentText(message)
            .setPriority(NotificationCompat.PRIORITY_HIGH)
            .setAutoCancel(true) // styling the notification

        notificationManager.notify(notificationId, notificationBuilder.build())
    }
}

Creating Recurring Notifications

We will first create a function to schedule the notification based on a Calendar.



    private fun scheduleRecurringNotification(calendar: Calendar, title: Int, message: Int){
        // set recurring every 2 days
        val notificationIntent = Intent(this, NotificationReceiver::class.java)
        notificationIntent.putExtra("notificationId", 2)
        notificationIntent.putExtra("title", applicationContext.getString(title))
        notificationIntent.putExtra("message", applicationContext.getString(message))
        val pendingIntent = PendingIntent.getBroadcast(
            applicationContext,
            0,
            notificationIntent,
            PendingIntent.FLAG_IMMUTABLE or PendingIntent.FLAG_UPDATE_CURRENT
        )

        val alarmManager = getSystemService(ALARM_SERVICE) as AlarmManager
        val interval = 2 * 24 * 60 * 60 * 1000 // interval in milliseconds
//        val interval = 60000 // for every minute during testing

        alarmManager.
        setRepeating(
            AlarmManager.RTC_WAKEUP,
            calendar.timeInMillis,
            interval.toLong(),
            pendingIntent
        ) // repeating alarm (repeats every 2 days based on interval
    }

We will then use the function to schedule the notification like this



    fun scheduleEvery2DayNotification() {
        // will be reset when user uses the app, (if daily user, wont see notification)
        val calendar = Calendar.getInstance()
        calendar.set(Calendar.HOUR_OF_DAY, 21)
        calendar.set(Calendar.MINUTE, 0)
        calendar.set(Calendar.SECOND, 0)
        scheduleRecurringNotification(calendar, R.string.day2_notification_title , R.string.day2_notification_text)
    }

Styling Notifications

As we mentioned earlier, we will using the notification builder to style the notification as well.

There are a few common customizations that I will be covering. Let's now try to make a notification like this.



val notificationBuilder = NotificationCompat.Builder(context, "my_channel_id")
    .setSmallIcon(R.drawable.icon) // small icon
    .setContentTitle(title) // content title
    .setContentText(message) // content text (this shows when the notification is not expanded)
    .setPriority(NotificationCompat.PRIORITY_HIGH)
    .setAutoCancel(true)
    .setLargeIcon(BitmapFactory.decodeResource(context.resources, R.drawable.icon)) // you can also set a big icon on the right like how Gmail does it
    .setStyle(NotificationCompat.BigTextStyle()
        .bigText(message)) // this is the text shown when the notification is expanded
    .addAction(R.drawable.ic_notifications, "Write", pendingIntent) // adding actions (buttons)
    .setDefaults(NotificationCompat.DEFAULT_ALL)

More on styling Notifications here: https://developer.android.com/develop/ui/views/notifications/expanded

Thanks for reading, leave a comment and let me know what you think! Hope that helps with creating notifications in Android! :)

Socials

Github LinkedIn Portfolio

How to Deploy MERN Application on Render.com, a Heroku Alternative

Jolene — Thu, 06 Oct 2022 08:45:51 +0000

Now that Heroku has shared plans of removing its free tiers, where else can developers like us host hobby projects?

I was researching on good alternatives to Heroku and came across render.com, railway.app as the 2 best possibilities. Of course there are many others like Fly.io and more.

Since I planned to host an app that needed WebSockets support I couldn't use Railway. Other options like Vercel also did not support WebSockets.

I hosted my MongoDB backend on MongoDB Atlas using its free Shared Plans option with only 512mb of space. It's quite limited but I only wanted to host it as an App Demo so it's fine for me.

Prereqs:

Github Account
Render Account
MongoDB Account
A Fully Functional MERN Application

Here's the my file structure:

If you happen to have the same file structure, the scripts would work for you
If your file structure is slightly different, feel free to edit the package.json scripts mentioned in this article.

(root)/
├── client/
│   ├── src
│   ├── public
│   ├── node_modules
│   ├── .env
│   ├── .gitignore
│   ├── package-lock.json
│   └── package.json
├── server/
│   ├── models
│   ├── index.ts
├── node_modules
├── .env
├── .gitignore
├── package-lock.json
└── package.json

Setting up MongoDB Atlas

A guide on how to set up MongoDB Atlas. Get your query string, something like this MONGO_URI='mongodb+srv:...mongodb.net/mern-app?retryWrites=true&w=majority'

You will also need to add whitelist IP addresses from Render.com later as well, but for now you can add your current IP address to test locally.

Preparing our code

Since we're using WebSockets I want my frontend routes to show on my backend routes. So to serve static pages in production, add this into the server/index.js

// Create a proxy for the CRA dev server
if (process.env.NODE_ENV === 'production') {
    //*Set static folder up in production
    app.use(express.static('../client/build'));
    app.get('*', (req,res) => res.sendFile(path.resolve(__dirname, '../client', 'build','index.html')));
}else if(process.env.NODE_ENV === 'development'){
    const feProxy = proxy("http://localhost:3000", {
    proxyReqPathResolver: (req) => url.parse(req.originalUrl).path || ""
    });
    app.use("/*", feProxy);
}

In your package.json in root, add the following scripts:
We will later use render-postbuild as our build command and npm run server as our start command.

"scripts": {
    "start": "cd server && ts-node-dev index.ts",
    "server": "cd server && ts-node-dev index.ts",
    "client": "npm start --prefix client",
    "clientinstall": "npm install --prefix client",
    "dev": "concurrently \"npm run server\" \"npm run client\"",
    "build": "npm install &&  npm install --prefix client && npm run build --prefix client",
    "render-postbuild": "npm install && NPM_CONFIG_PRODUCTION=false npm install --prefix client && npm run build --prefix client"
  },

Another thing to take note is that your app should run without everything under devDependencies as these dependencies would not be installed in production, which could lead to errors when deploying the app.

For me, my server needed all devDependencies even on production so I moved current devDependencies to dependencies instead. My client did not need tailwind, postcss and autoprefixer in production so those could be left in devDependencies.

"devDependencies": {
    "autoprefixer": "^10.4.12",
    "postcss": "^8.4.17",
    "tailwindcss": "^3.1.8"
  }

Once you're done with all the changes, initialise a repository on Github, commit and push changes to your Github Repository.

Deploying on Render

Creating Project on Render

Create a New Web Service with Render

Connect your Github Account

After connecting your account you can select the repository with your project that you'd like to deploy
Then click Connect

Setting Configurations

Remember I mentioned we would need to enter more IP addresses to MongoDb Atlas?

Get your Static Outbound IP addresses here and enter them into Atlas

Configuring Start and Build Commands

Configuring Environmental Variables

NODE_ENV should be = production
MONGO_URI is the string we got from MongoDB Atlas
JWT_SECRET is one of the env variables my app needs, which is not necessary for your app, but this is where you add everything in your .env file when you ran the app locally.

Next, Let Render.com deploy your site!
Click on Events > Deploy to see Deployment Logs
Things to check for

Ensure that Build command is successful
Ensure that Start command is successful If anything fails, you would have to read your logs to see what failed, a possible reason would be are that the project did not build correctly (ensure that you did npm install for both the server and client)

It may take over 10 minutes for your site to go live so go take a break in the meantime!

That's It! The site is Live! :)

Tada! It's live!

If its live and you're still having issues like a server selection error with mongo, you might want to check your MONGO_URI and ensure that you're using this env variable and not hardcoding it.

Thanks for reading, leave a comment and let me know what you think! Hope that helps with deployment! :)

Socials

Github LinkedIn Portfolio