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.

Imagem de capa

In this part of the tutorial I will review the functionality of the app.

Video

Screens

Splash Screen

Not shown in the video is a custom splash screen. You will create this splash screen in the next tutorial.

Splash Screen

List Screen

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.

List

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.

Add Blank

Add Detail

Detail Screen

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.

Detail

Browser Screen

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.

In App Browser

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 Search Option

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.

Pull 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.

Delete Item from List