CS 467_Week 4

Hey there!

I’ll continue to talk about my capstone project and relevant class assignments. We received our grade for the Create Project Plan with positive comments from the TA. Over the past week, our group has been advancing at a steady pace in completing our development tasks. My teammates and I remain active on our MS Teams group channel in sharing our progress at the end of our independent work sessions. In a way, our short posts on the MS Teams channel serve as our “stand-ups.” I find these short posts helpful when I need to compile my weekly standup, which is graded in our capstone course. Overall, I’m liking our agile practice and the pace.

While my teammates have been working on the Citizen Science Admin website and getting our project connected to the Firestore Database for reading and writing data, I’ve been focusing on the cross-platform mobile app (Flutter framework, Dart programming language). The majority of my tasks have been centered around building layouts, interactivity, navigation, and routing of the screens. Since the mobile app needs to register new users, authenticate existing users, and read from and write data to our project’s Cloud Firestore. It’s a good thing Flutter and Firebase have quite a few tutorials (resources at the end of this post). On my end, it was not bad at all setting everything up, even though I had to reinstall Flutter and update Android Studio on my PC. It helps that one of my teammates is familiar with Firebase. So, we added firebase_core for Firebase Flutter plugins, firebase_auth for Firebase’s authentication, and cloud_firestore for Cloud Firestore data storage. Then we logged into our Firebase console and enabled email/password to the Sign-in providers. Simple!

Now the fun stuff happens with using starter codes from tutorials. In our app’s lib/main.dart file, we initialized WidgetsFlutterBinding with Firebase. Then we called the createUserWithEmailAndPassword() method in our app’s registration_screen.dart file to register new users. We were able to implement a createUserStudent() async function that writes the registration data to our project’s Firestore collection for students. In our login_screen.dart file, we used the signInWithEmailAndPassword() to authenticate existing users.

We kept our registration screen and the login screen simple. For our registration screen, we were able to achieve a clean form look by using the Text widget to display a welcome message and a confetti emoji. We used the TextField widget to prompt the new user to type a username, first name, last name, email, and password. To make things pretty, we used the InputDecoration widget to set the border and radius. Since we created a Fuchia-colored button widget, we can pass our async function for the createUserStudent(), and then route the registered user to the landing screen. We also created a ClickableText widget that makes the text “Already have an account? Login” clickable. When the user clicks it, it routes the user back to the Log in screen. We also included a material design close button at the upper right corner to support the user exiting the registration screen. We also wrapped our widgets in a ListView and set the shrinkWrap property to true, so that it will only occupy the space it needs on the screen.

For our login screen, we don’t need a scrollable list of widgets. We simply wrapped our widgets in a Column. The login UI consisted of the following widgets: Text to display the welcome text and a hand waving emoji (our attempt to make the app looks friendly), SizeBoxs to better space the widgets, TextFields to prompt the user to enter email address and password, customized MaterialButton to display our Fuchia-colored login button. When the Login button is tapped by the user, it authenticates the user and then routes the user to the landing screen. Luckily, we defined routes in our main.dart file, so we can use the Navigator.pushNamed() to push our named route (LandingScreen.id) onto the navigator (see resource 6 about the Flutter widget Navigator pushNamed method). Like the registration screen, we used our custom ClickableText widget to display the text “Don’t have an account? Register now” in blue color. When the user clicks on this text, the Register screen will appear. We made this happen by pushing the RegistrationScreen.id onto the navigator and routing the user to the Register screen. Not too bad.

Okay! So we got the firebase authentication working in our Flutter app. The mobile UIs are looking nice. I’ll blog about our mobile app’s landing page and join project screen next week.

Adelante!
M :Z

Resources: