2 min to read
Creating an Ionic 3/Mobile Foundation 8 App: The Article App
This multi-part tutorial will demonstrate how to build a simple CRUD Ionic 3 and IBM Mobile Foundation Application.
In this part of the tutorial I will review the functionality of the app.
Not shown in the video is a custom splash screen. You will create this splash screen in the next tutorial.
The list screen displays a list of articles. Tapping an article will take you to the detail information about that article where you can edit the details. Tapping the + (plus) in the toolbar will create a new article.
Add (+)/Create Create
If you you tapped the + (plus) in the toolbar on the list page you will see a blank screen to add an new article.
You will need to enter a title and a valid URL before the Done button is enabled. You can cancel by tapping the Back button. If you want to save/create your new article reference tap the Done button once it is enabled.
One of the features you will implement is the in-app browser. From the detail screen if you tap the Visit [Web Site] the in app browser will opened with the URL value in the detail screen.
List Screen: Search Option
One of the features on the List Screen is the ability to search for items in the list. Tap the search field and begin typing to reduce the items in the list.
List Screen: Pull to Refresh
Another option on the List Screen is to the ability to Pull to Refresh the list. Grab the list and pull down to refresh.
List Screen: Delete List Item
The final option on the List Screen and the D in cruD is the ability to delete an item by swipping to the left. This will display option buttons, one being a Delete button and the other a Visit button. The Visit button will open the in app browser and display the URL associated with the item. Tapping the delete button immediately delete the item from the list.