Month: April 2022

What to blog this week? Start with the self? I need to admit that I need more time to find my blogging style and figure out how to write with purpose. Why? I’m fascinated with people who can express themself authentically in this world filled with noise and distraction. My blogging journey started a month ago as my class requirement, which I dreaded more than I care to admit. Let’s not get too curious about that at this point. Let’s reset on a positive note, blogging has becomes a rewarding experience. It got me curious about my thoughts and writing process. That is not the intention of this week’s blog either, let’s move on.

At the end of my last blog, I planned to talk about our mobile app’s landing screen and the Join Project screen. Since my teammates got the admin website’s add project (part of the project requirement) working with test data, most of the functionality on the student’s side (authentication with metadata), and using Firestore Database to back our data from the Citizen Science’s admin website and the student’s field app. I got busy focusing on implementing our UI. For the landing screen UI, it serves as the home screen after an existing user logged in (or upon a new user’s successful registration). It displays a simple app bar (home IconButton and log out IconButton) that extends StatelessWidget (immutable). The body of the landing screen is a Widget that returns a placeholder text to welcome the user if the user doesn’t have any project ids after fetching project data from our Firestore collection named ‘projects’. We use ListView.builder() to display a linear array of ListTiles if our query has data. ListTile is a fast way to set the project name, and we can also set the subtitle property of the ListTile to any text. In our case, we set our subtitle to ‘View Details’, so that the user sees that this ListTile is an interactive element. We use the onTap property to route the user to our Project Explanation screen when the user taps on the ListTile. Since we want to support our users in contributing to multiple Citizen Science projects, we made our ListTiles scrollable, which our ListView can handle. To prompt the user in adding a project, our UI implements a material design floating action button. It was easy to set the icon, label, and background property of the floating action button. We had the onPressed property routing the user to our Join Project Screen.

The Join Project screen was designed to look like a pop-up card, so we return a Scaffold with a body. This is the most basic layout structure, and it gets the job done. We aligned the close button to the upper right corner of a container so that it’s easy for the user to close/exit out of the Join Project screen. When the user clicks on the x icon, it pops the user back to the landing/home screen. We kept the Join Project screen simple by only displaying the “Join a Project” text, and we tag on the emoji key because emoji is fun and easy to show on the screen. Next, TextField for the user to enter a project code. Oh, style time! Let’s decorate this TextField with hint text “Enter the project code here”, enabled order with a blue-grey border outline. Onto our fuchsia-colored submit button, it shows the word ‘Submit’. When the user clicks on the submit button, it calls the async function that looks up and validates the project code on our Firestore database collection. Upon success, it routes the user to the landing/home screen. This routing decision is for a minimum viable product that allows the user to enter additional project codes from the landing/home screen’s Add Project button. We had a note to consider routing the user to the Project Explanation screen. This route might work better for the student to read about the Project Explanation and get started on the project after they signed up for the project. Let’s see what the team decides. We might have enough time to implement more features and support students in entering multiple project codes on the Add Project Screen. We are midway through our project and still need to focus on our MVP, so we are not introducing any major change to our prototype that meets our client’s requirements.

This course requires 8 blog posts, so I’ll hold off on our app’s Project Explanation Screen and Manage Observations screen in blog 6. See you next time then!

M :Z

Resources:

• ListTile class. https://api.flutter.dev/flutter/material/ListTile-class.html 
• ListView class. https://api.flutter.dev/flutter/widgets/ListView-class.html 
• FloatingActionButton class. https://api.flutter.dev/flutter/material/FloatingActionButton-class.html  
• Future<T> class. https://api.flutter.dev/flutter/dart-async/Future-class.html 
• Cloud Firestore Data model. https://firebase.google.com/docs/firestore/data-model

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: 

Welcome to my Blog Post #3! As promised in my last post, let’s dive right into the OSU CS467 Capstone Create Project Plan, and let’s talk Figma. As most CS students should know that one must start the assignment early, and our team sure started as soon as this assignment was released. Our team was consistent over the past 11 days in working asynchronously and synchronously on our project plan. Our final document was 15 pages (no double spacing, but plenty of graphical examples). For this project, it’s more than fulfilling our grading rubric, our group fundamentally wants to create a solid and practical plan. From the past two meetings and group messages, I see that my team members are organized, and they are thoughtful with their contributions. I love the energy and I am grateful for being in this group. 

Ready for some Figma fun first? I have been introduced to Figma outside of school about 1.5 years ago when my nonprofit tech team needed to design and prototype fast. Recalling my time before using Figma, my teammates and I were using graph papers to draw out the UI screens. Although we still use graph papers for quick in-person sketching, I prefer to use Figma for designing mobile app interfaces and prototyping designs. I like the ability to quickly animate and share prototypes, especially with all of the plugins ready for integration with just a few clicks away. The prototype interactions help me see whether the interactions on each UI frame will meet our user’s stories and their intended actions. I’m a visual person and need time to reflect, so seeing how the screens are connected on the Figma prototype flow has been valuable for me, especially before I spend any time on coding. The Comments collaboration tool in Figma is good for me to note my thoughts for other members’ input on the design and prototype directly. I can easily sort, filter, and resolve comments to keep me on track. Overall, I value any tools that can help me be more organized and productive. I have not used Figma for wireframing or as a graphic design tool. I’ll need to check those out later, along with FigJam as a brainstorming tool. Fun stuff ahead. Now, it’s time for me to blog about this course’s Create Project Plan assignment. 

Our project plan consists of 10 sections. It starts with a short introduction on what we want to accomplish for the target users, a sentence on our team member’s experiences that are relevant to the success of the project, and our motivation to launch a minimum viable product in 3 months. The User Perspective section addressed the 2 main target users (K-12 students, teachers) and our client (our course’s instructor). Now that we know our users’ perspectives and the requirements, we can flow into the Software section to document our thoughts on the software structure. In our Requirement section, our team discussed and agreed upon using React website that will be deployed via Firebase, Flutter environment, Firebase libraries, and backend for both website and app. Now onto our thorough description of our Initial Plan that includes implementation notes and a schedule. This section involved each team member’s full participation, including writing and reviewing User stories, data models, and prototype plans. Each team member took the lead in their interest area. We summarised our Initial Plan section with team members’ plan to focus on functionality and then styling. The Team Member Tasks took the longest to complete, and we ended up working on this section at our weekly Saturday meeting. This made sense as we wanted to share and go over our tasks weekly, and most importantly, synchronize our tasks to support each others’ deliverables. Now onto the Graphical Examples section that includes our NoSQL Entity Relationship Diagram, screen captures of our admin website prototype for teachers, and screen captures of our field app for students. We can now wrap up with a Conclusion section, and of course, we must end with the Appendix and References.  

Wow! You made it through to the end of the blog. Feel free to leave me a comment if you have any input about Creating Project Plan. I think it’s pretty standard, and as students, we follow instructions and prompts from our course instructor. Overall, this is one of my favorite group assignments throughout my CS journey at OSU. Perhaps it’s because I’m interested in this project and I have good teammates. 

Planning for my next post, I’ll blog about our assignment for the Standup discussion. I’ve started working on the mobile app so I’ll talk more about it then! One more quick note, I was able to get my daily meditation on most days, and I got some fantastic workouts in on Sunday. Maybe I should make Sunday my workout day from now on. 

Be Well, Be you, Be present, 

M :Z 

“What we know matters, but who we are matters more.” Brene Brown. 

It’s the middle of week 2 of the Spring term, and time to blog about my capstone project. First, let me do some general reflection. Since my “first” post last week, I’ve been thinking about this course’s blogging assignments, and how I could use this opportunity to improve my writing. I had to re-read our capstone course’s exploration of blogging and re-evaluate my effort and purpose in blogging. It seems that a good blogger can connect with her or his target audience authentically on a topic. Now, I’m a bit intimidated by the idea of blogging on a relevant and interesting topic that can be of value to a target audience. 

I’ll keep things simple for now. I’ll blog to reflect on my weekly coursework and share progress on the capstone project. If I don’t get too distracted and time permits, then I will share my journey on restarting my meditation and exercise routine. Maybe blogging about meditation and exercise will help me connect with readers who are attempting to find balance in their life. I was committed to meditating for 365 days, but I only made it to 180 days before my routine was disrupted. Once my meditation was halted, then my exercise routine stalled as well. It took a lot more effort than I thought to restart the process. Let me focus again here (deep breath – counting to four). 

Capstone project update: My capstone project is to build a user-friendly platform that supports teachers and K-12 students in doing Citizen Science. More specifically, an admin website for the teachers and a cross-platform field app for the students. I’ll be working on the Citizen Science App for Kids with two classmates. I’m impressed with my teammates’ prompt responses and professionalism. One of my teammates is working as a senior backend developer. The other teammate is working as an Engineering Manager on frontend web development. I might be in luck with these two teammates because they have skills that I could learn from throughout the project. I’ve been mostly focusing on app development outside of school, and have I shared how much I like UI/UX design? Anyways, I’m excited to put my interest to work. It will be good for me to improve my technical skills, especially in programming languages. 

Yes, I’m definitely in luck with my teammates. I love their promptness and focus. Within a few hours of making our introductions to our OSU Canvas group, we started collaborating on a Team Standards google doc and scheduled our weekly meetings for the term. I’m so used to google docs now, and it’s becoming a must for me when working with other editors. Our team members decided to use MS Teams for asynchronous communication and our weekly meetings. As a side note, I prefer Discord because it’s easy to toggle between different servers and organize Text Channels as needed. I’m okay with MS Teams since I use it for my work daily. Our project group created a private channel on Teams; We organized our communication via conversation threads on the Posts tab, and relevant files are uploaded on the Files tab. We initiated a GitHub repo for the mobile app and a repo for the web admin site. To make our lives easier, we decided to use Firebase for backend infrastructure. While one team member added our project on Firebase, another team member quickly created the team’s workspace for prototypes on Figma.  

On Sat, 4/2, we had our first video meeting. The meeting took an hour as planned and was effective in addressing agenda items. We discussed design and development tasks, including planned tasks on user stories, layouts design, and the overall development process to ensure the project and team success. We have our work cut out for us. My next major task is to prototype the admin website and mobile app after receiving the user stories. I can’t wait! I’ll blog more about prototyping using Figma next week. I’ll also share more about our Project Plan that is due at the beginning of week 3. 

Cheers!

M: Z

“Out of clutter, find simplicity. From discord, find harmony. In the middle of difficulty lies opportunity.” Albert Einstein