Blogger api in sketchware | Create app for a blogger blog

How to use blogger api in sketchware to make an app for your blog? 

 
Hi friends, today in this tutorial I will show you how to make a simple app for your blogger blog using the free blogger api in sketchware .

 

You can show all your posts ‘title’, ‘links to those posts’ the ‘date published’ and many more. Remember you can do many more things like showing the featured images, but today we will only learn the basic.
 
We will be fetching the featured images in the advance tutorial using html parsing . 
Just go to the ‘html parsing in sketchware’ tutorial for more info.
 
without waisting any time let’s see how we can use the blogger api in our sketchware made application. 
 

Step 1 : create api key 

 
First create a new project and get your api key from Google’s api console. You can check this documentation to know how to get your api key and ‘blog id’.
 

Step 2 : Create a new project on sketchware

 
After creating your ‘api key’ and getting ‘blog id’ move on to the sketchware application and create a new project.
 

Step 3 : Setup your custom view

 
Create a new custom view called ‘cust’ 
 
Drag and drop one linear(H). 
 
Inside the linear(H) add TextViews and linear(H) as shown below image
we will use textview1 as the blog post title
 
textview2 as the url of the blog post. 
 
and textview5 as the date of publish
 
Set the text of textview3 as url and textview4 as published on. 
 
You can change colors, sizes and so on. Overall it’s on you how you make your app look beautiful. But do not change the id’s, other than said above. 
 

Step 4 : Setup your main.xml

 
Into your ‘main.xml’ drag and drop a ‘listview’ a ‘linear(H)’ and a ‘progress bar’. 
 
Remember the order, first put the listview then linear(H) and inside it put your progress bar. 
 
Your app will load top things first so we need to put the listview at the top to load your blog faster. 
 
Click on the listview and set ‘cust’ as your custom view. 
 
 

 

Set height and width of linear(H) to match parent. Set the padding zero and gravity to ‘center_horizontal‘ and ‘center_vertical‘. 
 
Drag and drop the progress bar inside the linear(H) and make it’s height and width to 80px.
Set indeterminate true.
 
And the final product should look like this 
 
 
 
Step 5 : Create the variables and component
 
Now create the required variables and components
 
4 String variables called : apiKey, blogId, url and items.
 
1 map variable called: map
 
1 listmap variable called : Lmap
 
Create a new Request network component called rn
 

Step 6 : Setup the custom events

 
Now Create and customise the Events. 
 
#Now ‘on create event’ 
 
1. Set the String apiKey to your api key
 
2. Set the String blogId to your blog id
And
3. set the String url as shown in the below picture (use 3join block to make the full url) 
4. Request network rn start network request to method get to url url with tag A

code of the join and blocks are  

https://www.googleapis.com/blogger/v3/blogs/

Then the blogId string
 
Then /posts?key=
 
Then the apiKey string
 
 
here I have hidden my blog Id and the api key for misuse.
 
#Listview1 onBindCustomView event
 
drag and drop 3 text view set text block.
 
Inside this three TextView blocks add blocks called get value at ___ key___of listmap.
 
Set the keys of these blocks as title, url and published
 
 

 

Do exactly as the picture, otherwise app may not work properly. 
 
Now go to component event add two event called Request Network onResponce and Request Network onErrorResponce 
 
 
 
#Request Network on Responce event
 
add a json to map block, AddSourceDirectly block, then json to Listmap block, listview setListCustomViewData, Listview Refresh data, and progress bar setVisible gone block. 
 
Do these as the below image
 

 

Code for the add source directly block

 
items = (new
Gson()).toJson(map.get(“items”),
new
TypeToken<ArrayList<HashMap<String, Object>>>(){}.getType());
 
 
#Request Network onErrorResponce event
 
Add progress bar setVisible gone block and a toast block
You can toast your own error message or use the default error message
 

 

and that’s all. Just run your app and it will load all your website’s post in form of a list view. 
 
You can also open the specific post in to a webview when it is clicked.
 
Just create a new page and using Intent pass the url of the post. And load the webview.
 
Thanks for reading. 
Please comment your suggestion and let me know if there is any problem.
 

link to Google’s api console

This Post Has 6 Comments

  1. Anonymous

    nice post i was searching all over the internet but no where got the solution. this article helped me a lot while developing an application for my blog using sketchware . thanks a lot

  2. riajul molla

    not working

  3. Riajul Molla

    Not Working…. Its Showing That Its An Invalid Token “items = (new Gson()).toJson(map.get(“items”),
    new
    TypeToken<ArrayList<HashMap>>(){}.getType());”

    1. Kaushik

      hi Riajul, please remember while coping the code please remove the spaces from it. please remove the unwanted spaces from the code to avoid the errors.if the problem still persist then try to type the code instead of coping it .hope it will help you
      let me know if your problem is resolved. thanks

  4. Bathri Vijay

    Thanks a lot! It works perfectly. The first time that I created an app using API.
    First, I got two errors and one warning.
    Then, I enabled AppCompat.
    And then, I changed map.get(“items”) to map.get(“items”)
    Everything works perfect, except the above two.

Leave a Reply