Skip to content

Simple Mobile App for your Blog

Posted in Javascript, and Personal

So you have this nice blog, and thinking of how to get those on the go to carry what you publish on them in a simple mobile app? Maybe the thought of a mobile app for your blog has crossed your mind.

On a second thought, you felt your platform is not big enough to be worth paying for a dedicated mobile app.

Well, maybe, you don’t have to, but can get a simple cross-platform native-like mobile app tailored for your blog in these simple steps, using the My Mobile App boilerplate source code from Khophi’s Dev.

Although the process below wouldn’t involve any form of coding on your part, you might need a development environment to be able to compile the source code into the different platforms executables of your choice.

This article assumes you have a little bit of experience with the Ionic Framework

 

Step 1 – Into JSON

Your platform should be running WordPress, or any content management system, although WordPress is by far, the most popular and easy to play with.

In this article, WordPress is used, however, the principles involved in the process still holds for whatever the CMS you use.

Install the JSON API WordPress plugin on your WordPress website. Activate and move onto step 2.

Step 2 – The Source Code

Download the source code for the My Mobile App. Install all the necessary dependencies using npm install within the project folder.

Bring it up by running ionic serve to see it open in the browser.

The only areas you might want to make changes to the source code are these:

  • In the rss-service.ts file, change the url = 'https://blog.khophi.co/api/get_recent_posts/' to anything of your choice. In your case, you might want to replace the 'https://blog.khophi.co/ with your blog’s URL.
  • The about.html file, add the information about your Blog.
  • Find the config.xml and make the appropriate changes in there.

Step 3 – Build Away

Add the platforms you wish to build the app for. For Android, simple run ionic platform add android.

If all is well, then ionic build android

You’ll be instructed where the built .apk file is stored. It is important to sign the .apk, before publishing. An in-depth explanation on how to do that is available on the Ionic docs website: http://ionicframework.com/docs/guide/publishing.html

Step 4 – Share with Friends

Your app is ready to be downloaded. Share the link from the Play Store or App Store, and let your friends and family take it for a spin!

 

  • Thank you for the tutorial. I followed each step but when the app is rendered, the list of posts is stuck on loading. Even if I don’t update the URL, leaving your original link in place, it is still stuck on loading. The about page works, but the home tab doesn´t, sadly. Awesome idea. Any help on how to get it to work?

    • Do you get any errors why it ain’t loading?

      • Weird, no error messages.

        • Consider using a different API endpoint then.

          However, my

           https://blog.khophi.co/api/get_recent_posts/ 

          still works though.

          And since there’re no errors, I have no idea what might be going wrong.