Get started building a cross-platform mobile app using React Native to fetch news on a company and gain insights using Watson Discovery.
Create a cross-platform mobile app that fetches news for a specific company. The application uses Watson Discovery to get news articles with sentiment, keywords, and related concepts. This application is easily customizable and provides a starting point to use Watson Discovery in your own React Native applications.
Following completion of this pattern, the developer will understand how to:
- Create a cross-platform mobile application using React Native
- Use Watson Discovery to detect sentiment and keywords for articles
- Use Watson Discovery to find additional, related news articles for each associated keyword
 |
 |
- Watson News data is loaded into the Watson Discovery service collection.
- The user interacts with the Watson Discovery service via the React Native mobile app UI running in the XCode iOS Simulator.
- The initial load of the mobile app will pull up recent, relevant articles for a company. The user can then click on insights to get sentiment, keywords, and concepts from Watson Discovery for any specific article.
- IBM Watson Discovery: A cognitive search and content analytics engine for applications to identify patterns, trends, and actionable insights. Extract meta-data from returned content such as concepts, keywords, and sentiment using natural language understanding.
- React Native: React Native lets you build mobile apps using only JavaScript. It uses the same design as React, letting you compose a rich mobile UI from declarative components.
NOTE: This app requires that the following steps be performed on a Mac running the latest iOS version.
git clone https://github.com/IBM/build-react-native-app-for-watson-discovery
cd build-react-native-app-for-watson-discoveryNote that all of the react-native assets can be found in the ReactNativeCodePattern sub-directory. Set that as your current directory before executing the remaining steps.
cd ReactNativeCodePatternExtra: For convenience this sub-directory is included with this code pattern, but it is worth mentioning how it was created. It was built using the React Natvive command line interface:
react-native init ReactNativeCodePatternThis creates the sub-directory and installs all of the required files needed to run
iOSandAndroidReact Native apps.For an overview of the project structure, including the React Native assets, please check out DEVELOPING.md.
Launch the Watson Discovery tool. The credentials for the service can be found by selecting the Service Credentials tab.
If no credentials exist, select the New Credential button to create a new set of credentials.
In the Globals.js file, add the apikey value to the WATSON_DISCOVERY_CREDENTIAL key using the following format: 'apikey:<your api key>'.
The Node app must be run using the XCode iOS Simulator.
Build and run the app using the following commands:
npm install
react-native run-iosThe react-native run-ios command performs several steps:
- It builds the required set-up files for your iOS React Native app. This can take a bit of time and a large amount of console messages will be output.
- It launches the application on the
XCode iOS Simulator. If not already running, this command will launch the simulator using the last device settings. - A
Metro Bundlerwindow will appear that show the progress of bundling all of the javascript files required to run the app.
The task is successfully complete once you see Build Succeeded in the console and the console prompt returns.
Here is how the Metro Bundler screen should appear:
Your iOS Simulator screen should look simlar to this:
For each article found by Watson Discovery, you will see a title, a description, a link to some Discovery insights, and a link to the website that hosted the article.
Note: To scroll the articles list, click and drag the mouse pointer up and down.
From the main screen, if you click on More analysis from IBM Watson Discovery, you will see the following:
Here you will see a sentiment score assigned to the article, as well as Keywords and Concepts that Watson Discovery has detected. Clicking on one of the links will generate a new list of articles associated with the selected item.
Note: Click here for more information about these enrichments generated by Watson Discovery.
From the main screen, if you click on the web site link for the article, the article will be displayed:
Note: Use the
< ReactNativeCodePatternlink at the top of the panel to return to the main screen.
Run the following command to run in Android mode:
react-native run-androidThis will require that you install either the Android SDK or Android Studio application. Once installed, click on the Building Projects with Native Code tab found here for details on how to run the mobile app on an Android virtual device.
After the application is running in the iOS simulator, you can test it on an actual device. For iOS devices, see the React Native official documentation for the required steps.
As a default, IBM is the company used in the search query sent to Watson Discovery. To change this, you will need to modify the hard-coded search query string defined in the file src/discovery.js.
Modify the filter value specified in the url_dq1 string.
The data being used by this mobile app comes from a Discovery News collection that is available to every Watson Discovery service created. To explore this data, you can use the tooling available from the Watson Discovery service panel.
Launch the Watson Discovery tool. Click on Manage tab, and then the Launch Tool button.
From the list of data collections, select Watson Discovery News. You should then see the following screen:
-
The
Metro Builderwindow does not appear.Try issuing the following command from the
ReactNativeCodePatterndirectory to manually start it:react-native start
-
The main
articlespanel is blank (i.e. no articles displayed).This may be due to forgetting to add your Watson Discovery API key, as shown in
Step 3above. If it has been added, verify the key is valid, and that the string in the correct format ('apikey:<your api key>')
Once the iOS Simulator screen is displayed, you can use remote debugging to monitor the application.
To enable debugging, select the iOS Simulator screen and press CMD+d, then select option Start Remote JS Debugging, which should launch a new browser window. From there, click inspect (or similar command, depending on your browser) to bring up the developer tools window.
For more information on running the XCode iOS Simulator, from the Simulator menu bar, select Help > Simulator Help.
- Watson Discovery Getting Started Tutorial
- Watson Discovery API docs
- How to use XCode iOS Simulator for responsive web testing on Mac
- Artificial Intelligence Code Patterns: Enjoyed this Code Pattern? Check out our other AI Code Patterns
- AI and Data Code Pattern Playlist: Bookmark our playlist with all of our Code Pattern videos
- With Watson: Want to take your Watson app to the next level? Looking to utilize Watson Brand assets? Join the With Watson program to leverage exclusive brand, marketing, and tech resources to amplify and accelerate your Watson embedded commercial solution.
This code pattern is licensed under the Apache Software License, Version 2. Separate third party code objects invoked within this code pattern are licensed by their respective providers pursuant to their own separate licenses. Contributions are subject to the Developer Certificate of Origin, Version 1.1 (DCO) and the Apache Software License, Version 2.