uni-app和ionic_Ionic 5 App-处理具有私人空间和公共内容的用户个人资料。

uni-app和ionic

Nobody can deny that most of the apps needs to have some kind of mechanism where they can have their own data, even if it’s something as simple as saving a Terms of Service or Privacy Policy Acceptance (if you are not doing this, you should!)

没有人会否认大多数应用程序都需要某种机制来拥有自己的数据，即使这就像保存服务条款或隐私政策接受这样简单(如果您不这样做，也应该这样做！)！ )

Well good news are that with Firebase Auth and Cloud Firestore we can satisfy this need straight forward. Honestly this more related to the data modeling and the logic behind it than the code or the tools we use to sort it out, so let’s get down to it from a logical perspective.

好消息是，有了Firebase Auth和Cloud Firestore，我们可以直接满足此需求。 坦率地说，这与数据建模及其背后的逻辑关系更大，而不是与用于整理数据的代码或工具相关，因此让我们从逻辑的角度进行研究。

There will be many ways to sort out this problem and there is not a single solution but here we will develop a logical architecture that shows the solution in a more elegant or sophisticated way. The solution developed here is not only a simple way of sorting out the problem but also a way of getting you to an starting point from where you can do your own logic.

有很多方法可以解决此问题，并且没有一个解决方案，但是在这里，我们将开发一种逻辑体系结构，以更优雅或更复杂的方式显示该解决方案。 这里开发的解决方案不仅是解决问题的简单方法，而且还是使您从中进行自己的逻辑工作的起点。

Enough introduction!! let’s get down!!

足够的介绍！ 我们下来吧！

目的： (Objective:)

We want to achieve:

我们要实现：

• An User’s Private Space where the user can save private information not accessible by the rest.
  用户的私人空间，用户可以在其中保存其他人无法访问的私人信息。
• An User’s Public Space where the everyone with an account can some users information.
  用户的公共空间，拥有帐户的每个人都可以从中获得一些用户信息。
• An General Public Space where any user can write content.
  任何用户都可以编写内容的通用公共空间。

• WE WANT TO MAKE IT SECURE!

  我们要确保它的安全！

To make it simple let’s do a simple Questions Thrown app. The objective where users write questions and other users can vote yes or no. I know it’s a it’s a really idiot app but we can cover the whole thing with this.

为了简单起见，我们来做一个简单的“问题抛出”应用程序。 用户提出问题而其他用户可以投票赞成或反对的目标。 我知道这是一个真正的白痴应用程序，但是我们可以用它涵盖整个过程。

数据建模。 (Data Modeling.)

Roll up your sleeves, and let’s see how to do this properly, on the problem above we basically have 3 spaces that we need to sort out.

卷起袖子，让我们看看如何正确执行此操作，在上面的问题上，我们基本上需要整理三个空间。

So basically we need UserPrivate, UserPublic and Questions while also keeping these spaces with a minimum security in place. So basically a diagram like this should work for our app.

因此，基本上，我们需要UserPrivate，UserPublic和Questions，同时还要以最小的安全性保留这些空间。 因此，基本上像这样的图应该适用于我们的应用程序。

One of the best tricks to do data modelling for Firebase (or any NoSQL db in general) is to structure the data in the way it’s going to be queried or written.

为Firebase(或一般而言，任何NoSQL db)进行数据建模的最佳技巧之一是按照将要查询或写入的数据来构造数据。

So keeping in mind that we can get a Unique ID from Firebase auth we can set up in Firestore a tree like this.

因此请记住，我们可以从Firebase身份验证中获得唯一ID，我们可以在Firestore中设置像这样的树。

• UserPrivate: /Users/$UserId/Private/* — It will contain the Users realname

  UserPrivate： / Users / $ UserId / Private / * —将包含用户真实姓名

• UserPublic: /Users/$UserId/Public/* — It will contain the Users nickname

  UserPublic： / Users / $ UserId / Public / *-将包含“用户”昵称

• Questions: /Questions/$QuestionId — It will contain a question text and a reference to the owner.

  问题： / Questions / $ QuestionId-它包含一个问题文本和对所有者的引用。

With this in place we are ready to start working on our code. On this article we will only work on the pure Ionic 5 side, Security Rules and Cloud functions will be covered separately in other articles.

有了这个，我们准备开始处理我们的代码。 在本文上，我们将仅在纯Ionic 5方面进行工作，其他文章将分别介绍安全规则和云功能。

By the way! if you like or you think this article is good for you don’t forget to clap & subscribe!. You can also help me joining me on Patreon inviting me to a coffee or beer so I can keep producing these articles.

顺便说说！ 如果您喜欢或认为本文对您有好处，请不要忘记鼓掌和订阅！。 您也可以帮助我加入Patreon，邀请我喝咖啡或啤酒，这样我就可以继续生产这些物品。

我们需要什么？ (What do we need?)

For this app we just need.

对于这个程序，我们只需要。

1. Firebase Project & Firestore.
   Firebase项目和Firestore。
2. Ionic Blank Instance.
   离子空白实例。
3. AngularFire and Firebase.
   AngularFire和Firebase。

We covered most of the topics in other articles so you can check these how to get your Ionic 5, up and running with Firebase and Firestore.

我们在其他文章中介绍了大多数主题，因此您可以检查这些如何使Ionic 5与Firebase和Firestore一起运行。

So after we have our project ready we want to implement the following flow.

因此，在我们准备好项目之后，我们想要实现以下流程。

We will have a top section with the questions and a bottom section for the user flow.

我们将在顶部提供问题，并在底部提供用户流程。

The questions section will show the last 2 questions ordered by date and from there we query what’s the public name of the user posted

问题部分将显示按日期排序的最后2个问题，从那里我们查询发布的用户的公共名称是什么

The user flow section is a bit complex as it’s where the magic is:

用户流程部分有点复杂，因为它的神奇之处在于：

1. We need the user to sign in.
   我们需要用户登录。
2. The user will fill the real name (which will remain private) and the nick name (which will be available publicly)
   用户将填写真实姓名(将保持私密)和昵称(可公开获得)
3. The user will be able to post a question and that will include text and the userid.
   用户将能够发布问题，其中包括文本和用户ID。

让我们编码。 (Let’s code.)

So basically to code this app we would need to have an app.module.ts with the code below.

因此，基本上，要编写此应用程序的代码，我们需要使用下面的代码创建一个app.module.ts。

Depending on how you created your ionic project you may have home or tabs… if you had home we will set up our home.page.ts in the following way

根据您创建离子项目的方式，您可能会有首页或标签页…如果您有首页，我们将通过以下方式设置home.page.ts

I know it may be long but let’s go through it.

我知道可能会很长，但让我们仔细研究一下。

ngOnInit() will take care of the intial queries to Firebase such as checking if there are any questions and also check if the UserAuthState, depending on the responses we will have some control variables…

ngOnInit()将处理对Firebase的初始查询，例如检查是否有任何问题，并检查UserAuthState是否为零，这取决于响应，我们将具有一些控制变量…

Then we will have some functions which are easy to follow such as savenames, signin or signout.

然后，我们将提供一些易于理解的功能，例如保存名，登录或注销。

The key which may be relevant for this article is ShowNickname(userid). This functions will take the userid of the question listed and will query this User’s public space, in that space if you remember we have the public realname. Once it’s queried it will get back to us in an alert Format.

与本文可能相关的密钥是ShowNickname(userid)。 如果您还记得我们有公共实名，则此函数将使用列出的问题的用户ID并查询该用户的公共空间。 查询后，它将以警报格式返回给我们。

Now it’s time to display the whole content with the control variables in the home.page.html

现在是时候在home.page.html中显示带有控制变量的全部内容

So basically with this small app we cover the scenario of public space, User’s readable Space and User’s private Space.

因此，基本上，这个小型应用程序涵盖了公共空间，用户可读空间和用户私有空间的场景。

While there may be different architectures for this kind of needs this is a simple and effective way.

尽管可能有不同的体系结构可满足这种需求，但这是一种简单有效的方法。

It’s really important that we cover the security with Firebase Security rules, while this will be cover extensively in another article I will leave here an initial way of protecting your data.. Keep in mind that data should be secured properly if you go production. But for learning purposes the security rules below should be just fine.

使用Firebase安全性规则涵盖安全性是非常重要的，而在另一篇文章中将广泛涉及安全性。我将在此处为保护您的数据提供一种初始方式。.请记住，如果要进行生产，则应正确保护数据。 但是出于学习目的，下面的安全规则应该很好。

安全基础。 (Security Basics.)

We will cover fully Security rules in another article but for this one I will leave the basics. To access the security rules,

我们将在另一篇文章中全面介绍安全规则，但是对于这一点，我将保留基础知识。 要访问安全规则，

By the way! if you like or you think this article is good for you don’t forget to clap & subscribe!. You can also help me joining me on Patreon inviting me to a coffee or beer so I can keep producing these articles.

顺便说说！ 如果您喜欢或者您认为这篇文章对您有好处，请不要忘记鼓掌和订阅！ 您也可以帮助我加入Patreon，邀请我喝咖啡或啤酒，这样我就可以继续生产这些物品。

翻译自: https://medium.com/swlh/ionic-5-app-handling-user-profiles-with-private-space-and-public-content-77043c3dc25b

uni-app和ionic