HOW TO: Blogger Blog to Ionic App

In the tutorial we are going to create an Ionic app from a Blogger blog. It will take about 1 hour. The first steps are to get an API Key so that you can use the Blogger API and then find a suitable blog.

Get an API Key:

  • Sign in to Google.
  • Click “Get a Key” here.
  • Select project or create a new project.
  • Click “Enable API”.
  • That will generate a random string, which is your API key.
    • I will use XXX-API-KEY-XXX. Replace that with your API key.

Find a suitable blog:

  • I will use https://blogger-developers.googleblog.com/.
  • Call the Blogger API with your key (XXX-API-KEY-XXX) and url of the blog (URL-OF-BLOG).
    • https://www.googleapis.com/blogger/v3/blogs/byurl?key=XXX-API-KEY-XXX&url=URL-OF-BLOG
    • The URL must contain “https” or “http” at the beginning.
  • Response type one:
  • Response type two:
    • A JSON object with some basic information about the blog, including name and description.
    • This means that the url is valid and suitable for this tutorial.
    • blank template.
    $ sudo npm install -g ionic cordova
    $ ionic start blog-app blank
    $ cd blog-app
    • Create a provider and a page for you app.
    $ ionic generate provider constants
    $ ionic generate page post
    • Run the app to see progress.
    $ ionic serve --lab

    app.module

    • Import the HTTP module.
    • Add the HTTP module to imports.
    • Import the post page.
    • Add the post page to declarations and entryComponents.
    import { HttpModule } from '@angular/http';
    import { PostPage } from '../pages/post/post';
    
    declarations: [
      PostPage,
      ...
    ],
    imports: [
      HttpModule,
      ...
    ],
    entryComponents: [
      PostPage,
      ...
    ],

    Constants Provider

    • Create two properties to store the url of the blog and your API key.
    private url = 'https://blogger-developers.googleblog.com/';
    private apiKey = 'XXX-API-KEY-XXX';
    • Create a function to return each property.
    getUrl() {
      return '' + this.url;
    }
    getApiKey() {
      return '' + this.apiKey;
    }

    Home Page

    • Import the Http library and add it to the constructor.
    • Import the Constants provider and add it to the constructor.
    import { Http } from '@angular/http';
    import { ConstantsProvider } from '../../providers/constants/constants'
    constructor(constants:ConstantsProvider, http: Http, ... ) { ... }
    • Create a property for the title of the blog.
    • Create a property for the list of blog posts.
    title: string;
    posts: any[];
    • Inside the constructor:
      • Call the Blogger API to get the details of the blog, using the information from the Constants provider
      • Set the title.
      • Call a function to get the posts, passing the posts API link.
    http.get('https://www.googleapis.com/blogger/v3/blogs/byurl?key=' + constants.getApiKey() + '&url=' + constants.getUrl())
      .subscribe(response => {
        let data = response.json();
        this.title = data.name;
        this.getPosts(data.posts.selfLink);
      });
    • Create a getPosts() function:
      • Get the posts from the API, using the key from the Constants provider.
      • Set the posts property.
    getPosts(url:string) {
      this.http.get(url+'?key='+this.constants.getApiKey())
        .subscribe(response => {
          let data = response.json();
          this.posts = data.items;
        });
     }
    • In the html file, display the blog title in the header. Set the padding to 0.
    <ion-navbar>
      <ion-titlestyle="padding: 0;">
        {{ title }}
      </ion-title>
    </ion-navbar>
    •  In the html content:
      • Show a list of blog posts.
      • Display the title and author of each blog.
      • Add a click listener to open the post.
    <ion-list>
      <button ion-item *ngFor="let post of posts" (click)="openPost(post)">
        <h2 [innerHTML]="post.title"></h2>
        <p [innerHTML]="post.author.displayName"></p>
      </button>
    </ion-list>
    • At this point, you will be able to see the list of posts.
    • Import the post page.
    import { PostPage } from '../post/post';
    • Create and openPost(post) function to open the post page and pass the selected post as a parameter.
    openPost(post) {
      this.navCtrl.push(PostPage, {post:post})
    }

    Post Page

    • Create a property of the post.
    • Get the post from the navigation parameters.
    private post: any;
    constructor( ... ) {
      this.post = navParams.get('post');
    }
    • Change the header title to the title of the post
    <ion-header>
      <ion-navbar>
        <ion-title>{{ post.title}}</ion-title>
      </ion-navbar>
    </ion-header>
    • Add a heading to show the full title of the post.
    • Add div to contain the post.
    <ion-content padding>
      <h2 [innerHTML]="post.title"></h2>
      <div [innerHTML]="post.content.rendered"></div>
    </ion-content>
    • At this point, you will be able to see the post in your app.

    What’s Next?

    Well done! You turned a Blogger blog into an app. You’ve seen what it looks like on your web browser. The next thing is to view it on your phone or tablet and see what it would as a native app. Ionic DevApp is the quickest and easiest way to do this if you have and iPhone or Android.

    The app is a good start, but there are still many ways to improve it. Here are some ideas:

    • Add styling to the app and take advantage of the variables.scss file.
    • Add a refresher so that the user can pull down to get the latest posts in a category.
    • Detect when the users scrolls to the bottom of the category list and load older posts.
    • Check out the Blogger API Documentation and see what else you can implement.

    My source code: https://github.com/bensearle/blog-ionic-blogger

    Related: HOW TO: WordPress Blog to Ionic App

2 thoughts on “HOW TO: Blogger Blog to Ionic App”

  1. Hello sir, I did as you explain. it’s working good and getting post…but how to open next page or get more post?

    1. After you call the posts API
      e.g. https://www.googleapis.com/blogger/v3/blogs/3213900/posts?key=XXX-API-KEY-XXX
      The returned object will have “nextPageToken: PAGE_TOKEN”, pass that value in the next call as pageToken=PAGE_TOKEN
      e.g. https://www.googleapis.com/blogger/v3/blogs/3213900/posts?key=XXX-API-KEY-XXX&pageToken=PAGE_TOKEN

      The returned object will have a nextPageToken if there are more posts and a prevPageToken if there are previous posts.

      If you are “orderBy=updated”, then be careful. When I tried, I found that pagination and “orderBy=updated” did not produce the expected results. https://groups.google.com/forum/#!topic/bloggerdev/7jPDLv8HUaE

Leave a Comment

Your email address will not be published. Required fields are marked *