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
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
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
Then the blogId string
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
#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