News and Weather

News and Weather

Asset Version: 1.0.0
  • Version 1.0.0
Last Published: Feb 16, 2018 By: Kony Team
159 0 0 50
The News and Weather app enables a user to browse through news headlines with different categories such as ‘Top Stories’, ‘World’, ‘Science’, ‘Technology’, and ‘Sports’, etc. Apart from that, the app lets the user glance through local news and local weather conditions. Also, it comes with an in-built learning module, Knowledge Framework, with overview and tutorials for Integration and Orchestration services.

App Preview Code

  • 9MWE8
 

Requirements

  • Visualizer Enterprise
  • Kony Fabric
 

Devices

 

Platforms

Features:

  • Easy Plug and Play: Import the app and run, you should be ready to launch the app
  • Explore News items around the world and get to know about local weather conditions
  •  Comes integrated with Knowledge Framework which showcases the ‘What’s and ‘How’s of the app features
  •  Learn about Integration and Orchestration Service capabilities of Kony Fabric

Prerequisites:

  • Kony Visualizer V8
  • Kony Fabric V8

The News and Weather app enables a user to browse through news headlines with different categories such as Top Stories, World, Science, Technology, Sports and so on. The app lets the user glance through local news and local weather conditions. The app makes use of Integration and Orchestration services of Kony Fabric to fetch data from the third party news and weather APIs, and populates the same data in the front end of the app. The app also has an in-built learning module, knowledge framework with overview and tutorials for Integration and Orchestration services.

News and Weather App Functionality

The section explains the functionality of the News and Weather app.

The front end of the app can be divided into three parts:

 

 News and Weather View

newsweather_view.png

News and Weather view is the landing screen of the application and contains all the news headlines along with the news categories available.
The news headlines are placed in the segment in the center canvas of the screen.
The news categories are provided in a horizontally scrollable list at the top of the screen just below the title bar.

You can tap on individual news items from the segment to navigate to the detail page of the corresponding news item with the full article.

Also, you can scroll through the category list at the top and tap on a particular item to load related news content in the main canvas of the application.

newsweather_det.png

Hamburger Menu

The hamburger menu of the app is accessible from the landing page by tapping the menu icon at the top left corner of the screen.

The menu contains links to Kony Base Camp and Kony Documentation web pages.

The menu also contains a Share icon at the bottom left corner, tapping on the icon opens the mail composer with preset text in the subject and body of the email. The email contains links to Kony Visualizer Mobile App and the News and Weather App.

newsweather_hamburger.png

Knowledge Framework

The Knowledge Framework screen of the app is accessible from the landing page by tapping on the blue floating button at the bottom right corner of the screen.

On tap of the Knowledge Framework button, the app presents a layover screen with a list of the key features covered in the application. Currently, the list for the News and Weather app contains only one item, i.e. Integration and Orchestration Services.

Upon selecting an item from the list presented, the user is navigated to a detail page containing the Whats and Howsof the corresponding key feature along with appropriate links to the documentation and tutorials.

The What’s it? section provides an overview of the feature whereas the How to use? section contains usage information of the feature. The later may include blogs, video tutorials or code fragments as applicable.

newsweather_key.pngnewsweather_integ.png

The following sections will help you use the News and Weather app.

Prerequisites

Before you start using the News and Weather App, ensure you have the following:

  1. A Kony Account
  2. Kony Visualizer 8.0
  3. Kony Fabric 8.0

Importing the News and Weather App To Visualizer

There are three ways of importing the News and Weather App to Visualizer

  1. From Visualizer Samples
  • Launch Visualizer and Sign In.
  • Click Project menu and select New Project.
  • Select Use Sample App and click Choose.
  • Select News and Weather from the list and click Choose.
From Visualizer Marketplace
  • Launch Visualizer and Sign In.
  • Click Marketplace menu and Browse.

    If you have not logged in to Visualizer, the prompt will ask you to login and subsequently open the Marketplace browser inside Visualizer

  • Search for News and Weather and click the corresponding thumbnail. The News and Weather detail page opens up within the browser
  • Click Import to Workspace.
From Marketplace Web
  • Open a web browser and feed https://community.kony.com/marketplace into the address field.
  • Search for News and Weather and click the corresponding thumbnail. The News and Weather detail page opens.
  • Click Login to Download (in case you are not logged in already) or Download.
  • Launch Visualizer and Sign In.
  • Click Project >> Import >> Local Project
  • Starter:
  1. Browse through the file explorer and select the zip you just downloaded.
  2. Click Open.
Enterprise
  1. Select Select archive file in the dialog window and click Browse.
  2. Browse through the file explorer and select the zip you just downloaded.
  3. Click Open.
  4. Select the Import services into Kony Fabric check box option
  5. Click Finish.
  6. Click File menu and select Publish to Kony Fabric.

Configuring UI of News and Weather App

The app comes with the UI preconfigured, where no additional wiring (or) coding is required to make the app work. One can simply import the app to Visualizer and run (or) publish in order to get the app working. If a user needs to modify the UI off the app, the guidelines are provided below.

The UI of the app can mainly be categorized into three parts:

  • News List
  • News Categories
  • News Details

 

Modifying UI of News List

The News List makes use of a Segment widget to render the content in the landing screen of the app. The segment widget consists of repetitive templates that a user can create(or) modify.

Mentioned below are the steps to modify the template for the segment:

  • Import project to Visualizer. For detailed information on importing the project, refer Importing News and Weather to Visualizer.
  • Go to Templates tab in project explorer.
  • In the list provided, expand Mobile >> Segments >> segNewsDetails. segNewsDetails is the segment template used in the app.
  • Expand segNewsDetails to explore the elements.

newsweather_segNews.png

As shown in the above image , an outer container (flexMainNews) is used to carry the elements inside the template.

An Image widget (imgNewsIcon) is added inside the outer flex container to render the image related to the news.

The right-hand side of the template is contained within another flex container (flexTitAndDesc). This flex in turn contains a label widget (NewsTitle) for the title of the news item and a rich text widget (newsShortDesc) for providing a short description of the news item.

The user can either remove elements from the template by deleting them from the segNewsDetails template in project explorer or resize/rearrange/redesign them by selecting a particular element as changing its properties from the Look/Skin tab on the right.

The screenshots shown below explain how to change the appearance(or)position(or)size of different elements

  • Increasing the height of the description rich text.

    newsweather_segHeight.png

  • Changing the font color for the title label.

    newsweather_segFont.png

Modfying UI of News Categories

The news categories section makes use of a flex container in the Flow Horizontal mode. The individual category names are added to the flex in a particular structure. The mentioned structure and steps to add /modify the UI of this section are provided below:

  • Import the project into Visualizer. For detailed information on importing the project, refer Importing News and Weather to Visualizer.
  • Click Project in the project explorer on the right hand side of the window.
  • Expand Mobile>>Forms>>frmNewsAndWeather.
  • Inside frmNewsAndWeather, expand flxFullPage>>headerContainer>>flexNewsCatagories. flexNewCatagories is the element containing the items of the scrollable menu.
  • Upon expanding flexNewsCatagories, you can find an array of flexes. Each category flex here contains a label with the category name.


newsweather_flexCat.png

You can directly delete the category flex from the project explorer. To add a category, copy one of the existing categories and paste the same inside flexNewsCatagories

You can also change the button border color, button selection color, font color, and so on for the items in the scrollable menu. Each item inside the category flexes utilizes two skins:

  • sknCategoryS
  • sknCategoryUS

You can search for these skins in the Skins tab of the project explorer on the right side of the screen.

newsweather_skin.png
The background color and opacity, font color, type, size and opacity, and border style, color and opacity can be edited by the user from this menu. Changing the properties in this section reflects throughout the application where ever the particular skin is used.

Integration Service call and Data binding to front end elements

The app makes use of Integration and Orchestration services to fetch data from third party APIs through Kony Fabric, and subsequently formats the same data and renders it on the front end. The code segment for the above operation is found in frmNewsAndWeatherController.

Below is the code fragment used in the app in order to make a service call through Kony Fabric and obtain news and weather details:

getNews: function(category)
{
    kony.print("In Get News");
    showLoadingScreen("Fetching News..");
    kony.print("In Get News2");
    try 
	{
        var intgService = 
	KNYMobileFabric.getIntegrationService(configObject.services.news.SERVICE_NAME);
	//Accounts is service name and accountsClient is Accounts integration service instance
        
	intgService.invokeOperation(configObject.services.news.OPERATION_NAME, {}, 
	{
       "category": category
       },
	this.getNewsSuccessCallback.bind(this), this.getNewsFailureCallback);
       }
	catch (excp)
	{
        dismissLoadingScreen();
        alert("In catch of get News" + JSON.stringify(excp));
       }
},

getNewsSuccessCallback: function(response)
{
    dismissLoadingScreen();
    kony.print("Success Fetching News For Given Category..");
    kony.print("Start Processing Data to Show News...");
    this.processResponse(response);
}

Once the response is received, the Visualizer app processes the response to extract the image and short description text by parsing the HTML and subsequently maps the data to the segment row templates. The code fragment for the above operation is provided below:

processResponse: function(response)
{
	var processedData = [];
	for (var i = 0; i < response.news_list.length; i++)
	{
		var rowData = {};
		rowData = this.getImageAndDesc(response.news_list[i].news_item.
description); if(response.news_list[i].news_item.title !== undefined && response.news_list[i].news_item.link!== undefined && rowData.shortDesc !== undefined) { rowData.title =((response.news_list[i].news_item.title).
substring(0,50))+"..";    rowData.link = response.news_list[i].news_item.link;    processedData.push(rowData); } else {    kony.print("There is no title and link"); } } this.showProcessedDataInSegment(processedData); }, getImageAndDesc: function(description) { var desAndImgSrc = {}; //Getting the img source by parsing the html string var startPosition = description.search('img src="//'); if (startPosition !== -1) { var endPosition = startPosition + 10; kony.print("\n--start-->" + startPosition); while (description[endPosition] != '"') { endPosition++; } var imgSrc = description.substring(startPosition + 9, endPosition); imgSrc = "http:" + imgSrc; desAndImgSrc.imgSrc = imgSrc; } else { kony.print("imgSource Not Found"); } //Getting the short description by parsing the html string var shortDesc = description.split("<font size=\"-1\">"); if(shortDesc[2]!==undefined && shortDesc[2]!== null) { var descLen = shortDesc[2].length; if (descLen > 60) { descLen = 60; } else { kony.print("descLen is Less than 120"); } desAndImgSrc.shortDesc = shortDesc[2].substring(0, descLen) + ".."; } else { kony.print("Short description Not Found"); } return desAndImgSrc; }, showProcessedDataInSegment: function(processedData) { kony.print("The Final ProcessedData is" + JSON.stringify(processedData)); this.view.segNews.widgetDataMap = { "imgNewsIcon" : "imgSrc", "NewsTitle" : "title", "newsShortDesc" : "shortDesc" }; this.view.segNews.removeAll(); this.view.segNews.setData(processedData); }

Configuring the corresponding Kony Fabric App

The app makes use of Integration and Orchestration services of Kony Fabric to render the News and Weather entries from third party news and weather APIs. The fabric app is already configured and no further configuration is required for the application to run. However, a user can configure the corresponding Kony Fabric app with a different set of URLs to customize the app.

The video link provided below provides a tutorial on how the backend of this particular app was configured:

https://www.youtube.com/watch?v=3fIIVqlnUVM