Build a cross-platform mobile app to search company news and gain insights
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.
Watch the Video
NOTE: This app requires that the following steps be performed on a Mac running the latest iOS version.
1. Clone the repo
git clone https://github.com/IBM/build-react-native-app-for-watson-discovery cd build-react-native-app-for-watson-discovery
Note 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.
Extra: 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 ReactNativeCodePattern
This creates the sub-directory and installs all of the required files needed to run
AndroidReact Native apps.
For an overview of the project structure, including the React Native assets, please check out DEVELOPING.md.
2. Create IBM Cloud services
3. Configure credentials
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.
Globals.js file, add the
apikey value to the
WATSON_DISCOVERY_CREDENTIAL key using the following format:
'apikey:<your api key>'.
4. Run the application
Node app must be run using the XCode iOS Simulator.
Build and run the app using the following commands:
npm install react-native run-ios
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.
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:
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
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 application on an Android virtual device
Run the following command to run in Android mode:
This 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.
Run the application on a 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.
Modify the company being searched by the app
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.
filter value specified in the
Explore Watson Discovery News
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:
Metro Builderwindow does not appear.
Try issuing the following command from the
ReactNativeCodePatterndirectory to manually start it:
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>')
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
- 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.