Delve into Ionic and React to build a functional mobile app. Gain confidence and skills in creating and deploying apps for iOS and Android.

data.tar.gz

ionic

ionic-start

ionic-test

The Ionic Framework is an open-source SDK for hybrid mobile app development. It’s known for providing platform-specific UI elements through a library of native components for iOS and Android.

In this course, you will cover all the most important aspects of development with Ionic and React. Throughout, you will work to build a fully functional attendance application which you can add to your portfolio. 

By the end, you will have the confidence and the means to create and deploy your own mobile app for iOS or Android.

Developing Mobile Apps with Ionic and React

If you were a teacher and this were a real class of students, there are a number of things you would want to be able to do with your app. A few of those things are:

- Mark absent or present.

- Navigate to a detail page to see or edit information that isn't present on the list.
 
- Remove a student from the class, with the appropriate warnings, of course.

In this chapter, we will enhance the UI of the Roster page to do all of these things.

The first thing you will want to do is add a menu to each student in the `IonList`. We can either create the menu first or the button to launch the menu first. Let’s create the menu first. For that, we are going to use an `IonActionSheet`.

# IonActionSheet

An action sheet is a menu that displays like a dialog. It often contains at least two, but usually more, action buttons that are contextually related in some way. In our case, the context is that of the currently selected student. 

An `IonActionSheet` is Ionic's specific implementation, rendering an action sheet that automatically looks at home on an iPhone or Android. 



Buttons in an action sheet may contain a "role", which can be either "destructive" or "cancel." "Destructive" is used to indicate that something permanent can happen and is often used for delete operations. On iOS devices, buttons with the destructive role are rendered differently than the rest, usually in red. 

A button whose role is “cancel” will always be rendered last at the bottom of the sheet. This button should have no other purpose than dismissing the sheet with no action taken.


The buttons in an action sheet can have text and icons. However, the way you define them is unlike a normal `IonButton` component.

Our action sheet will include buttons to mark a student as present or absent, delete a student, or cancel the action and do nothing. In order to do that, we need to do a bit of setup first.

In __Roster.tsx__, we are going to need a new hook and an object to represent an “empty student”. This will control how our action sheet  appears.


At the top of the file, create a new Student object named `emptyStudent`, but set its three required fields to empty strings.


Learn how the UI of an Ionic and React application can be enhanced.


Introduction to Ionic Framework

Hello Ionic!

Building an Attendance Application

Improving the UI

Apply What You Have Learned

Appendix – Installing the Tools

Conclusion

Adding Functionality to the Student Roster

IonActionSheet