Join Alex Ziskind for an in-depth discussion in this video Generating users, part of Building Native Mobile Apps with NativeScript and Angular 2.
- [Instructor] We will need to read in the base64 encoded images for our user photos from the file system. Of course, this is just a temporary solution just for the demo. In a real application, you'll be receiving these photos via an API call. The base64 images are located in the images, avatars, base64 folder. One file is a photo of the current user. That's called me.txt.
The other photos are in the base64.txt file. We're gonna create a generic function that's gonna take in the path of one of these files, read in the base64 avatars, and return the list of avatars. To save some time, I've created all these functions in the Resources file for this chapter. Head out to the exercise files and in chapter five, lesson two in the Steps directory, you'll find the Resources file.
Let's open that up. We want this getUserAvatar function. Let's copy that out and paste that into our MockDataService. Here, we need to import the fileSystemModule as well. So let's go at the top. This is a native script module. This module will help us read files from the file system.
The getUserAvatars function will take in a path, get the file from that path, split it line by line, and return an array of avatars. The next function we're gonna create is to generate a single user. Go back out to your Resources file and copy the generateUser function out. Let's paste that right underneath.
Here's where we start using the faker library. This function will take in a list of avatars. It'll create properties for each user like first name and last name. And we'll use low dash to select a random photo for the user. We're gonna create a user here. We're also gonna use faker's random unique ID function to generate the ID for the user. And we're gonna return the user. We're also going to reuse the getUserAvatars function to create a currently simulated logged in user.
And we'll create that me user with this getMeUser function. In your Resources file, go ahead and copy the getMeUser function. We'll paste it in here. This function goes out to the file system and grabs the me.txt file which has a base64 encoded image for one single user. That's the currently logged in user. And returns that user.
It's not enough to just have a me user. We need to generate many users. The generateUsers function will call the generateUser function as many times as the constant that we're going to define for num users. Finally, it will also add the me user as the first element in the user array. Let's grab the generateUsers function and we'll paste that in. So first, it gets the list of all the avatars from the file system.
It generates all the users. Then it generates the me user and combines the arrays, and returns all the users. So we need to add this NUM_USERS to the constants module. I'm gonna copy this so we can create this constant in our constant module. Let's go to shared and constants. I'm gonna export a constant called NUM_USERS. We're gonna set this to 20 so we can generate 20 users.
We're also gonna be generating the actual backlog items. So let's create that constant as well. It's gonna be NUM_PT_ITEMS. We'll create 50 of those. Let's close our constants module. This is great, now we have all our users generated. Now we can inject the MockDataService into our UserService to get the fake generated users into our app. Don't forget to add the MockDataService as a provider in the pt-backlog module.
Let's copy that and go to the pt-backlog module and we'll add our MockDataService here. Now we also need to add this to the providers array.
Our generateUser function needs to be called by the UserService. Currently, our UserService doesn't do anything. So let's head out to the exercise files and grab the new updated UserService. Let's copy that. And we'll paste that in here. We'll do a replace and let's take a look at the code. The new UserService is gonna have a few new things here. We're injecting the MockDataService into the constructor and we're generating the users here.
Then we're storing the generated users locally into this array and we're exposing a public property called users that returns the generatedUsers field. Now our BacklogService is still using the constant hardcoded list of backlog items and we're setting the allItems array to that list of constant items. Let's delete that hardcoded user and instead grab the first user form the UserService to test if our mock user generation and UserService are working together.
I'm gonna set this assignee for item two back to null. In the constructor, I wanna go ahead and set the first items assignee to the first user that's coming in from the UserService. BacklogService doesn't know what UserService is so we need to inject it into the constructor.
Let's go ahead and add an import at the top. Now we also wanna import the UserService into our main app module. Let's go ahead and add that here. Make sure you have the reference correct.
We'll add this to the providers section. Let's save that. Just before we look at the app, let's change the component so that we're looking at in the main app.component, we're gonna want to see the backlog again instead of the login page. Now let's go ahead and take a look at our app. There we go. We have our app, and our first user along with its avatar is being returned by the UserService.
Let's now write functions to generate the mock items themselves. Let's close everything out. Back in our MockDataService. Let's go to the bottom here. We're gonna add some more functions. From the Resources file, let's start with the generatePTItem function. I'm gonna copy that and paste it in. The generatePTItem function is responsible for creating a single backlog item.
It takes in a list of users so we can randomly pick an assignee from the list. We're gonna need a few other functions here to make TypeScript happy. I'll paste them in momentarily. The title of the item is being generated through faker. It has a lorem property with the words function, so it can generate words and we're gonna convert that to title case. We're also generating a fake date for the date created and date modified, and we're randomly selecting form the enums for the type, priority, and status.
Also, the item's gonna have tasks and comments associated with it. So we're gonna generate the list for that as well. Let's grab the toTitleCase function and the generateTasks and generateComments functions and paste them in.
Each item is gonna have a set of tasks associated with it that we can check off when we're done with the tasks. That's what this function does, it generates those tasks. We're also use faker here to generate the dates, a Boolean flag whether the task is completed or not, an ID for the task and a title. And also, each item is gonna have a set of comments associated with it. Comments are left by users for each item and comments also have the text which is the title, date created, date modified, an ID, and a user.
Now we're gonna get a function that's gonna generate all the items for us. So that's this generatePTItems function. This generatePTItems function is what we'll call from the BacklogService instead of using the hardcoded items array. Let's paste that in here. Back in the BacklogService, let's delete the hardcoded list down here.
In the constructor of the BacklogService, instead of setting allItems to the constant ITEMS, we're gonna set the allItems property to use the mockDataService generatePTItems function. Let's go ahead and inject the MockDataService here as well so we get some intellisense.
Of course, we're gonna need to import it. The generatePTItems function takes in our set of users. Luckily, we already have that from the UserService, so we'll just pass in the users that are generated for the UserService and we're done.
If we take a look at the app now, we have our items generated, we have our user avatars generated, and we have a nice long list that we can scroll through to simulate real data.
- Setting up the development environment
- Using the NativeScript CLI
- Using Angular with NativeScript
- Angular bootstrap
- Application architecture
- User interface
- NativeScript widgets
- Application lifecycle
- Data and event binding