Last.Backendは最初の訪問者に門戸を開きます

みなさんこんにちは!



休日が過ぎ去り、仕事が始まりました。 そして、あなたのために働くことができて嬉しかったので、ベータ版のLast.Backendを立ち上げることにしました。 確かに、彼らはこれをすぐにではなく徐々に行うことにしました。 ファッショナブルになったため、2週間で反復してアジャイルになります。







ベータ版へようこそ!



このプロジェクトに関する最初の記事からかなりの時間が経過しました。 そして、この時間のほとんどは終わりのない週末に過ぎましたが、githubの絵文字からもわかるように、私たちのチームの仕事は1日も止まりませんでした。 私たちにとって、ベータ版に入ることはプロジェクトの生活の中で非常に重要な段階であるため、最も適切に反応しました。



前述したように、ベータ版は3つの段階に分けられます。 このステージはベータコンストラクターです! はい、可能な限り迅速にバックエンドのアセンブルを開始できるように、コンストラクタを開きます。 次のステップは、すぐにデプロイメントで構成することですが、それについては後で詳しく説明します。



何が行われ、次に何が起こりますか?



したがって、順番:4週間-4つの主要なシステムの改善。

少しの時間を節約するために、多くの小さな改善を省略し、重要なもの-有用なもののみを提供します。



作成プロセス



あなたはプロセスがそれと何の関係があるのか​​と尋ねるかもしれませんが、これは非常に重要な部分です。 結局のところ、発表前に、それはどうでしたか? サーバー、nginx、ノード、mongoがあります...面白い小さなものを作成し、コミットし、開始し、リクエストプールを設定し、北部で更新しました-すばらしい! すぐに結果を確認してください。 これは通常、何かを作成する最初の段階で発生します。 しかし、ベータ版のリリースにより、もはやsoする必要はありません。 また、サーバーにまったく入らないことをお勧めします。 だから今、すべてが異なっています。 サーバーとその構成の管理システムとして、ansibleを使用します。 それを使用して、リリースを展開します。 プロセス自体は次のとおりです。



1.特定のバージョン( αバージョンなど)のタスクのリストがあります

2.テストブランチで自動構成が構成されたテストサーバーがあります。

3.バージョン内のタスクが完了すると、リリースが行われ、そのバージョンがansible設定で指定されます

4.次に、システム自体がすべてを更新します







かなり快適で美しいが、それは一定の時間を必要としました。 合計:github + ansibleがすべてです。



インターフェース



私たちのチームの意見は次のとおりです。
動作するだけではありません! 快適で快適なはずです!
これは非常に重要です。 システムを操作するときの利便性は直感的でなければなりません。 そのため、要素と設定のリストを使用してパネルを再設計しました。 スキーム全体とその構築自体のレンダリングを作り直しました。 そして、私たちが成功したかどうかは、評価するのはあなた次第です。







スキーマをpngにエクスポート



はい、それほど些細なことではありませんでしたが、成功しました。 SVGはPNGに保存するのは非常に簡単です。 しかし、CSSルールが使用され、画像へのリンクも使用される場合、すべての問題が始まります。 残念ながら、インターネット上では、写真やスタイルの扱い方についてはかなり不十分な情報しかありませんが、私たちが得たものは次のとおりです。



Svgエクスポート順:

1.すべてのcssクラスをインラインスタイルに置き換えます。 これは、エクスポート時にすでに自動的に実行できます。

2.すべてのアニメーションを削除する

3.素晴らしいcanvgライブラリを使用する-キャンバスでsvgを追い越します(写真でも)

4.任意の形式で保存します



//        -    var svg = $("<div />").append($("#svg").clone()); //     var elements = $(svg).find('.animation_status').get(); for (var i = 0; i < elements.length; i++) { elements[i].remove() } //    function download(c) { /// create an "off-screen" anchor tag var lnk = document.getElementById('schema_img'), e; /// the key here is to set the download attribute of the a tag lnk.download = ($scope.schema.title || $scope.schema.uuid) + '.png'; /// convert canvas content to data-uri for link. When download /// attribute is set the content pointed to by link will be /// pushed as "download" in HTML5 capable browsers lnk.href = c.toDataURL("image/png;base64;"); /// create a "fake" click-event to trigger the download if (document.createEvent) { e = document.createEvent("MouseEvents"); e.initMouseEvent("click", true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null); lnk.dispatchEvent(e); } else if (lnk.fireEvent) { lnk.fireEvent("onclick"); } return true; } //   canvas- var screen = document.getElementById('screen'); canvg('screen', svg.html(), {useCORS: true, ignoreAnimation: true, log: true, renderCallback: function () { var image = screen.toDataURL("image/png"); var context = screen.getContext("2d"); context.globalCompositeOperation = "destination-over"; var img = new Image(); img.src = '/images/grid.png'; //     img.onload = function () { context.fillStyle = context.createPattern(img, 'repeat'); //      context.fillRect(0, 0, screen.width, screen.height); //      context.fillStyle = "#ffffff"; context.fillRect(0, 0, screen.width, screen.height); download(screen); //  }; }}); }
      
      





健康に使用してください。



充填システム



始めるためにすべてを行ったように思えますが、大規模なスキームを構築できないことに気付きました。 必須項目はありません。 そこで、オープンスペースからテクノロジーを収集し、作業の中で最も基本的な要素を追加しました。



データベース






用途






プランナー






これが最終的な要素のセットではないことを十分に認識しているため、不足している要素を教えていただければ幸いです。 これを行うには、サイト上のコメントまたはフィードバックフォームを使用できます。



計画について少し



今後2週間以内に、システムの展開を開始します。 このビジネスを可能な限り生産的にするために、フィードバックを通じてシステムを使用することについて、できるだけ多くの有用なフィードバックを残すことができれば素晴らしいと思います。 これは、ウィッシュリストを考慮するだけでなく、必要なものを理解するのにも役立ちます。



アドレス、パスワード、および外観



私たちのサイトはそこに残りました: lastbackend.com

IDEコンストラクターは、 ide.lastbackend.comにあります。



オープンバージョンにサブスクライブするすべてのユーザーは、登録にアクセスできます。

これまでのところ、アクセスは招待システムを介してのみ行われています。 次のベータでは、通常を導入する予定です。

追加情報はメールニュースレターに記載されます。



良い週をお過ごしください! よろしくお願いします!



All Articles